mark the {@code } and {@code } tags in your source with
+ * {@code class=prettyprint.}
+ * You can also use the (html deprecated) {@code <![CDATA[} tag, but the pretty
+ * printer needs to do more substantial DOM manipulations to support that, so
+ * some css styles may not be preserved.
+ * </ol>
+ * That's it. I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}. Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ * Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window, define */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+/**
+ * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+ * {@code class=prettyprint} and prettify them.
+ *
+ * @param {Function?} opt_whenDone if specified, called when the last entry
+ * has been finished.
+ */
+var prettyPrintOne;
+/**
+ * Pretty print a chunk of code.
+ *
+ * @param {string} sourceCodeHtml code as html
+ * @return {string} code as html, but prettier
+ */
+var prettyPrint;
+
+
+(function () {
+ var win = window;
+ // Keyword lists for various languages.
+ // We use things that coerce to strings to make them compact when minified
+ // and to defeat aggressive optimizers that fold large string constants.
+ var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+ var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," +
+ "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
+ "static,struct,switch,typedef,union,unsigned,void,volatile"];
+ var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+ "new,operator,private,protected,public,this,throw,true,try,typeof"];
+ var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+ "concept,concept_map,const_cast,constexpr,decltype," +
+ "dynamic_cast,explicit,export,friend,inline,late_check," +
+ "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
+ "template,typeid,typename,using,virtual,where"];
+ var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+ "abstract,boolean,byte,extends,final,finally,implements,import," +
+ "instanceof,null,native,package,strictfp,super,synchronized,throws," +
+ "transient"];
+ var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+ "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+ "fixed,foreach,from,group,implicit,in,interface,internal,into,is,let," +
+ "lock,object,out,override,orderby,params,partial,readonly,ref,sbyte," +
+ "sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort," +
+ "var,virtual,where"];
+ var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+ "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+ "throw,true,try,unless,until,when,while,yes";
+ var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+ "debugger,eval,export,function,get,null,set,undefined,var,with," +
+ "Infinity,NaN"];
+ var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+ "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+ "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+ var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+ "elif,except,exec,finally,from,global,import,in,is,lambda," +
+ "nonlocal,not,or,pass,print,raise,try,with,yield," +
+ "False,True,None"];
+ var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+ "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+ "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+ "BEGIN,END"];
+ var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+ "function,in,local,set,then,until"];
+ var ALL_KEYWORDS = [
+ CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
+ PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+ var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/;
+
+ // token style names. correspond to css classes
+ /**
+ * token style for a string literal
+ * @const
+ */
+ var PR_STRING = 'str';
+ /**
+ * token style for a keyword
+ * @const
+ */
+ var PR_KEYWORD = 'kwd';
+ /**
+ * token style for a comment
+ * @const
+ */
+ var PR_COMMENT = 'com';
+ /**
+ * token style for a type
+ * @const
+ */
+ var PR_TYPE = 'typ';
+ /**
+ * token style for a literal value. e.g. 1, null, true.
+ * @const
+ */
+ var PR_LITERAL = 'lit';
+ /**
+ * token style for a punctuation string.
+ * @const
+ */
+ var PR_PUNCTUATION = 'pun';
+ /**
+ * token style for plain text.
+ * @const
+ */
+ var PR_PLAIN = 'pln';
+
+ /**
+ * token style for an sgml tag.
+ * @const
+ */
+ var PR_TAG = 'tag';
+ /**
+ * token style for a markup declaration such as a DOCTYPE.
+ * @const
+ */
+ var PR_DECLARATION = 'dec';
+ /**
+ * token style for embedded source.
+ * @const
+ */
+ var PR_SOURCE = 'src';
+ /**
+ * token style for an sgml attribute name.
+ * @const
+ */
+ var PR_ATTRIB_NAME = 'atn';
+ /**
+ * token style for an sgml attribute value.
+ * @const
+ */
+ var PR_ATTRIB_VALUE = 'atv';
+
+ /**
+ * A class that indicates a section of markup that is not code, e.g. to allow
+ * embedding of line numbers within code listings.
+ * @const
+ */
+ var PR_NOCODE = 'nocode';
+
+
+
+/**
+ * A set of tokens that can precede a regular expression literal in
+ * javascript
+ * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+ * has the full list, but I've removed ones that might be problematic when
+ * seen in languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ * @const
+ */
+var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+
+// CAVEAT: this does not properly handle the case where a regular
+// expression immediately follows another since a regular expression may
+// have flags for case-sensitivity and the like. Having regexp tokens
+// adjacent is not valid in any language I'm aware of, so I'm punting.
+// TODO: maybe style special characters inside a regexp as punctuation.
+
+
+ /**
+ * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+ * matches the union of the sets of strings matched by the input RegExp.
+ * Since it matches globally, if the input strings have a start-of-input
+ * anchor (/^.../), it is ignored for the purposes of unioning.
+ * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+ * @return {RegExp} a global regex.
+ */
+ function combinePrefixPatterns(regexs) {
+ var capturedGroupIndex = 0;
+
+ var needToFoldCase = false;
+ var ignoreCase = false;
+ for (var i = 0, n = regexs.length; i < n; ++i) {
+ var regex = regexs[i];
+ if (regex.ignoreCase) {
+ ignoreCase = true;
+ } else if (/[a-z]/i.test(regex.source.replace(
+ /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+ needToFoldCase = true;
+ ignoreCase = false;
+ break;
+ }
+ }
+
+ var escapeCharToCodeUnit = {
+ 'b': 8,
+ 't': 9,
+ 'n': 0xa,
+ 'v': 0xb,
+ 'f': 0xc,
+ 'r': 0xd
+ };
+
+ function decodeEscape(charsetPart) {
+ var cc0 = charsetPart.charCodeAt(0);
+ if (cc0 !== 92 /* \\ */) {
+ return cc0;
+ }
+ var c1 = charsetPart.charAt(1);
+ cc0 = escapeCharToCodeUnit[c1];
+ if (cc0) {
+ return cc0;
+ } else if ('0' <= c1 && c1 <= '7') {
+ return parseInt(charsetPart.substring(1), 8);
+ } else if (c1 === 'u' || c1 === 'x') {
+ return parseInt(charsetPart.substring(2), 16);
+ } else {
+ return charsetPart.charCodeAt(1);
+ }
+ }
+
+ function encodeEscape(charCode) {
+ if (charCode < 0x20) {
+ return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+ }
+ var ch = String.fromCharCode(charCode);
+ return (ch === '\\' || ch === '-' || ch === ']' || ch === '^')
+ ? "\\" + ch : ch;
+ }
+
+ function caseFoldCharset(charSet) {
+ var charsetParts = charSet.substring(1, charSet.length - 1).match(
+ new RegExp(
+ '\\\\u[0-9A-Fa-f]{4}'
+ + '|\\\\x[0-9A-Fa-f]{2}'
+ + '|\\\\[0-3][0-7]{0,2}'
+ + '|\\\\[0-7]{1,2}'
+ + '|\\\\[\\s\\S]'
+ + '|-'
+ + '|[^-\\\\]',
+ 'g'));
+ var ranges = [];
+ var inverse = charsetParts[0] === '^';
+
+ var out = ['['];
+ if (inverse) { out.push('^'); }
+
+ for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+ var p = charsetParts[i];
+ if (/\\[bdsw]/i.test(p)) { // Don't muck with named groups.
+ out.push(p);
+ } else {
+ var start = decodeEscape(p);
+ var end;
+ if (i + 2 < n && '-' === charsetParts[i + 1]) {
+ end = decodeEscape(charsetParts[i + 2]);
+ i += 2;
+ } else {
+ end = start;
+ }
+ ranges.push([start, end]);
+ // If the range might intersect letters, then expand it.
+ // This case handling is too simplistic.
+ // It does not deal with non-latin case folding.
+ // It works for latin source code identifiers though.
+ if (!(end < 65 || start > 122)) {
+ if (!(end < 65 || start > 90)) {
+ ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+ }
+ if (!(end < 97 || start > 122)) {
+ ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+ }
+ }
+ }
+ }
+
+ // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+ // -> [[1, 12], [14, 14], [16, 17]]
+ ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1] - a[1]); });
+ var consolidatedRanges = [];
+ var lastRange = [];
+ for (var i = 0; i < ranges.length; ++i) {
+ var range = ranges[i];
+ if (range[0] <= lastRange[1] + 1) {
+ lastRange[1] = Math.max(lastRange[1], range[1]);
+ } else {
+ consolidatedRanges.push(lastRange = range);
+ }
+ }
+
+ for (var i = 0; i < consolidatedRanges.length; ++i) {
+ var range = consolidatedRanges[i];
+ out.push(encodeEscape(range[0]));
+ if (range[1] > range[0]) {
+ if (range[1] + 1 > range[0]) { out.push('-'); }
+ out.push(encodeEscape(range[1]));
+ }
+ }
+ out.push(']');
+ return out.join('');
+ }
+
+ function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+ // Split into character sets, escape sequences, punctuation strings
+ // like ('(', '(?:', ')', '^'), and runs of characters that do not
+ // include any of the above.
+ var parts = regex.source.match(
+ new RegExp(
+ '(?:'
+ + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]' // a character set
+ + '|\\\\u[A-Fa-f0-9]{4}' // a unicode escape
+ + '|\\\\x[A-Fa-f0-9]{2}' // a hex escape
+ + '|\\\\[0-9]+' // a back-reference or octal escape
+ + '|\\\\[^ux0-9]' // other escape sequence
+ + '|\\(\\?[:!=]' // start of a non-capturing group
+ + '|[\\(\\)\\^]' // start/end of a group, or line start
+ + '|[^\\x5B\\x5C\\(\\)\\^]+' // run of other characters
+ + ')',
+ 'g'));
+ var n = parts.length;
+
+ // Maps captured group numbers to the number they will occupy in
+ // the output or to -1 if that has not been determined, or to
+ // undefined if they need not be capturing in the output.
+ var capturedGroups = [];
+
+ // Walk over and identify back references to build the capturedGroups
+ // mapping.
+ for (var i = 0, groupIndex = 0; i < n; ++i) {
+ var p = parts[i];
+ if (p === '(') {
+ // groups are 1-indexed, so max group index is count of '('
+ ++groupIndex;
+ } else if ('\\' === p.charAt(0)) {
+ var decimalValue = +p.substring(1);
+ if (decimalValue) {
+ if (decimalValue <= groupIndex) {
+ capturedGroups[decimalValue] = -1;
+ } else {
+ // Replace with an unambiguous escape sequence so that
+ // an octal escape sequence does not turn into a backreference
+ // to a capturing group from an earlier regex.
+ parts[i] = encodeEscape(decimalValue);
+ }
+ }
+ }
+ }
+
+ // Renumber groups and reduce capturing groups to non-capturing groups
+ // where possible.
+ for (var i = 1; i < capturedGroups.length; ++i) {
+ if (-1 === capturedGroups[i]) {
+ capturedGroups[i] = ++capturedGroupIndex;
+ }
+ }
+ for (var i = 0, groupIndex = 0; i < n; ++i) {
+ var p = parts[i];
+ if (p === '(') {
+ ++groupIndex;
+ if (!capturedGroups[groupIndex]) {
+ parts[i] = '(?:';
+ }
+ } else if ('\\' === p.charAt(0)) {
+ var decimalValue = +p.substring(1);
+ if (decimalValue && decimalValue <= groupIndex) {
+ parts[i] = '\\' + capturedGroups[decimalValue];
+ }
+ }
+ }
+
+ // Remove any prefix anchors so that the output will match anywhere.
+ // ^^ really does mean an anchored match though.
+ for (var i = 0; i < n; ++i) {
+ if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+ }
+
+ // Expand letters to groups to handle mixing of case-sensitive and
+ // case-insensitive patterns if necessary.
+ if (regex.ignoreCase && needToFoldCase) {
+ for (var i = 0; i < n; ++i) {
+ var p = parts[i];
+ var ch0 = p.charAt(0);
+ if (p.length >= 2 && ch0 === '[') {
+ parts[i] = caseFoldCharset(p);
+ } else if (ch0 !== '\\') {
+ // TODO: handle letters in numeric escapes.
+ parts[i] = p.replace(
+ /[a-zA-Z]/g,
+ function (ch) {
+ var cc = ch.charCodeAt(0);
+ return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+ });
+ }
+ }
+ }
+
+ return parts.join('');
+ }
+
+ var rewritten = [];
+ for (var i = 0, n = regexs.length; i < n; ++i) {
+ var regex = regexs[i];
+ if (regex.global || regex.multiline) { throw new Error('' + regex); }
+ rewritten.push(
+ '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+ }
+
+ return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+ }
+
+
+ /**
+ * Split markup into a string of source code and an array mapping ranges in
+ * that string to the text nodes in which they appear.
+ *
+ * <p>
+ * The HTML DOM structure:</p>
+ * <pre>
+ * (Element "p"
+ * (Element "b"
+ * (Text "print ")) ; #1
+ * (Text "'Hello '") ; #2
+ * (Element "br") ; #3
+ * (Text " + 'World';")) ; #4
+ * </pre>
+ * <p>
+ * corresponds to the HTML
+ * {@code <p><b>print </b>'Hello '<br> + 'World';</p>}.</p>
+ *
+ * <p>
+ * It will produce the output:</p>
+ * <pre>
+ * {
+ * sourceCode: "print 'Hello '\n + 'World';",
+ * // 1 2
+ * // 012345678901234 5678901234567
+ * spans: [0, #1, 6, #2, 14, #3, 15, #4]
+ * }
+ * </pre>
+ * <p>
+ * where #1 is a reference to the {@code "print "} text node above, and so
+ * on for the other text nodes.
+ * </p>
+ *
+ * <p>
+ * The {@code} spans array is an array of pairs. Even elements are the start
+ * indices of substrings, and odd elements are the text nodes (or BR elements)
+ * that contain the text for those substrings.
+ * Substrings continue until the next index or the end of the source.
+ * </p>
+ *
+ * @param {Node} node an HTML DOM subtree containing source-code.
+ * @param {boolean} isPreformatted true if white-space in text nodes should
+ * be considered significant.
+ * @return {Object} source code and the text nodes in which they occur.
+ */
+ function extractSourceSpans(node, isPreformatted) {
+ var nocode = /(?:^|\s)nocode(?:\s|$)/;
+
+ var chunks = [];
+ var length = 0;
+ var spans = [];
+ var k = 0;
+
+ function walk(node) {
+ switch (node.nodeType) {
+ case 1: // Element
+ if (nocode.test(node.className)) { return; }
+ for (var child = node.firstChild; child; child = child.nextSibling) {
+ walk(child);
+ }
+ var nodeName = node.nodeName.toLowerCase();
+ if ('br' === nodeName || 'li' === nodeName) {
+ chunks[k] = '\n';
+ spans[k << 1] = length++;
+ spans[(k++ << 1) | 1] = node;
+ }
+ break;
+ case 3: case 4: // Text
+ var text = node.nodeValue;
+ if (text.length) {
+ if (!isPreformatted) {
+ text = text.replace(/[ \t\r\n]+/g, ' ');
+ } else {
+ text = text.replace(/\r\n?/g, '\n'); // Normalize newlines.
+ }
+ // TODO: handle tabs here?
+ chunks[k] = text;
+ spans[k << 1] = length;
+ length += text.length;
+ spans[(k++ << 1) | 1] = node;
+ }
+ break;
+ }
+ }
+
+ walk(node);
+
+ return {
+ sourceCode: chunks.join('').replace(/\n$/, ''),
+ spans: spans
+ };
+ }
+
+
+ /**
+ * Apply the given language handler to sourceCode and add the resulting
+ * decorations to out.
+ * @param {number} basePos the index of sourceCode within the chunk of source
+ * whose decorations are already present on out.
+ */
+ function appendDecorations(basePos, sourceCode, langHandler, out) {
+ if (!sourceCode) { return; }
+ var job = {
+ sourceCode: sourceCode,
+ basePos: basePos
+ };
+ langHandler(job);
+ out.push.apply(out, job.decorations);
+ }
+
+ var notWs = /\S/;
+
+ /**
+ * Given an element, if it contains only one child element and any text nodes
+ * it contains contain only space characters, return the sole child element.
+ * Otherwise returns undefined.
+ * <p>
+ * This is meant to return the CODE element in {@code <pre><code ...>} when
+ * there is a single child element that contains all the non-space textual
+ * content, but not to return anything where there are multiple child elements
+ * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+ * is textual content.
+ */
+ function childContentWrapper(element) {
+ var wrapper = undefined;
+ for (var c = element.firstChild; c; c = c.nextSibling) {
+ var type = c.nodeType;
+ wrapper = (type === 1) // Element Node
+ ? (wrapper ? element : c)
+ : (type === 3) // Text Node
+ ? (notWs.test(c.nodeValue) ? element : wrapper)
+ : wrapper;
+ }
+ return wrapper === element ? undefined : wrapper;
+ }
+
+ /** Given triples of [style, pattern, context] returns a lexing function,
+ * The lexing function interprets the patterns to find token boundaries and
+ * returns a decoration list of the form
+ * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+ * where index_n is an index into the sourceCode, and style_n is a style
+ * constant like PR_PLAIN. index_n-1 <= index_n, and style_n-1 applies to
+ * all characters in sourceCode[index_n-1:index_n].
+ *
+ * The stylePatterns is a list whose elements have the form
+ * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+ *
+ * Style is a style constant like PR_PLAIN, or can be a string of the
+ * form 'lang-FOO', where FOO is a language extension describing the
+ * language of the portion of the token in $1 after pattern executes.
+ * E.g., if style is 'lang-lisp', and group 1 contains the text
+ * '(hello (world))', then that portion of the token will be passed to the
+ * registered lisp handler for formatting.
+ * The text before and after group 1 will be restyled using this decorator
+ * so decorators should take care that this doesn't result in infinite
+ * recursion. For example, the HTML lexer rule for SCRIPT elements looks
+ * something like ['lang-js', /<[s]cript>(.+?)<\/script>/]. This may match
+ * '<script>foo()<\/script>', which would cause the current decorator to
+ * be called with '<script>' which would not match the same rule since
+ * group 1 must not be empty, so it would be instead styled as PR_TAG by
+ * the generic tag rule. The handler registered for the 'js' extension would
+ * then be called with 'foo()', and finally, the current decorator would
+ * be called with '<\/script>' which would not match the original rule and
+ * so the generic tag rule would identify it as a tag.
+ *
+ * Pattern must only match prefixes, and if it matches a prefix, then that
+ * match is considered a token with the same style.
+ *
+ * Context is applied to the last non-whitespace, non-comment token
+ * recognized.
+ *
+ * Shortcut is an optional string of characters, any of which, if the first
+ * character, gurantee that this pattern and only this pattern matches.
+ *
+ * @param {Array} shortcutStylePatterns patterns that always start with
+ * a known character. Must have a shortcut string.
+ * @param {Array} fallthroughStylePatterns patterns that will be tried in
+ * order if the shortcut ones fail. May have shortcuts.
+ *
+ * @return {function (Object)} a
+ * function that takes source code and returns a list of decorations.
+ */
+ function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+ var shortcuts = {};
+ var tokenizer;
+ (function () {
+ var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+ var allRegexs = [];
+ var regexKeys = {};
+ for (var i = 0, n = allPatterns.length; i < n; ++i) {
+ var patternParts = allPatterns[i];
+ var shortcutChars = patternParts[3];
+ if (shortcutChars) {
+ for (var c = shortcutChars.length; --c >= 0;) {
+ shortcuts[shortcutChars.charAt(c)] = patternParts;
+ }
+ }
+ var regex = patternParts[1];
+ var k = '' + regex;
+ if (!regexKeys.hasOwnProperty(k)) {
+ allRegexs.push(regex);
+ regexKeys[k] = null;
+ }
+ }
+ allRegexs.push(/[\0-\uffff]/);
+ tokenizer = combinePrefixPatterns(allRegexs);
+ })();
+
+ var nPatterns = fallthroughStylePatterns.length;
+
+ /**
+ * Lexes job.sourceCode and produces an output array job.decorations of
+ * style classes preceded by the position at which they start in
+ * job.sourceCode in order.
+ *
+ * @param {Object} job an object like <pre>{
+ * sourceCode: {string} sourceText plain text,
+ * basePos: {int} position of job.sourceCode in the larger chunk of
+ * sourceCode.
+ * }</pre>
+ */
+ var decorate = function (job) {
+ var sourceCode = job.sourceCode, basePos = job.basePos;
+ /** Even entries are positions in source in ascending order. Odd enties
+ * are style markers (e.g., PR_COMMENT) that run from that position until
+ * the end.
+ * @type {Array.<number|string>}
+ */
+ var decorations = [basePos, PR_PLAIN];
+ var pos = 0; // index into sourceCode
+ var tokens = sourceCode.match(tokenizer) || [];
+ var styleCache = {};
+
+ for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+ var token = tokens[ti];
+ var style = styleCache[token];
+ var match = void 0;
+
+ var isEmbedded;
+ if (typeof style === 'string') {
+ isEmbedded = false;
+ } else {
+ var patternParts = shortcuts[token.charAt(0)];
+ if (patternParts) {
+ match = token.match(patternParts[1]);
+ style = patternParts[0];
+ } else {
+ for (var i = 0; i < nPatterns; ++i) {
+ patternParts = fallthroughStylePatterns[i];
+ match = token.match(patternParts[1]);
+ if (match) {
+ style = patternParts[0];
+ break;
+ }
+ }
+
+ if (!match) { // make sure that we make progress
+ style = PR_PLAIN;
+ }
+ }
+
+ isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+ if (isEmbedded && !(match && typeof match[1] === 'string')) {
+ isEmbedded = false;
+ style = PR_SOURCE;
+ }
+
+ if (!isEmbedded) { styleCache[token] = style; }
+ }
+
+ var tokenStart = pos;
+ pos += token.length;
+
+ if (!isEmbedded) {
+ decorations.push(basePos + tokenStart, style);
+ } else { // Treat group 1 as an embedded block of source code.
+ var embeddedSource = match[1];
+ var embeddedSourceStart = token.indexOf(embeddedSource);
+ var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+ if (match[2]) {
+ // If embeddedSource can be blank, then it would match at the
+ // beginning which would cause us to infinitely recurse on the
+ // entire token, so we catch the right context in match[2].
+ embeddedSourceEnd = token.length - match[2].length;
+ embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+ }
+ var lang = style.substring(5);
+ // Decorate the left of the embedded source
+ appendDecorations(
+ basePos + tokenStart,
+ token.substring(0, embeddedSourceStart),
+ decorate, decorations);
+ // Decorate the embedded source
+ appendDecorations(
+ basePos + tokenStart + embeddedSourceStart,
+ embeddedSource,
+ langHandlerForExtension(lang, embeddedSource),
+ decorations);
+ // Decorate the right of the embedded section
+ appendDecorations(
+ basePos + tokenStart + embeddedSourceEnd,
+ token.substring(embeddedSourceEnd),
+ decorate, decorations);
+ }
+ }
+ job.decorations = decorations;
+ };
+ return decorate;
+ }
+
+ /** returns a function that produces a list of decorations from source text.
+ *
+ * This code treats ", ', and ` as string delimiters, and \ as a string
+ * escape. It does not recognize perl's qq() style strings.
+ * It has no special handling for double delimiter escapes as in basic, or
+ * the tripled delimiters used in python, but should work on those regardless
+ * although in those cases a single string literal may be broken up into
+ * multiple adjacent string literals.
+ *
+ * It recognizes C, C++, and shell style comments.
+ *
+ * @param {Object} options a set of optional parameters.
+ * @return {function (Object)} a function that examines the source code
+ * in the input job and builds the decoration list.
+ */
+ function sourceDecorator(options) {
+ var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+ if (options['tripleQuotedStrings']) {
+ // '''multi-line-string''', 'single-line-string', and double-quoted
+ shortcutStylePatterns.push(
+ [PR_STRING, /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+ null, '\'"']);
+ } else if (options['multiLineStrings']) {
+ // 'multi-line-string', "multi-line-string"
+ shortcutStylePatterns.push(
+ [PR_STRING, /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+ null, '\'"`']);
+ } else {
+ // 'single-line-string', "single-line-string"
+ shortcutStylePatterns.push(
+ [PR_STRING,
+ /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+ null, '"\'']);
+ }
+ if (options['verbatimStrings']) {
+ // verbatim-string-literal production from the C# grammar. See issue 93.
+ fallthroughStylePatterns.push(
+ [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+ }
+ var hc = options['hashComments'];
+ if (hc) {
+ if (options['cStyleComments']) {
+ if (hc > 1) { // multiline hash comments
+ shortcutStylePatterns.push(
+ [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+ } else {
+ // Stop C preprocessor declarations at an unclosed open comment
+ shortcutStylePatterns.push(
+ [PR_COMMENT, /^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
+ null, '#']);
+ }
+ // #include <stdio.h>
+ fallthroughStylePatterns.push(
+ [PR_STRING,
+ /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,
+ null]);
+ } else {
+ shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+ }
+ }
+ if (options['cStyleComments']) {
+ fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+ fallthroughStylePatterns.push(
+ [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+ }
+ if (options['regexLiterals']) {
+ /**
+ * @const
+ */
+ var REGEX_LITERAL = (
+ // A regular expression literal starts with a slash that is
+ // not followed by * or / so that it is not confused with
+ // comments.
+ '/(?=[^/*])'
+ // and then contains any number of raw characters,
+ + '(?:[^/\\x5B\\x5C]'
+ // escape sequences (\x5C),
+ + '|\\x5C[\\s\\S]'
+ // or non-nesting character sets (\x5B\x5D);
+ + '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+ // finally closed by a /.
+ + '/');
+ fallthroughStylePatterns.push(
+ ['lang-regex',
+ new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+ ]);
+ }
+
+ var types = options['types'];
+ if (types) {
+ fallthroughStylePatterns.push([PR_TYPE, types]);
+ }
+
+ var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+ if (keywords.length) {
+ fallthroughStylePatterns.push(
+ [PR_KEYWORD,
+ new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+ null]);
+ }
+
+ shortcutStylePatterns.push([PR_PLAIN, /^\s+/, null, ' \r\n\t\xA0']);
+
+ var punctuation =
+ // The Bash man page says
+
+ // A word is a sequence of characters considered as a single
+ // unit by GRUB. Words are separated by metacharacters,
+ // which are the following plus space, tab, and newline: { }
+ // | & $ ; < >
+ // ...
+
+ // A word beginning with # causes that word and all remaining
+ // characters on that line to be ignored.
+
+ // which means that only a '#' after /(?:^|[{}|&$;<>\s])/ starts a
+ // comment but empirically
+ // $ echo {#}
+ // {#}
+ // $ echo \$#
+ // $#
+ // $ echo }#
+ // }#
+
+ // so /(?:^|[|&;<>\s])/ is more appropriate.
+
+ // http://gcc.gnu.org/onlinedocs/gcc-2.95.3/cpp_1.html#SEC3
+ // suggests that this definition is compatible with a
+ // default mode that tries to use a single token definition
+ // to recognize both bash/python style comments and C
+ // preprocessor directives.
+
+ // This definition of punctuation does not include # in the list of
+ // follow-on exclusions, so # will not be broken before if preceeded
+ // by a punctuation character. We could try to exclude # after
+ // [|&;<>] but that doesn't seem to cause many major problems.
+ // If that does turn out to be a problem, we should change the below
+ // when hc is truthy to include # in the run of punctuation characters
+ // only when not followint [|&;<>].
+ /^.[^\s\w\.$@\'\"\`\/\\]*/;
+
+ fallthroughStylePatterns.push(
+ // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+ [PR_LITERAL, /^@[a-z_$][a-z_$@0-9]*/i, null],
+ [PR_TYPE, /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+ [PR_PLAIN, /^[a-z_$][a-z_$@0-9]*/i, null],
+ [PR_LITERAL,
+ new RegExp(
+ '^(?:'
+ // A hex number
+ + '0x[a-f0-9]+'
+ // or an octal or decimal number,
+ + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+ // possibly in scientific notation
+ + '(?:e[+\\-]?\\d+)?'
+ + ')'
+ // with an optional modifier like UL for unsigned long
+ + '[a-z]*', 'i'),
+ null, '0123456789'],
+ // Don't treat escaped quotes in bash as starting strings. See issue 144.
+ [PR_PLAIN, /^\\[\s\S]?/, null],
+ [PR_PUNCTUATION, punctuation, null]);
+
+ return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+ }
+
+ var decorateSource = sourceDecorator({
+ 'keywords': ALL_KEYWORDS,
+ 'hashComments': true,
+ 'cStyleComments': true,
+ 'multiLineStrings': true,
+ 'regexLiterals': true
+ });
+
+ /**
+ * Given a DOM subtree, wraps it in a list, and puts each line into its own
+ * list item.
+ *
+ * @param {Node} node modified in place. Its content is pulled into an
+ * HTMLOListElement, and each line is moved into a separate list item.
+ * This requires cloning elements, so the input might not have unique
+ * IDs after numbering.
+ * @param {boolean} isPreformatted true iff white-space in text nodes should
+ * be treated as significant.
+ */
+ function numberLines(node, opt_startLineNum, isPreformatted) {
+ var nocode = /(?:^|\s)nocode(?:\s|$)/;
+ var lineBreak = /\r\n?|\n/;
+
+ var document = node.ownerDocument;
+
+ var li = document.createElement('li');
+ while (node.firstChild) {
+ li.appendChild(node.firstChild);
+ }
+ // An array of lines. We split below, so this is initialized to one
+ // un-split line.
+ var listItems = [li];
+
+ function walk(node) {
+ switch (node.nodeType) {
+ case 1: // Element
+ if (nocode.test(node.className)) { break; }
+ if ('br' === node.nodeName) {
+ breakAfter(node);
+ // Discard the <BR> since it is now flush against a </LI>.
+ if (node.parentNode) {
+ node.parentNode.removeChild(node);
+ }
+ } else {
+ for (var child = node.firstChild; child; child = child.nextSibling) {
+ walk(child);
+ }
+ }
+ break;
+ case 3: case 4: // Text
+ if (isPreformatted) {
+ var text = node.nodeValue;
+ var match = text.match(lineBreak);
+ if (match) {
+ var firstLine = text.substring(0, match.index);
+ node.nodeValue = firstLine;
+ var tail = text.substring(match.index + match[0].length);
+ if (tail) {
+ var parent = node.parentNode;
+ parent.insertBefore(
+ document.createTextNode(tail), node.nextSibling);
+ }
+ breakAfter(node);
+ if (!firstLine) {
+ // Don't leave blank text nodes in the DOM.
+ node.parentNode.removeChild(node);
+ }
+ }
+ }
+ break;
+ }
+ }
+
+ // Split a line after the given node.
+ function breakAfter(lineEndNode) {
+ // If there's nothing to the right, then we can skip ending the line
+ // here, and move root-wards since splitting just before an end-tag
+ // would require us to create a bunch of empty copies.
+ while (!lineEndNode.nextSibling) {
+ lineEndNode = lineEndNode.parentNode;
+ if (!lineEndNode) { return; }
+ }
+
+ function breakLeftOf(limit, copy) {
+ // Clone shallowly if this node needs to be on both sides of the break.
+ var rightSide = copy ? limit.cloneNode(false) : limit;
+ var parent = limit.parentNode;
+ if (parent) {
+ // We clone the parent chain.
+ // This helps us resurrect important styling elements that cross lines.
+ // E.g. in <i>Foo<br>Bar</i>
+ // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+ var parentClone = breakLeftOf(parent, 1);
+ // Move the clone and everything to the right of the original
+ // onto the cloned parent.
+ var next = limit.nextSibling;
+ parentClone.appendChild(rightSide);
+ for (var sibling = next; sibling; sibling = next) {
+ next = sibling.nextSibling;
+ parentClone.appendChild(sibling);
+ }
+ }
+ return rightSide;
+ }
+
+ var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+
+ // Walk the parent chain until we reach an unattached LI.
+ for (var parent;
+ // Check nodeType since IE invents document fragments.
+ (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+ copiedListItem = parent;
+ }
+ // Put it on the list of lines for later processing.
+ listItems.push(copiedListItem);
+ }
+
+ // Split lines while there are lines left to split.
+ for (var i = 0; // Number of lines that have been split so far.
+ i < listItems.length; // length updated by breakAfter calls.
+ ++i) {
+ walk(listItems[i]);
+ }
+
+ // Make sure numeric indices show correctly.
+ if (opt_startLineNum === (opt_startLineNum|0)) {
+ listItems[0].setAttribute('value', opt_startLineNum);
+ }
+
+ var ol = document.createElement('ol');
+ ol.className = 'linenums';
+ var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+ for (var i = 0, n = listItems.length; i < n; ++i) {
+ li = listItems[i];
+ // Stick a class on the LIs so that stylesheets can
+ // color odd/even rows, or any other row pattern that
+ // is co-prime with 10.
+ li.className = 'L' + ((i + offset) % 10);
+ if (!li.firstChild) {
+ li.appendChild(document.createTextNode('\xA0'));
+ }
+ ol.appendChild(li);
+ }
+
+ node.appendChild(ol);
+ }
+
+ /**
+ * Breaks {@code job.sourceCode} around style boundaries in
+ * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+ * @param {Object} job like <pre>{
+ * sourceCode: {string} source as plain text,
+ * spans: {Array.<number|Node>} alternating span start indices into source
+ * and the text node or element (e.g. {@code <BR>}) corresponding to that
+ * span.
+ * decorations: {Array.<number|string} an array of style classes preceded
+ * by the position at which they start in job.sourceCode in order
+ * }</pre>
+ * @private
+ */
+ function recombineTagsAndDecorations(job) {
+ var isIE8OrEarlier = /\bMSIE\s(\d+)/.exec(navigator.userAgent);
+ isIE8OrEarlier = isIE8OrEarlier && +isIE8OrEarlier[1] <= 8;
+ var newlineRe = /\n/g;
+
+ var source = job.sourceCode;
+ var sourceLength = source.length;
+ // Index into source after the last code-unit recombined.
+ var sourceIndex = 0;
+
+ var spans = job.spans;
+ var nSpans = spans.length;
+ // Index into spans after the last span which ends at or before sourceIndex.
+ var spanIndex = 0;
+
+ var decorations = job.decorations;
+ var nDecorations = decorations.length;
+ // Index into decorations after the last decoration which ends at or before
+ // sourceIndex.
+ var decorationIndex = 0;
+
+ // Remove all zero-length decorations.
+ decorations[nDecorations] = sourceLength;
+ var decPos, i;
+ for (i = decPos = 0; i < nDecorations;) {
+ if (decorations[i] !== decorations[i + 2]) {
+ decorations[decPos++] = decorations[i++];
+ decorations[decPos++] = decorations[i++];
+ } else {
+ i += 2;
+ }
+ }
+ nDecorations = decPos;
+
+ // Simplify decorations.
+ for (i = decPos = 0; i < nDecorations;) {
+ var startPos = decorations[i];
+ // Conflate all adjacent decorations that use the same style.
+ var startDec = decorations[i + 1];
+ var end = i + 2;
+ while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+ end += 2;
+ }
+ decorations[decPos++] = startPos;
+ decorations[decPos++] = startDec;
+ i = end;
+ }
+
+ nDecorations = decorations.length = decPos;
+
+ var sourceNode = job.sourceNode;
+ var oldDisplay;
+ if (sourceNode) {
+ oldDisplay = sourceNode.style.display;
+ sourceNode.style.display = 'none';
+ }
+ try {
+ var decoration = null;
+ while (spanIndex < nSpans) {
+ var spanStart = spans[spanIndex];
+ var spanEnd = spans[spanIndex + 2] || sourceLength;
+
+ var decEnd = decorations[decorationIndex + 2] || sourceLength;
+
+ var end = Math.min(spanEnd, decEnd);
+
+ var textNode = spans[spanIndex + 1];
+ var styledText;
+ if (textNode.nodeType !== 1 // Don't muck with <BR>s or <LI>s
+ // Don't introduce spans around empty text nodes.
+ && (styledText = source.substring(sourceIndex, end))) {
+ // This may seem bizarre, and it is. Emitting LF on IE causes the
+ // code to display with spaces instead of line breaks.
+ // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+ // space to appear at the beginning of every line but the first.
+ // Emitting an old Mac OS 9 line separator makes everything spiffy.
+ if (isIE8OrEarlier) {
+ styledText = styledText.replace(newlineRe, '\r');
+ }
+ textNode.nodeValue = styledText;
+ var document = textNode.ownerDocument;
+ var span = document.createElement('span');
+ span.className = decorations[decorationIndex + 1];
+ var parentNode = textNode.parentNode;
+ parentNode.replaceChild(span, textNode);
+ span.appendChild(textNode);
+ if (sourceIndex < spanEnd) { // Split off a text node.
+ spans[spanIndex + 1] = textNode
+ // TODO: Possibly optimize by using '' if there's no flicker.
+ = document.createTextNode(source.substring(end, spanEnd));
+ parentNode.insertBefore(textNode, span.nextSibling);
+ }
+ }
+
+ sourceIndex = end;
+
+ if (sourceIndex >= spanEnd) {
+ spanIndex += 2;
+ }
+ if (sourceIndex >= decEnd) {
+ decorationIndex += 2;
+ }
+ }
+ } finally {
+ if (sourceNode) {
+ sourceNode.style.display = oldDisplay;
+ }
+ }
+ }
+
+
+ /** Maps language-specific file extensions to handlers. */
+ var langHandlerRegistry = {};
+ /** Register a language handler for the given file extensions.
+ * @param {function (Object)} handler a function from source code to a list
+ * of decorations. Takes a single argument job which describes the
+ * state of the computation. The single parameter has the form
+ * {@code {
+ * sourceCode: {string} as plain text.
+ * decorations: {Array.<number|string>} an array of style classes
+ * preceded by the position at which they start in
+ * job.sourceCode in order.
+ * The language handler should assigned this field.
+ * basePos: {int} the position of source in the larger source chunk.
+ * All positions in the output decorations array are relative
+ * to the larger source chunk.
+ * } }
+ * @param {Array.<string>} fileExtensions
+ */
+ function registerLangHandler(handler, fileExtensions) {
+ for (var i = fileExtensions.length; --i >= 0;) {
+ var ext = fileExtensions[i];
+ if (!langHandlerRegistry.hasOwnProperty(ext)) {
+ langHandlerRegistry[ext] = handler;
+ } else if (win['console']) {
+ console['warn']('cannot override language handler %s', ext);
+ }
+ }
+ }
+ function langHandlerForExtension(extension, source) {
+ if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+ // Treat it as markup if the first non whitespace character is a < and
+ // the last non-whitespace character is a >.
+ extension = /^\s*</.test(source)
+ ? 'default-markup'
+ : 'default-code';
+ }
+ return langHandlerRegistry[extension];
+ }
+ registerLangHandler(decorateSource, ['default-code']);
+ registerLangHandler(
+ createSimpleLexer(
+ [],
+ [
+ [PR_PLAIN, /^[^<?]+/],
+ [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+ [PR_COMMENT, /^<\!--[\s\S]*?(?:-\->|$)/],
+ // Unescaped content in an unknown language
+ ['lang-', /^<\?([\s\S]+?)(?:\?>|$)/],
+ ['lang-', /^<%([\s\S]+?)(?:%>|$)/],
+ [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+ ['lang-', /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+ // Unescaped content in javascript. (Or possibly vbscript).
+ ['lang-js', /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+ // Contains unescaped stylesheet content
+ ['lang-css', /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+ ['lang-in.tag', /^(<\/?[a-z][^<>]*>)/i]
+ ]),
+ ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+ registerLangHandler(
+ createSimpleLexer(
+ [
+ [PR_PLAIN, /^[\s]+/, null, ' \t\r\n'],
+ [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+ ],
+ [
+ [PR_TAG, /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+ [PR_ATTRIB_NAME, /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+ ['lang-uq.val', /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+ [PR_PUNCTUATION, /^[=<>\/]+/],
+ ['lang-js', /^on\w+\s*=\s*\"([^\"]+)\"/i],
+ ['lang-js', /^on\w+\s*=\s*\'([^\']+)\'/i],
+ ['lang-js', /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+ ['lang-css', /^style\s*=\s*\"([^\"]+)\"/i],
+ ['lang-css', /^style\s*=\s*\'([^\']+)\'/i],
+ ['lang-css', /^style\s*=\s*([^\"\'>\s]+)/i]
+ ]),
+ ['in.tag']);
+ registerLangHandler(
+ createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': CPP_KEYWORDS,
+ 'hashComments': true,
+ 'cStyleComments': true,
+ 'types': C_TYPES
+ }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': 'null,true,false'
+ }), ['json']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': CSHARP_KEYWORDS,
+ 'hashComments': true,
+ 'cStyleComments': true,
+ 'verbatimStrings': true,
+ 'types': C_TYPES
+ }), ['cs']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': JAVA_KEYWORDS,
+ 'cStyleComments': true
+ }), ['java']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': SH_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true
+ }), ['bsh', 'csh', 'sh']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': PYTHON_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true,
+ 'tripleQuotedStrings': true
+ }), ['cv', 'py']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': PERL_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true,
+ 'regexLiterals': true
+ }), ['perl', 'pl', 'pm']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': RUBY_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true,
+ 'regexLiterals': true
+ }), ['rb']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': JSCRIPT_KEYWORDS,
+ 'cStyleComments': true,
+ 'regexLiterals': true
+ }), ['js']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': COFFEE_KEYWORDS,
+ 'hashComments': 3, // ### style block comments
+ 'cStyleComments': true,
+ 'multilineStrings': true,
+ 'tripleQuotedStrings': true,
+ 'regexLiterals': true
+ }), ['coffee']);
+ registerLangHandler(
+ createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+ function applyDecorator(job) {
+ var opt_langExtension = job.langExtension;
+
+ try {
+ // Extract tags, and convert the source code to plain text.
+ var sourceAndSpans = extractSourceSpans(job.sourceNode, job.pre);
+ /** Plain text. @type {string} */
+ var source = sourceAndSpans.sourceCode;
+ job.sourceCode = source;
+ job.spans = sourceAndSpans.spans;
+ job.basePos = 0;
+
+ // Apply the appropriate language handler
+ langHandlerForExtension(opt_langExtension, source)(job);
+
+ // Integrate the decorations and tags back into the source code,
+ // modifying the sourceNode in place.
+ recombineTagsAndDecorations(job);
+ } catch (e) {
+ if (win['console']) {
+ console['log'](e && e['stack'] ? e['stack'] : e);
+ }
+ }
+ }
+
+ /**
+ * @param sourceCodeHtml {string} The HTML to pretty print.
+ * @param opt_langExtension {string} The language name to use.
+ * Typically, a filename extension like 'cpp' or 'java'.
+ * @param opt_numberLines {number|boolean} True to number lines,
+ * or the 1-indexed number of the first line in sourceCodeHtml.
+ */
+ function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+ var container = document.createElement('pre');
+ // This could cause images to load and onload listeners to fire.
+ // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+ // We assume that the inner HTML is from a trusted source.
+ container.innerHTML = sourceCodeHtml;
+ if (opt_numberLines) {
+ numberLines(container, opt_numberLines, true);
+ }
+
+ var job = {
+ langExtension: opt_langExtension,
+ numberLines: opt_numberLines,
+ sourceNode: container,
+ pre: 1
+ };
+ applyDecorator(job);
+ return container.innerHTML;
+ }
+
+ function prettyPrint(opt_whenDone) {
+ function byTagName(tn) { return document.getElementsByTagName(tn); }
+ // fetch a list of nodes to rewrite
+ var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+ var elements = [];
+ for (var i = 0; i < codeSegments.length; ++i) {
+ for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+ elements.push(codeSegments[i][j]);
+ }
+ }
+ codeSegments = null;
+
+ var clock = Date;
+ if (!clock['now']) {
+ clock = { 'now': function () { return +(new Date); } };
+ }
+
+ // The loop is broken into a series of continuations to make sure that we
+ // don't make the browser unresponsive when rewriting a large page.
+ var k = 0;
+ var prettyPrintingJob;
+
+ var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+ var prettyPrintRe = /\bprettyprint\b/;
+ var prettyPrintedRe = /\bprettyprinted\b/;
+ var preformattedTagNameRe = /pre|xmp/i;
+ var codeRe = /^code$/i;
+ var preCodeXmpRe = /^(?:pre|code|xmp)$/i;
+
+ function doWork() {
+ var endTime = (win['PR_SHOULD_USE_CONTINUATION'] ?
+ clock['now']() + 250 /* ms */ :
+ Infinity);
+ for (; k < elements.length && clock['now']() < endTime; k++) {
+ var cs = elements[k];
+ var className = cs.className;
+ if (prettyPrintRe.test(className)
+ // Don't redo this if we've already done it.
+ // This allows recalling pretty print to just prettyprint elements
+ // that have been added to the page since last call.
+ && !prettyPrintedRe.test(className)) {
+
+ // make sure this is not nested in an already prettified element
+ var nested = false;
+ for (var p = cs.parentNode; p; p = p.parentNode) {
+ var tn = p.tagName;
+ if (preCodeXmpRe.test(tn)
+ && p.className && prettyPrintRe.test(p.className)) {
+ nested = true;
+ break;
+ }
+ }
+ if (!nested) {
+ // Mark done. If we fail to prettyprint for whatever reason,
+ // we shouldn't try again.
+ cs.className += ' prettyprinted';
+
+ // If the classes includes a language extensions, use it.
+ // Language extensions can be specified like
+ // <pre class="prettyprint lang-cpp">
+ // the language extension "cpp" is used to find a language handler
+ // as passed to PR.registerLangHandler.
+ // HTML5 recommends that a language be specified using "language-"
+ // as the prefix instead. Google Code Prettify supports both.
+ // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+ var langExtension = className.match(langExtensionRe);
+ // Support <pre class="prettyprint"><code class="language-c">
+ var wrapper;
+ if (!langExtension && (wrapper = childContentWrapper(cs))
+ && codeRe.test(wrapper.tagName)) {
+ langExtension = wrapper.className.match(langExtensionRe);
+ }
+
+ if (langExtension) { langExtension = langExtension[1]; }
+
+ var preformatted;
+ if (preformattedTagNameRe.test(cs.tagName)) {
+ preformatted = 1;
+ } else {
+ var currentStyle = cs['currentStyle'];
+ var whitespace = (
+ currentStyle
+ ? currentStyle['whiteSpace']
+ : (document.defaultView
+ && document.defaultView.getComputedStyle)
+ ? document.defaultView.getComputedStyle(cs, null)
+ .getPropertyValue('white-space')
+ : 0);
+ preformatted = whitespace
+ && 'pre' === whitespace.substring(0, 3);
+ }
+
+ // Look for a class like linenums or linenums:<n> where <n> is the
+ // 1-indexed number of the first line.
+ var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+ lineNums = lineNums
+ ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+ : false;
+ if (lineNums) { numberLines(cs, lineNums, preformatted); }
+
+ // do the pretty printing
+ prettyPrintingJob = {
+ langExtension: langExtension,
+ sourceNode: cs,
+ numberLines: lineNums,
+ pre: preformatted
+ };
+ applyDecorator(prettyPrintingJob);
+ }
+ }
+ }
+ if (k < elements.length) {
+ // finish up in a continuation
+ setTimeout(doWork, 250);
+ } else if (opt_whenDone) {
+ opt_whenDone();
+ }
+ }
+
+ doWork();
+ }
+
+ /**
+ * Contains functions for creating and registering new language handlers.
+ * @type {Object}
+ */
+ var PR = win['PR'] = {
+ 'createSimpleLexer': createSimpleLexer,
+ 'registerLangHandler': registerLangHandler,
+ 'sourceDecorator': sourceDecorator,
+ 'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+ 'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+ 'PR_COMMENT': PR_COMMENT,
+ 'PR_DECLARATION': PR_DECLARATION,
+ 'PR_KEYWORD': PR_KEYWORD,
+ 'PR_LITERAL': PR_LITERAL,
+ 'PR_NOCODE': PR_NOCODE,
+ 'PR_PLAIN': PR_PLAIN,
+ 'PR_PUNCTUATION': PR_PUNCTUATION,
+ 'PR_SOURCE': PR_SOURCE,
+ 'PR_STRING': PR_STRING,
+ 'PR_TAG': PR_TAG,
+ 'PR_TYPE': PR_TYPE,
+ 'prettyPrintOne': win['prettyPrintOne'] = prettyPrintOne,
+ 'prettyPrint': win['prettyPrint'] = prettyPrint
+ };
+
+ // Make PR available via the Asynchronous Module Definition (AMD) API.
+ // Per https://github.com/amdjs/amdjs-api/wiki/AMD:
+ // The Asynchronous Module Definition (AMD) API specifies a
+ // mechanism for defining modules such that the module and its
+ // dependencies can be asynchronously loaded.
+ // ...
+ // To allow a clear indicator that a global define function (as
+ // needed for script src browser loading) conforms to the AMD API,
+ // any global define function SHOULD have a property called "amd"
+ // whose value is an object. This helps avoid conflict with any
+ // other existing JavaScript code that could have defined a define()
+ // function that does not conform to the AMD API.
+ if (typeof define === "function" && define['amd']) {
+ define(function () {
+ return PR;
+ });
+ }
+})();
diff --git a/dist/docs/js/marked.js b/dist/docs/js/marked.js
new file mode 100644
index 000000000..9cc333785
--- /dev/null
+++ b/dist/docs/js/marked.js
@@ -0,0 +1,1151 @@
+/**
+ * marked - a markdown parser
+ * Copyright (c) 2011-2013, Christopher Jeffrey. (MIT Licensed)
+ * https://github.com/chjj/marked
+ */
+
+;(function() {
+
+/**
+ * Block-Level Grammar
+ */
+
+var block = {
+ newline: /^\n+/,
+ code: /^( {4}[^\n]+\n*)+/,
+ fences: noop,
+ hr: /^( *[-*_]){3,} *(?:\n+|$)/,
+ heading: /^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,
+ nptable: noop,
+ lheading: /^([^\n]+)\n *(=|-){3,} *\n*/,
+ blockquote: /^( *>[^\n]+(\n[^\n]+)*\n*)+/,
+ list: /^( *)(bull) [\s\S]+?(?:hr|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
+ html: /^ *(?:comment|closed|closing) *(?:\n{2,}|\s*$)/,
+ def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,
+ table: noop,
+ paragraph: /^((?:[^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+)\n*/,
+ text: /^[^\n]+/
+};
+
+block.bullet = /(?:[*+-]|\d+\.)/;
+block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;
+block.item = replace(block.item, 'gm')
+ (/bull/g, block.bullet)
+ ();
+
+block.list = replace(block.list)
+ (/bull/g, block.bullet)
+ ('hr', /\n+(?=(?: *[-*_]){3,} *(?:\n+|$))/)
+ ();
+
+block._tag = '(?!(?:'
+ + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'
+ + '|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo'
+ + '|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|@)\\b';
+
+block.html = replace(block.html)
+ ('comment', /<!--[\s\S]*?-->/)
+ ('closed', /<(tag)[\s\S]+?<\/\1>/)
+ ('closing', /<tag(?:"[^"]*"|'[^']*'|[^'">])*?>/)
+ (/tag/g, block._tag)
+ ();
+
+block.paragraph = replace(block.paragraph)
+ ('hr', block.hr)
+ ('heading', block.heading)
+ ('lheading', block.lheading)
+ ('blockquote', block.blockquote)
+ ('tag', '<' + block._tag)
+ ('def', block.def)
+ ();
+
+/**
+ * Normal Block Grammar
+ */
+
+block.normal = merge({}, block);
+
+/**
+ * GFM Block Grammar
+ */
+
+block.gfm = merge({}, block.normal, {
+ fences: /^ *(`{3,}|~{3,}) *(\S+)? *\n([\s\S]+?)\s*\1 *(?:\n+|$)/,
+ paragraph: /^/
+});
+
+block.gfm.paragraph = replace(block.paragraph)
+ ('(?!', '(?!' + block.gfm.fences.source.replace('\\1', '\\2') + '|')
+ ();
+
+/**
+ * GFM + Tables Block Grammar
+ */
+
+block.tables = merge({}, block.gfm, {
+ nptable: /^ *(\S.*\|.*)\n *([-:]+ *\|[-| :]*)\n((?:.*\|.*(?:\n|$))*)\n*/,
+ table: /^ *\|(.+)\n *\|( *[-:]+[-| :]*)\n((?: *\|.*(?:\n|$))*)\n*/
+});
+
+/**
+ * Block Lexer
+ */
+
+function Lexer(options) {
+ this.tokens = [];
+ this.tokens.links = {};
+ this.options = options || marked.defaults;
+ this.rules = block.normal;
+
+ if (this.options.gfm) {
+ if (this.options.tables) {
+ this.rules = block.tables;
+ } else {
+ this.rules = block.gfm;
+ }
+ }
+}
+
+/**
+ * Expose Block Rules
+ */
+
+Lexer.rules = block;
+
+/**
+ * Static Lex Method
+ */
+
+Lexer.lex = function(src, options) {
+ var lexer = new Lexer(options);
+ return lexer.lex(src);
+};
+
+/**
+ * Preprocessing
+ */
+
+Lexer.prototype.lex = function(src) {
+ src = src
+ .replace(/\r\n|\r/g, '\n')
+ .replace(/\t/g, ' ')
+ .replace(/\u00a0/g, ' ')
+ .replace(/\u2424/g, '\n');
+
+ return this.token(src, true);
+};
+
+/**
+ * Lexing
+ */
+
+Lexer.prototype.token = function(src, top) {
+ var src = src.replace(/^ +$/gm, '')
+ , next
+ , loose
+ , cap
+ , bull
+ , b
+ , item
+ , space
+ , i
+ , l;
+
+ while (src) {
+ // newline
+ if (cap = this.rules.newline.exec(src)) {
+ src = src.substring(cap[0].length);
+ if (cap[0].length > 1) {
+ this.tokens.push({
+ type: 'space'
+ });
+ }
+ }
+
+ // code
+ if (cap = this.rules.code.exec(src)) {
+ src = src.substring(cap[0].length);
+ cap = cap[0].replace(/^ {4}/gm, '');
+ this.tokens.push({
+ type: 'code',
+ text: !this.options.pedantic
+ ? cap.replace(/\n+$/, '')
+ : cap
+ });
+ continue;
+ }
+
+ // fences (gfm)
+ if (cap = this.rules.fences.exec(src)) {
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: 'code',
+ lang: cap[2],
+ text: cap[3]
+ });
+ continue;
+ }
+
+ // heading
+ if (cap = this.rules.heading.exec(src)) {
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: 'heading',
+ depth: cap[1].length,
+ text: cap[2]
+ });
+ continue;
+ }
+
+ // table no leading pipe (gfm)
+ if (top && (cap = this.rules.nptable.exec(src))) {
+ src = src.substring(cap[0].length);
+
+ item = {
+ type: 'table',
+ header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
+ align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
+ cells: cap[3].replace(/\n$/, '').split('\n')
+ };
+
+ for (i = 0; i < item.align.length; i++) {
+ if (/^ *-+: *$/.test(item.align[i])) {
+ item.align[i] = 'right';
+ } else if (/^ *:-+: *$/.test(item.align[i])) {
+ item.align[i] = 'center';
+ } else if (/^ *:-+ *$/.test(item.align[i])) {
+ item.align[i] = 'left';
+ } else {
+ item.align[i] = null;
+ }
+ }
+
+ for (i = 0; i < item.cells.length; i++) {
+ item.cells[i] = item.cells[i].split(/ *\| */);
+ }
+
+ this.tokens.push(item);
+
+ continue;
+ }
+
+ // lheading
+ if (cap = this.rules.lheading.exec(src)) {
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: 'heading',
+ depth: cap[2] === '=' ? 1 : 2,
+ text: cap[1]
+ });
+ continue;
+ }
+
+ // hr
+ if (cap = this.rules.hr.exec(src)) {
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: 'hr'
+ });
+ continue;
+ }
+
+ // blockquote
+ if (cap = this.rules.blockquote.exec(src)) {
+ src = src.substring(cap[0].length);
+
+ this.tokens.push({
+ type: 'blockquote_start'
+ });
+
+ cap = cap[0].replace(/^ *> ?/gm, '');
+
+ // Pass `top` to keep the current
+ // "toplevel" state. This is exactly
+ // how markdown.pl works.
+ this.token(cap, top);
+
+ this.tokens.push({
+ type: 'blockquote_end'
+ });
+
+ continue;
+ }
+
+ // list
+ if (cap = this.rules.list.exec(src)) {
+ src = src.substring(cap[0].length);
+ bull = cap[2];
+
+ this.tokens.push({
+ type: 'list_start',
+ ordered: bull.length > 1
+ });
+
+ // Get each top-level item.
+ cap = cap[0].match(this.rules.item);
+
+ next = false;
+ l = cap.length;
+ i = 0;
+
+ for (; i < l; i++) {
+ item = cap[i];
+
+ // Remove the list item's bullet
+ // so it is seen as the next token.
+ space = item.length;
+ item = item.replace(/^ *([*+-]|\d+\.) +/, '');
+
+ // Outdent whatever the
+ // list item contains. Hacky.
+ if (~item.indexOf('\n ')) {
+ space -= item.length;
+ item = !this.options.pedantic
+ ? item.replace(new RegExp('^ {1,' + space + '}', 'gm'), '')
+ : item.replace(/^ {1,4}/gm, '');
+ }
+
+ // Determine whether the next list item belongs here.
+ // Backpedal if it does not belong in this list.
+ if (this.options.smartLists && i !== l - 1) {
+ b = block.bullet.exec(cap[i+1])[0];
+ if (bull !== b && !(bull.length > 1 && b.length > 1)) {
+ src = cap.slice(i + 1).join('\n') + src;
+ i = l - 1;
+ }
+ }
+
+ // Determine whether item is loose or not.
+ // Use: /(^|\n)(?! )[^\n]+\n\n(?!\s*$)/
+ // for discount behavior.
+ loose = next || /\n\n(?!\s*$)/.test(item);
+ if (i !== l - 1) {
+ next = item[item.length-1] === '\n';
+ if (!loose) loose = next;
+ }
+
+ this.tokens.push({
+ type: loose
+ ? 'loose_item_start'
+ : 'list_item_start'
+ });
+
+ // Recurse.
+ this.token(item, false);
+
+ this.tokens.push({
+ type: 'list_item_end'
+ });
+ }
+
+ this.tokens.push({
+ type: 'list_end'
+ });
+
+ continue;
+ }
+
+ // html
+ if (cap = this.rules.html.exec(src)) {
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: this.options.sanitize
+ ? 'paragraph'
+ : 'html',
+ pre: cap[1] === 'pre' || cap[1] === 'script',
+ text: cap[0]
+ });
+ continue;
+ }
+
+ // def
+ if (top && (cap = this.rules.def.exec(src))) {
+ src = src.substring(cap[0].length);
+ this.tokens.links[cap[1].toLowerCase()] = {
+ href: cap[2],
+ title: cap[3]
+ };
+ continue;
+ }
+
+ // table (gfm)
+ if (top && (cap = this.rules.table.exec(src))) {
+ src = src.substring(cap[0].length);
+
+ item = {
+ type: 'table',
+ header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
+ align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
+ cells: cap[3].replace(/(?: *\| *)?\n$/, '').split('\n')
+ };
+
+ for (i = 0; i < item.align.length; i++) {
+ if (/^ *-+: *$/.test(item.align[i])) {
+ item.align[i] = 'right';
+ } else if (/^ *:-+: *$/.test(item.align[i])) {
+ item.align[i] = 'center';
+ } else if (/^ *:-+ *$/.test(item.align[i])) {
+ item.align[i] = 'left';
+ } else {
+ item.align[i] = null;
+ }
+ }
+
+ for (i = 0; i < item.cells.length; i++) {
+ item.cells[i] = item.cells[i]
+ .replace(/^ *\| *| *\| *$/g, '')
+ .split(/ *\| */);
+ }
+
+ this.tokens.push(item);
+
+ continue;
+ }
+
+ // top-level paragraph
+ if (top && (cap = this.rules.paragraph.exec(src))) {
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: 'paragraph',
+ text: cap[1][cap[1].length-1] === '\n'
+ ? cap[1].slice(0, -1)
+ : cap[1]
+ });
+ continue;
+ }
+
+ // text
+ if (cap = this.rules.text.exec(src)) {
+ // Top-level should never reach here.
+ src = src.substring(cap[0].length);
+ this.tokens.push({
+ type: 'text',
+ text: cap[0]
+ });
+ continue;
+ }
+
+ if (src) {
+ throw new
+ Error('Infinite loop on byte: ' + src.charCodeAt(0));
+ }
+ }
+
+ return this.tokens;
+};
+
+/**
+ * Inline-Level Grammar
+ */
+
+var inline = {
+ escape: /^\\([\\`*{}\[\]()#+\-.!_>])/,
+ autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
+ url: noop,
+ tag: /^<!--[\s\S]*?-->|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,
+ link: /^!?\[(inside)\]\(href\)/,
+ reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
+ nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
+ strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
+ em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
+ code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
+ br: /^ {2,}\n(?!\s*$)/,
+ del: noop,
+ text: /^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/
+};
+
+inline._inside = /(?:\[[^\]]*\]|[^\]]|\](?=[^\[]*\]))*/;
+inline._href = /\s*<?([^\s]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/;
+
+inline.link = replace(inline.link)
+ ('inside', inline._inside)
+ ('href', inline._href)
+ ();
+
+inline.reflink = replace(inline.reflink)
+ ('inside', inline._inside)
+ ();
+
+/**
+ * Normal Inline Grammar
+ */
+
+inline.normal = merge({}, inline);
+
+/**
+ * Pedantic Inline Grammar
+ */
+
+inline.pedantic = merge({}, inline.normal, {
+ strong: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
+ em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/
+});
+
+/**
+ * GFM Inline Grammar
+ */
+
+inline.gfm = merge({}, inline.normal, {
+ escape: replace(inline.escape)('])', '~|])')(),
+ url: /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,
+ del: /^~~(?=\S)([\s\S]*?\S)~~/,
+ text: replace(inline.text)
+ (']|', '~]|')
+ ('|', '|https?://|')
+ ()
+});
+
+/**
+ * GFM + Line Breaks Inline Grammar
+ */
+
+inline.breaks = merge({}, inline.gfm, {
+ br: replace(inline.br)('{2,}', '*')(),
+ text: replace(inline.gfm.text)('{2,}', '*')()
+});
+
+/**
+ * Inline Lexer & Compiler
+ */
+
+function InlineLexer(links, options) {
+ this.options = options || marked.defaults;
+ this.links = links;
+ this.rules = inline.normal;
+
+ if (!this.links) {
+ throw new
+ Error('Tokens array requires a `links` property.');
+ }
+
+ if (this.options.gfm) {
+ if (this.options.breaks) {
+ this.rules = inline.breaks;
+ } else {
+ this.rules = inline.gfm;
+ }
+ } else if (this.options.pedantic) {
+ this.rules = inline.pedantic;
+ }
+}
+
+/**
+ * Expose Inline Rules
+ */
+
+InlineLexer.rules = inline;
+
+/**
+ * Static Lexing/Compiling Method
+ */
+
+InlineLexer.output = function(src, links, options) {
+ var inline = new InlineLexer(links, options);
+ return inline.output(src);
+};
+
+/**
+ * Lexing/Compiling
+ */
+
+InlineLexer.prototype.output = function(src) {
+ var out = ''
+ , link
+ , text
+ , href
+ , cap;
+
+ while (src) {
+ // escape
+ if (cap = this.rules.escape.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += cap[1];
+ continue;
+ }
+
+ // autolink
+ if (cap = this.rules.autolink.exec(src)) {
+ src = src.substring(cap[0].length);
+ if (cap[2] === '@') {
+ text = cap[1][6] === ':'
+ ? this.mangle(cap[1].substring(7))
+ : this.mangle(cap[1]);
+ href = this.mangle('mailto:') + text;
+ } else {
+ text = escape(cap[1]);
+ href = text;
+ }
+ out += '<a href="'
+ + href
+ + '">'
+ + text
+ + '</a>';
+ continue;
+ }
+
+ // url (gfm)
+ if (cap = this.rules.url.exec(src)) {
+ src = src.substring(cap[0].length);
+ text = escape(cap[1]);
+ href = text;
+ out += '<a href="'
+ + href
+ + '">'
+ + text
+ + '</a>';
+ continue;
+ }
+
+ // tag
+ if (cap = this.rules.tag.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += this.options.sanitize
+ ? escape(cap[0])
+ : cap[0];
+ continue;
+ }
+
+ // link
+ if (cap = this.rules.link.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += this.outputLink(cap, {
+ href: cap[2],
+ title: cap[3]
+ });
+ continue;
+ }
+
+ // reflink, nolink
+ if ((cap = this.rules.reflink.exec(src))
+ || (cap = this.rules.nolink.exec(src))) {
+ src = src.substring(cap[0].length);
+ link = (cap[2] || cap[1]).replace(/\s+/g, ' ');
+ link = this.links[link.toLowerCase()];
+ if (!link || !link.href) {
+ out += cap[0][0];
+ src = cap[0].substring(1) + src;
+ continue;
+ }
+ out += this.outputLink(cap, link);
+ continue;
+ }
+
+ // strong
+ if (cap = this.rules.strong.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += '<strong>'
+ + this.output(cap[2] || cap[1])
+ + '</strong>';
+ continue;
+ }
+
+ // em
+ if (cap = this.rules.em.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += '<em>'
+ + this.output(cap[2] || cap[1])
+ + '</em>';
+ continue;
+ }
+
+ // code
+ if (cap = this.rules.code.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += '<code>'
+ + escape(cap[2], true)
+ + '</code>';
+ continue;
+ }
+
+ // br
+ if (cap = this.rules.br.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += '<br>';
+ continue;
+ }
+
+ // del (gfm)
+ if (cap = this.rules.del.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += '<del>'
+ + this.output(cap[1])
+ + '</del>';
+ continue;
+ }
+
+ // text
+ if (cap = this.rules.text.exec(src)) {
+ src = src.substring(cap[0].length);
+ out += escape(this.smartypants(cap[0]));
+ continue;
+ }
+
+ if (src) {
+ throw new
+ Error('Infinite loop on byte: ' + src.charCodeAt(0));
+ }
+ }
+
+ return out;
+};
+
+/**
+ * Compile Link
+ */
+
+InlineLexer.prototype.outputLink = function(cap, link) {
+ if (cap[0][0] !== '!') {
+ return '<a href="'
+ + escape(link.href)
+ + '"'
+ + (link.title
+ ? ' title="'
+ + escape(link.title)
+ + '"'
+ : '')
+ + '>'
+ + this.output(cap[1])
+ + '</a>';
+ } else {
+ return '<img src="'
+ + escape(link.href)
+ + '" alt="'
+ + escape(cap[1])
+ + '"'
+ + (link.title
+ ? ' title="'
+ + escape(link.title)
+ + '"'
+ : '')
+ + '>';
+ }
+};
+
+/**
+ * Smartypants Transformations
+ */
+
+InlineLexer.prototype.smartypants = function(text) {
+ if (!this.options.smartypants) return text;
+ return text
+ .replace(/--/g, '\u2014')
+ .replace(/'([^']*)'/g, '\u2018$1\u2019')
+ .replace(/"([^"]*)"/g, '\u201C$1\u201D')
+ .replace(/\.{3}/g, '\u2026');
+};
+
+/**
+ * Mangle Links
+ */
+
+InlineLexer.prototype.mangle = function(text) {
+ var out = ''
+ , l = text.length
+ , i = 0
+ , ch;
+
+ for (; i < l; i++) {
+ ch = text.charCodeAt(i);
+ if (Math.random() > 0.5) {
+ ch = 'x' + ch.toString(16);
+ }
+ out += '&#' + ch + ';';
+ }
+
+ return out;
+};
+
+/**
+ * Parsing & Compiling
+ */
+
+function Parser(options) {
+ this.tokens = [];
+ this.token = null;
+ this.options = options || marked.defaults;
+}
+
+/**
+ * Static Parse Method
+ */
+
+Parser.parse = function(src, options) {
+ var parser = new Parser(options);
+ return parser.parse(src);
+};
+
+/**
+ * Parse Loop
+ */
+
+Parser.prototype.parse = function(src) {
+ this.inline = new InlineLexer(src.links, this.options);
+ this.tokens = src.reverse();
+
+ var out = '';
+ while (this.next()) {
+ out += this.tok();
+ }
+
+ return out;
+};
+
+/**
+ * Next Token
+ */
+
+Parser.prototype.next = function() {
+ return this.token = this.tokens.pop();
+};
+
+/**
+ * Preview Next Token
+ */
+
+Parser.prototype.peek = function() {
+ return this.tokens[this.tokens.length-1] || 0;
+};
+
+/**
+ * Parse Text Tokens
+ */
+
+Parser.prototype.parseText = function() {
+ var body = this.token.text;
+
+ while (this.peek().type === 'text') {
+ body += '\n' + this.next().text;
+ }
+
+ return this.inline.output(body);
+};
+
+/**
+ * Parse Current Token
+ */
+
+Parser.prototype.tok = function() {
+ switch (this.token.type) {
+ case 'space': {
+ return '';
+ }
+ case 'hr': {
+ return '<hr>\n';
+ }
+ case 'heading': {
+ return '<h'
+ + this.token.depth
+ + '>'
+ + this.inline.output(this.token.text)
+ + '</h'
+ + this.token.depth
+ + '>\n';
+ }
+ case 'code': {
+ if (this.options.highlight) {
+ var code = this.options.highlight(this.token.text, this.token.lang);
+ if (code != null && code !== this.token.text) {
+ this.token.escaped = true;
+ this.token.text = code;
+ }
+ }
+
+ if (!this.token.escaped) {
+ this.token.text = escape(this.token.text, true);
+ }
+
+ return '<pre><code'
+ + (this.token.lang
+ ? ' class="'
+ + this.options.langPrefix
+ + this.token.lang
+ + '"'
+ : '')
+ + '>'
+ + this.token.text
+ + '</code></pre>\n';
+ }
+ case 'table': {
+ var body = ''
+ , heading
+ , i
+ , row
+ , cell
+ , j;
+
+ // header
+ body += '<thead>\n<tr>\n';
+ for (i = 0; i < this.token.header.length; i++) {
+ heading = this.inline.output(this.token.header[i]);
+ body += this.token.align[i]
+ ? '<th align="' + this.token.align[i] + '">' + heading + '</th>\n'
+ : '<th>' + heading + '</th>\n';
+ }
+ body += '</tr>\n</thead>\n';
+
+ // body
+ body += '<tbody>\n'
+ for (i = 0; i < this.token.cells.length; i++) {
+ row = this.token.cells[i];
+ body += '<tr>\n';
+ for (j = 0; j < row.length; j++) {
+ cell = this.inline.output(row[j]);
+ body += this.token.align[j]
+ ? '<td align="' + this.token.align[j] + '">' + cell + '</td>\n'
+ : '<td>' + cell + '</td>\n';
+ }
+ body += '</tr>\n';
+ }
+ body += '</tbody>\n';
+
+ return '<table>\n'
+ + body
+ + '</table>\n';
+ }
+ case 'blockquote_start': {
+ var body = '';
+
+ while (this.next().type !== 'blockquote_end') {
+ body += this.tok();
+ }
+
+ return '<blockquote>\n'
+ + body
+ + '</blockquote>\n';
+ }
+ case 'list_start': {
+ var type = this.token.ordered ? 'ol' : 'ul'
+ , body = '';
+
+ while (this.next().type !== 'list_end') {
+ body += this.tok();
+ }
+
+ return '<'
+ + type
+ + '>\n'
+ + body
+ + '</'
+ + type
+ + '>\n';
+ }
+ case 'list_item_start': {
+ var body = '';
+
+ while (this.next().type !== 'list_item_end') {
+ body += this.token.type === 'text'
+ ? this.parseText()
+ : this.tok();
+ }
+
+ return '<li>'
+ + body
+ + '</li>\n';
+ }
+ case 'loose_item_start': {
+ var body = '';
+
+ while (this.next().type !== 'list_item_end') {
+ body += this.tok();
+ }
+
+ return '<li>'
+ + body
+ + '</li>\n';
+ }
+ case 'html': {
+ return !this.token.pre && !this.options.pedantic
+ ? this.inline.output(this.token.text)
+ : this.token.text;
+ }
+ case 'paragraph': {
+ return '<p>'
+ + this.inline.output(this.token.text)
+ + '</p>\n';
+ }
+ case 'text': {
+ return '<p>'
+ + this.parseText()
+ + '</p>\n';
+ }
+ }
+};
+
+/**
+ * Helpers
+ */
+
+function escape(html, encode) {
+ return html
+ .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&')
+ .replace(/</g, '<')
+ .replace(/>/g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+}
+
+function replace(regex, opt) {
+ regex = regex.source;
+ opt = opt || '';
+ return function self(name, val) {
+ if (!name) return new RegExp(regex, opt);
+ val = val.source || val;
+ val = val.replace(/(^|[^\[])\^/g, '$1');
+ regex = regex.replace(name, val);
+ return self;
+ };
+}
+
+function noop() {}
+noop.exec = noop;
+
+function merge(obj) {
+ var i = 1
+ , target
+ , key;
+
+ for (; i < arguments.length; i++) {
+ target = arguments[i];
+ for (key in target) {
+ if (Object.prototype.hasOwnProperty.call(target, key)) {
+ obj[key] = target[key];
+ }
+ }
+ }
+
+ return obj;
+}
+
+/**
+ * Marked
+ */
+
+function marked(src, opt, callback) {
+ if (callback || typeof opt === 'function') {
+ if (!callback) {
+ callback = opt;
+ opt = null;
+ }
+
+ if (opt) opt = merge({}, marked.defaults, opt);
+
+ var highlight = opt.highlight
+ , tokens
+ , pending
+ , i = 0;
+
+ try {
+ tokens = Lexer.lex(src, opt)
+ } catch (e) {
+ return callback(e);
+ }
+
+ pending = tokens.length;
+
+ var done = function(hi) {
+ var out, err;
+
+ if (hi !== true) {
+ delete opt.highlight;
+ }
+
+ try {
+ out = Parser.parse(tokens, opt);
+ } catch (e) {
+ err = e;
+ }
+
+ opt.highlight = highlight;
+
+ return err
+ ? callback(err)
+ : callback(null, out);
+ };
+
+ if (!highlight || highlight.length < 3) {
+ return done(true);
+ }
+
+ if (!pending) return done();
+
+ for (; i < tokens.length; i++) {
+ (function(token) {
+ if (token.type !== 'code') {
+ return --pending || done();
+ }
+ return highlight(token.text, token.lang, function(err, code) {
+ if (code == null || code === token.text) {
+ return --pending || done();
+ }
+ token.text = code;
+ token.escaped = true;
+ --pending || done();
+ });
+ })(tokens[i]);
+ }
+
+ return;
+ }
+ try {
+ if (opt) opt = merge({}, marked.defaults, opt);
+ return Parser.parse(Lexer.lex(src, opt), opt);
+ } catch (e) {
+ e.message += '\nPlease report this to https://github.com/chjj/marked.';
+ if ((opt || marked.defaults).silent) {
+ return '<p>An error occured:</p><pre>'
+ + escape(e.message + '', true)
+ + '</pre>';
+ }
+ throw e;
+ }
+}
+
+/**
+ * Options
+ */
+
+marked.options =
+marked.setOptions = function(opt) {
+ merge(marked.defaults, opt);
+ return marked;
+};
+
+marked.defaults = {
+ gfm: true,
+ tables: true,
+ breaks: false,
+ pedantic: false,
+ sanitize: false,
+ smartLists: false,
+ silent: false,
+ highlight: null,
+ langPrefix: 'lang-',
+ smartypants: false
+};
+
+/**
+ * Expose
+ */
+
+marked.Parser = Parser;
+marked.parser = Parser.parse;
+
+marked.Lexer = Lexer;
+marked.lexer = Lexer.lex;
+
+marked.InlineLexer = InlineLexer;
+marked.inlineLexer = InlineLexer.output;
+
+marked.parse = marked;
+
+if (typeof exports === 'object') {
+ module.exports = marked;
+} else if (typeof define === 'function' && define.amd) {
+ define(function() { return marked; });
+} else {
+ this.marked = marked;
+}
+
+}).call(function() {
+ return this || (typeof window !== 'undefined' ? window : global);
+}());
diff --git a/dist/docs/partials/api/patternfly.autofocus.pfFocused.html b/dist/docs/partials/api/patternfly.autofocus.pfFocused.html
new file mode 100644
index 000000000..c59c08c29
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.autofocus.pfFocused.html
@@ -0,0 +1,46 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/autofocus/autofocus.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/autofocus/autofocus.js#L39" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfFocused</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-autofocus-page patternfly-autofocus-pffocused-page"><p>The focus on element is evaluated from given expression. If the expression provided as an attribute to this directive
+is evaluated as true, the element is selected (and focused).</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-focused="{expression}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>pfFocused <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="patternfly-autofocus-page patternfly-autofocus-pffocused-page"><p>If the expression is true, the element is focused and selected (if possible).</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-autofocus-page patternfly-autofocus-pffocused-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.autofocus" source-edit-deps="angular.js" source-edit-html="index.html" source-edit-css="" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html" ng-html-wrap-loaded="patternfly.autofocus angular.js"></pre>
+<script type="text/ng-template" id="index.html">
+ <div>
+ <form class="form-horizontal">
+
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="i1">Focus next input:</label>
+ <div class="col-sm-10">
+ <input id="i1" ng-model="isFocus" type="checkbox"></input>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="i2">Focused input:</label>
+ <div class="col-sm-10">
+ <input class="form-control" id="i1" ng-model="i2" pf-focused="isFocus" placeholder="This will be selected after checking the box above."></input>
+ </div>
+ </div>
+
+ </form>
+ </div>
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.autofocus" ng-set-html="index.html" ng-eval-javascript=""></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.card.directive.pfAggregateStatusCard.html b/dist/docs/partials/api/patternfly.card.directive.pfAggregateStatusCard.html
new file mode 100644
index 000000000..a0f02469d
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.card.directive.pfAggregateStatusCard.html
@@ -0,0 +1,143 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/card/aggregate-status/aggregate-status-card.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/card/aggregate-status/aggregate-status-card.directive.js#L132" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfAggregateStatusCard</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.card</code>
+</span>
+</div>
+</h1>
+<div><fieldset class="deprecated"><legend>Deprecated API</legend>
+{boolean=} alt-layout Display the aggregate status card in a 'alternate tall' layout. false (default) displays normal layout, true displays tall layout</fieldset>
+<h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-card-directive-page patternfly-card-directive-pfaggregatestatuscard-page"><p>Directive for easily displaying status information</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-aggregate-status-card
+ status="{object}"
+ [show-top-border="{boolean}"]
+ [layout="{string}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>status</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfaggregatestatuscard-page"><p>Status configuration information<br/></p>
+<ul style='list-style-type: none'>
+<li>.title - the main title of the aggregate status card
+<li>.count - the number count of the main statuses
+<li>.href - the href to navigate to if one clicks on the title or count
+<li>.iconClass - an icon to display to the left of the count
+<li>.iconImage - an image to display to the left of the count
+<li>.notifications - an array of status icons & counts
+ <ul style='list-style-type: none'>
+ <li>.iconClass - an icon to display to the right of the notification count
+ <li>.iconImage - an image to display to the left of the notification count
+ <li>.count - the number count of the notification status
+ <li>.href - href to navigate to if one clicks on the notification status icon or count
+ </ul>
+</ul>
+When layout='mini', only one notification can be specified:<br>
+<ul style='list-style-type: none'>
+<li>...
+<li><strong>.notification</strong> - an <em>object</em> of containing a single notification icon & count
+ <ul style='list-style-type: none'>
+ <li>.iconClass - an icon to display to the right of the notification count
+ <li>.iconImage - an image to display to the left of the notification count
+ <li>.count - the number count of the notification status
+ <li>.href - href to navigate to if one clicks on the notification status icon or count
+ </ul>
+</ul></div></td></tr><tr><td>show-top-border <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfaggregatestatuscard-page"><p>Show/hide the top border, true shows top border, false (default) hides top border</p>
+</div></td></tr><tr><td>layout <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfaggregatestatuscard-page"><p>Various alternative layouts the aggregate status card may have:<br/></p>
+<ul style='list-style-type: none'>
+<li>'mini' displays a mini aggregate status card. Note: when using 'mini' layout, only one notification can be specified in the status object
+<li>'tall' displays a tall aggregate status card. This equals the depreciated 'alt-layout' param.</li>
+</ul></div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-card-directive-page patternfly-card-directive-pfaggregatestatuscard-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.card" source-edit-deps="angular.js script.js" source-edit-html="index.html-0" source-edit-css="" source-edit-js="script.js" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-0" ng-html-wrap-loaded="patternfly.card angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-0">
+ <div ng-controller="CardDemoCtrl" style="display:inline-block;">
+ <div class="col-md-10">
+ <label>With Top Border</label>
+ <div pf-aggregate-status-card status="status" show-top-border="true"></div>
+ <br/>
+ <label>No Top Border</label>
+ <div pf-aggregate-status-card status="status"></div>
+ <br/>
+ <label>layout = "mini"</label>
+ <div pf-aggregate-status-card status="miniAggStatus" show-top-border="true" layout="mini"></div>
+ <div pf-aggregate-status-card status="miniAggStatus2" show-top-border="true" layout="mini"></div>
+ <br/>
+ <label>layout = "tall"</label>
+ <div pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" layout="tall"></div>
+ <br/>
+ <label>Alternate Layout</label>
+ <i>(depreciated, use layout = 'tall' instead)</i>
+ </br></br>
+ <div pf-aggregate-status-card status="aggStatusAlt" show-top-border="true" alt-layout="true"></div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js"></pre>
+<script type="text/ng-template" id="script.js">
+ angular.module( 'patternfly.card' ).controller( 'CardDemoCtrl', function( $scope ) {
+ $scope.status = {
+ "title":"Nodes",
+ "count":793,
+ "href":"#",
+ "iconClass": "fa fa-shield",
+ "notifications":[
+ {
+ "iconClass":"pficon pficon-error-circle-o",
+ "count":4,
+ "href":"#"
+ },
+ {
+ "iconClass":"pficon pficon-warning-triangle-o",
+ "count":1
+ }
+ ]
+ };
+
+ $scope.aggStatusAlt = {
+ "title":"Providers",
+ "count":3,
+ "notifications":[
+ {
+ "iconImage":"img/kubernetes.svg",
+ "count":1,
+ "href":"#"
+ },
+ {
+ "iconImage":"img/OpenShift-logo.svg",
+ "count":2,
+ "href":"#"
+ }
+ ]
+ };
+
+ $scope.miniAggStatus = {
+ "iconClass":"pficon pficon-container-node",
+ "title":"Nodes",
+ "count":52,
+ "href":"#",
+ "notification": {
+ "iconClass":"pficon pficon-error-circle-o",
+ "count":3
+ }
+ };
+
+ $scope.miniAggStatus2 = {
+ "iconClass":"pficon pficon-cluster",
+ "title":"Adipiscing",
+ "count":9,
+ "href":"#",
+ "notification":{
+ "iconClass":"pficon pficon-ok"
+ }
+ };
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.card" ng-set-html="index.html-0" ng-eval-javascript="script.js"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.card.directive.pfCard - Timeframe Filters.html b/dist/docs/partials/api/patternfly.card.directive.pfCard - Timeframe Filters.html
new file mode 100644
index 000000000..a6daa597d
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.card.directive.pfCard - Timeframe Filters.html
@@ -0,0 +1,99 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/card/examples/card-timeframe.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/card/examples/card-timeframe.js#L82" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfCard - Timeframe Filters</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.card</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-timeframe-filters-page"><p>Directive for easily displaying a card with html content</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-card - -timeframe -filters
+ head-title="{string}"
+ [sub-title="{string}"]
+ [show-top-border="{boolean}"]
+ [show-titles-separator="{boolean}"]
+ [footer="{object}"]
+ [filter="{object}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>headTitle</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-timeframe-filters-page"><p>Title for the card</p>
+</div></td></tr><tr><td>subTitle <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-timeframe-filters-page"><p>Sub-Title for the card</p>
+</div></td></tr><tr><td>showTopBorder <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-timeframe-filters-page"><p>Show/Hide the blue top border. True shows top border, false (default) hides top border</p>
+</div></td></tr><tr><td>showTitlesSeparator <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-timeframe-filters-page"><p>Show/Hide the grey line between the title and sub-title.
+True (default) shows the line, false hides the line</p>
+</div></td></tr><tr><td>footer <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-timeframe-filters-page"><p>footer configuration properties:<br/></p>
+<p><ul style='list-style-type: none'></p>
+<p><li>.iconClass - (optional) the icon to show on the bottom left of the footer panel</p>
+<p><li>.text - (optional) the text to show on the bottom left of the footer panel, to the right of the icon</p>
+<p><li>.href - (optional) the href link to navigate to when the footer href is clicked</p>
+<p><li>.callBackFn - (optional) user defined function to call when the footer href is clicked
+</ul>
+*Note: If a href link and a callBackFn are specified, the href link will be called</p>
+</div></td></tr><tr><td>filter <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-timeframe-filters-page"><p>filter configuration properties:<br/></p>
+<ul style='list-style-type: none'>
+<li>.filters - drop down items for the filter.
+<pre class='' class="prettyprint linenums">
+ Ex: 'filters' : [{label:'Last 30 Days', value:'30'},
+ {label:'Last 15 Days', value:'15'},
+ {label:'Today', value:'today'}]</pre>
+<li>.defaultFilter - integer, 0 based index into the filters array
+<li>.callBackFn - user defined function to call when a filter is selected
+</ul></div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-timeframe-filters-page"><h4 id="example_source">Source</h4>
+<div source-edit="demo" source-edit-deps="angular.js script.js" source-edit-html="index.html-3" source-edit-css="" source-edit-js="script.js-4" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-3" ng-html-wrap-loaded="demo angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-3">
+ <div ng-controller="ChartCtrl">
+ <label class="label-title">Timeframe filter in header</label>
+ <div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true" filter="filterConfigHeader" style="width: 50%">
+ Card Contents
+ </div>
+ <label class="label-title">Footer with Link & Timeframe filter</label>
+ <div pf-card head-title="Card Title" sub-title="Card Subtitle" show-top-border="true"
+ footer="footerConfig" filter="filterConfig" style="width: 50%">
+ Card Contents
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-4"></pre>
+<script type="text/ng-template" id="script.js-4">
+angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
+
+ $scope.footerConfig = {
+ 'iconClass' : 'fa fa-flag',
+ 'text' : 'View All Events',
+ 'callBackFn': function () {
+ alert("Footer Callback Fn Called");
+ }
+ }
+
+ $scope.filterConfigHeader = {
+ 'filters' : [{label:'Last 30 Days', value:'30'},
+ {label:'Last 15 Days', value:'15'},
+ {label:'Today', value:'today'}],
+ 'callBackFn': function (f) {
+ alert("Header Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
+ },
+ 'position' : 'header'
+ }
+
+ $scope.filterConfig = {
+ 'filters' : [{label:'Last 30 Days', value:'30'},
+ {label:'Last 15 Days', value:'15'},
+ {label:'Today', value:'today'}],
+ 'callBackFn': function (f) {
+ alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
+ },
+ 'defaultFilter' : '1'
+ }
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="demo" ng-set-html="index.html-3" ng-eval-javascript="script.js-4"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.card.directive.pfCard - Trends.html b/dist/docs/partials/api/patternfly.card.directive.pfCard - Trends.html
new file mode 100644
index 000000000..4a334b127
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.card.directive.pfCard - Trends.html
@@ -0,0 +1,163 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/card/examples/card-trend.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/card/examples/card-trend.js#L146" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfCard - Trends</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.card</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-trends-page"><p>Directive for easily displaying a card with html content</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-card - -trends
+ head-title="{string}"
+ [sub-title="{string}"]
+ [show-top-border="{boolean}"]
+ [show-titles-separator="{boolean}"]
+ [footer="{object}"]
+ [filter="{object}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>headTitle</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-trends-page"><p>Title for the card</p>
+</div></td></tr><tr><td>subTitle <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-trends-page"><p>Sub-Title for the card</p>
+</div></td></tr><tr><td>showTopBorder <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-trends-page"><p>Show/Hide the blue top border. True shows top border, false (default) hides top border</p>
+</div></td></tr><tr><td>showTitlesSeparator <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-trends-page"><p>Show/Hide the grey line between the title and sub-title.
+True (default) shows the line, false hides the line</p>
+</div></td></tr><tr><td>footer <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-trends-page"><p>footer configuration properties:<br/></p>
+<p><ul style='list-style-type: none'></p>
+<p><li>.iconClass - (optional) the icon to show on the bottom left of the footer panel</p>
+<p><li>.text - (optional) the text to show on the bottom left of the footer panel, to the right of the icon</p>
+<p><li>.href - (optional) the href link to navigate to when the footer href is clicked</p>
+<p><li>.callBackFn - (optional) user defined function to call when the footer href is clicked
+</ul>
+*Note: If a href link and a callBackFn are specified, the href link will be called</p>
+</div></td></tr><tr><td>filter <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-trends-page"><p>filter configuration properties:<br/></p>
+<ul style='list-style-type: none'>
+<li>.filters - drop down items for the filter.
+<pre class='' class="prettyprint linenums">
+ Ex: 'filters' : [{label:'Last 30 Days', value:'30'},
+ {label:'Last 15 Days', value:'15'},
+ {label:'Today', value:'today'}]</pre>
+<li>.defaultFilter - integer, 0 based index into the filters array
+<li>.callBackFn - user defined function to call when a filter is selected
+</ul></div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-trends-page"><h4 id="example_source">Source</h4>
+<div source-edit="demo" source-edit-deps="angular.js script.js" source-edit-html="index.html-5" source-edit-css="" source-edit-js="script.js-6" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-5" ng-html-wrap-loaded="demo angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-5">
+ <div ng-controller="ChartCtrl">
+ <label class="label-title">Card With Single Trend</label>
+ <div pf-card head-title="Cluster Utilization" show-top-border="true" footer="footerConfig" filter="filterConfig" style="width: 50%">
+ <div pf-trends-chart config="configSingle" chart-data="dataSingle"></div>
+ </div>
+ <label class="label-title">Card with Multiple Trends</label>
+ <div pf-card head-title="Performance" sub-title="Last 30 Days" show-top-border="false"
+ show-titles-separator="false" style="width: 65%" footer="actionBarConfig">
+ <div pf-trends-chart config="configVirtual" chart-data="dataVirtual"></div>
+ <div pf-trends-chart config="configPhysical" chart-data="dataPhysical"></div>
+ <div pf-trends-chart config="configMemory" chart-data="dataMemory"></div>
+ </div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-6"></pre>
+<script type="text/ng-template" id="script.js-6">
+angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
+
+ $scope.footerConfig = {
+ 'iconClass' : 'fa fa-flag',
+ 'text' : 'View All Events',
+ 'callBackFn': function () {
+ alert("Footer Callback Fn Called");
+ }
+ }
+
+ $scope.filterConfig = {
+ 'filters' : [{label:'Last 30 Days', value:'30'},
+ {label:'Last 15 Days', value:'15'},
+ {label:'Today', value:'today'}],
+ 'callBackFn': function (f) {
+ alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
+ },
+ 'defaultFilter' : '1'
+ }
+
+ var today = new Date();
+ var dates = ['dates'];
+ for (var d = 20 - 1; d >= 0; d--) {
+ dates.push(new Date(today.getTime() - (d * 24 * 60 * 60 * 1000)));
+ }
+
+ $scope.configSingle = {
+ 'chartId' : 'example2TrendsChart',
+ 'title' : 'Storage Capacity',
+ 'layout' : 'compact',
+ 'valueType' : 'actual',
+ 'units' : 'TB',
+ 'tooltipType' : 'percentage'
+ };
+
+ $scope.dataSingle = {
+ 'total': '250',
+ 'xData': dates,
+ 'yData': ['used', '90', '20', '30', '20', '20', '10', '14', '20', '25', '68', '44', '56', '78', '56', '67', '88', '76', '65', '87', '76']
+ };
+
+ $scope.configVirtual = {
+ 'chartId' : 'virtualTrendsChart',
+ 'layout' : 'inline',
+ 'trendLabel' : 'Virtual Disk I/O',
+ 'units' : 'GB',
+ 'tooltipType' : 'percentage'
+ };
+
+ $scope.dataVirtual = {
+ 'total': '250',
+ 'xData': dates,
+ 'yData': ['used', '90', '20', '30', '20', '20', '10', '14', '20', '25', '68', '44', '56', '78', '56', '67', '88', '76', '65', '87', '76']
+ };
+
+ $scope.configPhysical = {
+ 'chartId' : 'physicalTrendsChart',
+ 'layout' : 'inline',
+ 'trendLabel' : 'Physical Disk I/O',
+ 'units' : 'MHz',
+ 'tooltipType' : 'percentage'
+ };
+
+ $scope.dataPhysical = {
+ 'total': '250',
+ 'xData': dates,
+ 'yData': ['used', '20', '20', '35', '20', '20', '87', '14', '20', '25', '28', '44', '56', '78', '56', '67', '88', '76', '65', '87', '16']
+ };
+
+ $scope.configMemory = {
+ 'chartId' : 'memoryTrendsChart',
+ 'layout' : 'inline',
+ 'trendLabel' : 'Memory Utilization',
+ 'units' : 'GB',
+ 'tooltipType' : 'percentage'
+ };
+
+ $scope.dataMemory = {
+ 'total': '250',
+ 'xData': dates,
+ 'yData': ['used', '20', '20', '35', '70', '20', '87', '14', '95', '25', '28', '44', '56', '66', '16', '67', '88', '76', '65', '87', '56']
+ };
+
+ $scope.actionBarConfig = {
+ 'iconClass' : 'fa fa-plus-circle',
+ 'text' : 'Add New Cluster',
+ 'callBackFn': function () {
+ alert("Footer Callback Fn Called");
+ }
+ }
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="demo" ng-set-html="index.html-5" ng-eval-javascript="script.js-6"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.card.directive.pfCard - Utilization.html b/dist/docs/partials/api/patternfly.card.directive.pfCard - Utilization.html
new file mode 100644
index 000000000..9ff8de483
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.card.directive.pfCard - Utilization.html
@@ -0,0 +1,103 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/card/basic/card.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/card/basic/card.directive.js#L86" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfCard - Utilization</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.card</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-utilization-page"><p>Directive for easily displaying a card with html content</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-card - -utilization
+ head-title="{string}"
+ [sub-title="{string}"]
+ [show-top-border="{boolean}"]
+ [show-titles-separator="{boolean}"]
+ [footer="{object}"]
+ [filter="{object}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>headTitle</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-utilization-page"><p>Title for the card</p>
+</div></td></tr><tr><td>subTitle <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-utilization-page"><p>Sub-Title for the card</p>
+</div></td></tr><tr><td>showTopBorder <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-utilization-page"><p>Show/Hide the blue top border. True shows top border, false (default) hides top border</p>
+</div></td></tr><tr><td>showTitlesSeparator <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-utilization-page"><p>Show/Hide the grey line between the title and sub-title.
+True (default) shows the line, false hides the line</p>
+</div></td></tr><tr><td>footer <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-utilization-page"><p>footer configuration properties:<br/></p>
+<p><ul style='list-style-type: none'></p>
+<p><li>.iconClass - (optional) the icon to show on the bottom left of the footer panel</p>
+<p><li>.text - (optional) the text to show on the bottom left of the footer panel, to the right of the icon</p>
+<p><li>.href - (optional) the href link to navigate to when the footer href is clicked</p>
+<p><li>.callBackFn - (optional) user defined function to call when the footer href is clicked
+</ul>
+*Note: If a href link and a callBackFn are specified, the href link will be called</p>
+</div></td></tr><tr><td>filter <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-utilization-page"><p>filter configuration properties:<br/></p>
+<ul style='list-style-type: none'>
+<li>.filters - drop down items for the filter.
+<pre class='' class="prettyprint linenums">
+ Ex: 'filters' : [{label:'Last 30 Days', value:'30'},
+ {label:'Last 15 Days', value:'15'},
+ {label:'Today', value:'today'}]</pre>
+<li>.defaultFilter - integer, 0 based index into the filters array
+<li>.callBackFn - user defined function to call when a filter is selected
+</ul></div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-card-directive-page patternfly-card-directive-pfcard-utilization-page"><h4 id="example_source">Source</h4>
+<div source-edit="demo" source-edit-deps="angular.js script.js" source-edit-html="index.html-1" source-edit-css="" source-edit-js="script.js-2" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-1" ng-html-wrap-loaded="demo angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-1">
+ <div ng-controller="ChartCtrl">
+ <label class="label-title">Card With Multiple Utilization Bars</label>
+ <div pf-card head-title="System Resources" show-top-border="true" style="width: 65%">
+ <div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
+ <div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
+ <div pf-utilization-bar-chart chart-data=data4 chart-title=title4 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
+ <div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-2"></pre>
+<script type="text/ng-template" id="script.js-2">
+angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
+
+ $scope.title2 = 'Memory';
+ $scope.units2 = 'GB';
+
+ $scope.data2 = {
+ 'used': '25',
+ 'total': '100'
+ };
+
+ $scope.title3 = 'CPU Usage';
+ $scope.units3 = 'MHz';
+
+ $scope.data3 = {
+ 'used': '420',
+ 'total': '500',
+ };
+
+ $scope.title4 = 'Disk Usage';
+ $scope.units4 = 'TB';
+ $scope.data4 = {
+ 'used': '350',
+ 'total': '500',
+ };
+
+ $scope.title5 = 'Disk I/O';
+ $scope.units5 = 'I/Ops';
+ $scope.data5 = {
+ 'used': '450',
+ 'total': '500',
+ };
+
+ $scope.layoutInline = {
+ 'type': 'inline'
+ };
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="demo" ng-set-html="index.html-1" ng-eval-javascript="script.js-2"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.charts.directive.pfC3Chart.html b/dist/docs/partials/api/patternfly.charts.directive.pfC3Chart.html
new file mode 100644
index 000000000..d939f1369
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.charts.directive.pfC3Chart.html
@@ -0,0 +1,87 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/charts/c3/c3-chart.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/charts/c3/c3-chart.directive.js#L75" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfC3Chart</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.charts</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-charts-directive-page patternfly-charts-directive-pfc3chart-page"><p>Directive for wrapping c3 library</p>
+<p>Note: The 'patternfly.charts' module is not a dependency in the default angular 'patternfly' module.
+In order to use patternfly charts you must add 'patternfly.charts' as a dependency in your application.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-c3-chart
+ id="{string}"
+ config="{expression}"
+ [get-chart-callback="{function (chart))}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>id</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfc3chart-page"><p>the ID of the container that the chart should bind to</p>
+</div></td></tr><tr><td>config</td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfc3chart-page"><p>the c3 configuration options for the chart</p>
+</div></td></tr><tr><td>getChartCallback <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function (chart)</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfc3chart-page"><p>the callback user function to be called once the chart is generated, containing the c3 chart object</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-charts-directive-page patternfly-charts-directive-pfc3chart-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.charts" source-edit-deps="angular.js script.js" source-edit-html="index.html-7" source-edit-css="" source-edit-js="script.js-8" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-7" ng-html-wrap-loaded="patternfly.charts angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-7">
+ <div ng-controller="ChartCtrl">
+ <div pf-c3-chart id="chartId" config="chartConfig" get-chart-callback="getChart"></div>
+
+ <form role="form" style="width:300px">
+ Total = {{total}}, Used = {{used}}, Available = {{available}}
+ <div class="form-group">
+ <label>Used</label>
+ <input type="text" class="form-control" ng-model="newUsed">
+ </div>
+ <input type="button" ng-click="submitform(newUsed)" value="Set Used" />
+ <input type="button" ng-click="focusUsed()" value="Focus Used" />
+ </form>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-8"></pre>
+<script type="text/ng-template" id="script.js-8">
+ angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) {
+ $scope.used = 950;
+ $scope.total = 1000;
+ $scope.available = $scope.total - $scope.used;
+
+ $scope.chartConfig = patternfly.c3ChartDefaults().getDefaultDonutConfig('MHz Used');
+ $scope.chartConfig.data = {
+ type: "donut",
+ columns: [
+ ["Used", $scope.used],
+ ["Available", $scope.total - $scope.used]
+ ],
+ groups: [
+ ["used", "available"]
+ ],
+ order: null
+ };
+
+ $scope.getChart = function (chart) {
+ $scope.chart = chart;
+ }
+
+ $scope.focusUsed = function () {
+ $scope.chart.focus("Used");
+ }
+
+ $scope.updateAvailable = function (val) {
+ $scope.available = $scope.total - $scope.used;
+ }
+
+ $scope.submitform = function (val) {
+ $scope.used = val;
+ $scope.updateAvailable();
+ $scope.chartConfig.data.columns = [["Used",$scope.used],["Available",$scope.available]];
+ };
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.charts" ng-set-html="index.html-7" ng-eval-javascript="script.js-8"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.charts.directive.pfDonutPctChart.html b/dist/docs/partials/api/patternfly.charts.directive.pfDonutPctChart.html
new file mode 100644
index 000000000..26ee0e89b
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.charts.directive.pfDonutPctChart.html
@@ -0,0 +1,269 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/charts/donut/donut-pct-chart-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/charts/donut/donut-pct-chart-directive.js#L260" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfDonutPctChart</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.charts</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-charts-directive-page patternfly-charts-directive-pfdonutpctchart-page"><p>Directive for rendering a percentage used donut/radial chart. The Used Percentage fill starts at 12 o’clock and
+moves clockwise. Whatever portion of the donut not Used, will be represented as Available, and rendered as a
+gray fill.
+There are three possible fill colors for Used Percentage, dependent on whether or not there are thresholds:<br/></p>
+<p><ul></p>
+<p><li>When no thresholds exist, or if the used percentage has not surpassed any thresholds, the indicator is blue.</p>
+<p><li>When the used percentage has surpassed the warning threshold, but not the error threshold, the indicator is orange.</p>
+<p><li>When the used percentage has surpassed the error threshold, the indicator is is red.
+</ul>
+The directive will calculate the Available Percentage (Total - Used), and display it as a grey radial fill.</p>
+<p><br><br>
+See <a href="http://c3js.org/reference.html">http://c3js.org/reference.html</a> for a full list of C3 chart options.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-donut-pct-chart
+ config="{object}"
+ data="{object}"
+ [center-label="{string}"]
+ [chart-height="{int}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>config</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfdonutpctchart-page"><p>configuration properties for the donut chart:<br/></p>
+<ul style='list-style-type: none'>
+<li>.chartId - the unique id of the donut chart
+<li>.units - unit label for values, ex: 'MHz','GB', etc..
+<li>.thresholds - warning and error percentage thresholds used to determine the Usage Percentage fill color (optional)
+<li>.tooltipFn(d) - user defined function to customize the tool tip (optional)
+<li>.centerLabelFn - user defined function to customize the text of the center label (optional)
+<li>.onClickFn(d,i) - user defined function to handle when donut arc is clicked upon.
+</ul></div></td></tr><tr><td>data</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfdonutpctchart-page"><p>the Total and Used values for the donut chart. Available is calculated as Total - Used.<br/></p>
+<ul style='list-style-type: none'>
+<li>.used - number representing the amount used
+<li>.total - number representing the total amount
+<li>.dataAvailable - Flag if there is data available - default: true
+</ul></div></td></tr><tr><td>center-label <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfdonutpctchart-page"><p>specifies the contents of the donut's center label.<br/>
+<strong>Values:</strong></p>
+<ul style='list-style-type: none'>
+<li> 'used' - displays the Used amount in the center label (default)
+<li> 'available' - displays the Available amount in the center label
+<li> 'percent' - displays the Usage Percent of the Total amount in the center label
+<li> 'none' - does not display the center label
+</ul></div></td></tr><tr><td>chartHeight <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-int">int</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfdonutpctchart-page"><p>height of the donut chart</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-charts-directive-page patternfly-charts-directive-pfdonutpctchart-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.charts" source-edit-deps="angular.js script.js" source-edit-html="index.html-9" source-edit-css="" source-edit-js="script.js-10" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-9" ng-html-wrap-loaded="patternfly.charts angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-9">
+ <div ng-controller="ChartCtrl">
+ <div class="container-fluid">
+ <div class="row">
+ <div class="col-md-3 text-center">
+ <label>Error Threshold</label>
+ <div pf-donut-pct-chart config="configErr" data="dataErr"></div>
+ </div>
+ <div class="col-md-3 text-center"">
+ <label>Warning Threshold</label>
+ <div pf-donut-pct-chart config="configWarn" data="dataWarn"></div>
+ </div>
+ <div class="col-md-3 text-center"">
+ <label>Ok</label>
+ <div pf-donut-pct-chart config="configOk" data="dataOk"></div>
+ </div>
+ <div class="col-md-3 text-center"">
+ <label>No Threshold</label>
+ <div pf-donut-pct-chart config="configNoThresh" data="dataNoThresh"></div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-md-12">
+ <hr>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-md-3 text-center">
+ <div pf-donut-pct-chart config="usedConfig" data="usedData" center-label="usedLabel"></div>
+ <label>center-label = 'used'</label>
+ </div>
+ <div class="col-md-3 text-center">
+ <div pf-donut-pct-chart config="availConfig" data="availData" center-label="availLabel"></div>
+ <label>center-label = 'available'</label>
+ </div>
+ <div class="col-md-3 text-center">
+ <div pf-donut-pct-chart config="pctConfig" data="pctData" center-label="pctLabel"></div>
+ <label>center-label = 'percent'</label>
+ </div>
+ <div class="col-md-3 text-center">
+ <div pf-donut-pct-chart config="noneConfig" data="noneData" center-label="noLabel"></div>
+ <label>center-label = ' none'</label>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-md-12">
+ <hr>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-md-12 text-center">
+ <label>Custom Tooltip, Legend, Click handling, and Center Label</label><br>
+ <label><strong>Click on Donut Arc!</strong></label>
+ <div pf-donut-pct-chart config="custConfig" chart-height="custChartHeight" data="custData"></div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-3">
+ <form role="form"">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="custData.dataAvailable">Data Available</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-3">
+ <form role="form" >
+ <div class="form-group">
+ <label>Chart Height</label>
+ </br>
+ <input style="height:25px; width:60px;" type="number" ng-model="custChartHeight"></input>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-10"></pre>
+<script type="text/ng-template" id="script.js-10">
+ angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) {
+ $scope.configErr = {
+ 'chartId': 'chartErr',
+ 'units': 'GB',
+ 'thresholds':{'warning':'60','error':'90'}
+ };
+
+ $scope.dataErr = {
+ 'used': '950',
+ 'total': '1000'
+ };
+
+ $scope.configWarn = {
+ 'chartId': 'chartWarn',
+ 'units': 'GB',
+ 'thresholds':{'warning':'60','error':'90'}
+ };
+
+ $scope.dataWarn = {
+ 'used': '650',
+ 'total': '1000'
+ };
+
+ $scope.configOk = {
+ 'chartId': 'chartOk',
+ 'units': 'GB',
+ 'thresholds':{'warning':'60','error':'90'}
+ };
+
+ $scope.dataOk = {
+ 'used': '550',
+ 'total': '1000'
+ };
+
+ $scope.configNoThresh = {
+ 'chartId': 'chartNoThresh',
+ 'units': 'GB',
+ };
+
+ $scope.dataNoThresh = {
+ 'used': '750',
+ 'total': '1000'
+ };
+
+ $scope.usedConfig = {
+ 'chartId': 'usedChart',
+ 'units': 'GB',
+ 'thresholds':{'warning':'60','error':'90'}
+ };
+
+ $scope.usedData = {
+ 'used': '350',
+ 'total': '1000'
+ };
+
+ $scope.usedLabel = "used";
+
+ $scope.availConfig = {
+ 'chartId': 'availChart',
+ 'units': 'GB',
+ 'thresholds':{'warning':'60','error':'90'}
+ };
+
+ $scope.availData = {
+ 'used': '350',
+ 'total': '1000'
+ };
+
+ $scope.availLabel = "available";
+
+ $scope.pctConfig = {
+ 'chartId': 'pctChart',
+ 'units': 'GB',
+ 'thresholds':{'warning':'60','error':'90'}
+ };
+
+ $scope.pctData = {
+ 'used': '350',
+ 'total': '1000'
+ };
+
+ $scope.pctLabel = "percent";
+
+ $scope.noneConfig = {
+ 'chartId': 'noneChart',
+ 'units': 'GB',
+ 'thresholds':{'warning':'60','error':'90'}
+ };
+
+ $scope.noneData = {
+ 'used': '350',
+ 'total': '1000'
+ };
+
+ $scope.noLabel = "none";
+
+ $scope.custConfig = {
+ 'chartId': 'custChart',
+ 'units': 'MHz',
+ 'thresholds':{'warning':'60','error':'90'},
+ "legend":{"show":true},
+ 'tooltipFn': function (d) {
+ return '<span class="donut-tooltip-pf"style="white-space: nowrap;">' +
+ d[0].value + ' ' + d[0].name +
+ '</span>';
+ },
+ 'centerLabelFn': function () {
+ return $scope.custData.available + " GB";
+ },
+ 'onClickFn': function (d, i) {
+ alert("You Clicked On The Donut!");
+ }
+ };
+
+ $scope.custData = {
+ 'dataAvailable': true,
+ 'used': '670',
+ 'total': '1000'
+ };
+
+ $scope.custChartHeight = 200;
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.charts" ng-set-html="index.html-9" ng-eval-javascript="script.js-10"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.charts.directive.pfHeatMap.html b/dist/docs/partials/api/patternfly.charts.directive.pfHeatMap.html
new file mode 100644
index 000000000..65b127dd0
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.charts.directive.pfHeatMap.html
@@ -0,0 +1,172 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/charts/heatmap/heatmap.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/charts/heatmap/heatmap.directive.js#L145" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfHeatMap</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.charts</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>Directive for rendering a heatmap chart.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-heat-map
+ data="{object}"
+ [chart-data-available="{boolean}"]
+ [height="{number}"]
+ [chart-title="{string}"]
+ [show-legend="{boolean}"]
+ [legend-labels="{array}"]
+ [max-block-size="{number}"]
+ [min-block-size="{number}"]
+ [block-padding="{number}"]
+ [thresholds="{array}"]
+ [heatmap-color-pattern="{array}"]
+ [click-action="{function}"]
+ [range-hover-size="{number}"]
+ [range-on-hover="{boolean}"]
+ [range-tooltips="{array}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>data</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>data for the chart:<br/></p>
+<ul style='list-style-type: none'>
+<li>.id - the id of the measurement
+<li>.value - the value of the measurement
+<li>.tooltip - message to be displayed on hover
+</ul></div></td></tr><tr><td>chartDataAvailable <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>flag if the chart data is available - default: true</p>
+</div></td></tr><tr><td>height <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-number">number</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>height of the chart (no units) - default: 200</p>
+</div></td></tr><tr><td>chartTitle <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>title of the chart</p>
+</div></td></tr><tr><td>showLegend <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>flag to show the legend, defaults to true</p>
+</div></td></tr><tr><td>legendLabels <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-array">array</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>the labels for the legend - defaults: ['< 70%', '70-80%' ,'80-90%', '> 90%']</p>
+</div></td></tr><tr><td>maxBlockSize <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-number">number</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>the maximum size for blocks in the heatmap. Default: 50, Range: 5 - 50</p>
+</div></td></tr><tr><td>minBlockSize <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-number">number</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>the minimum size for blocks in the heatmap. Default: 2</p>
+</div></td></tr><tr><td>blockPadding <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-number">number</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>the padding in pixels between blocks (default: 2)</p>
+</div></td></tr><tr><td>thresholds <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-array">array</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>the threshold values for the heapmap - defaults: [0.7, 0.8, 0.9]</p>
+</div></td></tr><tr><td>heatmapColorPattern <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-array">array</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>the colors that correspond to the various threshold values (lowest to hightest value ex: <70& to >90%) - defaults: ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000']</p>
+</div></td></tr><tr><td>clickAction <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>function(block) function to call when a block is clicked on</p>
+</div></td></tr><tr><td>rangeHoverSize <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-number">number</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>the maximum size for highlighting blocks in the same range. Default: 15</p>
+</div></td></tr><tr><td>rangeOnHover <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>flag to highlight blocks in the same range on hover, defaults to true</p>
+</div></td></tr><tr><td>rangeTooltips <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-array">array</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><p>the tooltips for blocks in the same range - defaults: ['< 70%', '70-80%' ,'80-90%', '> 90%']</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-charts-directive-page patternfly-charts-directive-pfheatmap-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.charts" source-edit-deps="angular.js script.js" source-edit-html="index.html-11" source-edit-css="" source-edit-js="script.js-12" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-11" ng-html-wrap-loaded="patternfly.charts angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-11">
+ <div ng-controller="ChartCtrl">
+ <div class="row">
+ <div class="col-md-5 example-heatmap-container">
+ <div pf-heatmap id="id" chart-title="title" data="data" chart-data-available="dataAvailable"
+ show-legend="showLegends"></div>
+ </div>
+ <div class="col-md-3 example-heatmap-container">
+ <div pf-heatmap id="id" chart-title="titleAlt" data="data" chart-data-available="dataAvailable"
+ show-legend="showLegends" legend-labels="legendLabels" max-block-size="20" block-padding="5"
+ heatmap-color-pattern="heatmapColorPattern" thresholds="thresholds"
+ click-action="clickAction"></div>
+ </div>
+ <div class="col-md-3 example-heatmap-container">
+ <div pf-heatmap id="id" chart-title="titleSmall" data="data" chart-data-available="dataAvailable"
+ show-legend="showLegends" max-block-size="15" range-tooltips="rangeTooltips"></div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-3">
+ <form role="form">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="dataAvailable">Data Available</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-3">
+ <form role="form">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="showLegends">Show Legends</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-12"></pre>
+<script type="text/ng-template" id="script.js-12">
+ angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope) {
+ $scope.data = [
+ {'id': 9,'value': 0.96,'tooltip': 'Node 8 : My OpenShift Provider<br\>96% : 96 Used of 100 Total<br\>4 Available'},
+ {'id': 44, 'value': 0.94, 'tooltip': 'Node 19 : My Kubernetes Provider<br\>94% : 94 Used of 100 Total<br\>6 Available'},
+ {'id': 0, 'value': 0.91, 'tooltip': 'Node 9 : My OpenShift Provider<br\>91% : 91 Used of 100 Total<br\>9 Available'},
+ {'id': 43, 'value': 0.9, 'tooltip': 'Node 18 : My Kubernetes Provider<br\>90% : 90 Used of 100 Total<br\>10 Available'},
+ {'id': 7, 'value': 0.89, 'tooltip': 'Node 12 : My OpenShift Provider<br\>89% : 89 Used of 100 Total<br\>11 Available'},
+ {'id': 41, 'value': 0.82, 'tooltip': 'Node 16 : My Kubernetes Provider<br\>82% : 82 Used of 100 Total<br\>18 Available'},
+ {'id': 21, 'value': 0.81, 'tooltip': 'Node 21 : My OpenShift Provider<br\>81% : 81 Used of 100 Total<br\>19 Available'},
+ {'id': 26, 'value': 0.8, 'tooltip': 'Node 1 : My Kubernetes Provider<br\>80% : 80 Used of 100 Total<br\>20 Available'},
+ {'id': 48, 'value': 0.74, 'tooltip': 'Node 23 : My Kubernetes Provider<br\>74% : 74 Used of 100 Total<br\>26 Available'},
+ {'id': 27, 'value': 0.72, 'tooltip': 'Node 2 : My Kubernetes Provider<br\>72% : 72 Used of 100 Total<br\>28 Available'},
+ {'id': 42, 'value': 0.71, 'tooltip': 'Node 17 : My Kubernetes Provider<br\>71% : 71 Used of 100 Total<br\>29 Available'},
+ {'id': 23, 'value': 0.71, 'tooltip': 'Node 23 : My OpenShift Provider<br\>71% : 71 Used of 100 Total<br\>29 Available'},
+ {'id': 22, 'value': 0.69, 'tooltip': 'Node 22 : My OpenShift Provider<br\>69% : 69 Used of 100 Total<br\>31 Available'},
+ {'id': 2, 'value': 0.66, 'tooltip': 'Node 2 : M8y OpenShift Provider<br\>66% : 66 Used of 100 Total<br\>34 Available'},
+ {'id': 39, 'value': 0.66, 'tooltip': 'Node 14 : My Kubernetes Provider<br\>66% : 66 Used of 100 Total<br\>34 Available'},
+ {'id': 3, 'value': 0.65, 'tooltip': 'Node 39 : My OpenShift Provider<br\>65% : 65 Used of 100 Total<br\>35 Available'},
+ {'id': 29, 'value': 0.65, 'tooltip': 'Node 4 : My Kubernetes Provider<br\>65% : 65 Used of 100 Total<br\>35 Available'},
+ {'id': 32, 'value': 0.56, 'tooltip': 'Node 7 : My Kubernetes Provider<br\>56% : 56 Used of 100 Total<br\>44 Available'},
+ {'id': 13, 'value': 0.56, 'tooltip': 'Node 13 : My OpenShift Provider<br\>56% : 56 Used of 100 Total<br\>44 Available'},
+ {'id': 49, 'value': 0.52, 'tooltip': 'Node 24 : My Kubernetes Provider<br\>52% : 52 Used of 100 Total<br\>48 Available'},
+ {'id': 36, 'value': 0.5, 'tooltip': 'Node 11 : My Kubernetes Provider<br\>50% : 50 Used of 100 Total<br\>50 Available'},
+ {'id': 6, 'value': 0.5, 'tooltip': 'Node 5 : My OpenShift Provider<br\>50% : 50 Used of 100 Total<br\>50 Available'},
+ {'id': 38, 'value': 0.49, 'tooltip': 'Node 13 : My Kubernetes Provider<br\>49% : 49 Used of 100 Total<br\>51 Available'},
+ {'id': 15, 'value': 0.48, 'tooltip': 'Node 15 : My OpenShift Provider<br\>48% : 48 Used of 100 Total<br\>52 Available'},
+ {'id': 30, 'value': 0.48, 'tooltip': 'Node 5 : My Kubernetes Provider<br\>48% : 48 Used of 100 Total<br\>52 Available'},
+ {'id': 11, 'value': 0.47, 'tooltip': 'Node 11 : My OpenShift Provider<br\>47% : 47 Used of 100 Total<br\>53 Available'},
+ {'id': 17, 'value': 0.46, 'tooltip': 'Node 17 : My OpenShift Provider<br\>46% : 46 Used of 100 Total<br\>54 Available'},
+ {'id': 25, 'value': 0.45, 'tooltip': 'Node 0 : My Kubernetes Provider<br\>45% : 45 Used of 100 Total<br\>55 Available'},
+ {'id': 50, 'value': 0.45, 'tooltip': 'Node 25 : My Kubernetes Provider<br\>45% : 45 Used of 100 Total<br\>55 Available'},
+ {'id': 46, 'value': 0.45, 'tooltip': 'Node 21 : My Kubernetes Provider<br\>45% : 45 Used of 100 Total<br\>55 Available'},
+ {'id': 47, 'value': 0.45, 'tooltip': 'Node 22 : My Kubernetes Provider<br\>45% : 45 Used of 100 Total<br\>55 Available'},
+ {'id': 1, 'value': 0.44, 'tooltip': 'Node 1 : My OpenShift Provider<br\>44% : 44 Used of 100 Total<br\>56 Available'},
+ {'id': 31, 'value': 0.44, 'tooltip': 'Node 6 : My Kubernetes Provider<br\>44% : 44 Used of 100 Total<br\>56 Available'},
+ {'id': 37, 'value': 0.44, 'tooltip': 'Node 12 : My Kubernetes Provider<br\>44% : 44 Used of 100 Total<br\>56 Available'},
+ {'id': 24, 'value': 0.44, 'tooltip': 'Node 24 : My OpenShift Provider<br\>44% : 44 Used of 100 Total<br\>56 Available'},
+ {'id': 40, 'value': 0.43, 'tooltip': 'Node 40 : My Kubernetes Provider<br\>43% : 43 Used of 100 Total<br\>57 Available'},
+ {'id': 20, 'value': 0.39, 'tooltip': 'Node 20 : My OpenShift Provider<br\>39% : 39 Used of 100 Total<br\>61 Available'},
+ {'id': 8, 'value': 0.39, 'tooltip': 'Node 8 : My OpenShift Provider<br\>39% : 39 Used of 100 Total<br\>61 Available'},
+ {'id': 5, 'value': 0.38, 'tooltip': 'Node 5 : My OpenShift Provider<br\>38% : 38 Used of 100 Total<br\>62 Available'},
+ {'id': 45, 'value': 0.37, 'tooltip': 'Node 20 : My Kubernetes Provider<br\>37% : 37 Used of 100 Total<br\>63 Available'},
+ {'id': 12, 'value': 0.37, 'tooltip': 'Node 12 : My OpenShift Provider<br\>37% : 37 Used of 100 Total<br\>63 Available'},
+ {'id': 34, 'value': 0.37, 'tooltip': 'Node 9 : My Kubernetes Provider<br\>37% : 37 Used of 100 Total<br\>63 Available'},
+ {'id': 33, 'value': 0.33, 'tooltip': 'Node 8 : My Kubernetes Provider<br\>33% : 33 Used of 100 Total<br\>67 Available'},
+ {'id': 16, 'value': 0.32, 'tooltip': 'Node 16 : My OpenShift Provider<br\>32% : 32 Used of 100 Total<br\>68 Available'},
+ {'id': 10, 'value': 0.29, 'tooltip': 'Node 10 : My OpenShift Provider<br\>28% : 29 Used of 100 Total<br\>71 Available'},
+ {'id': 35, 'value': 0.28, 'tooltip': 'Node 35 : My Kubernetes Provider<br\>28% : 28 Used of 100 Total<br\>72 Available'},
+ {'id': 18, 'value': 0.27, 'tooltip': 'Node 18 : My OpenShift Provider<br\>27% : 27 Used of 100 Total<br\>73 Available'},
+ {'id': 4, 'value': 0.26, 'tooltip': 'Node 4 : My OpenShift Provider<br\>26% : 26 Used of 100 Total<br\>74 Available'},
+ {'id': 19, 'value': 0.25, 'tooltip': 'Node 19 : My OpenShift Provider<br\>25% : 25 Used of 100 Total<br\>75 Available'},
+ {'id': 28, 'value': 0.25, 'tooltip': 'Node 3 : My Kubernetes Provider<br\>25% : 25 Used of 100 Total<br\>75 Available'},
+ {'id': 51, 'value': 0.22, 'tooltip': 'Node 26 : My Kubernetes Provider<br\>22% : 22 Used of 100 Total<br\>78 Available'},
+ {'id': 14, 'value': 0.2, 'tooltip': 'Node 14 : My OpenShift Provider<br\>20% : 20 Used of 100 Total<br\>80 Available'}];
+
+ $scope.dataAvailable = true;
+ $scope.title = 'Utilization - Using Defaults';
+ $scope.titleAlt = 'Utilization - Overriding Defaults';
+ $scope.titleSmall = 'Utilization - Small Blocks';
+ $scope.legendLabels = ['< 60%','70%', '70-80%' ,'80-90%', '> 90%'];
+ $scope.rangeTooltips = ['Memory Utilization < 70%<br\>40 Nodes', 'Memory Utilization 70-80%<br\>4 Nodes', 'Memory Utilization 80-90%<br\>4 Nodes', 'Memory Utilization > 90%<br\>4 Nodes'];
+ $scope.thresholds = [0.6, 0.7, 0.8, 0.9];
+ $scope.heatmapColorPattern = ['#d4f0fa', '#F9D67A', '#EC7A08', '#CE0000', '#f00'];
+
+ $scope.showLegends = true;
+ var clickAction = function (block) {
+ console.log(block);
+ };
+ $scope.clickAction = clickAction;
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.charts" ng-set-html="index.html-11" ng-eval-javascript="script.js-12"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.charts.directive.pfLineChart.html b/dist/docs/partials/api/patternfly.charts.directive.pfLineChart.html
new file mode 100644
index 000000000..81c0cd6fb
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.charts.directive.pfLineChart.html
@@ -0,0 +1,141 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/charts/line/line-chart.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/charts/line/line-chart.directive.js#L128" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfLineChart</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.charts</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-charts-directive-page patternfly-charts-directive-pflinechart-page"><p>Directive for rendering a line chart.
+<br><br>
+See <a href="http://c3js.org/reference.html">http://c3js.org/reference.html</a> for a full list of C3 chart options.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-line-chart
+ config="{object}"
+ chart-data="{object}"
+ [show-x-axis="{boolean}"]
+ [show-y-axis="{boolean}"]
+ [set-area-chart="{boolean}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>config</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pflinechart-page"><p>configuration settings for the line chart:<br/></p>
+<ul style='list-style-type: none'>
+<li>.chartId - the ID of the container that the chart should bind to
+<li>.units - unit label for values, ex: 'MHz','GB', etc..
+<li>.tooltipFn - (optional) override the tooltip contents generation functions. Should take a data point and
+ return HTML markup for the tooltip contents. Setting this overrides the tooltipType value.
+<li>.area - (optional) overrides the default Area properties of the C3 chart
+<li>.size - (optional) overrides the default Size properties of the C3 chart
+<li>.axis - (optional) overrides the default Axis properties of the C3 chart
+<li>.color - (optional) overrides the default Color properties of the C3 chart
+<li>.legend - (optional) overrides the default Legend properties of the C3 chart
+<li>.point - (optional) overrides the default Point properties of the C3 chart
+</ul></div></td></tr><tr><td>chartData</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pflinechart-page"><p>the data to be shown as an area chart<br/>
+First and second Array elements, xData and yData, must exist, next data arrays are optional.<br/></p>
+<ul style='list-style-type: none'>
+<li>.xData - Array, X values for the data points, first element must be the name of the data
+<li>.yData - Array, Y Values for the data points, first element must be the name of the data
+<li>.yData1 - Array, Y Values for the data points, first element must be the name of the data
+<li>.[...] - Array, Y Values for the data points, first element must be the name of the data
+</ul></div></td></tr><tr><td>showXAxis <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pflinechart-page"><p>override config settings for showing the X Axis</p>
+</div></td></tr><tr><td>showYAxis <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pflinechart-page"><p>override config settings for showing the Y Axis</p>
+</div></td></tr><tr><td>setAreaChart <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pflinechart-page"><p>override config settings for showing area type chart</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-charts-directive-page patternfly-charts-directive-pflinechart-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.charts" source-edit-deps="angular.js script.js" source-edit-html="index.html-13" source-edit-css="" source-edit-js="script.js-14" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-13" ng-html-wrap-loaded="patternfly.charts angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-13">
+ <div ng-controller="ChartCtrl" class="row" style="display:inline-block; width: 100%;">
+ <div class="col-md-12">
+ <div pf-line-chart config="config" chart-data="data" set-area-chart="custAreaChart" show-x-axis="custShowXAxis" show-y-axis="custShowYAxis"></div>
+ </div>
+ <hr class="col-md-12">
+ <div class="col-md-12">
+ <div class="row">
+ <div class="col-md-6">
+ <form role="form"">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="custShowXAxis">X Axis</input>
+ </label>
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="custShowYAxis">Y Axis</input>
+ </label>
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="custAreaChart">Area Chart</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-3">
+ <button ng-click="addDataPoint()">Add Data Point</button>
+ <button ng-click="resetData()">Reset Data</button>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-12">
+ <div class="row">
+ <div class="col-md-6">
+ <form role="form"">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="data.dataAvailable">Data Available</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-14"></pre>
+<script type="text/ng-template" id="script.js-14">
+ angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope, pfUtils ) {
+
+ $scope.config = {
+ chartId: 'exampleLine',
+ grid: {y: {show: false}},
+ point: {r: 1},
+ color: {pattern: [pfUtils.colorPalette.blue, pfUtils.colorPalette.green]}
+ };
+
+ var today = new Date();
+ var dates = ['dates'];
+ for (var d = 20 - 1; d >= 0; d--) {
+ dates.push(new Date(today.getTime() - (d * 24 * 60 * 60 * 1000)));
+ }
+
+ $scope.data = {
+ dataAvailable: true,
+ xData: dates,
+ yData0: ['Created', 12, 10, 10, 62, 17, 10, 15, 13, 17, 10, 12, 10, 10, 12, 17, 16, 15, 13, 17, 10],
+ yData1: ['Deleted', 10, 17, 76, 14, 10, 10, 10, 10, 10, 10, 10, 17, 17, 14, 10, 10, 10, 10, 10, 10]
+ };
+
+ $scope.custShowXAxis = false;
+ $scope.custShowYAxis = false;
+ $scope.custAreaChart = false;
+
+ $scope.addDataPoint = function () {
+ $scope.data.xData.push(new Date($scope.data.xData[$scope.data.xData.length - 1].getTime() + (24 * 60 * 60 * 1000)));
+ $scope.data.yData0.push(Math.round(Math.random() * 100));
+ $scope.data.yData1.push(Math.round(Math.random() * 100));
+ };
+
+ $scope.resetData = function () {
+ $scope.data = {
+ xData: dates,
+ yData0: ['Created', 12, 10, 10, 62],
+ yData1: ['Deleted', 10, 17, 76, 14]
+ };
+ };
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.charts" ng-set-html="index.html-13" ng-eval-javascript="script.js-14"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.charts.directive.pfSparklineChart.html b/dist/docs/partials/api/patternfly.charts.directive.pfSparklineChart.html
new file mode 100644
index 000000000..e140fb558
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.charts.directive.pfSparklineChart.html
@@ -0,0 +1,159 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/charts/sparkline/sparkline-chart.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/charts/sparkline/sparkline-chart.directive.js#L146" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfSparklineChart</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.charts</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-charts-directive-page patternfly-charts-directive-pfsparklinechart-page"><p>Directive for rendering a sparkline chart.
+<br><br>
+See <a href="http://c3js.org/reference.html">http://c3js.org/reference.html</a> for a full list of C3 chart options.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-sparkline-chart
+ config="{object}"
+ chart-data="{object}"
+ [chart-height="{int}"]
+ [show-x-axis="{boolean}"]
+ [show-y-axis="{boolean}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>config</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfsparklinechart-page"><p>configuration settings for the sparkline chart:<br/></p>
+<ul style='list-style-type: none'>
+<li>.chartId - the ID of the container that the chart should bind to
+<li>.units - unit label for values, ex: 'MHz','GB', etc..
+<li>.tooltipType - (optional) set the type of tooltip, valid values:
+<ul style='list-style-type: none'>
+<li>'default' - show the data point value and the data point name.
+<li>'usagePerDay' - show the date, percent used, and used value for the data point.
+<li>'valuePerDay' - show the date and value for the data point.
+<li>'percentage' - show the current data point as a percentage.
+</ul>
+<li>.tooltipFn - (optional) override the tooltip contents generation functions. Should take a data point and
+ return HTML markup for the tooltip contents. Setting this overrides the tooltipType value.
+<li>.area - (optional) overrides the default Area properties of the C3 chart
+<li>.size - (optional) overrides the default Size properties of the C3 chart
+<li>.axis - (optional) overrides the default Axis properties of the C3 chart
+<li>.color - (optional) overrides the default Color properties of the C3 chart
+<li>.legend - (optional) overrides the default Legend properties of the C3 chart
+<li>.point - (optional) overrides the default Point properties of the C3 chart
+</ul></div></td></tr><tr><td>chartData</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfsparklinechart-page"><p>the data to be shown as an area chart<br/></p>
+<ul style='list-style-type: none'>
+<li>.xData - Array, X values for the data points, first element must be the name of the data
+<li>.yData - Array, Y Values for the data points, first element must be the name of the data
+<li>.total - (optional) The Total amount, used when determining percentages
+<li>.dataAvailable - Flag if there is data available - default: true
+</ul></div></td></tr><tr><td>chartHeight <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-int">int</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfsparklinechart-page"><p>height of the sparkline chart</p>
+</div></td></tr><tr><td>showXAxis <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfsparklinechart-page"><p>override config settings for showing the X Axis</p>
+</div></td></tr><tr><td>showYAxis <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfsparklinechart-page"><p>override config settings for showing the Y Axis</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-charts-directive-page patternfly-charts-directive-pfsparklinechart-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.charts" source-edit-deps="angular.js script.js" source-edit-html="index.html-15" source-edit-css="" source-edit-js="script.js-16" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-15" ng-html-wrap-loaded="patternfly.charts angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-15">
+ <div ng-controller="ChartCtrl" class="row" style="display:inline-block; width: 100%;">
+ <div class="col-md-12">
+ <div pf-sparkline-chart config="config" chart-data="data" chart-height="custChartHeight" show-x-axis="custShowXAxis" show-y-axis="custShowYAxis"></div>
+ </div>
+ <hr class="col-md-12">
+ <div class="col-md-12">
+ <form role="form">
+ <div class="form-group">
+ <label>Tooltip Type</label>
+ </br>
+ <label class="radio-inline">
+ <input type="radio" ng-model="config.tooltipType" value="default">Default</input>
+ </label>
+ <label class="radio-inline">
+ <input type="radio" ng-model="config.tooltipType" value="usagePerDay">Usage Per Day</input>
+ </label>
+ <label class="radio-inline">
+ <input type="radio" ng-model="config.tooltipType" value="valuePerDay">Value Per Day</input>
+ </label>
+ <label class="radio-inline">
+ <input type="radio" ng-model="config.tooltipType" value="percentage">Percentage</input>
+ </label>
+ </div>
+ </form>
+ <div class="row">
+ <div class="col-md-6">
+ <form role="form"">
+ <div class="form-group">
+ <label>Show</label>
+ </br>
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="custShowXAxis">X Axis</input>
+ </label>
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="custShowYAxis">Y Axis</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-3">
+ <form role="form" >
+ <div class="form-group">
+ <label>Chart Height</label>
+ </br>
+ <input style="height:25px; width:60px;" type="number" ng-model="custChartHeight"></input>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-3">
+ <button ng-click="addDataPoint()">Add Data Point</button>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <form role="form"">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="data.dataAvailable">Data Available</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-16"></pre>
+<script type="text/ng-template" id="script.js-16">
+ angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) {
+
+ $scope.config = {
+ chartId: 'exampleSparkline',
+ tooltipType: 'default'
+ };
+
+ var today = new Date();
+ var dates = ['dates'];
+ for (var d = 20 - 1; d >= 0; d--) {
+ dates.push(new Date(today.getTime() - (d * 24 * 60 * 60 * 1000)));
+ }
+
+ $scope.data = {
+ dataAvailable: true,
+ total: 100,
+ xData: dates,
+ yData: ['used', 10, 20, 30, 20, 30, 10, 14, 20, 25, 68, 54, 56, 78, 56, 67, 88, 76, 65, 87, 76]
+ };
+
+ $scope.custShowXAxis = false;
+ $scope.custShowYAxis = false;
+ $scope.custChartHeight = 60;
+
+ $scope.addDataPoint = function () {
+ $scope.data.xData.push(new Date($scope.data.xData[$scope.data.xData.length - 1].getTime() + (24 * 60 * 60 * 1000)));
+ $scope.data.yData.push(Math.round(Math.random() * 100));
+ };
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.charts" ng-set-html="index.html-15" ng-eval-javascript="script.js-16"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.charts.directive.pfTrendsChart.html b/dist/docs/partials/api/patternfly.charts.directive.pfTrendsChart.html
new file mode 100644
index 000000000..d55578d65
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.charts.directive.pfTrendsChart.html
@@ -0,0 +1,179 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/charts/trends/trends-chart.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/charts/trends/trends-chart.directive.js#L164" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfTrendsChart</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.charts</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-charts-directive-page patternfly-charts-directive-pftrendschart-page"><p>Directive for rendering a trend chart. The trend chart combines overall data with a
+pfSparklineChart.
+<br><br>
+See <a href="http://c3js.org/reference.html">http://c3js.org/reference.html</a> for a full list of C3 chart options.<br>
+See also: <a href="#/api/patternfly.charts.directive:pfSparklineChart">patternfly.charts.directive:pfSparklineChart</a></p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-trends-chart
+ config="{object}"
+ chart-data="{object}"
+ [chart-height="{int}"]
+ [show-x-axis="{boolean}"]
+ [show-y-axis="{boolean}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>config</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pftrendschart-page"><p>configuration settings for the trends chart:<br/></p>
+<ul style='list-style-type: none'>
+<li>.chartId - the unique id of this trends chart
+<li>.title - (optional) title of the Trends chart
+<li>.layout - (optional) the layout and sizes of titles and chart. Values are 'large' (default), 'small', 'compact', and 'inline'
+<li>.trendLabel - (optional) the trend label used in the 'inline' layout
+<li>.timeFrame - (optional) the time frame for the data in the pfSparklineChart, ex: 'Last 30 Days'
+<li>.units - unit label for values, ex: 'MHz','GB', etc..
+<li>.valueType - (optional) the format of the latest data point which is shown in the title. Values are 'actual'(default) or 'percentage'
+</ul></div></td></tr><tr><td>chartData</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pftrendschart-page"><p>the data to be shown in the sparkline charts<br/></p>
+<ul style='list-style-type: none'>
+<li>.total - number representing the total amount
+<li>.xData - Array, X values for the data points, first element must be the name of the data
+<li>.yData - Array, Y Values for the data points, first element must be the name of the data
+<li>.dataAvailable - Flag if there is data available - default: true
+</ul></div></td></tr><tr><td>chartHeight <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-int">int</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pftrendschart-page"><p>height of the sparkline chart</p>
+</div></td></tr><tr><td>showXAxis <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pftrendschart-page"><p>override sparkline config settings for showing the X Axis</p>
+</div></td></tr><tr><td>showYAxis <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pftrendschart-page"><p>override sparkline config settings for showing the Y Axis</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-charts-directive-page patternfly-charts-directive-pftrendschart-page"><h4 id="example_source">Source</h4>
+<div source-edit="demo" source-edit-deps="angular.js script.js" source-edit-html="index.html-17" source-edit-css="" source-edit-js="script.js-18" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-17" ng-html-wrap-loaded="demo angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-17">
+ <div ng-controller="ChartCtrl" class="row" style="display:inline-block; width: 100%;">
+ <div class="col-md-12">
+ <div pf-trends-chart config="config" chart-data="data"
+ show-x-axis="custShowXAxis" show-y-axis="custShowYAxis"></div>
+ </div>
+ <hr class="col-md-12">
+ <div class="col-md-12">
+ <div class="row">
+ <div class="col-md-4">
+ <form role="form"">
+ <div class="form-group">
+ <label>Show</label></br>
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="custShowXAxis">X Axis</input>
+ </label>
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="custShowYAxis">Y Axis</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-3">
+ <form role="form" >
+ <div class="form-group">
+ <label>Layout</label></br>
+ <select pf-select class="pf-select-sm" ng-model="layout" id="layout">
+ <option value="large" ng-selected="true" selected>Large</option>
+ <option value="small">Small</option>
+ <option value="compact">Compact</option>
+ <option value="inline">Inline</option>
+ </select>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-3">
+ <form role="form" ng-hide="layout == 'inline'">
+ <div class="form-group">
+ <label>Title Value Type</label></br>
+ <select pf-select class="pf-select-sm" ng-model="valueType" id="valueType">
+ <option value="actual" ng-selected="true" selected>Actual</option>
+ <option value="percentage">Percentage</option>
+ </select>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-2">
+ <button ng-click="addDataPoint()">Add Data Point</button>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <form role="form"">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="data.dataAvailable">Data Available</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-18"></pre>
+<script type="text/ng-template" id="script.js-18">
+angular.module( 'demo', ['patternfly.charts', 'patternfly.card'] ).controller( 'ChartCtrl', function( $scope ) {
+
+ $scope.config = {
+ chartId : 'exampleTrendsChart',
+ title : 'Network Utilization Trends',
+ layout : 'large',
+ trendLabel : 'Virtual Disk I/O',
+ valueType : 'actual',
+ timeFrame : 'Last 15 Minutes',
+ units : 'MHz',
+ tooltipType : 'percentage'
+ };
+
+ $scope.footerConfig = {
+ iconClass : 'fa fa-plus-circle',
+ text : 'Add New Cluster',
+ callBackFn: function () {
+ alert("Footer Callback Fn Called");
+ }
+ }
+
+ $scope.filterConfig = {
+ filters : [{label:'Last 30 Days', value:'30'},
+ {label:'Last 15 Days', value:'15'},
+ {label:'Today', value:'today'}],
+ callBackFn: function (f) {
+ alert("Filter Callback Fn Called for '" + f.label + "' value = " + f.value);
+ }
+ }
+
+ var today = new Date();
+ var dates = ['dates'];
+ for (var d = 20 - 1; d >= 0; d--) {
+ dates.push(new Date(today.getTime() - (d * 24 * 60 * 60 * 1000)));
+ }
+
+ $scope.data = {
+ dataAvailable: true,
+ total: 250,
+ xData: dates,
+ yData: ['used', 10, 20, 30, 20, 30, 10, 14, 20, 25, 68, 54, 56, 78, 56, 67, 88, 76, 65, 87, 76]
+ };
+
+ $scope.custShowXAxis = false;
+ $scope.custShowYAxis = false;
+
+ $scope.addDataPoint = function () {
+ $scope.data.xData.push(new Date($scope.data.xData[$scope.data.xData.length - 1].getTime() + (24 * 60 * 60 * 1000)));
+ $scope.data.yData.push(Math.round(Math.random() * 100));
+ };
+
+ $scope.$watch('valueType', function (newValue) {
+ $scope.config.valueType = newValue;
+ });
+
+ $scope.$watch('layout', function (newValue) {
+ $scope.config.layout = newValue;
+ });
+
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="demo" ng-set-html="index.html-17" ng-eval-javascript="script.js-18"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.charts.directive.pfUtilizationBarChart.html b/dist/docs/partials/api/patternfly.charts.directive.pfUtilizationBarChart.html
new file mode 100644
index 000000000..19818dc13
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.charts.directive.pfUtilizationBarChart.html
@@ -0,0 +1,146 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/charts/utilization-bar/utilization-bar-chart.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/charts/utilization-bar/utilization-bar-chart.directive.js#L131" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfUtilizationBarChart</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.charts</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationbarchart-page"><p>Directive for rendering a utilization bar chart
+There are three possible fill colors for Used Percentage, dependent on whether or not there are thresholds:<br/></p>
+<ul>
+<li>When no thresholds exist, or if the used percentage has not surpassed any thresholds, the indicator is blue.
+<li>When the used percentage has surpassed the warning threshold, but not the error threshold, the indicator is orange.
+<li>When the used percentage has surpassed the error threshold, the indicator is is red.
+</ul></div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-utilization-bar-chart
+ chart-data="{object}"
+ [chart-title="{object}"]
+ [chart-footer="{object}"]
+ [layout="{object}"]
+ [footer-label-format="{string}"]
+ [units="{object}"]
+ [threshold-error="{string}"]
+ [threshold-warning="{string}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>chartData</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationbarchart-page"><p>the data to be shown in the utilization bar chart<br/></p>
+<ul style='list-style-type: none'>
+<li>.used - number representing the amount used
+<li>.total - number representing the total amount
+<li>.dataAvailable - Flag if there is data available - default: true
+</ul></div></td></tr><tr><td>chart-title <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationbarchart-page"><p>The title displayed on the left-hand side of the chart</p>
+</div></td></tr><tr><td>chart-footer <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationbarchart-page"><p>The label displayed on the right-hand side of the chart. If chart-footer is not
+specified, the automatic footer-label-format will be used.</p>
+</div></td></tr><tr><td>layout <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationbarchart-page"><p>Various alternative layouts the utilization bar chart may have:<br/></p>
+<ul style='list-style-type: none'>
+<li>.type - The type of layout to use. Valid values are 'regular' (default) displays the standard chart layout,
+and 'inline' displays a smaller, inline layout.</li>
+<li>.titleLabelWidth - Width of the left-hand title label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..</li>
+<li>.footerLabelWidth - Width of the right-hand used label when using 'inline' layout. Example values are "120px", "20%", "10em", etc..</li>
+</ul></div></td></tr><tr><td>footer-label-format <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationbarchart-page"><p>The auto-format of the label on the right side of the bar chart when chart-footer
+has not been specified. Values may be:<br/></p>
+<ul style='list-style-type: none'>
+<li>'actual' - (default) displays the standard label of '(n) of (m) (units) Used'.
+<li>'percent' - displays a percentage label of '(n)% Used'.</li>
+</ul></div></td></tr><tr><td>units <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationbarchart-page"><p>to be displayed on the chart. Examples: "GB", "MHz", "I/Ops", etc...</p>
+</div></td></tr><tr><td>threshold-error <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationbarchart-page"><p>The percentage used, when reached, denotes an error. Valid values are 1-100. When the error threshold
+has been reached, the used donut arc will be red.</p>
+</div></td></tr><tr><td>threshold-warning <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationbarchart-page"><p>The percentage usage, when reached, denotes a warning. Valid values are 1-100. When the warning threshold
+has been reached, the used donut arc will be orange.</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationbarchart-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.example" source-edit-deps="angular.js script.js" source-edit-html="index.html-19" source-edit-css="" source-edit-js="script.js-20" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-19" ng-html-wrap-loaded="patternfly.example angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-19">
+ <div ng-controller="ChartCtrl">
+
+ <label class="label-title">Default Layout, no Thresholds</label>
+ <div pf-utilization-bar-chart chart-data=data1 chart-title=title1
+ units=units1></div>
+ <br>
+ <label class="label-title">Inline Layouts with Error, Warning, and Ok Thresholds</label>
+ <div pf-utilization-bar-chart chart-data=data5 chart-title=title5 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60">../utilization-trend/utilization-trend-chart-directive.js</div>
+ <div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline units=units3 threshold-error="85" threshold-warning="60"></div>
+ <div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline units=units2 threshold-error="85" threshold-warning="60"></div>
+ <br>
+ <label class="label-title">layout='inline', footer-label-format='percent', and custom chart-footer labels</label>
+ <div pf-utilization-bar-chart chart-data=data2 chart-title=title2 layout=layoutInline footer-label-format='percent' units=units2 threshold-error="85" threshold-warning="60"></div>
+ <div pf-utilization-bar-chart chart-data=data3 chart-title=title3 layout=layoutInline footer-label-format='percent' units=units3 threshold-error="85" threshold-warning="60"></div>
+ <div pf-utilization-bar-chart chart-data=data4 chart-title=title4 chart-footer=footer1 layout=layoutInline units=units4 threshold-error="85" threshold-warning="60"></div>
+ <div pf-utilization-bar-chart chart-data=data5 chart-title=title5 chart-footer=footer2 layout=layoutInline units=units5 threshold-error="85" threshold-warning="60"></div>
+ <div class="row">
+ <div class="col-md-6">
+ <form role="form"">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="data1.dataAvailable">Data Available</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-20"></pre>
+<script type="text/ng-template" id="script.js-20">
+angular.module( 'patternfly.example', ['patternfly.charts', 'patternfly.card']);
+
+angular.module( 'patternfly.example' ).controller( 'ChartCtrl', function( $scope ) {
+
+ $scope.title1 = 'RAM Usage';
+ $scope.units1 = 'MB';
+
+ $scope.data1 = {
+ 'dataAvailable': true,
+ 'used': '8',
+ 'total': '24'
+ };
+
+ $scope.title2 = 'Memory';
+ $scope.units2 = 'GB';
+
+ $scope.data2 = {
+ 'used': '25',
+ 'total': '100'
+ };
+
+ $scope.title3 = 'CPU Usage';
+ $scope.units3 = 'MHz';
+
+ $scope.data3 = {
+ 'used': '420',
+ 'total': '500',
+ };
+
+ $scope.title4 = 'Disk Usage';
+ $scope.units4 = 'TB';
+ $scope.data4 = {
+ 'used': '350',
+ 'total': '500',
+ };
+
+ $scope.title5 = 'Disk I/O';
+ $scope.units5 = 'I/Ops';
+ $scope.data5 = {
+ 'used': '450',
+ 'total': '500',
+ };
+
+ $scope.layoutInline = {
+ 'type': 'inline'
+ };
+
+ $scope.footer1 = '<strong>500 TB</strong> Total';
+ $scope.footer2 = '<strong>450 of 500</strong> Total';
+
+});
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.example" ng-set-html="index.html-19" ng-eval-javascript="script.js-20"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.charts.directive.pfUtilizationTrendChart.html b/dist/docs/partials/api/patternfly.charts.directive.pfUtilizationTrendChart.html
new file mode 100644
index 000000000..67d6655e5
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.charts.directive.pfUtilizationTrendChart.html
@@ -0,0 +1,198 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/charts/utilization-trend/utilization-trend-chart-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/charts/utilization-trend/utilization-trend-chart-directive.js#L184" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfUtilizationTrendChart</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.charts</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationtrendchart-page"><p>Directive for rendering a utilization trend chart. The utilization trend chart combines overall
+data with a pfDonutPctChart and a pfSparklineChart. Add the options for the pfDonutChart via
+the donutConfig parameter. Add the options for the pfSparklineChart via the sparklineConfig
+parameter.
+<br><br>
+See <a href="http://c3js.org/reference.html">http://c3js.org/reference.html</a> for a full list of C3 chart options.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-utilization-trend-chart
+ config="{object}"
+ donut-config="{object}"
+ sparkline-config="{object}"
+ chart-data="{object}"
+ [donut-center-label="{string}"]
+ [sparkline-chart-height="{int}"]
+ [show-sparkline-x-axis="{boolean}"]
+ [show-sparkline-y-axis="{boolean}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>config</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationtrendchart-page"><p>configuration settings for the utilization trend chart:<br/></p>
+<ul style='list-style-type: none'>
+<li>.title - title of the Utilization chart
+<li>.units - unit label for values, ex: 'MHz','GB', etc..
+</ul></div></td></tr><tr><td>donutConfig</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationtrendchart-page"><p>configuration settings for the donut pct chart, see pfDonutPctChart for specifics<br/></p>
+</div></td></tr><tr><td>sparklineConfig</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationtrendchart-page"><p>configuration settings for the sparkline chart, see pfSparklineChart for specifics<br/></p>
+</div></td></tr><tr><td>chartData</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationtrendchart-page"><p>the data to be shown in the donut and sparkline charts<br/></p>
+<ul style='list-style-type: none'>
+<li>.used - number representing the amount used
+<li>.total - number representing the total amount
+<li>.xData - Array, X values for the data points, first element must be the name of the data
+<li>.yData - Array, Y Values for the data points, first element must be the name of the data
+<li>.dataAvailable - Flag if there is data available - default: true
+</ul></div></td></tr><tr><td>donutCenterLabel <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationtrendchart-page"><p>specifies the contents of the donut's center label.<br/>
+<strong>Values:</strong></p>
+<ul style='list-style-type: none'>
+<li> 'used' - displays the Used amount in the center label (default)
+<li> 'available' - displays the Available amount in the center label
+<li> 'percent' - displays the Usage Percent of the Total amount in the center label
+<li> 'none' - does not display the center label
+</ul></div></td></tr><tr><td>sparklineChartHeight <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-int">int</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationtrendchart-page"><p>height of the sparkline chart</p>
+</div></td></tr><tr><td>showSparklineXAxis <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationtrendchart-page"><p>override sparkline config settings for showing the X Axis</p>
+</div></td></tr><tr><td>showSparklineYAxis <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationtrendchart-page"><p>override sparkline config settings for showing the Y Axis</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-charts-directive-page patternfly-charts-directive-pfutilizationtrendchart-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.charts" source-edit-deps="angular.js script.js" source-edit-html="index.html-21" source-edit-css="" source-edit-js="script.js-22" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-21" ng-html-wrap-loaded="patternfly.charts angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-21">
+ <div ng-controller="ChartCtrl" class="row" style="display:inline-block; width: 100%;">
+ <div class="col-md-12">
+ <div pf-utilization-trend-chart config="config"
+ chart-data="data" center-label="centerLabel"
+ donut-config="donutConfig" sparkline-config="sparklineConfig"
+ sparkline-chart-height="custChartHeight"
+ show-sparkline-x-axis="custShowXAxis"
+ show-sparkline-y-axis="custShowYAxis">
+ </div>
+ </div>
+ <hr class="col-md-12">
+ <div class="col-md-12">
+ <form role="form">
+ <div class="form-group">
+ <label>Donut Center Label Type</label>
+ </br>
+ <label class="radio-inline">
+ <input type="radio" ng-model="centerLabel" value="used">Used</input>
+ </label>
+ <label class="radio-inline">
+ <input type="radio" ng-model="centerLabel" value="available">Available</input>
+ </label>
+ <label class="radio-inline">
+ <input type="radio" ng-model="centerLabel" value="percent">Percent</input>
+ </label>
+ <label class="radio-inline">
+ <input type="radio" ng-model="centerLabel" value="none">None</input>
+ </label>
+ </div>
+ </form>
+ <form role="form">
+ <div class="form-group">
+ <label>Sparkline Tooltip Type</label>
+ </br>
+ <label class="radio-inline">
+ <input type="radio" ng-model="sparklineConfig.tooltipType" value="default">Default</input>
+ </label>
+ <label class="radio-inline">
+ <input type="radio" ng-model="sparklineConfig.tooltipType" value="usagePerDay">Usage Per Day</input>
+ </label>
+ <label class="radio-inline">
+ <input type="radio" ng-model="sparklineConfig.tooltipType" value="valuePerDay">Value Per Day</input>
+ </label>
+ <label class="radio-inline">
+ <input type="radio" ng-model="sparklineConfig.tooltipType" value="percentage">Percentage</input>
+ </label>
+ </div>
+ </form>
+ <div class="row">
+ <div class="col-md-6">
+ <form role="form"">
+ <div class="form-group">
+ <label>Show</label>
+ </br>
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="custShowXAxis">Sparkline X Axis</input>
+ </label>
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="custShowYAxis">Sparkline Y Axis</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-3">
+ <form role="form" >
+ <div class="form-group">
+ <label>Chart Height</label>
+ </br>
+ <input style="height:25px; width:60px;" type="number" ng-model="custChartHeight"></input>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-3">
+ <button ng-click="addDataPoint()">Add Data Point</button>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <form role="form"">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="data.dataAvailable" ng-change="updateDataAvailable()">Data Available</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-22"></pre>
+<script type="text/ng-template" id="script.js-22">
+angular.module( 'patternfly.charts' ).controller( 'ChartCtrl', function( $scope ) {
+ $scope.config = {
+ title: 'Memory',
+ units: 'GB'
+ };
+ $scope.donutConfig = {
+ chartId: 'chartA',
+ thresholds: {'warning':'60','error':'90'}
+ };
+ $scope.sparklineConfig = {
+ 'chartId': 'exampleSparkline',
+ 'tooltipType': 'default',
+ 'units': 'GB'
+ };
+
+ var today = new Date();
+ var dates = ['dates'];
+ for (var d = 20 - 1; d >= 0; d--) {
+ dates.push(new Date(today.getTime() - (d * 24 * 60 * 60 * 1000)));
+ }
+
+ $scope.data = {
+ dataAvailable: true,
+ used: 76,
+ total: 100,
+ xData: dates,
+ yData: ['used', '10', '20', '30', '20', '30', '10', '14', '20', '25', '68', '54', '56', '78', '56', '67', '88', '76', '65', '87', '76']
+ };
+
+ $scope.centerLabel = 'used';
+
+ $scope.custShowXAxis = false;
+ $scope.custShowYAxis = false;
+ $scope.custChartHeight = 60;
+
+ $scope.addDataPoint = function () {
+ var newData = Math.round(Math.random() * 100);
+ var newDate = new Date($scope.data.xData[$scope.data.xData.length - 1].getTime() + (24 * 60 * 60 * 1000));
+
+ $scope.data.used = newData;
+ $scope.data.xData.push(newDate);
+ $scope.data.yData.push(newData);
+ };
+});
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.charts" ng-set-html="index.html-21" ng-eval-javascript="script.js-22"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.filters.directive.pfFilter.html b/dist/docs/partials/api/patternfly.filters.directive.pfFilter.html
new file mode 100644
index 000000000..b24608335
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.filters.directive.pfFilter.html
@@ -0,0 +1,185 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/filters/filter-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/filters/filter-directive.js#L173" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfFilter</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.filters</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-filters-directive-page patternfly-filters-directive-pffilter-page"><p>Directive for a filter bar
+<br><br></p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-filter
+ config="{object}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>config</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-filters-directive-page patternfly-filters-directive-pffilter-page"><p>configuration settings for the filters:<br/></p>
+<ul style='list-style-type: none'>
+<li>.fields - (Array) List of filterable fields containing:
+<ul style='list-style-type: none'>
+<li>.id - (String) Optional unique Id for the filter field, useful for comparisons
+<li>.title - (String) The title to display for the filter field
+<li>.placeholder - (String) Text to display when no filter value has been entered
+<li>.filterType - (String) The filter input field type (any html input type, or 'select' for a single select box)
+<li>.filterValues - (Array) List of valid select values used when filterType is 'select'
+</ul>
+<li>.appliedFilters - (Array) List of the currently applied filters
+<li>.resultsCount - (int) The number of results returned after the current applied filters have been applied
+<li>.onFilterChange - ( function(array of filters) ) Function to call when the applied filters list changes
+</ul></div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-filters-directive-page patternfly-filters-directive-pffilter-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.filters" source-edit-deps="angular.js patternfly.select script.js" source-edit-html="index.html-23" source-edit-css="" source-edit-js="script.js-24" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-23" ng-html-wrap-loaded="patternfly.filters angular.js patternfly.select script.js"></pre>
+<script type="text/ng-template" id="index.html-23">
+ <div ng-controller="ViewCtrl" class="row example-container">
+ <div class="col-md-12">
+ <div pf-filter id="exampleFilter" config="filterConfig"></div>
+ </div>
+ <hr class="col-md-12">
+ <div class="col-md-12">
+ <label class="events-label">Valid Items: </label>
+ </div>
+ <div class="col-md-12">
+ <div ng-repeat="item in items" class="col-md-12 cfme-row-column">
+ <div class="row">
+ <div class="col-md-3">
+ <span>{{item.name}}</span>
+ </div>
+ <div class="col-md-7">
+ <span>{{item.address}}</span>
+ </div>
+ <div class="col-md-2">
+ <span>{{item.birthMonth}}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </br></br>
+ <div class="col-md-12">
+ <label class="events-label">Current Filters: </label>
+ </div>
+ <div class="col-md-12">
+ <textarea rows="5" class="col-md-12">{{filtersText}}</textarea>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-24"></pre>
+<script type="text/ng-template" id="script.js-24">
+ angular.module('patternfly.filters').controller('ViewCtrl', ['$scope',
+ function ($scope) {
+ $scope.filtersText = '';
+
+ $scope.allItems = [
+ {
+ name: "Fred Flintstone",
+ address: "20 Dinosaur Way, Bedrock, Washingstone",
+ birthMonth: 'February'
+ },
+ {
+ name: "John Smith",
+ address: "415 East Main Street, Norfolk, Virginia",
+ birthMonth: 'October'
+ },
+ {
+ name: "Frank Livingston",
+ address: "234 Elm Street, Pittsburgh, Pennsylvania",
+ birthMonth: 'March'
+ },
+ {
+ name: "Judy Green",
+ address: "2 Apple Boulevard, Cincinatti, Ohio",
+ birthMonth: 'December'
+ },
+ {
+ name: "Pat Thomas",
+ address: "50 Second Street, New York, New York",
+ birthMonth: 'February'
+ }
+ ];
+ $scope.items = $scope.allItems;
+
+ var matchesFilter = function (item, filter) {
+ var match = true;
+ var re = new RegExp(filter.value, 'i');
+
+ if (filter.id === 'name') {
+ match = item.name.match(re) !== null;
+ } else if (filter.id === 'address') {
+ match = item.address.match(re) !== null;
+ } else if (filter.id === 'birthMonth') {
+ match = item.birthMonth === filter.value;
+ }
+ return match;
+ };
+
+ var matchesFilters = function (item, filters) {
+ var matches = true;
+
+ filters.forEach(function(filter) {
+ if (!matchesFilter(item, filter)) {
+ matches = false;
+ return false;
+ }
+ });
+ return matches;
+ };
+
+ var applyFilters = function (filters) {
+ $scope.items = [];
+ if (filters && filters.length > 0) {
+ $scope.allItems.forEach(function (item) {
+ if (matchesFilters(item, filters)) {
+ $scope.items.push(item);
+ }
+ });
+ } else {
+ $scope.items = $scope.allItems;
+ }
+ $scope.filterConfig.resultsCount = $scope.items.length;
+ };
+
+ var filterChange = function (filters) {
+ $scope.filtersText = "";
+ filters.forEach(function (filter) {
+ $scope.filtersText += filter.title + " : " + filter.value + "\n";
+ });
+ applyFilters(filters);
+ };
+
+ $scope.filterConfig = {
+ fields: [
+ {
+ id: 'name',
+ title: 'Name',
+ placeholder: 'Filter by Name',
+ filterType: 'text'
+ },
+ {
+ id: 'address',
+ title: 'Address',
+ placeholder: 'Filter by Address',
+ filterType: 'text'
+ },
+ {
+ id: 'birthMonth',
+ title: 'Birth Month',
+ placeholder: 'Filter by Birth Month',
+ filterType: 'select',
+ filterValues: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+ }
+ ],
+ resultsCount: $scope.items.length,
+ appliedFilters: [],
+ onFilterChange: filterChange
+ };
+ }
+ ]);
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.filters" ng-set-html="index.html-23" ng-eval-javascript="script.js-24"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.filters.directive.pfFilterFields.html b/dist/docs/partials/api/patternfly.filters.directive.pfFilterFields.html
new file mode 100644
index 000000000..9f7d66764
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.filters.directive.pfFilterFields.html
@@ -0,0 +1,27 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/filters/filter-fields-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/filters/filter-fields-directive.js#L23" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfFilterFields</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.filters</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-filters-directive-page patternfly-filters-directive-pffilterfields-page"><p>Directive for the filter bar's filter entry components
+<br><br></p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-filter-fields
+ config="{object}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>config</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-filters-directive-page patternfly-filters-directive-pffilterfields-page"><p>configuration settings for the filters:<br/></p>
+<ul style='list-style-type: none'>
+<li>.fields - (Array) List of filterable fields containing:
+<ul style='list-style-type: none'>
+<li>.id - (String) Optional unique Id for the filter field, useful for comparisons
+<li>.title - (String) The title to display for the filter field
+<li>.placeholder - (String) Text to display when no filter value has been entered
+<li>.filterType - (String) The filter input field type (any html input type, or 'select' for a select box)
+<li>.filterValues - (Array) List of valid select values used when filterType is 'select'
+</ul>
+<li>.appliedFilters - (Array) List of the currently applied filters
+</ul></div></td></tr></tbody></table></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.filters.directive.pfFilterResults.html b/dist/docs/partials/api/patternfly.filters.directive.pfFilterResults.html
new file mode 100644
index 000000000..cfb8ae82e
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.filters.directive.pfFilterResults.html
@@ -0,0 +1,29 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/filters/filter-results-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/filters/filter-results-directive.js#L25" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfFilterResults</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.filters</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-filters-directive-page patternfly-filters-directive-pffilterresults-page"><p>Directive for the filter results components
+<br><br></p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-filter-results
+ config="{object}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>config</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-filters-directive-page patternfly-filters-directive-pffilterresults-page"><p>configuration settings for the filter results:<br/></p>
+<ul style='list-style-type: none'>
+<li>.fields - (Array) List of filterable fields containing:
+<ul style='list-style-type: none'>
+<li>.id - (String) Optional unique Id for the filter field, useful for comparisons
+<li>.title - (String) The title to display for the filter field
+<li>.placeholder - (String) Text to display when no filter value has been entered
+<li>.filterType - (String) The filter input field type (any html input type, or 'select' for a select box)
+<li>.filterValues - (Array) List of valid select values used when filterType is 'select'
+</ul>
+<li>.appliedFilters - (Array) List of the currently applied filters
+<li>.resultsCount - (int) The number of results returned after the current applied filters have been applied
+<li>.onFilterChange - ( function(array of filters) ) Function to call when the applied filters list changes
+</ul></div></td></tr></tbody></table></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.form.directive.pfDateTimepicker.html b/dist/docs/partials/api/patternfly.form.directive.pfDateTimepicker.html
new file mode 100644
index 000000000..ea8532d6d
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.form.directive.pfDateTimepicker.html
@@ -0,0 +1,44 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/form/datetimepicker/datetimepicker.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/form/datetimepicker/datetimepicker.directive.js#L30" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfDateTimepicker</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.form</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-form-directive-page patternfly-form-directive-pfdatetimepicker-page"><p>Angular directive to wrap the bootstrap datetimepicker <a href="http://eonasdan.github.io/bootstrap-datetimepicker/">http://eonasdan.github.io/bootstrap-datetimepicker/</a></p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-date-timepicker
+ date="{object}"
+ options="{string}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>date</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfdatetimepicker-page"><p>date and time moment object</p>
+</div></td></tr><tr><td>options</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfdatetimepicker-page"><p>the configuration options for the date picker</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-form-directive-page patternfly-form-directive-pfdatetimepicker-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.form" source-edit-deps="angular.js script.js" source-edit-html="index.html-27" source-edit-css="" source-edit-js="script.js-28" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-27" ng-html-wrap-loaded="patternfly.form angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-27">
+ <form class="form" ng-controller="FormDemoCtrl">
+ <span>Date and Time: <span ng-bind="date"></span></span>
+ <div pf-date-timepicker options="options" date="date"></div>
+ </form>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-28"></pre>
+<script type="text/ng-template" id="script.js-28">
+ angular.module( 'patternfly.form' ).controller( 'FormDemoCtrl', function( $scope ) {
+ $scope.options = {
+ format: 'HH:mm'
+ };
+ $scope.date = moment();
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.form" ng-set-html="index.html-27" ng-eval-javascript="script.js-28"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.form.directive.pfDatepicker.html b/dist/docs/partials/api/patternfly.form.directive.pfDatepicker.html
new file mode 100644
index 000000000..ac29ea225
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.form.directive.pfDatepicker.html
@@ -0,0 +1,52 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/form/datepicker/datepicker.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/form/datepicker/datepicker.directive.js#L38" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfDatepicker</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.form</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-form-directive-page patternfly-form-directive-pfdatepicker-page"><p>Angular directive to wrap the bootstrap datepicker <a href="http://bootstrap-datepicker.readthedocs.org/en/latest/">http://bootstrap-datepicker.readthedocs.org/en/latest/</a></p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-datepicker
+ date="{string}"
+ options="{string}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>date</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfdatepicker-page"><p>the date model</p>
+</div></td></tr><tr><td>options</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfdatepicker-page"><p>the configuration options for the date picker</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-form-directive-page patternfly-form-directive-pfdatepicker-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.form" source-edit-deps="angular.js script.js" source-edit-html="index.html-25" source-edit-css="" source-edit-js="script.js-26" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-25" ng-html-wrap-loaded="patternfly.form angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-25">
+ <form class="form-horizontal" ng-controller="FormDemoCtrl">
+ <div>
+ <button ng-click=setToday()>Set Today in Angular Model</button>
+ </div>
+ Date: <span ng-bind="date | date:'MM/dd/yyyy'"></span>
+ <div pf-datepicker options="options" date="date"></div>
+ </form>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-26"></pre>
+<script type="text/ng-template" id="script.js-26">
+ angular.module( 'patternfly.form' ).controller( 'FormDemoCtrl', function( $scope ) {
+ $scope.setToday = function () {
+ $scope.date = new Date();
+ }
+
+ $scope.options = {
+ autoclose: true,
+ todayBtn: 'linked',
+ todayHighlight: true
+ };
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.form" ng-set-html="index.html-25" ng-eval-javascript="script.js-26"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.form.directive.pfFormButtons.html b/dist/docs/partials/api/patternfly.form.directive.pfFormButtons.html
new file mode 100644
index 000000000..130466f87
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.form.directive.pfFormButtons.html
@@ -0,0 +1,69 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/form/form-buttons/form-buttons.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/form/form-buttons/form-buttons.directive.js#L55" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfFormButtons</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.form</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-form-directive-page patternfly-form-directive-pfformbuttons-page"><p>Encapsulates the standard structure and styling for create and cancel buttons
+when used with a form.</p>
+<p>This directive creates new scope.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-form-buttons
+ pf-handle-cancel="{function}"
+ pf-handle-save="{function}"
+ pf-working="{expression}"
+ pf-button-class="{string}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>pfHandleCancel</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfformbuttons-page"><p>function to call when the user clicks cancel.</p>
+</div></td></tr><tr><td>pfHandleSave</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfformbuttons-page"><p>function to call when the user clicks save.</p>
+</div></td></tr><tr><td>pfWorking</td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfformbuttons-page"><p>the model to store the working status in.</p>
+</div></td></tr><tr><td>pfButtonClass</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfformbuttons-page"><p>the class of the button container.</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-form-directive-page patternfly-form-directive-pfformbuttons-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.form" source-edit-deps="angular.js script.js" source-edit-html="index.html-29" source-edit-css="" source-edit-js="script.js-30" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-29" ng-html-wrap-loaded="patternfly.form angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-29">
+ <div ng-controller="FormButtonCtrl">
+ <p>Saved?</p>
+ <p>{{ status }}</p>
+ <form>
+ <div class="form-group>
+ <label class="control-label col-sm-2">Input</label>
+ <input class="form-control col-sm-5" name="item" ng-model="input" type="text">
+ </div>
+ <div pf-form-buttons pf-on-cancel="cancel()" pf-on-save="save(item)" pf-working="working"></div>
+ </form>
+ </div>
+ </script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-30"></pre>
+<script type="text/ng-template" id="script.js-30">
+ angular.module( 'patternfly.form' ).controller( 'FormButtonCtrl', function( $scope, $timeout ) {
+ $scope.status = 'Not yet Saved'
+ $scope.working = false;
+
+ $scope.save = function (item) {
+ $scope.status = 'saved';
+ $scope.working = true;
+
+ $timeout(function () {
+ $scope.working = false;
+ }, 1000);
+ };
+
+ $scope.cancel = function () {
+ $scope.status = 'cancelled';
+ $scope.input = null;
+ };
+ });
+ </script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.form" ng-set-html="index.html-29" ng-eval-javascript="script.js-30"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.form.directive.pfFormGroup.html b/dist/docs/partials/api/patternfly.form.directive.pfFormGroup.html
new file mode 100644
index 000000000..abdc63ede
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.form.directive.pfFormGroup.html
@@ -0,0 +1,61 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/form/form-group/form-group.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/form/form-group/form-group.directive.js#L47" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfFormGroup</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.form</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-form-directive-page patternfly-form-directive-pfformgroup-page"><p>Encapsulates the structure and styling for a label + input used within a
+Bootstrap3 based form.</p>
+<p>This directive creates new scope.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-form-group
+ pf-label="{string}"
+ pf-field-id="{string}"
+ pf-label-class="{string}"
+ pf-input-class="{string}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>pfLabel</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfformgroup-page"><p>the text for the <label> element.</p>
+</div></td></tr><tr><td>pfFieldId</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfformgroup-page"><p>the id of the form field. Default value is id of the form field element.</p>
+</div></td></tr><tr><td>pfLabelClass</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfformgroup-page"><p>the class of the label element. Default value is "col-sm-2".</p>
+</div></td></tr><tr><td>pfInputClass</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfformgroup-page"><p>the class of the input element. Default value is "col-sm-5".</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-form-directive-page patternfly-form-directive-pfformgroup-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.form" source-edit-deps="angular.js script.js" source-edit-html="index.html-31" source-edit-css="" source-edit-js="script.js-32" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-31" ng-html-wrap-loaded="patternfly.form angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-31">
+ <form class="form-horizontal" ng-controller="FormDemoCtrl">
+
+ <p>Name: {{ item.name }}</p>
+ <p>Description: {{ item.description }}</p>
+ <div pf-form-group pf-label="Name" required>
+ <input id="name" name="name"
+ ng-model="item.name" type="text" required/>
+ </div>
+
+ <div pf-form-group pf-input-class="col-sm-9" pf-label="Description">
+ <textarea id="description" name="description" ng-model="item.description">
+ {{ item.description }}
+ </textarea>
+ </div>
+ </form>
+ </script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-32"></pre>
+<script type="text/ng-template" id="script.js-32">
+ angular.module( 'patternfly.form' ).controller( 'FormDemoCtrl', function( $scope ) {
+ $scope.item = {
+ name: 'Homer Simpson',
+ description: 'I like donuts and Duff. Doh!'
+ };
+ });
+ </script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.form" ng-set-html="index.html-31" ng-eval-javascript="script.js-32"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.form.directive.pfRemainingCharsCount.html b/dist/docs/partials/api/patternfly.form.directive.pfRemainingCharsCount.html
new file mode 100644
index 000000000..cf2119e7f
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.form.directive.pfRemainingCharsCount.html
@@ -0,0 +1,141 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/form/remaining-chars-count/remaining-chars-count.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/form/remaining-chars-count/remaining-chars-count.directive.js#L124" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfRemainingCharsCount</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.form</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-form-directive-page patternfly-form-directive-pfremainingcharscount-page"><p>Directive for showing a characters remaining count and triggering warning and error</br>
+behavior when passing specified thresholds. When the <code>chars-warn-remaining</code> threshold is passed, </br>
+the <code>chars-warn-remaining-pf</code> css class is applied to the <code>count-fld</code>, which by default, turns </br>
+the remaining count number <font color='red'>red</font>.</br>
+By default, characters may be entered into the text field after the <code>chars-max-limit</code> limit has been reached,</br>
+the remaining count number will become a negative value. Setting the <code>blockInputAtMaxLimit</code> to <em>true</em>,</br>
+will block additional input into the text field after the max has been reached; additionally a right-click 'paste' will only </br>
+paste characters until the maximum character limit is reached.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-remaining-chars-count
+ ng-model="{string}"
+ count-fld="{string}"
+ chars-max-limit="{string}"
+ chars-warn-remaining="{string}"
+ [block-input-at-max-limit="{boolean}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>ng-model</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfremainingcharscount-page"><p>The scope model variable which contains the initial text for the text field. Required, but</br>
+can be an emptly string ("").</p>
+</div></td></tr><tr><td>count-fld</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfremainingcharscount-page"><p>The id of the field to display the 'characters-remaining' count.</p>
+</div></td></tr><tr><td>chars-max-limit</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfremainingcharscount-page"><p>Number representing the maximum number of characters to allow before dispatching a<br/>
+'overCharsMaxLimit' event. When the number of characters falls below <code>chars-max-limit</code>, a 'underCharsMaxLimit'<br/>
+event is dispatched.</p>
+</div></td></tr><tr><td>chars-warn-remaining</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfremainingcharscount-page"><p>Number of remaining characters to warn upon. The 'chars-warn-remaining-pf'<br/>
+class will be applied to the <code>count-fld</code> when the remaining characters is less than the<br/>
+<code>chars-warn-remaining</code> threshold. When/if the number of remaining characters becomes greater than the<br/>
+<code>chars-warn-remaining</code> threshold, the 'chars-warn-remaining-pf' class is removed from the <code>count-fld</code> field.</p>
+</div></td></tr><tr><td>block-input-at-max-limit <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-form-directive-page patternfly-form-directive-pfremainingcharscount-page"><p>If true, no more characters can be entered into the text field when the<br/>
+<code>chars-max-limit</code> has been reached. If false (the default), characters may be entered into the text field after the<br/>
+max. limit has been reached, but these additional characters will trigger the 'overCharsMaxLimit' event to be<br/>
+dispatched. When <code>blockInputAtMaxLimit</code> is <em>true</em>, a right-click 'paste' will only paste<br/>
+characters until the maximum character limit is reached.</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-form-directive-page patternfly-form-directive-pfremainingcharscount-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.example" source-edit-deps="angular.js script.js" source-edit-html="index.html-33" source-edit-css="" source-edit-js="script.js-34" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-33" ng-html-wrap-loaded="patternfly.example angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-33">
+ <div ng-controller="DemoCtrl" style="display:inline-block; width: 100%;">
+
+ <style>
+ textarea {
+ resize: none;
+ }
+ </style>
+
+ <div class="container">
+ <strong>Max limit: 20, warn when 5 or less remaining, disable button after max limit</strong>
+ <div class="row">
+ <div class="col-md-4">
+
+ <form>
+ <div class="form-group">
+ <label for="messageArea"></label>
+ <textarea class="form-control" pf-remaining-chars-count id="messageArea_1" ng-model="messageArea1text" chars-max-limit="20" chars-warn-remaining="5"
+ count-fld="charRemainingCntFld_1" name="text" placeholder="Type in your message" rows="5"></textarea>
+ </div>
+ <span class="pull-right chars-remaining-pf">
+ <span id="charRemainingCntFld_1"></span>
+ <button id="postBtn_1" ng-disabled="charsMaxLimitExceeded" type="submit" class="btn btn-default">Post New Message</button>
+ </span>
+ </form>
+
+ </div>
+ </div>
+ <br>
+ <strong>Max limit: 10, warn when 2 or less remaining, block input after max limit</strong>
+ <div class="row">
+ <div class="col-md-4">
+ <form>
+ <div class="form-group">
+ <label for="messageArea"></label>
+ <textarea class="form-control" pf-remaining-chars-count id="messageArea_2" ng-model="messageArea2text" chars-max-limit="10" chars-warn-remaining="2"
+ block-input-at-max-limit="true" count-fld="charRemainingCntFld_2" name="text"
+ placeholder="Type in your message" rows="5"></textarea>
+ </div>
+ <span class="pull-left">
+ <button id="postBtn_2" type="submit" class="btn btn-default">Submit</button>
+ </span>
+ <span class="pull-right chars-remaining-pf">
+ <span id="charRemainingCntFld_2"></span>
+ </span>
+ </form>
+ </div>
+ </div>
+ <br>
+ <strong>Max limit: 10, warn when 5 or less remaining, block input after max limit</strong>
+ <div class="row">
+ <div class="col-md-4">
+ <input id="input_3" pf-remaining-chars-count chars-max-limit="10" ng-model="messageInput3text" chars-warn-remaining="5" count-fld="charRemainingCntFld_3"
+ block-input-at-max-limit="true"/>
+ <span class="chars-remaining-pf"><span id="charRemainingCntFld_3" style="padding-left: 5px"></span>Remaining</span>
+ </div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-34"></pre>
+<script type="text/ng-template" id="script.js-34">
+angular.module( 'patternfly.example', ['patternfly.form']);
+
+angular.module( 'patternfly.example' ).controller( 'DemoCtrl', function( $scope ) {
+ $scope.messageArea1text = "Initial Text";
+ $scope.messageArea2text = "";
+ $scope.messageInput3text = "";
+
+ $scope.charsMaxLimitExceeded = false;
+
+ // 'tfId' will equal the id of the text area/input field which
+ // triggered the event
+ $scope.$on('overCharsMaxLimit', function (event, tfId) {
+ if(!$scope.charsMaxLimitExceeded){
+ $scope.charsMaxLimitExceeded = true;
+ }
+ });
+
+ // 'tfId' will equal the id of the text area/input field which
+ // triggered the event
+ $scope.$on('underCharsMaxLimit', function (event, tfId) {
+ if($scope.charsMaxLimitExceeded){
+ $scope.charsMaxLimitExceeded = false;
+ }
+ });
+
+});
+
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.example" ng-set-html="index.html-33" ng-eval-javascript="script.js-34"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.modals.directive.pfAboutModal.html b/dist/docs/partials/api/patternfly.modals.directive.pfAboutModal.html
new file mode 100644
index 000000000..fe7431539
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.modals.directive.pfAboutModal.html
@@ -0,0 +1,74 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/modals/about-modal.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/modals/about-modal.directive.js#L54" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfAboutModal</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.modals</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-modals-directive-page patternfly-modals-directive-pfaboutmodal-page"><p>Directive for rendering modal windows.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-about-modal
+ [additional-info="{string}"]
+ [copyright="{string}"]
+ [img-alt="{string}"]
+ [img-src="{string}"]
+ [is-open="{boolean}"]
+ [on-close="{function}"]
+ [product-info="{object}"]
+ [title="{string}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>additionalInfo <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-modals-directive-page patternfly-modals-directive-pfaboutmodal-page"><p>Text explaining the version or copyright</p>
+</div></td></tr><tr><td>copyright <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-modals-directive-page patternfly-modals-directive-pfaboutmodal-page"><p>Product copyright information</p>
+</div></td></tr><tr><td>imgAlt <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-modals-directive-page patternfly-modals-directive-pfaboutmodal-page"><p>The alt text for the corner grahpic</p>
+</div></td></tr><tr><td>imgSrc <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-modals-directive-page patternfly-modals-directive-pfaboutmodal-page"><p>The source for the corner grahpic</p>
+</div></td></tr><tr><td>isOpen <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-modals-directive-page patternfly-modals-directive-pfaboutmodal-page"><p>Flag indicating that the modal should be opened</p>
+</div></td></tr><tr><td>onClose <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-modals-directive-page patternfly-modals-directive-pfaboutmodal-page"><p>Function to call when modal is closed</p>
+</div></td></tr><tr><td>productInfo <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-modals-directive-page patternfly-modals-directive-pfaboutmodal-page"><p>data for the modal:<br/></p>
+<ul style='list-style-type: none'>
+<li>.product - the product label
+<li>.version - the product version
+</ul></div></td></tr><tr><td>title <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-modals-directive-page patternfly-modals-directive-pfaboutmodal-page"><p>The product title for the modal</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-modals-directive-page patternfly-modals-directive-pfaboutmodal-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.modals" source-edit-deps="angular.js script.js" source-edit-html="index.html-35" source-edit-css="" source-edit-js="script.js-36" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-35" ng-html-wrap-loaded="patternfly.modals angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-35">
+ <div ng-controller="ModalCtrl">
+ <button ng-click="open()" class="btn btn-default">Launch About Modal</button>
+ <div pf-about-modal is-open="isOpen" on-close="onClose()" additional-info="additionalInfo"
+ product-info="productInfo" title="title" copyright="copyright" img-alt="imgAlt" img-src="imgSrc"></div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-36"></pre>
+<script type="text/ng-template" id="script.js-36">
+ angular.module('patternfly.modals').controller('ModalCtrl', function ($scope) {
+ $scope.additionalInfo = "Donec consequat dignissim neque, sed suscipit quam egestas in. Fusce bibendum " +
+ "laoreet lectus commodo interdum. Vestibulum odio ipsum, tristique et ante vel, iaculis placerat nulla. " +
+ "Suspendisse iaculis urna feugiat lorem semper, ut iaculis risus tempus.";
+ $scope.copyright = "Trademark and Copyright Information";
+ $scope.imgAlt = "Patternfly Symbol";
+ $scope.imgSrc = "img/logo-alt.svg";
+ $scope.title = "Product Title";
+ $scope.productInfo = [
+ { name: 'Version', value: '1.0.0.0.20160819142038_51be77c' },
+ { name: 'Server Name', value: 'Localhost' },
+ { name: 'User Name', value: 'admin' },
+ { name: 'User Role', value: 'Administrator' }];
+ $scope.open = function () {
+ $scope.isOpen = true;
+ }
+ $scope.onClose = function() {
+ $scope.isOpen = false;
+ }
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.modals" ng-set-html="index.html-35" ng-eval-javascript="script.js-36"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.navigation.directive.pfApplicationLauncher.html b/dist/docs/partials/api/patternfly.navigation.directive.pfApplicationLauncher.html
new file mode 100644
index 000000000..885b8fd1f
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.navigation.directive.pfApplicationLauncher.html
@@ -0,0 +1,91 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/navigation/application-launcher-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/navigation/application-launcher-directive.js#L73" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfApplicationLauncher</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.navigation</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfapplicationlauncher-page"><p>Directive for rendering application launcher dropdown.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-application-launcher
+ [label="{string}"]
+ [is-disabled="{boolean}"]
+ [is-list="{boolean}"]
+ [hidden-icons="{boolean}"]
+ items="{array}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>label <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfapplicationlauncher-page"><p>Use a custom label for the launcher, default: Application Launcher</p>
+</div></td></tr><tr><td>isDisabled <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfapplicationlauncher-page"><p>Disable the application launcher button, default: false</p>
+</div></td></tr><tr><td>isList <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfapplicationlauncher-page"><p>Display items as a list instead of a grid, default: false</p>
+</div></td></tr><tr><td>hiddenIcons <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfapplicationlauncher-page"><p>Flag to not show icons on the launcher, default: false</p>
+</div></td></tr><tr><td>items</td><td><a href="" class="label type-hint type-hint-array">array</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfapplicationlauncher-page"><p>List of navigation items</p>
+<ul style='list-style-type: none'>
+<li>.title - (string) Name of item to be displayed on the menu
+<li>.iconClass - (string) Classes for icon to be shown on the menu (ex. "fa fa-dashboard")
+<li>.href - (string) href link to navigate to on click
+<li>.tooltip - (string) Tooltip to display for the badge
+</ul></div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfapplicationlauncher-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.navigation" source-edit-deps="angular.js script.js" source-edit-html="index.html-37" source-edit-css="" source-edit-js="script.js-38" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-37" ng-html-wrap-loaded="patternfly.navigation angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-37">
+ <div ng-controller="applicationLauncherController" class="row">
+ <div class="col-xs-12 pre-demo-text">
+ <label>Click the launcher indicator to show the Application Launcher Dropdown:</label>
+ </div>
+ <nav class="navbar navbar-pf navbar-collapse">
+ <ul class="nav navbar-left">
+ <li>
+ <div pf-application-launcher="" items="navigationItems" label="{{label}}" is-disabled="isDisabled" is-list="isList" hidden-icons="hiddenIcons"></div>
+ </li>
+ </ul>
+ </nav>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-38"></pre>
+<script type="text/ng-template" id="script.js-38">
+ angular.module('patternfly.navigation').controller('applicationLauncherController', ['$scope',
+ function ($scope) {
+ $scope.navigationItems = [
+ {
+ title: "Recteque",
+ href: "#/ipsum/intellegam/recteque",
+ tooltip: "Launch the Function User Interface",
+ iconClass: "pficon-storage-domain"
+ },
+ {
+ title: "Suavitate",
+ href: "#/ipsum/intellegam/suavitate",
+ tooltip: "Launch the Function User Interface",
+ iconClass: "pficon-build"
+ },
+ {
+ title: "Lorem",
+ href: "#/ipsum/intellegam/lorem",
+ tooltip: "Launch the Function User Interface",
+ iconClass: "pficon-domain"
+ },
+ {
+ title: "Home",
+ href: "#/ipsum/intellegam/home",
+ tooltip: "Launch the Function User Interface",
+ iconClass: "pficon-home"
+ }
+ ];
+
+ $scope.label = 'Application Launcher';
+ $scope.isDisabled = false;
+ $scope.isList = false;
+ $scope.hiddenIcons = false;
+ }]);
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.navigation" ng-set-html="index.html-37" ng-eval-javascript="script.js-38"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.navigation.directive.pfVerticalNavigation - Basic.html b/dist/docs/partials/api/patternfly.navigation.directive.pfVerticalNavigation - Basic.html
new file mode 100644
index 000000000..1edf61277
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.navigation.directive.pfVerticalNavigation - Basic.html
@@ -0,0 +1,596 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/navigation/examples/vertical-navigation-basic.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/navigation/examples/vertical-navigation-basic.js#L568" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfVerticalNavigation - Basic</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.navigation</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-basic-page"><p>Directive for vertical navigation. This sets up the nav bar header with the collapse button (hamburger) and the
+application brand image (or text) as well as the vertical navigation bar containing the navigation items. This
+directive supports primary, secondary, and tertiary navigation with options to allow pinning of the secondary and
+tertiary navigation menus as well as the option for persistent secondary menus.
+<br><br>
+The remaining parts of the navbar header can be transcluded.
+<br><br>
+Tha navigation items are marked active based on the current location and the href value for the item. If not using
+href's on the items to navigate, set update-active-items-on-click to "true".
+<br><br>
+This directive works in conjunction with the main content container if the 'container-pf-nav-pf-vertical' class
+selector is added to the main content container.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-vertical-navigation - -basic
+ brand-src="{string}"
+ brand-alt="{string}"
+ show-badges="{boolean}"
+ persistent-secondary="{boolean}"
+ hidden-icons="{boolean}"
+ items="{array}"
+ navigate-callback="{function}"
+ item-click-callback="{function}"
+ update-active-items-on-click="{boolean}"
+ ignore-mobile="{boolean}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>brandSrc</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-basic-page"><p>src for brand image</p>
+</div></td></tr><tr><td>brandAlt</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-basic-page"><p>Text for product name when brand image is not available</p>
+</div></td></tr><tr><td>showBadges</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-basic-page"><p>Flag if badges are used on navigation items, default: false</p>
+</div></td></tr><tr><td>persistentSecondary</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-basic-page"><p>Flag to use persistent secondary menus, default: false</p>
+</div></td></tr><tr><td>hiddenIcons</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-basic-page"><p>Flag to not show icons on the primary menu, default: false</p>
+</div></td></tr><tr><td>items</td><td><a href="" class="label type-hint type-hint-array">array</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-basic-page"><p>List of navigation items</p>
+<ul style='list-style-type: none'>
+<li>.title - (string) Name of item to be displayed on the menu
+<li>.iconClass - (string) Classes for icon to be shown on the menu (ex. "fa fa-dashboard")
+<li>.href - (string) href link to navigate to on click
+<li>.children - (array) Submenu items (same structure as top level items)
+<li>.badges - (array) Badges to display for the item, badges with a zero count are not displayed.
+ <ul style='list-style-type: none'>
+ <li>.count - (number) Count to display in the badge
+ <li>.iconClass - (string) Class to use for showing an icon before the count
+ <li>.tooltip - (string) Tooltip to display for the badge
+ <li>.badgeClass: - (string) Additional class(es) to add to the badge container
+ </ul>
+</ul></div></td></tr><tr><td>navigateCallback</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-basic-page"><p>function(item) Callback method invoked on a navigation item click (one with no submenus)</p>
+</div></td></tr><tr><td>itemClickCallback</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-basic-page"><p>function(item) Callback method invoked on an item click</p>
+</div></td></tr><tr><td>updateActiveItemsOnClick</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-basic-page"><p>Flag if active items should be marked on click rather than on navigation change, default: false</p>
+</div></td></tr><tr><td>ignoreMobile</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-basic-page"><p>Flag if mobile state should be ignored (use only if absolutely necessary) default: false</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-basic-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.navigation" source-edit-deps="angular.js patternfly.utils patternfly.filters patternfly.sort patternfly.views script.js add_content.js hide-show.js" source-edit-html="index.html-39" source-edit-css="" source-edit-js="script.js-40 add_content.js hide-show.js" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-39" ng-html-wrap-loaded="patternfly.navigation angular.js patternfly.utils patternfly.filters patternfly.sort patternfly.views script.js add_content.js hide-show.js"></pre>
+<script type="text/ng-template" id="index.html-39">
+<div>
+ <button class="btn btn-primary" id="showVerticalNav" onclick="showVerticalNav">Show Vertical Navigation</button>
+ <label class="example-info-text">This will display the vertical nav bar and some mock content over the content of this page.</label>
+ <label class="example-info-text">Exit the demo to return back to this page.</label>
+</div>
+<div id="verticalNavLayout" class="layout-pf layout-pf-fixed faux-layout hidden" ng-controller="vertNavController">
+ <div pf-vertical-navigation items="navigationItems" brand-alt="ANGULAR PATTERNFLY"
+ show-badges="true" pinnable-menus="true" update-active-items-on-click="true"
+ navigate-callback="handleNavigateClick">
+ <div>
+ <ul class="nav navbar-nav">
+ <li><button id="hideVerticalNav" class="hide-vertical-nav">Exit Vertical Navigation Demo</button></li>
+ </ul>
+ <ul class="nav navbar-nav navbar-right navbar-iconic">
+ <li class="dropdown">
+ </li>
+ <li class="dropdown">
+ <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+ <span title="Help" class="fa pficon-help"></span>
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+ <li><a href="#">Help</a></li>
+ <li><a href="#">About</a></li>
+ </ul>
+ </li>
+ <li class="dropdown">
+ <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+ <span title="Username" class="fa pficon-user"></span>
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
+ <li><a href="#">Preferences</a></li>
+ <li><a href="#">Logout</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div id="contentContainer" class="container-fluid container-cards-pf container-pf-nav-pf-vertical example-page-container">
+ <div id="includedContent"></div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-40"></pre>
+<script type="text/ng-template" id="script.js-40">
+angular.module('patternfly.navigation').controller('vertNavController', ['$scope',
+ function ($scope) {
+ $scope.navigationItems = [
+ {
+ title: "Dashboard",
+ iconClass: "fa fa-dashboard",
+ href: "#/dashboard"
+ },
+ {
+ title: "Dolor",
+ iconClass : "fa fa-shield",
+ href: "#/dolor",
+ badges: [
+ {
+ count: 1283,
+ tooltip: "Total number of items"
+ }
+ ]
+ },
+ {
+ title: "Ipsum",
+ iconClass: "fa fa-space-shuttle",
+ children: [
+ {
+ title: "Intellegam",
+ children: [
+ {
+ title: "Recteque",
+ href: "#/ipsum/intellegam/recteque",
+ badges: [
+ {
+ count: 6,
+ tooltip: "Total number of error items",
+ badgeClass: 'example-error-background'
+ }
+ ]
+ },
+ {
+ title: "Suavitate",
+ href: "#/ipsum/intellegam/suavitate",
+ badges: [
+ {
+ count: 2,
+ tooltip: "Total number of items"
+ }
+ ]
+ },
+ {
+ title: "Vituperatoribus",
+ href: "#/ipsum/intellegam/vituperatoribus",
+ badges: [
+ {
+ count: 18,
+ tooltip: "Total number of warning items",
+ badgeClass: 'example-warning-background'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ title: "Copiosae",
+ children: [
+ {
+ title: "Exerci",
+ href: "#/ipsum/copiosae/exerci",
+ badges: [
+ {
+ count: 2,
+ tooltip: "Total number of error items",
+ iconClass: 'pficon pficon-error-circle-o'
+ },
+ {
+ count: 6,
+ tooltip: "Total number warning error items",
+ iconClass: 'pficon pficon-warning-triangle-o'
+ }
+ ]
+ },
+ {
+ title: "Quaeque",
+ href: "#/ipsum/copiosae/quaeque",
+ badges: [
+ {
+ count: 0,
+ tooltip: "Total number of error items",
+ iconClass: 'pficon pficon-error-circle-o'
+ },
+ {
+ count: 4,
+ tooltip: "Total number warning error items",
+ iconClass: 'pficon pficon-warning-triangle-o'
+ }
+ ]
+ },
+ {
+ title: "Utroque",
+ href: "#/ipsum/copiosae/utroque",
+ badges: [
+ {
+ count: 1,
+ tooltip: "Total number of error items",
+ iconClass: 'pficon pficon-error-circle-o'
+ },
+ {
+ count: 2,
+ tooltip: "Total number warning error items",
+ iconClass: 'pficon pficon-warning-triangle-o'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ title: "Patrioque",
+ children: [
+ {
+ title: "Novum",
+ href: "#/ipsum/patrioque/novum"
+ },
+ {
+ title: "Pericula",
+ href: "#/ipsum/patrioque/pericula"
+ },
+ {
+ title: "Gubergren",
+ href: "#/ipsum/patrioque/gubergren"
+ }
+ ]
+ },
+ {
+ title: "Accumsan",
+ href: "#/ipsum/Accumsan",
+ badges: [
+ {
+ count: 2,
+ tooltip: "Total number of error items",
+ iconClass: 'pficon pficon-error-circle-o'
+ },
+ {
+ count: 6,
+ tooltip: "Total number warning error items",
+ iconClass: 'pficon pficon-warning-triangle-o'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ title: "Amet",
+ iconClass: "fa fa-paper-plane",
+ children: [
+ {
+ title: "Detracto",
+ children: [
+ {
+ title: "Delicatissimi",
+ href: "#/amet/detracto/delicatissimi"
+ },
+ {
+ title: "Aliquam",
+ href: "#/amet/detracto/aliquam"
+ },
+ {
+ title: "Principes",
+ href: "#/amet/detracto/principes"
+ }
+ ]
+ },
+ {
+ title: "Mediocrem",
+ children: [
+ {
+ title: "Convenire",
+ href: "#/amet/mediocrem/convenire"
+ },
+ {
+ title: "Nonumy",
+ href: "#/amet/mediocrem/nonumy"
+ },
+ {
+ title: "Deserunt",
+ href: "#/amet/mediocrem/deserunt"
+ }
+ ]
+ },
+ {
+ title: "Corrumpit",
+ children: [
+ {
+ title: "Aeque",
+ href: "#/amet/corrumpit/aeque"
+ },
+ {
+ title: "Delenit",
+ href: "#/amet/corrumpit/delenit"
+ },
+ {
+ title: "Qualisque",
+ href: "#/amet/corrumpit/qualisque"
+ }
+ ]
+ },
+ {
+ title: "urbanitas",
+ href: "#/amet/urbanitas"
+ }
+ ]
+ },
+ {
+ title: "Adipscing",
+ iconClass: "fa fa-graduation-cap",
+ href: "#/adipscing"
+ },
+ {
+ title: "Lorem",
+ iconClass: "fa fa-gamepad",
+ href: "#/lorem"
+ },
+ {
+ title: "Exit Demo"
+ }
+ ];
+ $scope.handleNavigateClick = function (item) {
+ if (item.title === "Exit Demo") {
+ angular.element(document.querySelector("#verticalNavLayout")).addClass("hidden");
+ }
+ };
+ }
+]);
+</script>
+</div>
+<div class="tab-pane" title="add_content.js">
+<pre class="prettyprint linenums" ng-set-text="add_content.js"></pre>
+<script type="text/ng-template" id="add_content.js">
+ $(document).ready(function() {
+ $("#includedContent")[0].innerHTML = '\
+ <div class="row row-cards-pf"> \
+ <div class="col-xs-12 col-sm-6 col-md-3">\
+ <div class="card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">\
+ <h4 class="card-pf-title" style="height: 17px;" id="example_\-ipsum\-">\
+ <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum\
+ </h4>\
+ <div class="card-pf-body" style="height: 50px;">\
+ <p class="card-pf-aggregate-status-notifications">\
+ <span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>\
+ </p>\
+ </div>\
+ </div>\
+ </div>\
+ <div class="col-xs-12 col-sm-6 col-md-3">\
+ <div class="card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">\
+ <h4 class="card-pf-title" style="height: 17px;" id="example_\-\-">\
+ <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">20</span> Amet</a>\
+ </h4>\
+ <div class="card-pf-body" style="height: 50px;">\
+ <p class="card-pf-aggregate-status-notifications">\
+ <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>\
+ <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-warning-triangle-o"></span>1</a></span>\
+ </p>\
+ </div>\
+ </div>\
+ </div>\
+ <div class="col-xs-12 col-sm-6 col-md-3">\
+ <div class="card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">\
+ <h4 class="card-pf-title" style="height: 17px;" id="example_\-\-">\
+ <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">9</span> Adipiscing</a>\
+ </h4>\
+ <div class="card-pf-body" style="height: 50px;">\
+ <p class="card-pf-aggregate-status-notifications">\
+ <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>\
+ </p>\
+ </div>\
+ </div>\
+ </div>\
+ <div class="col-xs-12 col-sm-6 col-md-3">\
+ <div class="card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">\
+ <h4 class="card-pf-title" style="height: 17px;" id="example_\-\-">\
+ <a href="#"><span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">12</span> Lorem</a>\
+ </h4>\
+ <div class="card-pf-body" style="height: 50px;">\
+ <p class="card-pf-aggregate-status-notifications">\
+ <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>\
+ </p>\
+ </div>\
+ </div>\
+ </div>\
+ </div>\
+ <div class="row row-cards-pf">\
+ <div class="col-xs-12 col-sm-6 col-md-3">\
+ <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini" style="height: 59px;">\
+ <h4 class="card-pf-title" style="height: 42px;" id="example_\-\-ipsum\-">\
+ <span class="fa fa-rebel"></span>\
+ <span class="card-pf-aggregate-status-count">0</span> Ipsum\
+ </h4>\
+ <div class="card-pf-body" style="height: 24px;">\
+ <p class="card-pf-aggregate-status-notifications">\
+ <span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>\
+ </p>\
+ </div>\
+ </div>\
+ </div>\
+ <div class="col-xs-12 col-sm-6 col-md-3">\
+ <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini" style="height: 59px;">\
+ <h4 class="card-pf-title" style="height: 42px;" id="example_\-\-\-amet\-\-">\
+ <a href="#">\
+ <span class="fa fa-paper-plane"></span>\
+ <span class="card-pf-aggregate-status-count">20</span> Amet\
+ </a>\
+ </h4>\
+ <div class="card-pf-body" style="height: 24px;">\
+ <p class="card-pf-aggregate-status-notifications">\
+ <span class="card-pf-aggregate-status-notification"><a href="#"><span class="pficon pficon-error-circle-o"></span>4</a></span>\
+ </p>\
+ </div>\
+ </div>\
+ </div>\
+ <div class="col-xs-12 col-sm-6 col-md-3">\
+ <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini" style="height: 59px;">\
+ <h4 class="card-pf-title" style="height: 42px;" id="example_\-\-\-adipiscing\-\-">\
+ <a href="#">\
+ <span class="pficon pficon-cluster"></span>\
+ <span class="card-pf-aggregate-status-count">9</span> Adipiscing\
+ </a>\
+ </h4>\
+ <div class="card-pf-body" style="height: 24px;">\
+ <p class="card-pf-aggregate-status-notifications">\
+ <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>\
+ </p>\
+ </div>\
+ </div>\
+ </div>\
+ <div class="col-xs-12 col-sm-6 col-md-3">\
+ <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-aggregate-status-mini" style="height: 59px;">\
+ <h4 class="card-pf-title" style="height: 42px;" id="example_\-\-\-lorem\-\-">\
+ <a href="#">\
+ <span class="pficon pficon-image"></span>\
+ <span class="card-pf-aggregate-status-count">12</span> Lorem\
+ </a>\
+ </h4>\
+ <div class="card-pf-body" style="height: 24px;">\
+ <p class="card-pf-aggregate-status-notifications">\
+ <a href="#"><span class="card-pf-aggregate-status-notification"><span class="pficon pficon-error-circle-o"></span>1</span></a>\
+ </p>\
+ </div>\
+ </div>\
+ </div>\
+ </div>\
+ <div class="row row-cards-pf">\
+ <div class="col-xs-12 col-sm-6">\
+ <div class="card-pf" style="height: 360px;">\
+ <div class="card-pf-heading">\
+ <h4 class="card-pf-title" style="height: 17px;" id="example_\-top-utilized\-">\
+ Top Utilized\
+ </h4>\
+ </div>\
+ <div class="card-pf-body" style="height: 280px;">\
+ <div class="progress-description">\
+ Ipsum\
+ </div>\
+ <div class="progress progress-label-top-right">\
+ <div class="progress-bar progress-bar-danger" role="progressbar"style="width: 95%;" data-toggle="tooltip" title="95% Used">\
+ <span><strong>190.0 of 200.0 GB</strong> Used</span>\
+ </div>\
+ <div class="progress-bar progress-bar-remaining" role="progressbar" style="width: 5%;" data-toggle="tooltip" title="5% Available">\
+ <span class="sr-only">5% Available</span>\
+ </div>\
+ </div>\
+ <div class="progress-description">\
+ Amet\
+ </div>\
+ <div class="progress progress-label-top-right">\
+ <div class="progress-bar progress-bar-success" role="progressbar" style="width: 50%;" data-toggle="tooltip" title="50% Used">\
+ <span><strong>100.0 of 200.0 GB</strong> Used</span>\
+ </div>\
+ <div class="progress-bar progress-bar-remaining" role="progressbar" style="width: 50%;" data-toggle="tooltip" title="50% Available">\
+ <span class="sr-only">50% Available</span>\
+ </div>\
+ </div>\
+ <div class="progress-description">\
+ Adipiscing\
+ </div>\
+ <div class="progress progress-label-top-right">\
+ <div class="progress-bar progress-bar-warning" role="progressbar" style="width: 70%;" data-toggle="tooltip" title="70% Used">\
+ <span><strong>140.0 of 200.0 GB</strong> Used</span>\
+ </div>\
+ <div class="progress-bar progress-bar-remaining" role="progressbar" style="width: 30%;" data-toggle="tooltip" title="30% Available">\
+ <span class="sr-only">30% Available</span>\
+ </div>\
+ </div>\
+ <div class="progress-description">\
+ Lorem\
+ </div>\
+ <div class="progress progress-label-top-right">\
+ <div class="progress-bar progress-bar-warning" role="progressbar" style="width: 76.5%;" data-toggle="tooltip" title="76.5% Used">\
+ <span><strong>153.0 of 200.0 GB</strong> Used</span>\
+ </div>\
+ <div class="progress-bar progress-bar-remaining" role="progressbar" style="width: 23.5%;" data-toggle="tooltip" title="23.5% Available">\
+ <span class="sr-only">23.5% Available</span>\
+ </div>\
+ </div>\
+ </div>\
+ </div>\
+ </div>\
+ <div class="col-xs-12 col-sm-6">\
+ <div class="card-pf" style="height: 360px;">\
+ <div class="card-pf-heading">\
+ <h4 class="card-pf-title" style="height: 17px;" id="example_\-quotas\-">\
+ Quotas\
+ </h4>\
+ </div>\
+ <div class="card-pf-body" style="height: 280px;">\
+ <div class="progress-container progress-description-left progress-label-right">\
+ <div class="progress-description">\
+ Ipsum\
+ </div>\
+ <div class="progress">\
+ <div class="progress-bar" role="progressbar" style="width: 25%;" data-toggle="tooltip" title="25% Used">\
+ <span><strong>115 of 460</strong> MHz</span>\
+ </div>\
+ <div class="progress-bar progress-bar-remaining" role="progressbar" style="width: 75%;" data-toggle="tooltip" title="75% Available">\
+ <span class="sr-only">75% Available</span>\
+ </div>\
+ </div>\
+ </div>\
+ <div class="progress-container progress-description-left progress-label-right">\
+ <div class="progress-description">\
+ Amet\
+ </div>\
+ <div class="progress">\
+ <div class="progress-bar" role="progressbar" style="width: 50%;" data-toggle="tooltip" title="8 GB Used">\
+ <span><strong>8 of 16</strong> GB</span>\
+ </div>\
+ <div class="progress-bar progress-bar-remaining" role="progressbar" style="width: 50%;" data-toggle="tooltip" title="8 GB Available">\
+ <span class="sr-only">50% Available</span>\
+ </div>\
+ </div>\
+ </div>\
+ <div class="progress-container progress-description-left progress-label-right">\
+ <div class="progress-description">\
+ Adipiscing\
+ </div>\
+ <div class="progress">\
+ <div class="progress-bar" role="progressbar" style="width: 62.5%;" data-toggle="tooltip" title="62.5% Used">\
+ <span><strong>5 of 8</strong> Total</span>\
+ </div>\
+ <div class="progress-bar progress-bar-remaining" role="progressbar" style="width: 37.5%;" data-toggle="tooltip" title="37.5% Available">\
+ <span class="sr-only">37.5% Available</span>\
+ </div>\
+ </div>\
+ </div>\
+ <div class="progress-container progress-description-left progress-label-right">\
+ <div class="progress-description">\
+ Lorem\
+ </div>\
+ <div class="progress">\
+ <div class="progress-bar" role="progressbar" style="width: 100%;" data-toggle="tooltip" title="100% Used">\
+ <span><strong>2 of 2</strong> Total</span>\
+ </div>\
+ </div>\
+ </div>\
+ </div>\
+ </div>\
+ </div>\
+ </div>\
+ ';
+ });
+</script>
+</div>
+<div class="tab-pane" title="hide-show.js">
+<pre class="prettyprint linenums" ng-set-text="hide-show.js"></pre>
+<script type="text/ng-template" id="hide-show.js">
+ $(document).ready(function() {
+ $(document).on('click', '#showVerticalNav', function() {
+ $(document.getElementById("verticalNavLayout")).removeClass("hidden");
+ });
+ $(document).on('click', '#hideVerticalNav', function() {
+ $(document.getElementById("verticalNavLayout")).addClass("hidden");
+ });
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.navigation" ng-set-html="index.html-39" ng-eval-javascript="script.js-40 add_content.js hide-show.js"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.navigation.directive.pfVerticalNavigation - Router.html b/dist/docs/partials/api/patternfly.navigation.directive.pfVerticalNavigation - Router.html
new file mode 100644
index 000000000..0794147ea
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.navigation.directive.pfVerticalNavigation - Router.html
@@ -0,0 +1,188 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/navigation/examples/vertical-navigation-router.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/navigation/examples/vertical-navigation-router.js#L163" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfVerticalNavigation - Router</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.navigation</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-router-page"><p>This example shows how to use pfVerticalNavigation with angular-ui-router's $states and uiSrefs.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-vertical-navigation - -router
+ brand-src="{string}"
+ brand-alt="{string}"
+ show-badges="{boolean}"
+ persistent-secondary="{boolean}"
+ hidden-icons="{boolean}"
+ items="{array}"
+ navigate-callback="{function}"
+ item-click-callback="{function}"
+ update-active-items-on-click="{boolean}"
+ ignore-mobile="{boolean}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>brandSrc</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-router-page"><p>src for brand image</p>
+</div></td></tr><tr><td>brandAlt</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-router-page"><p>Text for product name when brand image is not available</p>
+</div></td></tr><tr><td>showBadges</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-router-page"><p>Flag if badges are used on navigation items, default: false</p>
+</div></td></tr><tr><td>persistentSecondary</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-router-page"><p>Flag to use persistent secondary menus, default: false</p>
+</div></td></tr><tr><td>hiddenIcons</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-router-page"><p>Flag to not show icons on the primary menu, default: false</p>
+</div></td></tr><tr><td>items</td><td><a href="" class="label type-hint type-hint-array">array</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-router-page"><p>List of navigation items</p>
+<ul style='list-style-type: none'>
+<li>.title - (string) Name of item to be displayed on the menu
+<li>.iconClass - (string) Classes for icon to be shown on the menu (ex. "fa fa-dashboard")
+<li>.href - (string) href link to navigate to on click
+<li>.children - (array) Submenu items (same structure as top level items)
+<li>.badges - (array) Badges to display for the item, badges with a zero count are not displayed.
+ <ul style='list-style-type: none'>
+ <li>.count - (number) Count to display in the badge
+ <li>.iconClass - (string) Class to use for showing an icon before the count
+ <li>.tooltip - (string) Tooltip to display for the badge
+ <li>.badgeClass: - (string) Additional class(es) to add to the badge container
+ </ul>
+<li>.uiSref - (string) Optional Angular UI Router state name. If specified, href must be not defined, and vice versa.
+<li>.uiSrefOptions - (object) Optional object to be passed to Angular UI Router $state.go() function
+</ul></div></td></tr><tr><td>navigateCallback</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-router-page"><p>function(item) Callback method invoked on a navigation item click (one with no submenus)</p>
+</div></td></tr><tr><td>itemClickCallback</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-router-page"><p>function(item) Callback method invoked on an item click</p>
+</div></td></tr><tr><td>updateActiveItemsOnClick</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-router-page"><p>Flag if active items should be marked on click rather than on navigation change, default: false</p>
+</div></td></tr><tr><td>ignoreMobile</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-router-page"><p>Flag if mobile state should be ignored (use only if absolutely necessary) default: false</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-navigation-directive-page patternfly-navigation-directive-pfverticalnavigation-router-page"><h4 id="example_source">Source</h4>
+<div source-edit="myApp" source-edit-deps="angular.js patternfly.utils patternfly.filters patternfly.sort patternfly.views script.js hide-show.js" source-edit-html="index.html-41" source-edit-css="" source-edit-js="script.js-42 hide-show.js" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-41" ng-html-wrap-loaded="myApp angular.js patternfly.utils patternfly.filters patternfly.sort patternfly.views script.js hide-show.js"></pre>
+<script type="text/ng-template" id="index.html-41">
+ <div>
+ <button class="btn btn-primary" id="showVerticalNavWithRouter" onclick="showVerticalNavWithRouter">Show Vertical Navigation with UIRouter</button>
+ <label class="example-info-text">This will display the vertical nav bar and some mock content over the content of this page.</label>
+ <label class="example-info-text">Exit the demo to return back to this page.</label>
+ </div>
+ <div id="verticalNavWithRouterLayout" class="layout-pf layout-pf-fixed faux-layout hidden" ng-controller="vertNavWithRouterController">
+ <div pf-vertical-navigation items="navigationItems" brand-alt="ANGULAR PATTERNFLY"
+ show-badges="true" pinnable-menus="true" update-active-items-on-click="true"
+ navigate-callback="handleNavigateClickRouter">
+ <div>
+ <ul class="nav navbar-nav">
+ <li><button id="hideVerticalNavWithRouter" class="hide-vertical-nav">Exit Vertical Navigation Demo</button></li>
+ </ul>
+ <ul class="nav navbar-nav navbar-right navbar-iconic">
+ <li class="dropdown">
+ </li>
+ <li class="dropdown">
+ <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+ <span title="Help" class="fa pficon-help"></span>
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+ <li><a href="#">Help</a></li>
+ <li><a href="#">About</a></li>
+ </ul>
+ </li>
+ <li class="dropdown">
+ <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+ <span title="Username" class="fa pficon-user"></span>
+ <span class="caret"></span>
+ </a>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
+ <li><a href="#">Preferences</a></li>
+ <li><a href="#">Logout</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <div id="contentContainer" class="container-fluid container-cards-pf container-pf-nav-pf-vertical example-page-container">
+ <ui-view>
+ <!-- Content will be added here -->
+ </ui-view>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-42"></pre>
+<script type="text/ng-template" id="script.js-42">
+ angular.module('myApp',['patternfly.navigation', 'ui.router'])
+ .config(function($stateProvider, $urlRouterProvider) {
+ $urlRouterProvider.otherwise('dashboard');
+
+ $stateProvider
+ .state('dashboard', {
+ url: '/dashboard',
+ template: '<div class="card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">\
+ <div class="card-pf-body" style="height: 50px;">\
+ <p class="card-pf-aggregate-status-notifications">\
+ State: Dashboard\
+ </p>\
+ </div>\
+ </div>'
+ })
+ .state('dolor', {
+ url: '/dolor',
+ template: '<div class="card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">\
+ <div class="card-pf-body" style="height: 50px;">\
+ <p class="card-pf-aggregate-status-notifications">\
+ State: Dolor\
+ </p>\
+ </div>\
+ </div>'
+ })
+ .state('ipsum', {
+ url: '/ipsum',
+ template: '<div class="card-pf card-pf-accented card-pf-aggregate-status" style="height: 89px;">\
+ <div class="card-pf-body" style="height: 50px;">\
+ <p class="card-pf-aggregate-status-notifications">\
+ State: Ipsum\
+ </p>\
+ </div>\
+ </div>'
+ });
+ })
+ .controller('vertNavWithRouterController', ['$scope',
+ function ($scope) {
+ $scope.navigationItems = [
+ {
+ title: "Dashboard",
+ iconClass: "fa fa-dashboard",
+ uiSref: "dashboard",
+ uiSrefOptions: { someKey: 'SomeValue' }
+ },
+ {
+ title: "Dolor",
+ iconClass : "fa fa-shield",
+ uiSref: "dolor"
+ },
+ {
+ title: "Ipsum",
+ iconClass : "fa fa-space-shuttle",
+ uiSref: "ipsum"
+ },
+ {
+ title: "Exit Demo"
+ }
+ ];
+ $scope.handleNavigateClickRouter = function (item) {
+ if (item.title === "Exit Demo") {
+ angular.element(document.querySelector("#verticalNavWithRouterLayout")).addClass("hidden");
+ }
+ };
+ }
+ ]);
+</script>
+</div>
+<div class="tab-pane" title="hide-show.js">
+<pre class="prettyprint linenums" ng-set-text="hide-show.js"></pre>
+<script type="text/ng-template" id="hide-show.js">
+ $(document).ready(function() {
+ $(document).on('click', '#showVerticalNavWithRouter', function() {
+ $(document.getElementById("verticalNavWithRouterLayout")).removeClass("hidden");
+ });
+ $(document).on('click', '#hideVerticalNavWithRouter', function() {
+ $(document.getElementById("verticalNavWithRouterLayout")).addClass("hidden");
+ });
+ });
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="myApp" ng-set-html="index.html-41" ng-eval-javascript="script.js-42 hide-show.js"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.notification.Notification.html b/dist/docs/partials/api/patternfly.notification.Notification.html
new file mode 100644
index 000000000..0cfdfc0d1
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.notification.Notification.html
@@ -0,0 +1,85 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/notification/notification.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/notification/notification.js#L82" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">Notification</code>
+<div><span class="hint">service in module <code ng:non-bindable="">patternfly.notification</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-notification-notification-page"><p>Notification service used to notify user about important events in the application.</p>
+<h4 id="description_configuring-the-service">Configuring the service</h4>
+<p>You can configure the service with: setDelay, setVerbose and setPersist.</p>
+<h5 id="description_configuring-the-service_notificationssetdelay">Notifications.setDelay</h5>
+<p>Set the delay after which the notification is dismissed. The argument of this method expects miliseconds. Default
+delay is 5000 ms.</p>
+<h5 id="description_configuring-the-service_notificationssetverbose">Notifications.setVerbose</h5>
+<p>Set the verbose mode to on (default) or off. During the verbose mode, each notification is printed in the console,
+too. This is done using the default angular.js $log service.</p>
+<h5 id="description_configuring-the-service_notificationssetpersist">Notifications.setPersist</h5>
+<p>Sets persist option for particular modes. Notification with persistent mode won't be dismissed after delay, but has
+to be closed manually with the close button. By default, the "error" and "httpError" modes are set to persistent.
+The input is an object in format {mode: persistValue}.</p>
+<h4 id="description_configuration-example">Configuration Example</h4>
+<pre><code class="lang-js">angular.module('myApp', []).config(function (NotificationsProvider) {
+ NotificationsProvider.setDelay(10000).setVerbose(false).setPersist({'error': true, 'httpError': true, 'warn': true});
+});
+</code></pre>
+</div></div>
+<h2 id="dependencies">Dependencies</h2>
+<ul class="dependencies"><li><code ng:non-bindable=""><a href="#/api/ng.$rootScope">$rootScope</a></code>
+</li>
+</ul>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-notification-notification-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.notification" source-edit-deps="angular.js script.js" source-edit-html="index.html-47" source-edit-css="" source-edit-js="script.js-48" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-47" ng-html-wrap-loaded="patternfly.notification angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-47">
+ <div ng-controller="NotificationDemoCtrl">
+ <pf-notification-list></pf-notification-list>
+
+ <form class="form-horizontal">
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="message">Message:</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" ng-model="message" id="message"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="type">Type:</label>
+ <div class="col-sm-10">
+ <select pf-select ng-model="type" id="type" ng-options="o as o for o in types"></select>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="col-sm-12">
+ <button ng-click="notify()">Add notification</button>
+ </div>
+ </div>
+ </form>
+ </div>
+ </script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-48"></pre>
+<script type="text/ng-template" id="script.js-48">
+ angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, Notifications ) {
+
+ var typeMap = { 'Info': Notifications.info,
+ 'Success': Notifications.success,
+ 'Warning': Notifications.warn,
+ 'Danger': Notifications.error };
+
+ $scope.types = Object.keys(typeMap);
+
+ $scope.type = $scope.types[0];
+ $scope.message = 'Default notification message.';
+
+ $scope.notify = function () {
+ typeMap[$scope.type]($scope.message);
+ }
+ });
+ </script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.notification" ng-set-html="index.html-47" ng-eval-javascript="script.js-48"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.notification.directive.pfInlineNotification.html b/dist/docs/partials/api/patternfly.notification.directive.pfInlineNotification.html
new file mode 100644
index 000000000..0d1af795b
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.notification.directive.pfInlineNotification.html
@@ -0,0 +1,84 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/notification/inline-notification.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/notification/inline-notification.directive.js#L69" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfInlineNotification</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.notification</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-notification-directive-page patternfly-notification-directive-pfinlinenotification-page"><p>The main visual element of the notification message.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as element:<pre class="prettyprint linenums"><pf-inline-notification
+ [pf-notification-type="{expression}"]
+ [pf-notification-message="{expression}"]
+ [pf-notification-header="{expression}"]
+ [pf-notification-persistent="{expression}"]>
+</pf-inline-notification></pre>
+<h3 id="usage_directive-info">Directive info</h3>
+<div class="directive-info"><ul><li>This directive creates new scope.</li>
+</ul>
+</div>
+<h4 id="usage_directive-info_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>pfNotificationType <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfinlinenotification-page"><p>The type of the notification message. Allowed value is one of these: 'success','info','danger', 'warning'.</p>
+</div></td></tr><tr><td>pfNotificationMessage <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfinlinenotification-page"><p>The main text message of the notification.</p>
+</div></td></tr><tr><td>pfNotificationHeader <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfinlinenotification-page"><p>The header text of the notification.</p>
+</div></td></tr><tr><td>pfNotificationPersistent <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfinlinenotification-page"><p>The notification won't disappear after delay timeout, but has to be closed manually with the close button.</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-notification-directive-page patternfly-notification-directive-pfinlinenotification-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.notification" source-edit-deps="angular.js script.js" source-edit-html="index.html-43" source-edit-css="" source-edit-js="script.js-44" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-43" ng-html-wrap-loaded="patternfly.notification angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-43">
+ <div ng-controller="NotificationDemoCtrl">
+
+ <pf-inline-notification pf-notification-type="type"
+ pf-notification-header="header"
+ pf-notification-message="message"
+ pf-notification-persistent="isPersistent">
+ </pf-inline-notification>
+
+ <form class="form-horizontal">
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="header">Header:</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" ng-model="header" id="header"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="message">Message:</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" ng-model="message" id="message"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="type">Type:</label>
+ <div class="col-sm-10">
+ <select pf-select ng-model="type" id="type" ng-options="o as o for o in types"></select>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="type">Persistent:</label>
+ <div class="col-sm-10">
+ <input type="checkbox" ng-model="isPersistent"></input>
+ </div>
+ </div>
+ </form>
+ </div>
+ </script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-44"></pre>
+<script type="text/ng-template" id="script.js-44">
+ angular.module( 'patternfly.notification' ).controller( 'NotificationDemoCtrl', function( $scope, Notifications ) {
+ $scope.types = ['success','info','danger', 'warning'];
+ $scope.type = $scope.types[0];
+ $scope.isPersistent = false;
+
+ $scope.header = 'Default Header.';
+ $scope.message = 'Default Message.';
+ });
+ </script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.notification" ng-set-html="index.html-43" ng-eval-javascript="script.js-44"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.notification.directive.pfNotificationDrawer.html b/dist/docs/partials/api/patternfly.notification.directive.pfNotificationDrawer.html
new file mode 100644
index 000000000..c986ba3c7
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.notification.directive.pfNotificationDrawer.html
@@ -0,0 +1,512 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/notification/notification-drawer.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/notification/notification-drawer.directive.js#L474" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfNotificationDrawer</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.notification</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>Directive for rendering a notification drawer. This provides a common mechanism to handle how the notification
+drawer should look and behave without mandating the look of the notification group heading or notification body.
+<br><br>
+An array of notification groups must be passed to create each group in the drawer. Each notification
+group must include an array of notifications to be shown for that group, the array MUST be called 'notifications'.
+You must provide the source for the heading, sub-heading, and notification body to show the content you desire for each.
+Pass a customScope object containing any scope variables/functions you need to access from the included source, access these
+via hanlders.<your handler> in your included source.
+<br><br></p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-notification-drawer
+ drawer-hidden="{boolean}"
+ allow-expand="{boolean}"
+ draw-expanded="{boolean}"
+ drawer-title="{string}"
+ notification-groups="{object}"
+ action-button-title="{string}"
+ action-button-callback="{function}"
+ title-include="{string}"
+ heading-include="{string}"
+ subheading-include="{string}"
+ notification-body-include="{string}"
+ notification-footer-include="{string}"
+ custom-scope="{object}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>drawerHidden</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>Flag if the drawer is currently hidden</p>
+</div></td></tr><tr><td>allowExpand</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>Flag if the drawer can be expanded. Optional, default: false</p>
+</div></td></tr><tr><td>drawExpanded</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>Flag if the drawer is expanded (only valid if allowExpand is true). Optional, default: false</p>
+</div></td></tr><tr><td>drawerTitle</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>Title to display for the drawer (leaving this blank will remove the provided expand capability)</p>
+</div></td></tr><tr><td>notificationGroups</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>Array of notification groups to add to the drawer</p>
+</div></td></tr><tr><td>actionButtonTitle</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>Text for the lower action button of the drawer (optional, if not specified there will be no action button)</p>
+</div></td></tr><tr><td>actionButtonCallback</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>function(notificationGroup) Callback method for action button for each group, the notificationGroup is passed (Optional)</p>
+</div></td></tr><tr><td>titleInclude</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>Include src for the title area for the notification drawer, use this to customize the drawer title area</p>
+</div></td></tr><tr><td>headingInclude</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>Include src for the heading area for each notification group, access the group via notificationGroup</p>
+</div></td></tr><tr><td>subheadingInclude</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>Include src for the sub-heading area for each notification group, access the group via notificationGroup</p>
+</div></td></tr><tr><td>notificationBodyInclude</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>Include src for the notification body for each notification, access the notification via notification</p>
+</div></td></tr><tr><td>notificationFooterInclude</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>Include src for the notification footer for each notification, access the notification via notification</p>
+</div></td></tr><tr><td>customScope</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><p>Object containing any variables/functions used by the included src, access via customScope.<xxx></p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationdrawer-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.notification" source-edit-deps="angular.js patternfly.utils patternfly.filters patternfly.sort patternfly.views script.js" source-edit-html="index.html-45 heading.html subheading.html notification-footer.html notification-body.html" source-edit-css="" source-edit-js="script.js-46" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-45" ng-html-wrap-loaded="patternfly.notification angular.js patternfly.utils patternfly.filters patternfly.sort patternfly.views script.js"></pre>
+<script type="text/ng-template" id="index.html-45">
+ <div ng-controller="DrawerCtrl" class="row example-container">
+ <div class="col-md-12 pre-demo-text">
+ <label>Click the notifications indicator to show the Notification Drawer: </label>
+ </div>
+ <div class="navbar-pf-vertical">
+ <nav class="collapse navbar-collapse">
+ <ul class="nav navbar-nav navbar-left navbar-iconic">
+ <li class="drawer-pf-trigger dropdown">
+ <a class="nav-item-iconic drawer-pf-trigger-icon" ng-click="toggleShowDrawer()">
+ <span class="fa fa-bell" title="Notifications"></span>
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </div>
+ <div class="layout-pf-fixed">
+ <div class="navbar-pf-vertical">
+ <div pf-notification-drawer drawer-hidden="hideDrawer" drawer-title="Notifications Drawer" allow-expand="true"
+ action-button-title="Mark All Read" action-button-callback="actionButtonCB" notification-groups="groups"
+ heading-include="heading.html" subheading-include="subheading.html" notification-body-include="notification-body.html"
+ notification-footer-include="notification-footer.html" custom-scope="customScope">
+ </div>
+ </div>
+ </div>
+ <div class="col-md-12">
+ <label class="actions-label">Actions: </label>
+ </div>
+ <div class="col-md-12">
+ <textarea rows="3" class="col-md-12">{{actionsText}}</textarea>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="heading.html">
+<pre class="prettyprint linenums" ng-set-text="heading.html"></pre>
+<script type="text/ng-template" id="heading.html">
+ {{notificationGroup.heading}}
+</script>
+</div>
+<div class="tab-pane" title="subheading.html">
+<pre class="prettyprint linenums" ng-set-text="subheading.html"></pre>
+<script type="text/ng-template" id="subheading.html">
+ {{notificationGroup.subHeading}}
+</script>
+</div>
+<div class="tab-pane" title="notification-footer.html">
+<pre class="prettyprint linenums" ng-set-text="notification-footer.html"></pre>
+<script type="text/ng-template" id="notification-footer.html">
+ <a class="btn btn-link btn-block" role="button" ng-click="customScope.clearAll(notificationGroup)">
+ <span class="pficon pficon-close"></span>
+ <span> Clear All</span>
+ </a>
+</script>
+</div>
+<div class="tab-pane" title="notification-body.html">
+<pre class="prettyprint linenums" ng-set-text="notification-body.html"></pre>
+<script type="text/ng-template" id="notification-body.html">
+ <div ng-if="!drawerExpanded">
+ <div class="dropdown pull-right dropdown-kebab-pf" ng-if="notification.actions && notification.actions.length > 0">
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+ <span class="fa fa-ellipsis-v"></span>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+ <li ng-repeat="action in notification.actions"
+ role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
+ ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
+ <a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="customScope.handleAction(notification, action)">
+ {{action.name}}
+ </a>
+ </li>
+ </ul>
+ </div>
+ <span ng-if="notification.status" class="{{'pull-left ' + customScope.getNotficationStatusIconClass(notification)}}" ng-click="customScope.markRead(notification)"></span>
+ <span class="drawer-pf-notification-message" ng-click="customScope.markRead(notification)">{{notification.message}}</span>
+ <div class="drawer-pf-notification-info" ng-click="customScope.markRead(notification)">
+ <span class="date">{{notification.timeStamp | date:'MM/dd/yyyy'}}</span>
+ <span class="time">{{notification.timeStamp | date:'h:mm:ss a'}}</span>
+ </div>
+ </div>
+ <div ng-if="drawerExpanded" class="container-fluid">
+ <div class="row">
+ <div class="col-sm-6">
+ <span class="pull-left {{customScope.getNotficationStatusIconClass(notification)}}"></span>
+ <span class="drawer-pf-notification-message notification-message"
+ tooltip-append-to-body="true" tooltip-popup-delay="500" tooltip-placement="bottom" tooltip="{{notification.message}}">
+ {{notification.message}}
+ </span>
+ </div>
+ <div class="col-sm-6">
+ <div class="drawer-pf-notification-info">
+ <span class="date">{{notification.timeStamp | date:'MM/dd/yyyy'}}</span>
+ <span class="time">{{notification.timeStamp | date:'h:mm:ss a'}}</span>
+ </div>
+ <div class="dropdown pull-right dropdown-kebab-pf" ng-if="notification.actions && notification.actions.length > 0">
+ <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+ <span class="fa fa-ellipsis-v"></span>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
+ <li ng-repeat="action in notification.actions"
+ role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
+ ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
+ <a ng-if="action.isSeparator !== true" class="secondary-action" title="{{action.title}}" ng-click="customScope.handleAction(notification, action)">
+ {{action.name}}
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-46"></pre>
+<script type="text/ng-template" id="script.js-46">
+ angular.module('patternfly.notification').controller('DrawerCtrl', ['$scope',
+ function ($scope) {
+ var currentTime = (new Date()).getTime();
+ $scope.hideDrawer = true;
+ $scope.toggleShowDrawer = function () {
+ $scope.hideDrawer = !$scope.hideDrawer;
+ };
+
+ var menuActions = [
+ {
+ name: 'Action',
+ title: 'Perform an action'
+ },
+ {
+ name: 'Another Action',
+ title: 'Do something else'
+ },
+ {
+ name: 'Disabled Action',
+ title: 'Unavailable action',
+ isDisabled: true
+ },
+ {
+ name: 'Something Else',
+ title: ''
+ },
+ {
+ isSeparator: true
+ },
+ {
+ name: 'Grouped Action 1',
+ title: 'Do something'
+ },
+ {
+ name: 'Grouped Action 2',
+ title: 'Do something similar'
+ }
+ ];
+
+
+ $scope.groups = [
+ {
+ heading: "Notification Tab 1",
+ subHeading: "5 New Events",
+ notifications: [
+ {
+ unread: true,
+ message: "A New Event! Huzzah! Bold",
+ status: 'info',
+ actions: menuActions,
+ timeStamp: currentTime - (1 * 60 * 60 * 1000)
+ },
+ {
+ unread: true,
+ message: "Another Event Notification",
+ status: 'ok',
+ actions: menuActions,
+ timeStamp: currentTime - (2 * 60 * 60 * 1000)
+ },
+ {
+ unread: false,
+ message: "Another Event Notification",
+ status: 'warning',
+ actions: menuActions,
+ timeStamp: currentTime - (10 * 60 * 60 * 1000)
+ },
+ {
+ unread: false,
+ message: "Another Event Notification",
+ status: 'error',
+ actions: menuActions,
+ timeStamp: currentTime - (12 * 60 * 60 * 1000)
+ },
+ {
+ unread: true,
+ message: "A New Event! Huzzah! Bold",
+ status: 'info',
+ actions: menuActions,
+ timeStamp: currentTime - (1 * 60 * 60 * 1000)
+ },
+ {
+ unread: true,
+ message: "Another Event Notification",
+ status: 'error',
+ actions: menuActions,
+ timeStamp: currentTime - (2 * 60 * 60 * 1000)
+ },
+ {
+ unread: false,
+ message: "Another Event Notification",
+ status: 'ok',
+ actions: menuActions,
+ timeStamp: currentTime - (10 * 60 * 60 * 1000)
+ },
+ {
+ unread: false,
+ message: "Another Event Notification",
+ status: 'warning',
+ actions: menuActions,
+ timeStamp: currentTime - (12 * 60 * 60 * 1000)
+ },
+ {
+ unread: true,
+ message: "Another Event Notification",
+ status: 'info',
+ actions: menuActions,
+ timeStamp: currentTime - (240 * 60 * 60 * 1000)
+ }
+ ],
+ isLoading: true
+ },
+ {
+ heading: "Notification Tab 2",
+ subHeading: "3 New Events",
+ notifications: [
+ {
+ unread: true,
+ message: "A New Event! Huzzah! Bold",
+ status: 'info',
+ actions: menuActions,
+ timeStamp: currentTime - (1 * 60 * 60 * 1000)
+ },
+ {
+ unread: true,
+ message: "Another Event Notification",
+ status: 'error',
+ actions: menuActions,
+ timeStamp: currentTime - (2 * 60 * 60 * 1000)
+ },
+ {
+ unread: false,
+ message: "Another Event Notification",
+ status: 'warning',
+ actions: menuActions,
+ timeStamp: currentTime - (10 * 60 * 60 * 1000)
+ },
+ {
+ unread: false,
+ message: "Another Event Notification",
+ status: 'ok',
+ actions: menuActions,
+ timeStamp: currentTime - (12 * 60 * 60 * 1000)
+ },
+ {
+ unread: true,
+ message: "Another Event Notification",
+ status: 'warning',
+ actions: menuActions,
+ timeStamp: currentTime - (240 * 60 * 60 * 1000)
+ }
+ ]
+ },
+ {
+ heading: "Notification Tab 3",
+ subHeading: "3 New Events",
+ notifications: [
+ {
+ unread: true,
+ message: "A New Event! Huzzah! Bold",
+ status: 'ok',
+ actions: menuActions,
+ timeStamp: currentTime - (1 * 60 * 60 * 1000)
+ },
+ {
+ unread: true,
+ message: "Another Event Notification",
+ status: 'warning',
+ actions: menuActions,
+ timeStamp: currentTime - (2 * 60 * 60 * 1000)
+ },
+ {
+ unread: false,
+ message: "Another Event Notification",
+ status: 'info',
+ actions: menuActions,
+ timeStamp: currentTime - (10 * 60 * 60 * 1000)
+ },
+ {
+ unread: false,
+ message: "Another Event Notification",
+ status: 'ok',
+ actions: menuActions,
+ timeStamp: currentTime - (12 * 60 * 60 * 1000)
+ },
+ {
+ unread: true,
+ message: "Another Event Notification",
+ status: 'error',
+ actions: menuActions,
+ timeStamp: currentTime - (240 * 60 * 60 * 1000)
+ }
+ ]
+ },
+ {
+ heading: "Notification Tab 4",
+ subHeading: "3 New Events",
+ notifications: [
+ {
+ unread: true,
+ message: "A New Event! Huzzah! Bold",
+ status: 'warning',
+ actions: menuActions,
+ timeStamp: currentTime - (1 * 60 * 60 * 1000)
+ },
+ {
+ unread: true,
+ message: "Another Event Notification",
+ status: 'ok',
+ actions: menuActions,
+ timeStamp: currentTime - (2 * 60 * 60 * 1000)
+ },
+ {
+ unread: false,
+ message: "Another Event Notification",
+ status: 'ok',
+ actions: menuActions,
+ timeStamp: currentTime - (10 * 60 * 60 * 1000)
+ },
+ {
+ unread: false,
+ message: "Another Event Notification",
+ status: 'error',
+ actions: menuActions,
+ timeStamp: currentTime - (12 * 60 * 60 * 1000)
+ },
+ {
+ unread: true,
+ message: "Another Event Notification",
+ status: 'info',
+ actions: menuActions,
+ timeStamp: currentTime - (240 * 60 * 60 * 1000)
+ }
+ ]
+ },
+ {
+ heading: "Notification Tab 5",
+ subHeading: "3 New Events",
+ notifications: [
+ {
+ unread: true,
+ message: "A New Event! Huzzah! Bold",
+ status: 'error',
+ actions: menuActions,
+ timeStamp: currentTime - (1 * 60 * 60 * 1000)
+ },
+ {
+ unread: true,
+ message: "Another Event Notification",
+ status: 'error',
+ actions: menuActions,
+ timeStamp: currentTime - (2 * 60 * 60 * 1000)
+ },
+ {
+ unread: false,
+ message: "Another Event Notification",
+ status: 'warning',
+ actions: menuActions,
+ timeStamp: currentTime - (10 * 60 * 60 * 1000)
+ },
+ {
+ unread: false,
+ message: "Another Event Notification",
+ status: 'warning',
+ actions: menuActions,
+ timeStamp: currentTime - (12 * 60 * 60 * 1000)
+ },
+ {
+ unread: true,
+ message: "Another Event Notification",
+ status: 'error',
+ actions: menuActions,
+ timeStamp: currentTime - (240 * 60 * 60 * 1000)
+ }
+ ]
+ }
+ ];
+
+ $scope.actionsText = "";
+ $scope.actionButtonCB = function (group) {
+ $scope.actionsText = "Action Button clicked: " + group.heading + "\n" + $scope.actionsText;
+ group.notifications.forEach(function(nextNotification) {
+ nextNotification.unread = false;
+ });
+ group.subHeading = "0 New Events";
+ };
+
+ //
+ // Define customScope to contain anything that needs to be accessed from the included source
+ // html files (heading, subheading, or notificaton body).
+ //
+
+ $scope.customScope = {};
+ $scope.customScope.getNotficationStatusIconClass = function (notification) {
+ var retClass = '';
+ if (notification && notification.status) {
+ if (notification.status === 'info') {
+ retClass = "pficon pficon-info";
+ } else if (notification.status === 'error') {
+ retClass = "pficon pficon-error-circle-o";
+ } else if (notification.status === 'warning') {
+ retClass = "pficon pficon-warning-triangle-o";
+ } else if (notification.status === 'ok') {
+ retClass = "pficon pficon-ok";
+ }
+ }
+ return retClass;
+ };
+ $scope.customScope.handleAction = function (notification, action) {
+ if (action.isDisabled) {
+ return;
+ }
+ var newText = notification.message + " - " + action.name;
+ $scope.actionsText = newText + "\n" + $scope.actionsText;
+ };
+ $scope.customScope.clearAll = function (group) {
+ var newText = group.heading + " - Clear All";
+ $scope.actionsText = newText + "\n" + $scope.actionsText;
+ group.notifications = [];
+ group.subHeading = "0 New Events";
+ };
+
+ $scope.customScope.markRead = function (notification) {
+ if (notification.unread) {
+ notification.unread = false;
+ $scope.actionsText = "Mark notification read" + "\n" + $scope.actionsText;
+ var notificationGroup = $scope.groups.find(function(group) {
+ return group.notifications.find(function(nextNotification) {
+ return notification == nextNotification;
+ });
+ });
+ var unread = notificationGroup.notifications.filter(function(nextNotification) {
+ return nextNotification.unread;
+ });
+ notificationGroup.subHeading = unread.length + " New Events";
+ }
+ };
+ }
+ ]);
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.notification" ng-set-html="index.html-45" ng-eval-javascript="script.js-46"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.notification.directive.pfNotificationList.html b/dist/docs/partials/api/patternfly.notification.directive.pfNotificationList.html
new file mode 100644
index 000000000..b76b50250
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.notification.directive.pfNotificationList.html
@@ -0,0 +1,70 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/notification/notification.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/notification/notification.js#L268" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfNotificationList</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.notification</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationlist-page"><p>Using this directive automatically creates a list of notifications generated by the <a href="#/api/patternfly.notification.Notification">notification</a> service.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as element:<pre class="prettyprint linenums"><pf-notification-list>
+</pf-notification-list></pre>
+</div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-notification-directive-page patternfly-notification-directive-pfnotificationlist-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.notification" source-edit-deps="angular.js script.js" source-edit-html="index.html-49" source-edit-css="" source-edit-js="script.js-50" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-49" ng-html-wrap-loaded="patternfly.notification angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-49">
+ <div ng-controller="NotificationDemoCtrl">
+
+ <pf-notification-list></pf-notification-list>
+
+ <form class="form-horizontal">
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="type">Type:</label>
+ <div class="col-sm-10">
+ <select pf-select ng-model="type" id="type" ng-options="o as o for o in types"></select>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="message">Message:</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" ng-model="message" id="message"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="col-sm-12">
+ <button ng-click="notify()">Add notification - Click me several times</button>
+ </div>
+ </div>
+ </form>
+ </div>
+ </script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-50"></pre>
+<script type="text/ng-template" id="script.js-50">
+ angular.module('patternfly.notification').controller( 'NotificationDemoCtrl', function( $scope, Notifications ) {
+ $scope.message = 'Default Message.';
+
+ var typeMap = { 'Info': Notifications.info,
+ 'Success': Notifications.success,
+ 'Warning': Notifications.warn,
+ 'Danger': Notifications.error };
+
+ $scope.types = Object.keys(typeMap);
+
+ $scope.type = $scope.types[0];
+ $scope.message = 'Default notification message.';
+
+ $scope.notify = function () {
+ typeMap[$scope.type]($scope.message);
+ }
+ });
+ </script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.notification" ng-set-html="index.html-49" ng-eval-javascript="script.js-50"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.notification.directive.pfToastNotification.html b/dist/docs/partials/api/patternfly.notification.directive.pfToastNotification.html
new file mode 100644
index 000000000..ec293c69b
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.notification.directive.pfToastNotification.html
@@ -0,0 +1,182 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/notification/toast-notification.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/notification/toast-notification.directive.js#L163" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfToastNotification</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.notification</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotification-page"><p>Toast notifications are used to notify users of a system occurence. Toast notifications should be transient and stay on the screen for 8 seconds,
+so that they do not block the information behind them for too long, but allows the user to read the message.
+The pfToastNotification directive allows status, header, message, primary action and menu actions for the notification. The notification can also
+allow the user to close the notification.</p>
+<p>Note: Using the kebab menu (menu actions) with the close button is not currently supported. If both are specified the close button will not be shown.
+Add a close menu item if you want to have both capabilities.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as element:<pre class="prettyprint linenums"><pf-toast-notification
+ notification-type="{string}"
+ header="{string}"
+ message="{string}"
+ show-close="{boolean}"
+ close-callback="{function}"
+ action-title="{string}"
+ action-callback="{function}"
+ menu-actions="{Array}"
+ update-viewing="{function}"
+ data="{object}">
+</pf-toast-notification></pre>
+<h3 id="usage_directive-info">Directive info</h3>
+<div class="directive-info"><ul><li>This directive creates new scope.</li>
+</ul>
+</div>
+<h4 id="usage_directive-info_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>notificationType</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotification-page"><p>The type of the notification message. Allowed value is one of these: 'success','info','danger', 'warning'</p>
+</div></td></tr><tr><td>header</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotification-page"><p>The header text of the notification.</p>
+</div></td></tr><tr><td>message</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotification-page"><p>The main text message of the notification.</p>
+</div></td></tr><tr><td>showClose</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotification-page"><p>Flag to show the close button, default: true</p>
+</div></td></tr><tr><td>closeCallback</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotification-page"><p>(function(data)) Function to invoke when close action is selected, optional</p>
+</div></td></tr><tr><td>actionTitle</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotification-page"><p>Text to show for the primary action, optional.</p>
+</div></td></tr><tr><td>actionCallback</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotification-page"><p>(function(data)) Function to invoke when primary action is selected, optional</p>
+</div></td></tr><tr><td>menuActions</td><td><a href="" class="label type-hint type-hint-array">Array</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotification-page"><p>Optional list of actions to place in the kebab menu:<br/></p>
+<ul style='list-style-type: none'>
+ <li>.name - (String) The name of the action, displayed on the button
+ <li>.actionFn - (function(action, data)) Function to invoke when the action selected
+ <li>.isDisabled - (Boolean) set to true to disable the action
+ <li>.isSeparator - (Boolean) set to true if this is a placehodler for a separator rather than an action
+</ul></div></td></tr><tr><td>updateViewing</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotification-page"><p>(function(boolean, data)) Function to invoke when user is viewing/no-viewing (hovering on) the toast</p>
+</div></td></tr><tr><td>data</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotification-page"><p>Any data needed by the callbacks (optional)</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotification-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.notification" source-edit-deps="angular.js script.js" source-edit-html="index.html-53" source-edit-css="" source-edit-js="script.js-54" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-53" ng-html-wrap-loaded="patternfly.notification angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-53">
+ <div ng-controller="ToastNotificationDemoCtrl" class="row example-container">
+ <div class="col-md-12">
+ <div pf-toast-notification notification-type="{{type}}" header="{{header}}" message="{{message}}"
+ show-close="{{showClose}}" close-callback="closeCallback"
+ action-title="{{primaryAction}}" action-callback="handleAction"
+ menu-actions="menuActions">
+ </div>
+
+ <form class="form-horizontal">
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="header">Header:</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" ng-model="header" id="header"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="message">Message:</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" ng-model="message" id="message"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="message">Primary Action:</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" ng-model="primaryAction" id="primaryAction"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="type">Type:</label>
+ <div class="col-sm-10">
+ <select pf-select ng-model="type" id="type" ng-options="o as o for o in types"></select>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="type">Show Close:</label>
+ <div class="col-sm-3">
+ <input type="checkbox" ng-model="showClose"/>
+ </div>
+ <label class="col-sm-2 control-label" for="type">Show Menu:</label>
+ <div class="col-sm-3">
+ <input type="checkbox" ng-model="showMenu"/>
+ </div>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-12">
+ <label class="actions-label">Actions: </label>
+ </div>
+ <div class="col-md-12">
+ <textarea rows="3" class="col-md-12">{{actionText}}</textarea>
+ </div>
+ </div>
+ </script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-54"></pre>
+<script type="text/ng-template" id="script.js-54">
+ angular.module( 'patternfly.notification' ).controller( 'ToastNotificationDemoCtrl', function( $scope, Notifications ) {
+ $scope.types = ['success','info','danger', 'warning'];
+ $scope.type = $scope.types[0];
+ $scope.showClose = false;
+
+ $scope.header = 'Default Header.';
+ $scope.message = 'Default Message.';
+ $scope.primaryAction = '';
+
+ $scope.showMenu = false;
+ var performAction = function (menuAction) {
+ $scope.actionText += menuAction.name + '\n';
+ };
+ var menuActions = [
+ {
+ name: 'Action',
+ title: 'Perform an action',
+ actionFn: performAction
+ },
+ {
+ name: 'Another Action',
+ title: 'Do something else',
+ actionFn: performAction
+ },
+ {
+ name: 'Disabled Action',
+ title: 'Unavailable action',
+ actionFn: performAction,
+ isDisabled: true
+ },
+ {
+ name: 'Something Else',
+ title: '',
+ actionFn: performAction
+ },
+ {
+ isSeparator: true
+ },
+ {
+ name: 'Grouped Action 1',
+ title: 'Do something',
+ actionFn: performAction
+ },
+ {
+ name: 'Grouped Action 2',
+ title: 'Do something similar',
+ actionFn: performAction
+ }
+ ];
+
+ $scope.$watch('showMenu', function () {
+ if ($scope.showMenu) {
+ $scope.menuActions = menuActions;
+ } else {
+ $scope.menuActions = undefined;
+ }
+ });
+
+ $scope.actionText = "";
+
+ $scope.handleAction = function () {
+ $scope.actionText = $scope.primaryAction + '\n' + $scope.actionText;
+ };
+ $scope.closeCallback = function () {
+ $scope.actionText = "Close" + '\n' + $scope.actionText;
+ };
+ });
+ </script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.notification" ng-set-html="index.html-53" ng-eval-javascript="script.js-54"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.notification.directive.pfToastNotificationList.html b/dist/docs/partials/api/patternfly.notification.directive.pfToastNotificationList.html
new file mode 100644
index 000000000..831c913fe
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.notification.directive.pfToastNotificationList.html
@@ -0,0 +1,203 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/notification/toast-notification-list.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/notification/toast-notification-list.directive.js#L188" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfToastNotificationList</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.notification</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotificationlist-page"><p>Using this directive displayes a list of toast notifications</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-toast-notification-list
+ notifications="{Array}"
+ show-close="{Boolean}"
+ close-callback="{function}"
+ update-viewing="{function}">
+ ...
+</ANY></pre>
+<h3 id="usage_directive-info">Directive info</h3>
+<div class="directive-info"><ul><li>This directive creates new scope.</li>
+</ul>
+</div>
+<h4 id="usage_directive-info_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>notifications</td><td><a href="" class="label type-hint type-hint-array">Array</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotificationlist-page"><p>The list of current notifcations to display. Each notification should have the following (see pfToastNotification):</p>
+<ul style='list-style-type: none'>
+ <li>.type - (String) The type of the notification message. Allowed value is one of these: 'success','info','danger', 'warning'
+ <li>.header - (String) The header to display for the notification (optional)
+ <li>.message - (String) The main text message of the notification.
+ <li>.actionTitle Text to show for the primary action, optional.
+ <li>.actionCallback (function(this notification)) Function to invoke when primary action is selected, optional
+ <li>.menuActions Optional list of actions to place in the kebab menu:<br/>
+ <ul style='list-style-type: none'>
+ <li>.name - (String) The name of the action, displayed on the button
+ <li>.actionFn - (function(action, this notification)) Function to invoke when the action selected
+ <li>.isDisabled - (Boolean) set to true to disable the action
+ <li>.isSeparator - (Boolean) set to true if this is a placehodler for a separator rather than an action
+ </ul>
+ <li>.isPersistent Flag to show close button for the notification even if showClose is false.
+</ul></div></td></tr><tr><td>showClose</td><td><a href="" class="label type-hint type-hint-boolean">Boolean</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotificationlist-page"><p>Flag to show the close button on all notifications (not shown if the notification has menu actions)</p>
+</div></td></tr><tr><td>closeCallback</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotificationlist-page"><p>(function(data)) Function to invoke when closes a toast notification</p>
+</div></td></tr><tr><td>updateViewing</td><td><a href="" class="label type-hint type-hint-function">function</a></td><td><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotificationlist-page"><p>(function(boolean, data)) Function to invoke when user is viewing/not-viewing (hovering on) a toast notification</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-notification-directive-page patternfly-notification-directive-pftoastnotificationlist-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.notification" source-edit-deps="angular.js script.js" source-edit-html="index.html-51" source-edit-css="" source-edit-js="script.js-52" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-51" ng-html-wrap-loaded="patternfly.notification angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-51">
+ <div ng-controller="ToastNotificationListDemoCtrl" >
+ <div pf-toast-notification-list notifications="notifications" show-close="showClose" close-callback="handleClose" update-viewing="updateViewing"></div>
+ <div class="row example-container">
+ <div class="col-md-12">
+ <form class="form-horizontal">
+ <div class="form-group">
+ <label class="col-sm-3 control-label" for="type">Show Close buttons:</label>
+ <div class="col-sm-1">
+ <input type="checkbox" ng-model="showClose"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="type">Type:</label>
+ <div class="col-sm-10">
+ <select pf-select ng-model="type" id="type" ng-options="o as o for o in types"></select>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="header">Header:</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" ng-model="header" id="header"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="message">Message:</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" ng-model="message" id="message"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="message">Primary Action:</label>
+ <div class="col-sm-10">
+ <input type="text" class="form-control" ng-model="primaryAction" id="primaryAction"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="type">Persistent:</label>
+ <div class="col-sm-1">
+ <input type="checkbox" ng-model="persistent"/>
+ </div>
+ <label class="col-sm-2 control-label" for="type">Show Menu:</label>
+ <div class="col-sm-2">
+ <input type="checkbox" ng-model="showMenu"/>
+ </div>
+ </div>
+ <div class="form-group">
+ <div class="col-sm-12">
+ <button ng-click="notify()">Add notification - Click me several times</button>
+ </div>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-12">
+ <label class="actions-label">Actions: </label>
+ </div>
+ <div class="col-md-12">
+ <textarea rows="3" class="col-md-12">{{actionText}}</textarea>
+ </div>
+ </div>
+ </div>
+ </script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-52"></pre>
+<script type="text/ng-template" id="script.js-52">
+ angular.module('patternfly.notification').controller( 'ToastNotificationListDemoCtrl', function( $scope, $rootScope, Notifications ) {
+ $scope.message = 'Default Message.';
+
+ var typeMap = { 'Info': 'info',
+ 'Success': 'success',
+ 'Warning': 'warning',
+ 'Danger': 'danger' };
+
+ $scope.types = Object.keys(typeMap);
+
+ $scope.type = $scope.types[0];
+ $scope.header = 'Default header.';
+ $scope.message = 'Default notification message.';
+ $scope.showClose = false;
+ $scope.persistent = false;
+
+ $scope.primaryAction = '';
+
+ $scope.showMenu = false;
+ var performAction = function (menuAction, data) {
+ $scope.actionText += menuAction.name + ": " + data.message + '\n';
+ };
+ $scope.menuActions = [
+ {
+ name: 'Action',
+ title: 'Perform an action',
+ actionFn: performAction
+ },
+ {
+ name: 'Another Action',
+ title: 'Do something else',
+ actionFn: performAction
+ },
+ {
+ name: 'Disabled Action',
+ title: 'Unavailable action',
+ actionFn: performAction,
+ isDisabled: true
+ },
+ {
+ name: 'Something Else',
+ title: '',
+ actionFn: performAction
+ },
+ {
+ isSeparator: true
+ },
+ {
+ name: 'Grouped Action 1',
+ title: 'Do something',
+ actionFn: performAction
+ },
+ {
+ name: 'Grouped Action 2',
+ title: 'Do something similar',
+ actionFn: performAction
+ }
+ ];
+
+ $scope.actionText = "";
+
+ $scope.handleAction = function (data) {
+ $scope.actionText = $scope.primaryAction + ": " + data.message + '\n' + $scope.actionText;
+ };
+ $scope.handleClose = function (data) {
+ $scope.actionText = "Closed: " + data.message + '\n'+ $scope.actionText;
+ Notifications.remove(data);
+ };
+ $scope.updateViewing = function (viewing, data) {
+ Notifications.setViewing(data, viewing);
+ };
+
+ $scope.notify = function () {
+ Notifications.message (
+ typeMap[$scope.type],
+ $scope.header,
+ $scope.message,
+ $scope.persistent,
+ $scope.handleClose,
+ $scope.primaryAction,
+ $scope.handleAction,
+ ($scope.showMenu ? $scope.menuActions : undefined)
+ );
+ }
+
+ $scope.notifications = Notifications.data;
+ });
+ </script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.notification" ng-set-html="index.html-51" ng-eval-javascript="script.js-52"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.select.pfSelect.html b/dist/docs/partials/api/patternfly.select.pfSelect.html
new file mode 100644
index 000000000..e293ff7f3
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.select.pfSelect.html
@@ -0,0 +1,77 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/select/select.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/select/select.js#L66" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfSelect</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-select-page patternfly-select-pfselect-page"><p>An AngularJS wrapper for the <a href="http://silviomoreto.github.io/bootstrap-select/">Bootstrap-select</a> jQuery plugin which is used
+as a default select decorator in <a href="https://www.patternfly.org/widgets/#bootstrap-select">Patternfly</a>.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><select pf-select
+ ng-model="{string}"
+ [ng-options="{string}"]>
+ ...
+</select></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>ngModel</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-select-page patternfly-select-pfselect-page"><p>Model binding using the <a href="https://docs.angularjs.org/api/ng/type/ngModel.NgModelController/">NgModelController</a> is mandatory.</p>
+</div></td></tr><tr><td>ngOptions <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-select-page patternfly-select-pfselect-page"><p>The <code><a href="https://docs.angularjs.org/api/ng/directive/select/">ngOptions</a></code> attribute can be used to dynamically generate a list of <code><option></code>
+elements for the <code><select></code> element.</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-select-page patternfly-select-pfselect-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.select" source-edit-deps="angular.js script.js" source-edit-html="index.html-55" source-edit-css="" source-edit-js="script.js-56" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-55" ng-html-wrap-loaded="patternfly.select angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-55">
+ <div ng-controller="SelectDemoCtrl">
+
+ <form class="form-horizontal">
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="pet">Preferred pet:</label>
+ <div class="col-sm-10">
+ <select pf-select ng-model="pet" id="pet" ng-options="o as o for o in pets"></select>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="fruit">Preferred fruit:</label>
+ <div class="col-sm-10">
+ <select pf-select ng-model="fruit" id="fruit">
+ <option value="orange">Orange</option>
+ <option value="apple" ng-selected="true" selected>Apple</option>
+ <option value="banana">Banana</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="drink">Preferred drink:</label>
+ <div class="col-sm-10">
+ <select pf-select="{ noneSelectedText: 'None' }" ng-model="drink" id="drink" ng-options="o as o for o in drinks">
+ <option value="">No drink selected</option>
+ </select>
+ </div>
+ </div>
+
+ </form>
+
+ <p>Your preferred pet is {{pet}}.</p>
+
+ </div>
+ </script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-56"></pre>
+<script type="text/ng-template" id="script.js-56">
+ angular.module( 'patternfly.select' ).controller( 'SelectDemoCtrl', function( $scope ) {
+ $scope.drinks = ['tea', 'coffee', 'water'];
+ $scope.pets = ['Dog', 'Cat', 'Chicken'];
+ $scope.pet = $scope.pets[0];
+ $scope.fruit = 'orange';
+ });
+ </script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.select" ng-set-html="index.html-55" ng-eval-javascript="script.js-56"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.sort.directive.pfSort.html b/dist/docs/partials/api/patternfly.sort.directive.pfSort.html
new file mode 100644
index 000000000..c13fa079c
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.sort.directive.pfSort.html
@@ -0,0 +1,160 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/sort/sort-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/sort/sort-directive.js#L148" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfSort</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.sort</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-sort-directive-page patternfly-sort-directive-pfsort-page"><p>Directive for a sort component
+<br><br></p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-sort
+ config="{object}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>config</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-sort-directive-page patternfly-sort-directive-pfsort-page"><p>configuration settings for the sort:<br/></p>
+<ul style='list-style-type: none'>
+<li>.fields - (Array) List of sortable fields containing:
+<ul style='list-style-type: none'>
+<li>.id - (String) Unique Id for the sort field
+<li>.title - (String) The title to display for the sort field
+<li>.sortType - (String) The sort type, 'alpha' or 'numeric'
+</ul>
+<li>.currentField - (Object) Currently selected field
+<li>.isAscending - (boolean) Current sort direction is ascending. True for ascending, False for descending
+<li>.onSortChange - ( function(sortId, sortDirection ) Function to call when the current sort params change
+</ul></div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-sort-directive-page patternfly-sort-directive-pfsort-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.sort" source-edit-deps="angular.js script.js" source-edit-html="index.html-57" source-edit-css="" source-edit-js="script.js-58" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-57" ng-html-wrap-loaded="patternfly.sort angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-57">
+ <div ng-controller="ViewCtrl" class="row example-container">
+ <div class="col-md-12">
+ <div pf-sort id="exampleSort" config="sortConfig"></div>
+ </div>
+ <hr class="col-md-12">
+ <div class="col-md-12">
+ <label class="events-label">Items: </label>
+ </div>
+ <div class="col-md-12">
+ <div ng-repeat="item in items" class="col-md-12 cfme-row-column">
+ <div class="row">
+ <div class="col-md-3">
+ <span>{{item.name}}</span>
+ </div>
+ <div class="col-md-3">
+ <span>{{item.count}}</span>
+ </div>
+ <div class="col-md-3">
+ <span>{{item.description}}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-58"></pre>
+<script type="text/ng-template" id="script.js-58">
+ angular.module('patternfly.sort').controller('ViewCtrl', ['$scope',
+ function ($scope) {
+ $scope.items = [
+ {
+ name: "Item 7",
+ count: 432,
+ description: 'Very nice item'
+ },
+ {
+ name: "Item 6",
+ count: 22,
+ description: 'It lasts forever'
+ },
+ {
+ name: "Item 3",
+ count: 632,
+ description: 'Good stuff cheap'
+ },
+ {
+ name: "Item 2",
+ count: 12,
+ description: 'Fantastic'
+ },
+ {
+ name: "Item 9",
+ count: 99,
+ description: 'It does alright'
+ },
+ {
+ name: "Item 4",
+ count: 442,
+ description: 'Horrible'
+ },
+ {
+ name: "Item 1",
+ count: 42,
+ description: 'Most excellent'
+ },
+ {
+ name: "Item 8",
+ count: 2,
+ description: 'Get it while it lasts'
+ },
+ {
+ name: "Item 5",
+ count: 321,
+ description: 'Beautiful style'
+ }
+ ];
+
+ var compareFn = function(item1, item2) {
+ var compValue = 0;
+ if ($scope.sortConfig.currentField.id === 'name') {
+ compValue = item1.name.localeCompare(item2.name);
+ } else if ($scope.sortConfig.currentField.id === 'count') {
+ compValue = item1.count - item2.count;
+ } else if ($scope.sortConfig.currentField.id === 'description') {
+ compValue = item1.description.localeCompare(item2.description);
+ }
+
+ if (!$scope.sortConfig.isAscending) {
+ compValue = compValue * -1;
+ }
+
+ return compValue;
+ };
+
+ var sortChange = function (sortId, isAscending) {
+ $scope.items.sort(compareFn);
+ };
+
+ $scope.sortConfig = {
+ fields: [
+ {
+ id: 'name',
+ title: 'Name',
+ sortType: 'alpha'
+ },
+ {
+ id: 'count',
+ title: 'Count',
+ sortType: 'numeric'
+ },
+ {
+ id: 'description',
+ title: 'Description',
+ sortType: 'alpha'
+ }
+ ],
+ onSortChange: sortChange
+ };
+ }
+ ]);
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.sort" ng-set-html="index.html-57" ng-eval-javascript="script.js-58"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.toolbars.directive.pfToolbar.html b/dist/docs/partials/api/patternfly.toolbars.directive.pfToolbar.html
new file mode 100644
index 000000000..6de6b6722
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.toolbars.directive.pfToolbar.html
@@ -0,0 +1,421 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/toolbars/toolbar-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/toolbars/toolbar-directive.js#L409" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfToolbar</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.toolbars</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-toolbars-directive-page patternfly-toolbars-directive-pftoolbar-page"><p>Directive for standard toolbar. Includes filtering and view selection capabilities
+<br><br></p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-toolbar
+ config="{object}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>config</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-toolbars-directive-page patternfly-toolbars-directive-pftoolbar-page"><p>configuration settings for the toolbar:<br/></p>
+<ul style='list-style-type: none'>
+ <li>.filterConfig - (Object) Optional filter config. If undefined, no filtering capabilities are shown.
+ See pfSimpleFilter for filter config options.
+ <li>.sortConfig - (Object) Optional sort config. If undefined, no sort capabilities are shown.
+ See pfSort for sort config options.
+ <li>.viewsConfig - (Object) Optional configuration settings for view type selection
+ <ul style='list-style-type: none'>
+ <li>.views - (Array) List of available views for selection. See pfViewUtils for standard available views
+ <ul style='list-style-type: none'>
+ <li>.id - (String) Unique id for the view, used for comparisons
+ <li>.title - (String) Optional title, uses as a tooltip for the view selector
+ <li>.iconClass - (String) Icon class to use for the view selector
+ </ul>
+ <li>.onViewSelect - ( function(view) ) Function to call when a view is selected
+ <li>.currentView - the id of the currently selected view
+ </ul>
+ <li>.actionsConfig - (Object) Optional configuration settings for toolbar actions
+ <ul style='list-style-type: none'>
+ <li>.primaryActions - (Array) List of primary actions to display on the toolbar
+ <ul style='list-style-type: none'>
+ <li>.name - (String) The name of the action, displayed on the button
+ <li>.title - (String) Optional title, used for the tooltip
+ <li>.actionFn - (function(action)) Function to invoke when the action selected
+ <li>.isDisabled - (Boolean) set to true to disable the action
+ </ul>
+ <li>.moreActions - (Array) List of secondary actions to display on the toolbar action pulldown menu
+ <ul style='list-style-type: none'>
+ <li>.name - (String) The name of the action, displayed on the button
+ <li>.title - (String) Optional title, used for the tooltip
+ <li>.actionFn - (function(action)) Function to invoke when the action selected
+ <li>.isDisabled - (Boolean) set to true to disable the action
+ <li>.isSeparator - (Boolean) set to true if this is a placehodler for a separator rather than an action
+ </ul>
+ <li>.actionsInclude - (Boolean) set to true if using the actions transclude to add custom action buttons (only available if using Angular 1.5 or later)
+ </ul>
+</ul></div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-toolbars-directive-page patternfly-toolbars-directive-pftoolbar-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.toolbars" source-edit-deps="angular.js patternfly.filters patternfly.sort patternfly.views script.js" source-edit-html="index.html-59" source-edit-css="" source-edit-js="script.js-60" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-59" ng-html-wrap-loaded="patternfly.toolbars angular.js patternfly.filters patternfly.sort patternfly.views script.js"></pre>
+<script type="text/ng-template" id="index.html-59">
+ <div ng-controller="ViewCtrl" class="row example-container">
+ <div class="col-md-12">
+ <div pf-toolbar id="exampleToolbar" config="toolbarConfig">
+ <actions>
+ <span class="dropdown primary-action" dropdown>
+ <button class="btn btn-default dropdown-toggle" dropdown-toggle type="button">
+ Menu Action
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li role="menuitem" ng-click="optionSelected(1)">
+ <a class="secondary-action">Option 1</a>
+ </li>
+ <li role="menuitem" ng-click="optionSelected(2)">
+ <a class="secondary-action">Option 2</a>
+ </li>
+ <li role="menuitem" ng-click="optionSelected(3)">
+ <a class="secondary-action">Option 3</a>
+ </li>
+ <li role="menuitem" ng-click="optionSelected(4)">
+ <a class="secondary-action">Option 4</a>
+ </li>
+ </ul>
+ </span>
+ <button class="btn btn-default primary-action" type="button" ng-click="doAdd()">
+ <span class="fa fa-plus"></span>
+ Add Action
+ </button>
+ </actions>
+ </div>
+ </div>
+ <hr class="col-md-12">
+ <div class="col-md-12">
+ <label class="events-label">Valid Items: </label>
+ </div>
+ <div class="col-md-12 list-view-container" ng-if="viewType == 'listView'">
+ <div pf-list-view config="listConfig" items="items">
+ <div class="list-view-pf-description">
+ <div class="list-group-item-heading">
+ {{item.name}}
+ </div>
+ <div class="list-group-item-text">
+ {{item.address}}
+ </div>
+ </div>
+ <div class="list-view-pf-additional-info">
+ <div class="list-view-pf-additional-info-item">
+ {{item.age}}
+ </div>
+ <div class="list-view-pf-additional-info-item">
+ {{item.birthMonth}}
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-12 card-view-container" ng-if="viewType == 'cardView'">
+ <div pf-card-view config="vm.listConfig" items="items">
+ <div class="col-md-12">
+ <span>{{item.name}}</span>
+ </div>
+ <div class="col-md-12">
+ <span>{{item.address}}</span>
+ </div>
+ <div class="col-md-12">
+ <span>{{item.birthMonth}}</span>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-12">
+ <label class="events-label">Current Filters: </label>
+ </div>
+ <div class="col-md-12">
+ <textarea rows="5" class="col-md-12">{{filtersText}}</textarea>
+ </div>
+ <div class="col-md-12">
+ <label class="actions-label">Actions: </label>
+ </div>
+ <div class="col-md-12">
+ <textarea rows="3" class="col-md-12">{{actionsText}}</textarea>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-60"></pre>
+<script type="text/ng-template" id="script.js-60">
+angular.module('patternfly.toolbars').controller('ViewCtrl', ['$scope', 'pfViewUtils',
+ function ($scope, pfViewUtils) {
+ $scope.filtersText = '';
+
+ $scope.allItems = [
+ {
+ name: "Fred Flintstone",
+ age: 57,
+ address: "20 Dinosaur Way, Bedrock, Washingstone",
+ birthMonth: 'February'
+ },
+ {
+ name: "John Smith",
+ age: 23,
+ address: "415 East Main Street, Norfolk, Virginia",
+ birthMonth: 'October'
+ },
+ {
+ name: "Frank Livingston",
+ age: 71,
+ address: "234 Elm Street, Pittsburgh, Pennsylvania",
+ birthMonth: 'March'
+ },
+ {
+ name: "Judy Green",
+ age: 21,
+ address: "2 Apple Boulevard, Cincinatti, Ohio",
+ birthMonth: 'December'
+ },
+ {
+ name: "Pat Thomas",
+ age: 19,
+ address: "50 Second Street, New York, New York",
+ birthMonth: 'February'
+ }
+ ];
+ $scope.items = $scope.allItems;
+
+ var matchesFilter = function (item, filter) {
+ var match = true;
+ var re = new RegExp(filter.value, 'i');
+
+ if (filter.id === 'name') {
+ match = item.name.match(re) !== null;
+ } else if (filter.id === 'age') {
+ match = item.age === parseInt(filter.value);
+ } else if (filter.id === 'address') {
+ match = item.address.match(re) !== null;
+ } else if (filter.id === 'birthMonth') {
+ match = item.birthMonth === filter.value;
+ }
+ return match;
+ };
+
+ var matchesFilters = function (item, filters) {
+ var matches = true;
+
+ filters.forEach(function(filter) {
+ if (!matchesFilter(item, filter)) {
+ matches = false;
+ return false;
+ }
+ });
+ return matches;
+ };
+
+ var applyFilters = function (filters) {
+ $scope.items = [];
+ if (filters && filters.length > 0) {
+ $scope.allItems.forEach(function (item) {
+ if (matchesFilters(item, filters)) {
+ $scope.items.push(item);
+ }
+ });
+ } else {
+ $scope.items = $scope.allItems;
+ }
+ };
+
+ var filterChange = function (filters) {
+ $scope.filtersText = "";
+ filters.forEach(function (filter) {
+ $scope.filtersText += filter.title + " : " + filter.value + "\n";
+ });
+ applyFilters(filters);
+ $scope.toolbarConfig.filterConfig.resultsCount = $scope.items.length;
+ };
+
+ $scope.filterConfig = {
+ fields: [
+ {
+ id: 'name',
+ title: 'Name',
+ placeholder: 'Filter by Name...',
+ filterType: 'text'
+ },
+ {
+ id: 'age',
+ title: 'Age',
+ placeholder: 'Filter by Age...',
+ filterType: 'text'
+ },
+ {
+ id: 'address',
+ title: 'Address',
+ placeholder: 'Filter by Address...',
+ filterType: 'text'
+ },
+ {
+ id: 'birthMonth',
+ title: 'Birth Month',
+ placeholder: 'Filter by Birth Month...',
+ filterType: 'select',
+ filterValues: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+ }
+ ],
+ resultsCount: $scope.items.length,
+ appliedFilters: [],
+ onFilterChange: filterChange
+ };
+
+ var viewSelected = function(viewId) {
+ $scope.viewType = viewId
+ };
+
+ $scope.viewsConfig = {
+ views: [pfViewUtils.getListView(), pfViewUtils.getCardView()],
+ onViewSelect: viewSelected
+ };
+ $scope.viewsConfig.currentView = $scope.viewsConfig.views[0].id;
+ $scope.viewType = $scope.viewsConfig.currentView;
+
+ var monthVals = {
+ 'January': 1,
+ 'February': 2,
+ 'March': 3,
+ 'April': 4,
+ 'May': 5,
+ 'June': 6,
+ 'July': 7,
+ 'August': 8,
+ 'September': 9,
+ 'October': 10,
+ 'November': 11,
+ 'December': 12
+ };
+ var compareFn = function(item1, item2) {
+ var compValue = 0;
+ if ($scope.sortConfig.currentField.id === 'name') {
+ compValue = item1.name.localeCompare(item2.name);
+ } else if ($scope.sortConfig.currentField.id === 'age') {
+ compValue = item1.age - item2.age;
+ } else if ($scope.sortConfig.currentField.id === 'address') {
+ compValue = item1.address.localeCompare(item2.address);
+ } else if ($scope.sortConfig.currentField.id === 'birthMonth') {
+ compValue = monthVals[item1.birthMonth] - monthVals[item2.birthMonth];
+ }
+
+ if (!$scope.sortConfig.isAscending) {
+ compValue = compValue * -1;
+ }
+
+ return compValue;
+ };
+
+ var sortChange = function (sortId, isAscending) {
+ $scope.items.sort(compareFn);
+ };
+
+ $scope.sortConfig = {
+ fields: [
+ {
+ id: 'name',
+ title: 'Name',
+ sortType: 'alpha'
+ },
+ {
+ id: 'age',
+ title: 'Age',
+ sortType: 'numeric'
+ },
+ {
+ id: 'address',
+ title: 'Address',
+ sortType: 'alpha'
+ },
+ {
+ id: 'birthMonth',
+ title: 'Birth Month',
+ sortType: 'alpha'
+ }
+ ],
+ onSortChange: sortChange
+ };
+
+ $scope.actionsText = "";
+ var performAction = function (action) {
+ $scope.actionsText = action.name + "\n" + $scope.actionsText;
+ };
+
+ $scope.actionsConfig = {
+ primaryActions: [
+ {
+ name: 'Action 1',
+ title: 'Do the first thing',
+ actionFn: performAction
+ },
+ {
+ name: 'Action 2',
+ title: 'Do something else',
+ actionFn: performAction
+ }
+ ],
+ moreActions: [
+ {
+ name: 'Action',
+ title: 'Perform an action',
+ actionFn: performAction
+ },
+ {
+ name: 'Another Action',
+ title: 'Do something else',
+ actionFn: performAction
+ },
+ {
+ name: 'Disabled Action',
+ title: 'Unavailable action',
+ actionFn: performAction,
+ isDisabled: true
+ },
+ {
+ name: 'Something Else',
+ title: '',
+ actionFn: performAction
+ },
+ {
+ isSeparator: true
+ },
+ {
+ name: 'Grouped Action 1',
+ title: 'Do something',
+ actionFn: performAction
+ },
+ {
+ name: 'Grouped Action 2',
+ title: 'Do something similar',
+ actionFn: performAction
+ }
+ ],
+ actionsInclude: true
+ };
+
+ $scope.toolbarConfig = {
+ viewsConfig: $scope.viewsConfig,
+ filterConfig: $scope.filterConfig,
+ sortConfig: $scope.sortConfig,
+ actionsConfig: $scope.actionsConfig
+ };
+
+ $scope.listConfig = {
+ selectionMatchProp: 'name',
+ checkDisabled: false
+ };
+
+ $scope.doAdd = function () {
+ $scope.actionsText = "Add Action\n" + $scope.actionsText;
+ };
+ $scope.optionSelected = function (option) {
+ $scope.actionsText = "Option " + option + " selected\n" + $scope.actionsText;
+ };
+ }
+]);
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.toolbars" ng-set-html="index.html-59" ng-eval-javascript="script.js-60"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.utils.directive.pfTransclude.html b/dist/docs/partials/api/patternfly.utils.directive.pfTransclude.html
new file mode 100644
index 000000000..83127a7c8
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.utils.directive.pfTransclude.html
@@ -0,0 +1,104 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/utils/transclude-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/utils/transclude-directive.js#L95" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfTransclude</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.utils</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-utils-directive-page patternfly-utils-directive-pftransclude-page"><p>Directive for transcluding in directives and setting up scope of children of parent directives. This is a workaround
+for <a href="https://github.com/angular/angular.js/issues/5489">https://github.com/angular/angular.js/issues/5489</a></p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-transclude="{string}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>pfTransclude</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-utils-directive-page patternfly-utils-directive-pftransclude-page"><p>specifies the type of transclusion to use.<br/>
+<strong>Values:</strong></p>
+<ul style='list-style-type: none'>
+<li> 'sibling' - The transcluded contents scope is a sibling one to the element where transclusion happens (default)
+<li> 'parent' - The transcluded contents scope is that of the element where transclusion happens.
+<li> 'child' - The transcluded contents scope is child scope to the scope of the element where transclusion happens.
+</ul></div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-utils-directive-page patternfly-utils-directive-pftransclude-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.utils" source-edit-deps="angular.js script.js" source-edit-html="index.html-63" source-edit-css="" source-edit-js="script.js-64" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-63" ng-html-wrap-loaded="patternfly.utils angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-63">
+ <div ng-controller="UtilCtrl" class="row pf-transclude-example" style="display:inline-block; width: 100%;">
+ <span>Here the scope id is: <id>{{$id}}</id></span>
+
+ <transclude-sibling class="pf-transclude-example">
+ <pre>This content was transcluded using <b>pf-transclude</b> or <b>pf-transclude="sibling"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
+ </transclude-sibling>
+
+ <transclude-parent>
+ <pre>This content was transcluded using <b>pf-transclude="parent"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
+ </transclude-parent>
+
+ <transclude-child>
+ <pre>This content was transcluded using <b>pf-transclude="child"</b>.</pre><pre>Its scope is: <id>{{$id}}</id> the parent of which is <id>{{$parent.$id}}</id></pre>
+ </transclude-child>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-64"></pre>
+<script type="text/ng-template" id="script.js-64">
+ angular.module('patternfly.utils')
+ .controller( 'UtilCtrl', function($scope) {
+
+ })
+
+ .config(function($provide){
+ $provide.decorator('ngTranscludeDirective', ['$delegate', function($delegate) {
+ // Remove the original directive
+ $delegate.shift();
+ return $delegate;
+ }]);
+ })
+
+ .directive( 'transcludeSibling', function() {
+ return {
+ restrict: 'E',
+ transclude: true,
+ scope: {},
+ template:
+ '<div>' +
+ '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+ '<span pf-transclude></span>' +
+ '</div>'
+ }
+ })
+
+ .directive( 'transcludeParent', function() {
+ return {
+ restrict: 'E',
+ transclude: true,
+ scope: {},
+ template:
+ '<div>' +
+ '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+ '<span pf-transclude="parent"></span>' +
+ '</div>'
+ }
+ })
+
+ .directive( 'transcludeChild', function() {
+ return {
+ restrict: 'E',
+ transclude: true,
+ scope: {},
+ template:
+ '<div>' +
+ '<p>I am a directive with scope <id>{{$id}}</id></p>' +
+ '<span pf-transclude="child"></span>' +
+ '</div>'
+ }
+ })
+ ;
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.utils" ng-set-html="index.html-63" ng-eval-javascript="script.js-64"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.utils.pfFixedAccordion.html b/dist/docs/partials/api/patternfly.utils.pfFixedAccordion.html
new file mode 100644
index 000000000..3332daaa3
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.utils.pfFixedAccordion.html
@@ -0,0 +1,68 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/utils/fixed-accordion.directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/utils/fixed-accordion.directive.js#L54" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfFixedAccordion</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-utils-page patternfly-utils-pffixedaccordion-page"><p>Directive for setting a ui-bootstrap uib-accordion to use a fixed height (collapse elements scroll when necessary)</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-fixed-accordion
+ scroll-selector="{string}"
+ group-height="{string}"
+ group-class="{string}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>scrollSelector</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-utils-page patternfly-utils-pffixedaccordion-page"><p>specifies the selector to be used to find the element that should scroll (optional, the entire collapse area scrolls by default)</p>
+</div></td></tr><tr><td>groupHeight</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-utils-page patternfly-utils-pffixedaccordion-page"><p>Height to set for uib-accordion group (optional)</p>
+</div></td></tr><tr><td>groupClass</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-utils-page patternfly-utils-pffixedaccordion-page"><p>Class to set for uib-accordion group (optional)</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-utils-page patternfly-utils-pffixedaccordion-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.utils" source-edit-deps="angular.js ui.bootstrap script.js" source-edit-html="index.html-61" source-edit-css="" source-edit-js="script.js-62" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-61" ng-html-wrap-loaded="patternfly.utils angular.js ui.bootstrap script.js"></pre>
+<script type="text/ng-template" id="index.html-61">
+<div class="row example-container">
+ <div class="col-md-4">
+ <uib-accordion pf-fixed-accordion group-height="350px" close-others="true">
+ <uib-accordion-group is-open="false" heading="Lorem ipsum">
+ Praesent sagittis est et arcu fringilla placerat. Cras erat ante, dapibus non mauris ac, volutpat sollicitudin ligula. Morbi gravida nisl vel risus tempor, sit amet luctus erat tempus. Curabitur blandit sem non pretium bibendum. Donec eleifend non turpis vitae vestibulum. Vestibulum ut sem ac nunc posuere blandit sed porta lorem. Cras rutrum velit vel leo iaculis imperdiet.
+ </uib-accordion-group>
+ <uib-accordion-group is-open="false" heading="Dolor sit amet">
+ Donec consequat dignissim neque, sed suscipit quam egestas in. Fusce bibendum laoreet lectus commodo interdum. Vestibulum odio ipsum, tristique et ante vel, iaculis placerat nulla. Suspendisse iaculis urna feugiat lorem semper, ut iaculis risus tempus.
+ </uib-accordion-group>
+ <uib-accordion-group is-open="false" heading="Consectetur">
+ Curabitur nisl quam, interdum a venenatis a, consequat a ligula. Nunc nec lorem in erat rhoncus lacinia at ac orci. Sed nec augue congue, vehicula justo quis, venenatis turpis. Nunc quis consectetur purus. Nam vitae viverra lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu augue felis. Maecenas in dignissim purus, quis pulvinar lectus. Vivamus euismod ultrices diam, in mattis nibh.
+ </uib-accordion-group>
+ <uib-accordion-group is-open="false" heading="Adipisicing elit">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </uib-accordion-group>
+ <uib-accordion-group is-open="false" heading="Suspendisse lectus tortor">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.
+ </uib-accordion-group>
+ <uib-accordion-group is-open="false" heading="Velit mauris">
+ Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.
+ </uib-accordion-group>
+ <uib-accordion-group is-open="false" heading="Aliquam convallis">
+ Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
+ </uib-accordion-group>
+ <uib-accordion-group is-open="false" heading="Vulputate dictum">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra. Pellentesque augue justo, sagittis et, lacinia at, venenatis non, arcu. Nunc nec libero. In cursus dictum risus. Etiam tristique nisl a nulla. Ut a orci. Curabitur dolor nunc, egestas at, accumsan at, malesuada nec, magna.
+ </uib-accordion-group>
+ </uib-accordion>
+ </div>
+</div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-62"></pre>
+<script type="text/ng-template" id="script.js-62">
+angular.module('patternfly.utils').controller( 'AccordionCntrl', function($scope) {
+});
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.utils" ng-set-html="index.html-61" ng-eval-javascript="script.js-62"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.validation.pfValidation.html b/dist/docs/partials/api/patternfly.validation.pfValidation.html
new file mode 100644
index 000000000..76c077ceb
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.validation.pfValidation.html
@@ -0,0 +1,83 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/validation/validation.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/validation/validation.js#L72" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfValidation</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-validation-page patternfly-validation-pfvalidation-page"><p>Directive used for input validation based on custom function.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as element:<pre class="prettyprint linenums"><pf-validation
+ [pf-validation-disabled="{expression}"]>
+</pf-validation></pre>
+<h3 id="usage_directive-info">Directive info</h3>
+<div class="directive-info"><ul><li>This directive creates new scope.</li>
+</ul>
+</div>
+<h4 id="usage_directive-info_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>pfValidationDisabled <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="patternfly-validation-page patternfly-validation-pfvalidation-page"><p>If true, the validation is disabled, it is enabled otherwise.</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-validation-page patternfly-validation-pfvalidation-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.validation" source-edit-deps="angular.js script.js" source-edit-html="index.html-65" source-edit-css="" source-edit-js="script.js-66" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-65" ng-html-wrap-loaded="patternfly.validation angular.js script.js"></pre>
+<script type="text/ng-template" id="index.html-65">
+ <div ng-controller="ValidationDemoCtrl">
+ <form class="form-horizontal">
+
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="message">Initially valid:</label>
+ <div class="col-sm-10">
+ <input class="form-control" type="text" ng-model="myValueValid" pf-validation="isNumber(input)"/>
+ <span class="help-block">The value you typed is not a number.</span>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="message">Fixed Number:</label>
+ <div class="col-sm-10">
+ <input class="form-control" type="text" ng-model="myValue" pf-validation="isNumber(input)"/>
+ <span class="help-block">The value you typed is not a number.</span>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="message">Number:</label>
+ <div class="col-sm-10">
+ <input class="form-control" type="text" ng-model="myValue" pf-validation="isNumber(input)" pf-validation-disabled="isValidationDisabled"/>
+ <span class="help-block">The value you typed is not a number.</span>
+ </div>
+ </div>
+
+ <div class="form-group">
+ <label class="col-sm-2 control-label" for="message">Validation disabled:</label>
+ <div class="col-sm-10">
+ <input class="form-control" type="checkbox" ng-model="isValidationDisabled"/>
+ </div>
+ </div>
+ </form>
+ </div>
+ </script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-66"></pre>
+<script type="text/ng-template" id="script.js-66">
+ angular.module( 'patternfly.validation' ).controller( 'ValidationDemoCtrl', function( $scope ) {
+ $scope.myValue = "Change this value to be a number";
+ $scope.myValueValid = 42;
+ $scope.isValidationDisabled = false;
+
+ $scope.isNumber = function (value) {
+ if (isNaN(value)) {
+ return false;
+ }
+
+ return true;
+ }
+ });
+ </script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.validation" ng-set-html="index.html-65" ng-eval-javascript="script.js-66"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.views.directive.pfCardView.html b/dist/docs/partials/api/patternfly.views.directive.pfCardView.html
new file mode 100644
index 000000000..869fd1757
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.views.directive.pfCardView.html
@@ -0,0 +1,206 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/views/cardview/card-view-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/views/cardview/card-view-directive.js#L194" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfCardView</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.views</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-views-directive-page patternfly-views-directive-pfcardview-page"><p>Directive for rendering cards in a view
+<br><br></p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-card-view
+ config="{object}"
+ items="{Array}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>config</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-views-directive-page patternfly-views-directive-pfcardview-page"><p>configuration settings for the cards:<br/></p>
+<ul style='list-style-type: none'>
+<li>.showSelectBox - (boolean) Show item selection boxes for each item, default is true
+<li>.selectItems - (boolean) Allow card selection, default is false
+<li>.dlbClick - (boolean) Handle double clicking (item remains selected on a double click). Default is false.
+<li>.multiSelect - (boolean) Allow multiple card selections, selectItems must also be set, not applicable when dblClick is true. Default is false
+<li>.selectionMatchProp - (string) Property of the items to use for determining matching, default is 'uuid'
+<li>.selectedItems - (array) Current set of selected items
+<li>.checkDisabled - ( function(item) ) Function to call to determine if an item is disabled, default is none
+<li>.onCheckBoxChange - ( function(item) ) Called to notify when a checkbox selection changes, default is none
+<li>.onSelect - ( function(item, event) ) Called to notify of item selection, default is none
+<li>.onSelectionChange - ( function(items) ) Called to notify when item selections change, default is none
+<li>.onClick - ( function(item, event) ) Called to notify when an item is clicked, default is none
+<li>.onDblClick - ( function(item, event) ) Called to notify when an item is double clicked, default is none
+</ul></div></td></tr><tr><td>items</td><td><a href="" class="label type-hint type-hint-array">Array</a></td><td><div class="patternfly-views-directive-page patternfly-views-directive-pfcardview-page"><p>the data to be shown in the cards<br/></p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-views-directive-page patternfly-views-directive-pfcardview-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.views" source-edit-deps="angular.js patternfly.utils script.js" source-edit-html="index.html-67" source-edit-css="" source-edit-js="script.js-68" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-67" ng-html-wrap-loaded="patternfly.views angular.js patternfly.utils script.js"></pre>
+<script type="text/ng-template" id="index.html-67">
+ <style>
+ hr {
+ display: block;
+ height: 10px;
+ border: 0;
+ border-top: 1px solid #525252;
+ margin: 1em 0;
+ padding: 0;
+ }
+ </style>
+ <div ng-controller="ViewCtrl" class="row" style="display:inline-block; width: 100%;">
+ <div class="col-md-12">
+ <div pf-card-view id="exampleCardView" config="config" items="items">
+ <div class="col-md-12">
+ <span>{{item.name}}</span>
+ </div>
+ <div class="col-md-12">
+ <span>{{item.address}}</span>
+ </div>
+ <div class="col-md-12">
+ <span>{{item.city}}, {{item.state}}</span>
+ </div>
+ </div>
+ </div>
+ <hr class="col-md-12">
+ <div class="col-md-12">
+ <form role="form">
+ <div class="form-group">
+ <label>Selection</label>
+ </br>
+ <label class="radio-inline">
+ <input type="radio" ng-model="selectType" value="checkbox" ng-change="updateSelectionType()">Checkbox</input>
+ </label>
+ <label class="radio-inline">
+ <input type="radio" ng-model="selectType" value="card" ng-change="updateSelectionType()">Card</input>
+ </label>
+ <label class="radio-inline">
+ <input type="radio" ng-model="selectType" value="none" ng-change="updateSelectionType()">None</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-12">
+ <form role="form">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="config.dblClick" ng-disabled="!config.selectItems">Double Click</input>
+ </label>
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="config.multiSelect" ng-disabled="config.dblClick || !config.selectItems">Multi Select</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-12">
+ <form role="form">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="showDisabled">Show Disabled Cards</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-12">
+ <label class="events-label">Events: </label>
+ </div>
+ <div class="col-md-12">
+ <textarea rows="10" class="col-md-12">{{eventText}}</textarea>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-68"></pre>
+<script type="text/ng-template" id="script.js-68">
+angular.module('patternfly.views').controller('ViewCtrl', ['$scope',
+function ($scope) {
+ $scope.eventText = '';
+ var handleSelect = function (item, e) {
+ $scope.eventText = item.name + ' selected\n' + $scope.eventText;
+ };
+ var handleSelectionChange = function (selectedItems, e) {
+ $scope.eventText = selectedItems.length + ' items selected\n' + $scope.eventText;
+ };
+ var handleClick = function (item, e) {
+ $scope.eventText = item.name + ' clicked\n' + $scope.eventText;
+ };
+ var handleDblClick = function (item, e) {
+ $scope.eventText = item.name + ' double clicked\n' + $scope.eventText;
+ };
+ var handleCheckBoxChange = function (item, selected, e) {
+ $scope.eventText = item.name + ' checked: ' + item.selected + '\n' + $scope.eventText;
+ };
+
+ var checkDisabledItem = function(item) {
+ return $scope.showDisabled && (item.name === "John Smith");
+ };
+
+ $scope.selectType = 'checkbox';
+ $scope.updateSelectionType = function() {
+ if ($scope.selectType === 'checkbox') {
+ $scope.config.selectItems = false;
+ $scope.config.showSelectBox = true;
+ } else if ($scope.selectType === 'card') {
+ $scope.config.selectItems = true;
+ $scope.config.showSelectBox = false;
+ } else {
+ $scope.config.selectItems = false
+ $scope.config.showSelectBox = false;
+ }
+ };
+
+ $scope.showDisabled = false;
+
+ $scope.config = {
+ selectItems: false,
+ multiSelect: false,
+ dblClick: false,
+ selectionMatchProp: 'name',
+ selectedItems: [],
+ checkDisabled: checkDisabledItem,
+ showSelectBox: true,
+ onSelect: handleSelect,
+ onSelectionChange: handleSelectionChange,
+ onCheckBoxChange: handleCheckBoxChange,
+ onClick: handleClick,
+ onDblClick: handleDblClick
+ };
+
+ $scope.items = [
+ {
+ name: "Fred Flintstone",
+ address: "20 Dinosaur Way",
+ city: "Bedrock",
+ state: "Washingstone"
+ },
+ {
+ name: "John Smith",
+ address: "415 East Main Street",
+ city: "Norfolk",
+ state: "Virginia"
+ },
+ {
+ name: "Frank Livingston",
+ address: "234 Elm Street",
+ city: "Pittsburgh",
+ state: "Pennsylvania"
+ },
+ {
+ name: "Judy Green",
+ address: "2 Apple Boulevard",
+ city: "Cincinatti",
+ state: "Ohio"
+ },
+ {
+ name: "Pat Thomas",
+ address: "50 Second Street",
+ city: "New York",
+ state: "New York"
+ },
+ ]
+ }
+]);
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.views" ng-set-html="index.html-67" ng-eval-javascript="script.js-68"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.views.directive.pfListView.html b/dist/docs/partials/api/patternfly.views.directive.pfListView.html
new file mode 100644
index 000000000..2b20049d8
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.views.directive.pfListView.html
@@ -0,0 +1,441 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/views/listview/list-view-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/views/listview/list-view-directive.js#L422" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfListView</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.views</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-views-directive-page patternfly-views-directive-pflistview-page"><p>Directive for rendering a list view.
+Pass a customScope object containing any scope variables/functions you need to access from the transcluded source, access these
+via 'customScope' in your transcluded hmtl.
+<br><br>
+If using expanding rows, use a list-expanded-content element containing expandable content for each row. Item data can be accessed inside list-expanded-content by using $parent.item.property. For each item in the items array, the expansion can be disabled by setting disableRowExpansion to true on the item.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-list-view
+ items="{array}"
+ config="{object}"
+ action-buttons="{array}"
+ enable-button-for-item-fn="{function (action, item))}"
+ menu-actions="{array}"
+ hide-menu-for-item-fn="{function (item))}"
+ menu-class-for-item-fn="{function (item))}"
+ update-menu-action-for-item-fn="{function (action, item))}"
+ custom-scope="{object}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>items</td><td><a href="" class="label type-hint type-hint-array">array</a></td><td><div class="patternfly-views-directive-page patternfly-views-directive-pflistview-page"><p>Array of items to display in the list view. If an item in the array has a 'rowClass' field, the value of this field will be used as a class specified on the row (list-group-item).</p>
+</div></td></tr><tr><td>config</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-views-directive-page patternfly-views-directive-pflistview-page"><p>Configuration settings for the list view:</p>
+<ul style='list-style-type: none'>
+<li>.showSelectBox - (boolean) Show item selection boxes for each item, default is true
+<li>.selectItems - (boolean) Allow row selection, default is false
+<li>.dlbClick - (boolean) Handle double clicking (item remains selected on a double click). Default is false.
+<li>.dragEnabled - (boolean) Enable drag and drop. Default is false.
+<li>.dragEnd - ( function() ) Function to call when the drag operation ended, default is none
+<li>.dragMoved - ( function() ) Function to call when the drag operation moved an element, default is none
+<li>.dragStart - ( function(item) ) Function to call when the drag operation started, default is none
+<li>.multiSelect - (boolean) Allow multiple row selections, selectItems must also be set, not applicable when dblClick is true. Default is false
+<li>.useExpandingRows - (boolean) Allow row expansion for each list item.
+<li>.selectionMatchProp - (string) Property of the items to use for determining matching, default is 'uuid'
+<li>.selectedItems - (array) Current set of selected items
+<li>.checkDisabled - ( function(item) ) Function to call to determine if an item is disabled, default is none
+<li>.onCheckBoxChange - ( function(item) ) Called to notify when a checkbox selection changes, default is none
+<li>.onSelect - ( function(item, event) ) Called to notify of item selection, default is none
+<li>.onSelectionChange - ( function(items) ) Called to notify when item selections change, default is none
+<li>.onClick - ( function(item, event) ) Called to notify when an item is clicked, default is none. Note: row expansion is the default behavior after onClick performed, but user can stop such default behavior by adding the sentence "return false;" to the end of onClick function body
+<li>.onDblClick - ( function(item, event) ) Called to notify when an item is double clicked, default is none
+</ul></div></td></tr><tr><td>actionButtons</td><td><a href="" class="label type-hint type-hint-array">array</a></td><td><div class="patternfly-views-directive-page patternfly-views-directive-pflistview-page"><p>List of action buttons in each row</p>
+<ul style='list-style-type: none'>
+ <li>.name - (String) The name of the action, displayed on the button
+ <li>.title - (String) Optional title, used for the tooltip
+ <li>.class - (String) Optional class to add to the action button
+ <li>.include - (String) Optional include src for the button. Used for custom button layouts (icons, dropdowns, etc)
+ <li>.includeClass - (String) Optional class to set on the include src div (only relevant when include is set).
+ <li>.actionFn - (function(action)) Function to invoke when the action selected
+</ul></div></td></tr><tr><td>enableButtonForItemFn</td><td><a href="" class="label type-hint type-hint-function">function (action, item)</a></td><td><div class="patternfly-views-directive-page patternfly-views-directive-pflistview-page"><p>function(action, item) Used to enabled/disable an action button based on the current item</p>
+</div></td></tr><tr><td>menuActions</td><td><a href="" class="label type-hint type-hint-array">array</a></td><td><div class="patternfly-views-directive-page patternfly-views-directive-pflistview-page"><p>List of actions for dropdown menu in each row</p>
+<ul style='list-style-type: none'>
+ <li>.name - (String) The name of the action, displayed on the button
+ <li>.title - (String) Optional title, used for the tooltip
+ <li>.actionFn - (function(action)) Function to invoke when the action selected
+ <li>.isVisible - (Boolean) set to false to hide the action
+ <li>.isDisabled - (Boolean) set to true to disable the action
+ <li>.isSeparator - (Boolean) set to true if this is a placeholder for a separator rather than an action
+</ul></div></td></tr><tr><td>hideMenuForItemFn</td><td><a href="" class="label type-hint type-hint-function">function (item)</a></td><td><div class="patternfly-views-directive-page patternfly-views-directive-pflistview-page"><p>function(item) Used to hide all menu actions for a particular item</p>
+</div></td></tr><tr><td>menuClassForItemFn</td><td><a href="" class="label type-hint type-hint-function">function (item)</a></td><td><div class="patternfly-views-directive-page patternfly-views-directive-pflistview-page"><p>function(item) Used to specify a class for an item's dropdown kebab</p>
+</div></td></tr><tr><td>updateMenuActionForItemFn</td><td><a href="" class="label type-hint type-hint-function">function (action, item)</a></td><td><div class="patternfly-views-directive-page patternfly-views-directive-pflistview-page"><p>function(action, item) Used to update a menu action based on the current item</p>
+</div></td></tr><tr><td>customScope</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-views-directive-page patternfly-views-directive-pflistview-page"><p>Object containing any variables/functions used by the transcluded html, access via customScope.<xxx></p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-views-directive-page patternfly-views-directive-pflistview-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.views" source-edit-deps="angular.js patternfly.utils script.js" source-edit-html="index.html-69" source-edit-css="" source-edit-js="script.js-70" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-69" ng-html-wrap-loaded="patternfly.views angular.js patternfly.utils script.js"></pre>
+<script type="text/ng-template" id="index.html-69">
+ <div ng-controller="ViewCtrl" class="row example-container">
+ <div class="col-md-12 list-view-container">
+ <div pf-list-view class="example-list-view" id="exampleListView"
+ config="config" items="items"
+ action-buttons="actionButtons"
+ enable-button-for-item-fn="enableButtonForItemFn"
+ menu-actions="menuActions"
+ update-menu-action-for-item-fn="updateMenuActionForItemFn"
+ menu-class-for-item-fn="getMenuClass"
+ hide-menu-for-item-fn="hideMenuActions">
+ <div class="list-view-pf-description">
+ <div class="list-group-item-heading">
+ {{item.name}}
+ </div>
+ <div class="list-group-item-text">
+ {{item.address}}
+ </div>
+ </div>
+ <div class="list-view-pf-additional-info">
+ <div class="list-view-pf-additional-info-item">
+ {{item.city}}
+ </div>
+ <div class="list-view-pf-additional-info-item">
+ {{item.state}}
+ </div>
+ </div>
+ <list-expanded-content>
+ <div class="row">
+ <div class="col-md-3">
+ <div pf-donut-pct-chart config="exampleChartConfig" data="{'used': '350','total': '1000'}" center-label="'Percent Used'"></div>
+ </div>
+ <div class="col-md-9">
+ <dl class="dl-horizontal">
+ <dt>Host</dt>
+ <dd>{{$parent.item.city}}</dd>
+ <dt>Admin</dt>
+ <dd>{{$parent.item.name}}</dd>
+ <dt>Time</dt>
+ <dd>January 15, 2016 10:45:11 AM</dd>
+ <dt>Severity</dt>
+ <dd>Warning</dd>
+ <dt>Cluster</dt>
+ <dd>Cluster 1</dd>
+ </dl>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </div>
+ </div>
+ </list-expanded-content>
+ </div>
+ </div>
+ <hr class="col-md-12">
+ <div class="col-md-12">
+ <form role="form">
+ <div class="form-group">
+ <label>Selection</label>
+ </br>
+ <label class="radio-inline">
+ <input type="radio" ng-model="selectType" value="checkbox" ng-change="updateSelectionType()">Checkbox</input>
+ </label>
+ <label class="radio-inline">
+ <input type="radio" ng-model="selectType" value="row" ng-change="updateSelectionType()">Row</input>
+ </label>
+ <label class="radio-inline">
+ <input type="radio" ng-model="selectType" value="none" ng-change="updateSelectionType()">None</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-12">
+ <form role="form">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="config.dblClick">Double Click</input>
+ </label>
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="config.multiSelect" ng-disabled="config.dblClick">Multi Select</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-12">
+ <form role="form">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="showDisabled">Show Disabled Rows</input>
+ </label>
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="config.useExpandingRows">Show Expanding Rows</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-12">
+ <form role="form">
+ <div class="form-group">
+ <label class="checkbox-inline">
+ <input type="checkbox" ng-model="config.dragEnabled">Drag and Drop</input>
+ </label>
+ </div>
+ </form>
+ </div>
+ <div class="col-md-12">
+ <label style="font-weight:normal;vertical-align:center;">Events: </label>
+ </div>
+ <div class="col-md-12">
+ <textarea rows="10" class="col-md-12">{{eventText}}</textarea>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-70"></pre>
+<script type="text/ng-template" id="script.js-70">
+angular.module('patternfly.views').controller('ViewCtrl', ['$scope', '$templateCache',
+ function ($scope, $templateCache) {
+ $scope.eventText = '';
+ var handleSelect = function (item, e) {
+ $scope.eventText = item.name + ' selected\r\n' + $scope.eventText;
+ };
+ var handleSelectionChange = function (selectedItems, e) {
+ $scope.eventText = selectedItems.length + ' items selected\r\n' + $scope.eventText;
+ };
+ var handleClick = function (item, e) {
+ $scope.eventText = item.name + ' clicked\r\n' + $scope.eventText;
+ };
+ var handleDblClick = function (item, e) {
+ $scope.eventText = item.name + ' double clicked\r\n' + $scope.eventText;
+ };
+ var handleCheckBoxChange = function (item, selected, e) {
+ $scope.eventText = item.name + ' checked: ' + item.selected + '\r\n' + $scope.eventText;
+ };
+
+ var checkDisabledItem = function(item) {
+ return $scope.showDisabled && (item.name === "John Smith");
+ };
+
+ var dragEnd = function() {
+ $scope.eventText = 'drag end\r\n' + $scope.eventText;
+ };
+ var dragMoved = function() {
+ var index = -1;
+
+ for (var i = 0; i < $scope.items.length; i++) {
+ if ($scope.items[i] === $scope.dragItem) {
+ index = i;
+ }
+ }
+ if (index >= 0) {
+ $scope.items.splice(index, 1);
+ }
+ $scope.eventText = 'drag moved\r\n' + $scope.eventText;
+ };
+ var dragStart = function(item) {
+ $scope.dragItem = item;
+ $scope.eventText = item.name + ': drag start\r\n' + $scope.eventText;
+ };
+
+ $scope.enableButtonForItemFn = function(action, item) {
+ return !((action.name ==='Action 2') && (item.name === "Frank Livingston")) &&
+ !(action.name === 'Start' && item.started);
+ };
+
+ $scope.updateMenuActionForItemFn = function(action, item) {
+ if (action.name === 'Another Action') {
+ action.isVisible = (item.name !== "John Smith");
+ }
+ };
+
+ $scope.exampleChartConfig = {
+ 'chartId': 'pctChart',
+ 'units': 'GB',
+ 'thresholds': {
+ 'warning':'60',
+ 'error':'90'
+ }
+ };
+
+ $scope.selectType = 'checkbox';
+ $scope.updateSelectionType = function() {
+ if ($scope.selectType === 'checkbox') {
+ $scope.config.selectItems = false;
+ $scope.config.showSelectBox = true;
+ } else if ($scope.selectType === 'row') {
+ $scope.config.selectItems = true;
+ $scope.config.showSelectBox = false;
+ } else {
+ $scope.config.selectItems = false
+ $scope.config.showSelectBox = false;
+ }
+ };
+
+ $scope.showDisabled = false;
+
+ $scope.config = {
+ selectItems: false,
+ multiSelect: false,
+ dblClick: false,
+ dragEnabled: false,
+ dragEnd: dragEnd,
+ dragMoved: dragMoved,
+ dragStart: dragStart,
+ selectionMatchProp: 'name',
+ selectedItems: [],
+ checkDisabled: checkDisabledItem,
+ showSelectBox: true,
+ useExpandingRows: false,
+ onSelect: handleSelect,
+ onSelectionChange: handleSelectionChange,
+ onCheckBoxChange: handleCheckBoxChange,
+ onClick: handleClick,
+ onDblClick: handleDblClick
+ };
+
+ $scope.items = [
+ {
+ name: "Fred Flintstone",
+ address: "20 Dinosaur Way",
+ city: "Bedrock",
+ state: "Washingstone"
+ },
+ {
+ name: "John Smith",
+ address: "415 East Main Street",
+ city: "Norfolk",
+ state: "Virginia",
+ disableRowExpansion: true
+ },
+ {
+ name: "Frank Livingston",
+ address: "234 Elm Street",
+ city: "Pittsburgh",
+ state: "Pennsylvania"
+ },
+ {
+ name: "Linda McGovern",
+ address: "22 Oak Street",
+ city: "Denver",
+ state: "Colorado"
+ },
+ {
+ name: "Jim Brown",
+ address: "72 Bourbon Way",
+ city: "Nashville",
+ state: "Tennessee"
+ },
+ {
+ name: "Holly Nichols",
+ address: "21 Jump Street",
+ city: "Hollywood",
+ state: "California"
+ },
+ {
+ name: "Marie Edwards",
+ address: "17 Cross Street",
+ city: "Boston",
+ state: "Massachusetts"
+ },
+ {
+ name: "Pat Thomas",
+ address: "50 Second Street",
+ city: "New York",
+ state: "New York"
+ },
+ ];
+
+ $scope.getMenuClass = function (item) {
+ var menuClass = "";
+ if (item.name === "Jim Brown") {
+ menuClass = 'red';
+ }
+ return menuClass;
+ };
+
+ $scope.hideMenuActions = function (item) {
+ return (item.name === "Marie Edwards");
+ };
+
+ var performAction = function (action, item) {
+ $scope.eventText = item.name + " : " + action.name + "\r\n" + $scope.eventText;
+ };
+
+ var startServer = function (action, item) {
+ $scope.eventText = item.name + " : " + action.name + "\r\n" + $scope.eventText;
+ item.started = true;
+ };
+
+ var buttonInclude = '<span class="fa fa-plus"></span>{{actionButton.name}}';
+ $templateCache.put('my-button-template', buttonInclude);
+
+ var startButtonInclude = '<span ng-disabled="item.started">{{item.started ? "Starting" : "Start"}}</span>';
+ $templateCache.put('start-button-template', startButtonInclude);
+
+ $scope.actionButtons = [
+ {
+ name: 'Start',
+ class: 'btn-primary',
+ include: 'start-button-template',
+ title: 'Start the server',
+ actionFn: startServer
+ },
+ {
+ name: 'Action 1',
+ title: 'Perform an action',
+ actionFn: performAction
+ },
+ {
+ name: 'Action 2',
+ title: 'Do something else',
+ actionFn: performAction
+ },
+ {
+ name: 'Action 3',
+ include: 'my-button-template',
+ title: 'Do something special',
+ actionFn: performAction
+ }
+ ];
+ $scope.menuActions = [
+ {
+ name: 'Action',
+ title: 'Perform an action',
+ actionFn: performAction
+ },
+ {
+ name: 'Another Action',
+ title: 'Do something else',
+ actionFn: performAction
+ },
+ {
+ name: 'Disabled Action',
+ title: 'Unavailable action',
+ actionFn: performAction,
+ isDisabled: true
+ },
+ {
+ name: 'Something Else',
+ title: '',
+ actionFn: performAction
+ },
+ {
+ isSeparator: true
+ },
+ {
+ name: 'Grouped Action 1',
+ title: 'Do something',
+ actionFn: performAction
+ },
+ {
+ name: 'Grouped Action 2',
+ title: 'Do something similar',
+ actionFn: performAction
+ }
+ ];
+ }
+ ]);
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.views" ng-set-html="index.html-69" ng-eval-javascript="script.js-70"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.wizard.directive.pfWizard.html b/dist/docs/partials/api/patternfly.wizard.directive.pfWizard.html
new file mode 100644
index 000000000..96b48db7a
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.wizard.directive.pfWizard.html
@@ -0,0 +1,357 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/wizard/wizard-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/wizard/wizard-directive.js#L305" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfWizard</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.wizard</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Directive for rendering a Wizard modal. Each wizard dynamically creates the step navigation both in the header and the left-hand side based on nested steps.
+Use the pf-wizardstep to define individual steps within a wizard and pf-wizardsubstep to define portions of pf-wizardsteps if so desired. For instance, Step one can have two substeps - 1A and 1B when it is logical to group those together.
+<br /><br />
+The basic structure should be:
+<pre class="prettyprint linenums">
+<div pf-wizard>
+ <div pf-wizardstep>
+ <div pf-wizardsubstep><!-- content here --></div>
+ <div pf-wizardsubstep><!-- content here --></div>
+ </div>
+ <div pf-wizardstep><!-- additional configuration can be added here with substeps if desired --></div>
+ <div pf-wizardstep><!-- review steps and final command here --></div>
+</div>
+</pre>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-wizard
+ title="{string}"
+ [hide-indicators="{boolean}"]
+ [hide-sidebar="{boolean}"]
+ [hide-header="{boolean}"]
+ [hide-back-button="{boolean}"]
+ [step-class="{string}"]
+ [sidebar-class="{string}"]
+ [content-height="{string}"]
+ [current-step="{string}"]
+ [cancel-title="{string}"]
+ [back-title="{string}"]
+ [next-title="{string}"]
+ [back-callback="{function(step)}"]
+ [next-callback="{function(step)}"]
+ [on-finish="{function()}"]
+ [on-cancel="{function()}"]
+ wizard-ready="{boolean}"
+ [wizard-done="{boolean}"]
+ loading-wizard-title="{string}"
+ [loading-secondary-information="{string}"]
+ [embed-in-page="{boolean}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>title</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>The wizard title displayed in the header</p>
+</div></td></tr><tr><td>hideIndicators <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Hides the step indicators in the header of the wizard</p>
+</div></td></tr><tr><td>hideSidebar <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Hides page navigation sidebar on the wizard pages</p>
+</div></td></tr><tr><td>hideHeader <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Optional value to hide the title bar. Default is false.</p>
+</div></td></tr><tr><td>hideBackButton <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Optional value to hide the back button, useful in 2 step wizards. Default is false.</p>
+</div></td></tr><tr><td>stepClass <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Optional CSS class to be given to the steps page container. Used for the sidebar panel as well unless a sidebarClass is provided.</p>
+</div></td></tr><tr><td>sidebarClass <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Optional CSS class to be give to the sidebar panel. Only used if the stepClass is also provided.</p>
+</div></td></tr><tr><td>contentHeight <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>The height the wizard content should be set to. This is used ONLY if the stepClass is not given. This defaults to 300px if the property is not supplied.</p>
+</div></td></tr><tr><td>currentStep <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>The current step can be changed externally - this is the title of the step to switch the wizard to</p>
+</div></td></tr><tr><td>cancelTitle <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>The text to display on the cancel button</p>
+</div></td></tr><tr><td>backTitle <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>The text to display on the back button</p>
+</div></td></tr><tr><td>nextTitle <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>The text to display on the next button</p>
+</div></td></tr><tr><td>backCallback <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function(step</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Called to notify when the back button is clicked</p>
+</div></td></tr><tr><td>nextCallback <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function(step</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Called to notify when the next button is clicked</p>
+</div></td></tr><tr><td>onFinish <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Called to notify when when the wizard is complete. Returns a boolean value to indicate if the finish operation is complete</p>
+</div></td></tr><tr><td>onCancel <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Called when the wizard is canceled, returns a boolean value to indicate if cancel is successful</p>
+</div></td></tr><tr><td>wizardReady</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Value that is set when the wizard is ready</p>
+</div></td></tr><tr><td>wizardDone <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Value that is set when the wizard is done</p>
+</div></td></tr><tr><td>loadingWizardTitle</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>The text displayed when the wizard is loading</p>
+</div></td></tr><tr><td>loadingSecondaryInformation <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Secondary descriptive information to display when the wizard is loading</p>
+</div></td></tr><tr><td>embedInPage <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><p>Value that indicates wizard is embedded in a page (not a modal). This moves the navigation buttons to the left hand side of the footer and removes the close button.</p>
+</div></td></tr></tbody></table></div>
+<h2 id="example">Example</h2>
+<div class="example"><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizard-page"><h4 id="example_source">Source</h4>
+<div source-edit="patternfly.wizard" source-edit-deps="angular.js patternfly.form script.js" source-edit-html="index.html-71 wizard-container.html detail-page.html review-template.html review-second-template.html summary.html deployment.html" source-edit-css="" source-edit-js="script.js-72" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
+<div class="tabbable"><div class="tab-pane" title="index.html">
+<pre class="prettyprint linenums" ng-set-text="index.html-71" ng-html-wrap-loaded="patternfly.wizard angular.js patternfly.form script.js"></pre>
+<script type="text/ng-template" id="index.html-71">
+ <div ng-controller="WizardModalController">
+ <button ng-click="openWizardModel()" class="btn btn-default">Launch Wizard</button>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="wizard-container.html">
+<pre class="prettyprint linenums" ng-set-text="wizard-container.html"></pre>
+<script type="text/ng-template" id="wizard-container.html">
+<div pf-wizard title="Wizard Title"
+ wizard-ready="deployProviderReady"
+ on-finish="finishedWizard()"
+ on-cancel="cancelDeploymentWizard()"
+ next-title="nextButtonTitle"
+ next-callback="nextCallback"
+ back-callback="backCallback"
+ wizard-done="deployComplete || deployInProgress"
+ sidebar-class="example-wizard-sidebar"
+ step-class="example-wizard-step"
+ loading-secondary-information="secondaryLoadInformation">
+ <div pf-wizard-step step-title="First Step" substeps="true" step-id="details" step-priority="0" show-review="true" show-review-details="true">
+ <div ng-include="'detail-page.html'">
+ </div>
+ <div pf-wizard-substep step-title="Details - Extra" next-enabled="true" step-id="details-extra" step-priority="1" show-review="true" show-review-details="true" review-template="review-second-template.html">
+ <form class="form-horizontal">
+ <div pf-form-group pf-label="Lorem" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" required>
+ <input id="new-lorem" name="lorem" ng-model="data.lorem" type="text" required/>
+ </div>
+ <div pf-form-group pf-label="Ipsum" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10">
+ <input id="new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
+ </div>
+ </form>
+ </div>
+ </div>
+ <div pf-wizard-step step-title="Second Step" substeps="false" step-id="configuration" step-priority="1" show-review="true" review-template="review-second-template.html" >
+ <form class="form-horizontal">
+ <h5 id="example_source_wizards-should-make-use-of-substeps-consistently-throughout-this-is-an-example-only">Wizards should make use of substeps consistently throughout (either using them or not using them). This is an example only.</h5>
+ <div pf-form-group pf-label="Lorem" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10">
+ <input id="new-lorem" name="lorem" ng-model="data.lorem" type="text"/>
+ </div>
+ <div pf-form-group pf-label="Ipsum" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10">
+ <input id="new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
+ </div>
+ </form>
+ </div>
+ <div pf-wizard-step step-title="Review" substeps="true" step-id="review" step-priority="2">
+ <div ng-include="'summary.html'"></div>
+ <div ng-include="'deployment.html'"></div>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="detail-page.html">
+<pre class="prettyprint linenums" ng-set-text="detail-page.html"></pre>
+<script type="text/ng-template" id="detail-page.html">
+ <div ng-controller="DetailsGeneralController">
+ <div pf-wizard-substep step-title="General" next-enabled="detailsGeneralComplete" step-id="details-general" step-priority="0" on-show="onShow" review-template="{{reviewTemplate}}" show-review-details="true">
+ <form class="form-horizontal">
+ <div pf-form-group pf-label="Name" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" required>
+ <input id="new-name" name="name" ng-model="data.name" type="text" ng-change="updateName()" required/>
+ </div>
+ <div pf-form-group pf-label="Description" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10">
+ <input id="new-description" name="description" ng-model="data.description" type="text" />
+ </div>
+ </form>
+ </div>
+ </div>
+</script>
+</div>
+<div class="tab-pane" title="review-template.html">
+<pre class="prettyprint linenums" ng-set-text="review-template.html"></pre>
+<script type="text/ng-template" id="review-template.html">
+<div ng-controller="DetailsReviewController">
+ <form class="form">
+ <div class="wizard-pf-review-item">
+ <span class="wizard-pf-review-item-label">Name:</span>
+ <span class="wizard-pf-review-item-value">{{data.name}}</span>
+ </div>
+ <div class="wizard-pf-review-item">
+ <span class="wizard-pf-review-item-label">Description:</span>
+ <span class="wizard-pf-review-item-value">{{data.description}}</span>
+ </div>
+ </form>
+</div>
+</script>
+</div>
+<div class="tab-pane" title="review-second-template.html">
+<pre class="prettyprint linenums" ng-set-text="review-second-template.html"></pre>
+<script type="text/ng-template" id="review-second-template.html">
+<div ng-controller="DetailsReviewController">
+ <form class="form">
+ <div class="wizard-pf-review-item">
+ <span class="wizard-pf-review-item-label">Lorem:</span>
+ <span class="wizard-pf-review-item-value">{{data.lorem}}</span>
+ </div>
+ <div class="wizard-pf-review-item">
+ <span class="wizard-pf-review-item-label">Ipsum:</span>
+ <span class="wizard-pf-review-item-value">{{data.ipsum}}</span>
+ </div>
+ </form>
+</div>
+</script>
+</div>
+<div class="tab-pane" title="summary.html">
+<pre class="prettyprint linenums" ng-set-text="summary.html"></pre>
+<script type="text/ng-template" id="summary.html">
+<div ng-controller="SummaryController">
+ <div pf-wizard-substep step-title="Summary" step-id="review-summary" step-priority="0" next-enabled="true" prev-enabled="true" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
+ <div pf-wizard-review-page shown="pageShown" wizard-data="data"></div>
+ </div>
+</div>
+</script>
+</div>
+<div class="tab-pane" title="deployment.html">
+<pre class="prettyprint linenums" ng-set-text="deployment.html"></pre>
+<script type="text/ng-template" id="deployment.html">
+<div ng-controller="DeploymentController">
+ <div pf-wizard-substep step-title="Deploy" step-id="review-progress" step-priority="1" next-enabled="true" prev-enabled="false" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
+ <div class="wizard-pf-contents" ng-controller="DeploymentController">
+ <div class="wizard-pf-process blank-slate-pf" ng-if="!deploymentComplete">
+ <div class="spinner spinner-lg blank-slate-pf-icon"></div>
+ <h5 class="blank-slate-pf-main-action" id="example_source_deployment-in-progress">Deployment in progress</h5>
+ <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus, lorem sociosqu eget nunc amet. </p>
+ </div>
+ <div class="wizard-pf-complete blank-slate-pf" ng-if="deploymentComplete">
+ <div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
+ <h5 class="blank-slate-pf-main-action" id="example_source_deployment-was-successful">Deployment was successful</h5>
+ <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus, lorem sociosqu eget nunc amet. </p>
+ <button type="button" class="btn btn-lg btn-primary">View Deployment</button>
+ </div>
+ </div>
+ </div>
+</div>
+</script>
+</div>
+<div class="tab-pane" title="script.js">
+<pre class="prettyprint linenums" ng-set-text="script.js-72"></pre>
+<script type="text/ng-template" id="script.js-72">
+angular.module('patternfly.wizard').controller('WizardModalController', ['$scope', '$timeout', '$uibModal', '$rootScope',
+ function ($scope, $timeout, $uibModal, $rootScope) {
+ $scope.openWizardModel = function () {
+ var wizardDoneListener,
+ modalInstance = $uibModal.open({
+ animation: true,
+ backdrop: 'static',
+ templateUrl: 'wizard-container.html',
+ controller: 'WizardController',
+ size: 'lg'
+ });
+
+ var closeWizard = function (e, reason) {
+ modalInstance.dismiss(reason);
+ wizardDoneListener();
+ };
+
+ modalInstance.result.then(function () { }, function () { });
+
+ wizardDoneListener = $rootScope.$on('wizard.done', closeWizard);
+ };
+ }
+]);
+angular.module('patternfly.wizard').controller('WizardController', ['$scope', '$timeout', '$rootScope',
+ function ($scope, $timeout, $rootScope) {
+
+
+ var initializeWizard = function () {
+ $scope.data = {
+ name: '',
+ description: '',
+ lorem: 'default setting',
+ ipsum: ''
+ };
+ $scope.secondaryLoadInformation = 'ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus, lorem sociosqu eget nunc amet.';
+ $timeout(function () {
+ $scope.deployReady = true;
+ }, 1000);
+ $scope.nextButtonTitle = "Next >";
+ };
+
+ var startDeploy = function () {
+ $timeout(function() { }, 2000);
+ $scope.deployInProgress = true;
+ };
+
+ $scope.data = {};
+
+ $scope.nextCallback = function (step) {
+ // call startdeploy after deploy button is clicked on review-summary tab
+ if (step.stepId === 'review-summary') {
+ startDeploy();
+ }
+ return true;
+ };
+ $scope.backCallback = function (step) {
+ return true;
+ };
+
+ $scope.$on("wizard:stepChanged", function (e, parameters) {
+ if (parameters.step.stepId === 'review-summary') {
+ $scope.nextButtonTitle = "Deploy";
+ } else if (parameters.step.stepId === 'review-progress') {
+ $scope.nextButtonTitle = "Close";
+ } else {
+ $scope.nextButtonTitle = "Next >";
+ }
+ });
+
+ $scope.cancelDeploymentWizard = function () {
+ $rootScope.$emit('wizard.done', 'cancel');
+ };
+
+ $scope.finishedWizard = function () {
+ $rootScope.$emit('wizard.done', 'done');
+ return true;
+ };
+
+ initializeWizard();
+ }
+]);
+
+angular.module('patternfly.wizard').controller('DetailsGeneralController', ['$rootScope', '$scope',
+ function ($rootScope, $scope) {
+ 'use strict';
+
+ $scope.reviewTemplate = "review-template.html";
+ $scope.detailsGeneralComplete = false;
+
+ $scope.onShow = function() { };
+
+ $scope.updateName = function() {
+ $scope.detailsGeneralComplete = angular.isDefined($scope.data.name) && $scope.data.name.length > 0;
+ };
+ }
+]);
+
+angular.module('patternfly.wizard').controller('DetailsReviewController', ['$rootScope', '$scope',
+ function ($rootScope, $scope) {
+ 'use strict';
+
+ // Find the data!
+ var next = $scope;
+ while (angular.isUndefined($scope.data)) {
+ next = next.$parent;
+ if (angular.isUndefined(next)) {
+ $scope.data = {};
+ } else {
+ $scope.data = next.wizardData;
+ }
+ }
+ }
+]);
+
+angular.module('patternfly.wizard').controller('SummaryController', ['$rootScope', '$scope', '$timeout',
+ function ($rootScope, $scope, $timeout) {
+ 'use strict';
+ $scope.pageShown = false;
+
+ $scope.onShow = function () {
+ $scope.pageShown = true;
+ $timeout(function () {
+ $scope.pageShown = false; // done so the next time the page is shown it updates
+ });
+ }
+ }
+]);
+
+angular.module('patternfly.wizard').controller('DeploymentController', ['$rootScope', '$scope', '$timeout',
+ function ($rootScope, $scope, $timeout) {
+ 'use strict';
+
+ $scope.onShow = function() {
+ $scope.deploymentComplete = false;
+ $timeout(function() {
+ $scope.deploymentComplete = true;
+ }, 2500);
+ };
+ }
+]);
+</script>
+</div>
+</div><h4 id="example_demo">Demo</h4>
+<div class="well doc-example-live animate-container" ng-embed-app="patternfly.wizard" ng-set-html="index.html-71" ng-eval-javascript="script.js-72"></div>
+</div></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.wizard.directive.pfWizardReviewPage.html b/dist/docs/partials/api/patternfly.wizard.directive.pfWizardReviewPage.html
new file mode 100644
index 000000000..038ccdf4c
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.wizard.directive.pfWizardReviewPage.html
@@ -0,0 +1,18 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/wizard/wizard-review-page-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/wizard/wizard-review-page-directive.js#L12" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfWizardReviewPage</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.wizard</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardreviewpage-page"><p>Directive for rendering a Wizard Review Page - should only be used within a wizard.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-wizard-review-page
+ shown="{boolean}"
+ wizard-data="{object}">
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>shown</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardreviewpage-page"><p>Value watched internally by the wizard review page to know when it is visible.</p>
+</div></td></tr><tr><td>wizardData</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardreviewpage-page"><p>Sets the internal content of the review page to apply wizard data to the review templates.</p>
+</div></td></tr></tbody></table></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.wizard.directive.pfWizardStep.html b/dist/docs/partials/api/patternfly.wizard.directive.pfWizardStep.html
new file mode 100644
index 000000000..33055b056
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.wizard.directive.pfWizardStep.html
@@ -0,0 +1,48 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/wizard/wizard-step-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/wizard/wizard-step-directive.js#L26" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfWizardStep</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.wizard</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>Directive for rendering a Wizard step. Each step can stand alone or have substeps. This directive can only be used as a child of pf-wizard.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-wizard-step
+ step-title="{string}"
+ step-id="{string}"
+ step-priority="{number}"
+ substeps="{boolean}"
+ [next-enabled="{boolean}"]
+ [prev-enabled="{boolean}"]
+ [next-tooltip="{string}"]
+ [prev-tooltip="{string}"]
+ [wz-disabled="{boolean}"]
+ ok-to-nav-away="{boolean}"
+ allow-click-nav="{boolean}"
+ [description="{string}"]
+ wizard-data="{object}"
+ [on-show="{function()}"]
+ [show-review="{boolean}"]
+ [show-review-details="{boolean}"]
+ [review-template="{string}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>stepTitle</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>The step title displayed in the header and used for the review screen when displayed</p>
+</div></td></tr><tr><td>stepId</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>Sets the text identifier of the step</p>
+</div></td></tr><tr><td>stepPriority</td><td><a href="" class="label type-hint type-hint-number">number</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>This sets the priority of this wizard step relative to other wizard steps. They should be numbered sequentially in the order they should be viewed.</p>
+</div></td></tr><tr><td>substeps</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>Sets whether this step has substeps</p>
+</div></td></tr><tr><td>nextEnabled <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>Sets whether the next button should be enabled when this step is first displayed</p>
+</div></td></tr><tr><td>prevEnabled <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>Sets whether the back button should be enabled when this step is first displayed</p>
+</div></td></tr><tr><td>nextTooltip <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>The text to display as a tooltip on the next button</p>
+</div></td></tr><tr><td>prevTooltip <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>The text to display as a tooltip on the back button</p>
+</div></td></tr><tr><td>wzDisabled <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>Disables the wizard when this page is shown</p>
+</div></td></tr><tr><td>okToNavAway</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>Sets whether or not it's ok for the user to leave this page</p>
+</div></td></tr><tr><td>allowClickNav</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>Sets whether the user can click on the numeric step indicators to navigate directly to this step</p>
+</div></td></tr><tr><td>description <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>The step description (optional)</p>
+</div></td></tr><tr><td>wizardData</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>Data passed to the step that is shared by the entire wizard</p>
+</div></td></tr><tr><td>onShow <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>The function called when the wizard shows this step</p>
+</div></td></tr><tr><td>showReview <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>Indicates whether review information should be displayed for this step when the review step is reached</p>
+</div></td></tr><tr><td>showReviewDetails <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>Indicators whether the review information should be expanded by default when the review step is reached</p>
+</div></td></tr><tr><td>reviewTemplate <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardstep-page"><p>The template that should be used for the review details screen</p>
+</div></td></tr></tbody></table></div>
+</div>
diff --git a/dist/docs/partials/api/patternfly.wizard.directive.pfWizardSubstep.html b/dist/docs/partials/api/patternfly.wizard.directive.pfWizardSubstep.html
new file mode 100644
index 000000000..436c8dbbc
--- /dev/null
+++ b/dist/docs/partials/api/patternfly.wizard.directive.pfWizardSubstep.html
@@ -0,0 +1,40 @@
+<a href="https://github.com/patternfly/angular-patternfly/edit/master/src/wizard/wizard-substep-directive.js" class="improve-docs"><i class="icon-edit"> </i>Improve this doc</a><a href="https://github.com/patternfly/angular-patternfly/blob/5b69250/src/wizard/wizard-substep-directive.js#L21" class="view-source"><i class="icon-eye-open"> </i>View source</a><h1><code ng:non-bindable="">pfWizardSubstep</code>
+<div><span class="hint">directive in module <code ng:non-bindable="">patternfly.wizard</code>
+</span>
+</div>
+</h1>
+<div><h2 id="description">Description</h2>
+<div class="description"><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>Directive for rendering a Wizard substep. Each substep must be a child of a pf-wizardstep in a pf-wizard directive.</p>
+</div></div>
+<h2 id="usage">Usage</h2>
+<div class="usage">as attribute<pre class="prettyprint linenums"><ANY pf-wizard-substep
+ step-title="{string}"
+ step-id="{string}"
+ step-priority="{number}"
+ [next-enabled="{boolean}"]
+ [prev-enabled="{boolean}"]
+ [wz-disabled="{boolean}"]
+ ok-to-nav-away="{boolean}"
+ [allow-click-nav="{boolean}"]
+ [description="{string}"]
+ wizard-data="{object}"
+ [on-show="{function()}"]
+ [show-review-details="{boolean}"]
+ [review-template="{string}"]>
+ ...
+</ANY></pre>
+<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>stepTitle</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>The step title displayed in the header and used for the review screen when displayed</p>
+</div></td></tr><tr><td>stepId</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>Sets the text identifier of the step</p>
+</div></td></tr><tr><td>stepPriority</td><td><a href="" class="label type-hint type-hint-number">number</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>This sets the priority of this wizard step relative to other wizard steps. They should be numbered sequentially in the order they should be viewed.</p>
+</div></td></tr><tr><td>nextEnabled <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>Sets whether the next button should be enabled when this step is first displayed</p>
+</div></td></tr><tr><td>prevEnabled <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>Sets whether the back button should be enabled when this step is first displayed</p>
+</div></td></tr><tr><td>wzDisabled <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>Disables the wizard when this page is shown</p>
+</div></td></tr><tr><td>okToNavAway</td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>Sets whether or not it's ok for the user to leave this page</p>
+</div></td></tr><tr><td>allowClickNav <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>Sets whether the user can click on the numeric step indicators to navigate directly to this step</p>
+</div></td></tr><tr><td>description <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>The step description</p>
+</div></td></tr><tr><td>wizardData</td><td><a href="" class="label type-hint type-hint-object">object</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>Data passed to the step that is shared by the entire wizard</p>
+</div></td></tr><tr><td>onShow <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>The function called when the wizard shows this step</p>
+</div></td></tr><tr><td>showReviewDetails <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>Indicators whether the review information should be expanded by default when the review step is reached</p>
+</div></td></tr><tr><td>reviewTemplate <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="patternfly-wizard-directive-page patternfly-wizard-directive-pfwizardsubstep-page"><p>The template that should be used for the review details screen</p>
+</div></td></tr></tbody></table></div>
+</div>
diff --git a/dist/styles/angular-patternfly.css b/dist/styles/angular-patternfly.css
new file mode 100644
index 000000000..2ece255f4
--- /dev/null
+++ b/dist/styles/angular-patternfly.css
@@ -0,0 +1,492 @@
+.card-pf-aggregate-status-alt .card-pf-body {
+ padding-bottom: 20px;
+}
+
+.card-pf-aggregate-status-alt .card-pf-title {
+ line-height: 22px;
+ margin: 20px 0 10px 0;
+ font-weight: 300;
+}
+
+.card-pf-aggregate-status-alt .card-pf-aggregate-status-count {
+ font-size: 24px;
+}
+
+.card-pf-aggregate-status-alt .card-pf-aggregate-status-title {
+ display: block;
+ font-size: 12px;
+}
+
+.card-pf-aggregate-status-alt .card-pf-aggregate-status-notifications .card-pf-aggregate-status-notification {
+ border-left: none;
+}
+
+.card-pf-aggregate-status-alt .card-pf-aggregate-status-notifications .fa, .card-pf-aggregate-status-alt .card-pf-aggregate-status-notifications .pficon {
+ position: relative;
+ top: -1px;
+}
+
+.card-pf-heading-no-bottom {
+ margin: 0 -20px 0px;
+ padding: 0 20px 0;
+}
+
+.card-pf-icon-image {
+ height: 18px;
+ margin: 0 5px 5px;
+}
+
+.empty-chart-content {
+ text-align: center;
+}
+
+.empty-chart-content .pficon {
+ font-size: 24px;
+}
+.empty-chart-content span {
+ vertical-align: middle;
+ width: 100%;
+}
+
+
+.utilization-trend-chart-pf .donut-chart-pf {
+ width: 100%;
+ float: left;
+ padding-top: 15px;
+}
+
+.utilization-trend-chart-pf h3 {
+ font-weight: 400;
+}
+
+.utilization-trend-chart-pf .current-values {
+ border-bottom: 1px solid #d1d1d1;
+ float: left;
+ padding: 0 5px 10px 0;
+ width: 100%;
+}
+
+.utilization-trend-chart-pf .available-count {
+ margin: 3px 0;
+ padding-left: 0;
+ padding-right: 5px;
+}
+
+.utilization-trend-chart-pf .available-text {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 14px;
+ margin: 2px 0;
+ padding: 0 5px;
+}
+
+.utilization-trend-chart-pf .radial-chart {
+ float: left;
+ padding-top: 10px;
+ width: 100%;
+}
+
+.utilization-trend-chart-pf .sparkline-chart {
+ float: left;
+ margin-left: -5px;
+ margin-right: -5px;
+ width: 100%;
+}
+
+.utilization-trend-chart-pf .legend-text {
+ color: inherit;
+ display: block;
+ font-size: 12px;
+ font-weight: 400;
+ margin-left: 0;
+}
+
+.utilization-trend-chart-pf.data-unavailable-pf .current-values {
+ color: transparent;
+}
+
+.card-view-pf {
+ overflow: auto;
+ padding-top: 20px;
+ padding-left: 2px;
+}
+
+.card-view-pf .card {
+ -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .175);
+ background: #fff;
+ border-top: 2px solid transparent;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.175);
+ display: block;
+ float: left;
+ height: 290px;
+ margin-right: 20px;
+ margin-bottom: 20px;
+ padding: 10px;
+ position: relative;
+ text-align: center;
+ width: 260px;
+}
+
+.card-view-pf .card .card-check-box {
+ left: 10px;
+ position: absolute;
+ top: 8px;
+ width: 20px;
+ z-index: 3;
+ visibility: hidden;
+}
+
+.card-view-pf .card-content {
+ height: 100%;
+ margin: 2px 0 10px 0;
+ overflow: auto;
+ width: 100%;
+}
+
+.card-view-pf .card-title {
+ color: #1186C1;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 1.1;
+ margin-top: 0px;
+}
+
+.card-view-pf .card.active,
+.card-view-pf .card.active:hover,
+.card-view-pf .card.active:focus {
+ border: solid 3px #00a8e1;
+}
+
+.card-view-pf .card:hover,
+.card-view-pf .card:focus {
+ -webkit-box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.24);
+ -moz-box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.24);
+ box-shadow: 0px 3px 10px -2px rgba(0,0,0,0.24);
+ border: 1px solid #d1d1d1
+}
+
+.card-view-pf .card.active .pficon,
+.card-view-pf .card.active:hover .pficon,
+.card-view-pf .card.active:focus .pficon {
+ color: #ffffff;
+}
+.card-view-pf .card:hover .card-check-box,
+.card-view-pf .card.active .card-check-box {
+ visibility: visible;
+}
+
+.card-view-pf .card.disabled, .card.disabled:hover, .card.disabled:focus {
+ border: 1px solid #eee;
+ color: #999999;
+ cursor: not-allowed;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+}
+
+.trend-card-large-pf .trend-header-pf {
+ font-size: 16px;
+ font-weight: 400;
+ display: block;
+ margin-left: 10px;
+}
+
+.trend-card-small-pf .trend-header-pf {
+ font-size: 12px;
+ font-weight: 400;
+ display: block;
+ margin-left: 10px;
+}
+
+.trend-card-large-pf .trend-title-big-pf {
+ font-size: 26px;
+ font-weight: 300;
+ margin-left: 10px;
+}
+
+.trend-card-small-pf .trend-title-big-pf {
+ font-size: 17px;
+ font-weight: 400;
+ margin-left: 10px;
+}
+
+.trend-card-large-pf .trend-title-small-pf {
+ font-size: 12px;
+ font-weight: 400;
+}
+
+.trend-card-small-pf .trend-title-small-pf {
+ font-size: 10px;
+ font-weight: 400;
+}
+
+.trend-flat-details {
+ display: table;
+ margin-top: 5px;
+}
+
+@media (min-width: 768px) {
+.trend-flat-details {
+ margin-top: 25px;
+ }
+}
+
+.trend-flat-details-cell {
+ display: table-cell;
+ vertical-align: bottom;
+ min-width: 70px;
+}
+
+.trend-header-compact-pf {
+ display: block;
+ font-size: 12px;
+ font-weight: 400;
+}
+
+.trend-title-compact-big-pf {
+ font-size: 36px;
+ font-weight: 300;
+ line-height: 1;
+}
+
+.trend-title-compact-small-pf {
+ font-size: 12px;
+ font-weight: 400;
+}
+
+.trend-title-flat-big-pf {
+ font-size: 26px;
+ font-weight: 300;
+ line-height: 1;
+ margin-right: 15px;
+}
+
+.trend-label-flat-pf {
+ font-size: 12px;
+ font-weight: 400;
+ line-height: 1;
+}
+
+.trend-label-flat-strong-pf {
+ display: block;
+ font-size: 12px;
+ font-weight: 700;
+ line-height: 1;
+}
+
+.trend-footer-pf {
+ font-size: 10px;
+ font-weight: 400;
+ color: #333;
+ margin-left: 10px;
+}
+
+.data-unavailable-pf [class*="trend-title-"], .data-unavailable-pf [class*="trend-label-"] {
+ color: transparent;
+}
+
+.data-unavailable-pf .trend-footer-pf {
+ color: transparent;
+}
+
+.filter-pf a {
+ cursor: pointer;
+}
+
+.filter-pf.filter-fields .form-group {
+ padding-left: 0;
+ width: 275px;
+}
+
+.filter-select .btn-default {
+ font-size: 12px;
+ font-style: italic;
+ font-weight: 400;
+ background-color: #ffffff;
+ background-image: none;
+ color: #999999;
+}
+
+.sort-pf .btn-link {
+ color: #252525;
+ font-size: 16px;
+ line-height: 1;
+ padding: 4px 0;
+ margin-left: 10px;
+}
+
+.sort-pf .btn-link:hover {
+ color: #0099d3;
+}
+
+.input-group .input-group-btn .dropdown-menu > .selected > a {
+ background-color: #0099d3 !important;
+ border-color: #0076b7 !important;
+ color: #fff !important;
+}
+
+@media (min-width: 768px) {
+ .toolbar-pf-actions .toolbar-apf-filter {
+ padding-left: 0;
+ }
+}
+
+.toolbar-pf-actions .toolbar-pf-view-selector a {
+ cursor: pointer;
+}
+
+.toolbar-pf-actions .dropdown-menu a {
+ cursor: pointer;
+}
+
+.toolbar-pf-actions .dropdown-kebab-pf {
+ float: right;
+}
+
+.toolbar-pf-include-actions {
+ display: inline-block;
+ margin: 0 5px;
+}
+
+.dropdown-kebab-pf.invisible {
+ opacity: 0;
+ pointer-events: none;
+}
+
+/* Utilization bar chart - Animate load */
+.utilization-bar-chart-pf .progress-bar {
+ -webkit-transition: width .75s ease-in-out;
+ -moz-transition: width .75s ease-in-out;
+ -o-transition: width .75s ease-in-out;
+ transition: width .75s ease-in-out;
+}
+
+.utilization-bar-chart-pf .progress-bar.animate {
+ width: 0% !important;
+}
+
+/* Heap map */
+.heatmap-pf-container {
+ position: relative;
+}
+
+.heatmap-pf-container-pf .loading {
+ position: absolute;
+ top: 100px;
+ right: 50%;
+ z-index: 10;
+}
+
+.heatmap-pf-container .heatmap-container {
+ margin-left: -1px;
+}
+
+.heatmap-pf-svg {
+ width: 100%;
+ height: 100%;
+}
+
+.heatmap-pf-legend-container{
+ list-style-type: none;
+ margin-top: 5px;
+ padding: 0;
+ overflow: auto;
+}
+
+.heatmap-pf-legend-items {
+ float: left;
+}
+
+.legend-pf-color-box {
+ width: 11px;
+ height: 11px;
+ margin-left: 5px;
+ margin-right: 5px;
+ display: inline-block;
+}
+.legend-pf-color-box:first-of-type {
+ margin-left: 0px;
+}
+
+.legend-pf-text {
+ font-size: 11px;
+ font-weight: 400;
+ line-height: 11px;
+ padding-right: 5px;
+}
+
+.toolbar-pf-actions.no-filter-results {
+ margin-bottom: 10px;
+}
+
+/* Angular bootstrap classes differ when opneed rather than when collapsed */
+accordion > .panel-group .panel-default .panel-title > a:before {
+ content: "\f105";
+}
+accordion > .panel-group .panel-open .panel-title > a:before {
+ content: "\f107";
+}
+uib-accordion > .panel-group .panel-default .panel-title > a:before {
+ content: "\f105";
+}
+uib-accordion > .panel-group .panel-open .panel-title > a:before {
+ content: "\f107";
+}
+
+.navbar-brand-txt {
+ line-height: 34px;
+}
+
+.toast-pf-action > a {
+ cursor: pointer;
+}
+.toast-pf .dropdown-menu > li > a {
+ cursor: pointer;
+}
+
+.wizard-pf-footer .tooltip-wrapper {
+ border: none;
+ box-shadow: none;
+ display: inline-block;
+ margin-left: 5px;
+ padding: 0;
+ text-align: center;
+}
+
+.wizard-pf-footer .tooltip-wrapper .btn[disabled] {
+ pointer-events: none;
+}
+
+.wizard-pf-singlestep {
+ margin-left: 0;
+}
+
+.wizard-pf-position-override {
+ position: relative;
+}
+
+.wizard-pf-footer-inline {
+ text-align: left;
+}
+
+.wizard-pf-cancel-inline {
+ margin-left: 25px;
+}
+
+.pf-expand-placeholder {
+ margin-right: 15px;
+}
+
+.wizard-pf-steps-indicator li a.disabled {
+ cursor: default;
+}
+
+.wizard-pf-steps-indicator li a.disabled:hover .wizard-pf-step-number {
+ background-color: #fff;
+ border-color: #bbb;
+ color: #bbb;
+}
+
+.wizard-pf-footer .btn-cancel.wizard-pf-cancel-no-back {
+ margin-right: 0;
+}
diff --git a/dist/styles/angular-patternfly.min.css b/dist/styles/angular-patternfly.min.css
new file mode 100644
index 000000000..b67f647a9
--- /dev/null
+++ b/dist/styles/angular-patternfly.min.css
@@ -0,0 +1 @@
+.card-pf-aggregate-status-alt .card-pf-body{padding-bottom:20px}.card-pf-aggregate-status-alt .card-pf-title{line-height:22px;margin:20px 0 10px;font-weight:300}.card-pf-aggregate-status-alt .card-pf-aggregate-status-count{font-size:24px}.card-pf-aggregate-status-alt .card-pf-aggregate-status-title{display:block;font-size:12px}.card-pf-aggregate-status-alt .card-pf-aggregate-status-notifications .card-pf-aggregate-status-notification{border-left:none}.card-pf-aggregate-status-alt .card-pf-aggregate-status-notifications .fa,.card-pf-aggregate-status-alt .card-pf-aggregate-status-notifications .pficon{position:relative;top:-1px}.card-pf-heading-no-bottom{margin:0 -20px 0;padding:0 20px}.card-pf-icon-image{height:18px;margin:0 5px 5px}.empty-chart-content{text-align:center}.empty-chart-content .pficon{font-size:24px}.empty-chart-content span{vertical-align:middle;width:100%}.utilization-trend-chart-pf .donut-chart-pf{width:100%;float:left;padding-top:15px}.utilization-trend-chart-pf h3{font-weight:400}.utilization-trend-chart-pf .current-values{border-bottom:1px solid #d1d1d1;float:left;padding:0 5px 10px 0;width:100%}.utilization-trend-chart-pf .available-count{margin:3px 0;padding-left:0;padding-right:5px}.utilization-trend-chart-pf .available-text{font-size:12px;font-weight:400;line-height:14px;margin:2px 0;padding:0 5px}.utilization-trend-chart-pf .radial-chart{float:left;padding-top:10px;width:100%}.utilization-trend-chart-pf .sparkline-chart{float:left;margin-left:-5px;margin-right:-5px;width:100%}.utilization-trend-chart-pf .legend-text{color:inherit;display:block;font-size:12px;font-weight:400;margin-left:0}.utilization-trend-chart-pf.data-unavailable-pf .current-values{color:transparent}.card-view-pf{overflow:auto;padding-top:20px;padding-left:2px}.card-view-pf .card{-webkit-box-shadow:0 1px 1px rgba(0,0,0,.175);background:#fff;border-top:2px solid transparent;box-shadow:0 1px 1px rgba(0,0,0,.175);display:block;float:left;height:290px;margin-right:20px;margin-bottom:20px;padding:10px;position:relative;text-align:center;width:260px}.card-view-pf .card .card-check-box{left:10px;position:absolute;top:8px;width:20px;z-index:3;visibility:hidden}.card-view-pf .card-content{height:100%;margin:2px 0 10px;overflow:auto;width:100%}.card-view-pf .card-title{color:#1186C1;font-weight:500;font-size:16px;line-height:1.1;margin-top:0}.card-view-pf .card.active,.card-view-pf .card.active:focus,.card-view-pf .card.active:hover{border:solid 3px #00a8e1}.card-view-pf .card:focus,.card-view-pf .card:hover{-webkit-box-shadow:0 3px 10px -2px rgba(0,0,0,.24);-moz-box-shadow:0 3px 10px -2px rgba(0,0,0,.24);box-shadow:0 3px 10px -2px rgba(0,0,0,.24);border:1px solid #d1d1d1}.card-view-pf .card.active .pficon,.card-view-pf .card.active:focus .pficon,.card-view-pf .card.active:hover .pficon{color:#fff}.card-view-pf .card.active .card-check-box,.card-view-pf .card:hover .card-check-box{visibility:visible}.card-view-pf .card.disabled,.card.disabled:focus,.card.disabled:hover{border:1px solid #eee;color:#999;cursor:not-allowed;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.trend-card-large-pf .trend-header-pf{font-size:16px;font-weight:400;display:block;margin-left:10px}.trend-card-small-pf .trend-header-pf{font-size:12px;font-weight:400;display:block;margin-left:10px}.trend-card-large-pf .trend-title-big-pf{font-size:26px;font-weight:300;margin-left:10px}.trend-card-small-pf .trend-title-big-pf{font-size:17px;font-weight:400;margin-left:10px}.trend-card-large-pf .trend-title-small-pf{font-size:12px;font-weight:400}.trend-card-small-pf .trend-title-small-pf{font-size:10px;font-weight:400}.trend-flat-details{display:table;margin-top:5px}@media (min-width:768px){.trend-flat-details{margin-top:25px}}.trend-flat-details-cell{display:table-cell;vertical-align:bottom;min-width:70px}.trend-header-compact-pf{display:block;font-size:12px;font-weight:400}.trend-title-compact-big-pf{font-size:36px;font-weight:300;line-height:1}.trend-title-compact-small-pf{font-size:12px;font-weight:400}.trend-title-flat-big-pf{font-size:26px;font-weight:300;line-height:1;margin-right:15px}.trend-label-flat-pf{font-size:12px;font-weight:400;line-height:1}.trend-label-flat-strong-pf{display:block;font-size:12px;font-weight:700;line-height:1}.trend-footer-pf{font-size:10px;font-weight:400;color:#333;margin-left:10px}.data-unavailable-pf .trend-footer-pf,.data-unavailable-pf [class*=trend-label-],.data-unavailable-pf [class*=trend-title-]{color:transparent}.filter-pf a{cursor:pointer}.filter-pf.filter-fields .form-group{padding-left:0;width:275px}.filter-select .btn-default{font-size:12px;font-style:italic;font-weight:400;background-color:#fff;background-image:none;color:#999}.sort-pf .btn-link{color:#252525;font-size:16px;line-height:1;padding:4px 0;margin-left:10px}.sort-pf .btn-link:hover{color:#0099d3}.input-group .input-group-btn .dropdown-menu>.selected>a{background-color:#0099d3!important;border-color:#0076b7!important;color:#fff!important}@media (min-width:768px){.toolbar-pf-actions .toolbar-apf-filter{padding-left:0}}.toolbar-pf-actions .dropdown-menu a,.toolbar-pf-actions .toolbar-pf-view-selector a{cursor:pointer}.toolbar-pf-actions .dropdown-kebab-pf{float:right}.toolbar-pf-include-actions{display:inline-block;margin:0 5px}.dropdown-kebab-pf.invisible{opacity:0;pointer-events:none}.utilization-bar-chart-pf .progress-bar{-webkit-transition:width .75s ease-in-out;-moz-transition:width .75s ease-in-out;-o-transition:width .75s ease-in-out;transition:width .75s ease-in-out}.utilization-bar-chart-pf .progress-bar.animate{width:0!important}.heatmap-pf-container{position:relative}.heatmap-pf-container-pf .loading{position:absolute;top:100px;right:50%;z-index:10}.heatmap-pf-container .heatmap-container{margin-left:-1px}.heatmap-pf-svg{width:100%;height:100%}.heatmap-pf-legend-container{list-style-type:none;margin-top:5px;padding:0;overflow:auto}.heatmap-pf-legend-items{float:left}.legend-pf-color-box{width:11px;height:11px;margin-left:5px;margin-right:5px;display:inline-block}.legend-pf-color-box:first-of-type{margin-left:0}.legend-pf-text{font-size:11px;font-weight:400;line-height:11px;padding-right:5px}.toolbar-pf-actions.no-filter-results{margin-bottom:10px}accordion>.panel-group .panel-default .panel-title>a:before{content:"\f105"}accordion>.panel-group .panel-open .panel-title>a:before{content:"\f107"}uib-accordion>.panel-group .panel-default .panel-title>a:before{content:"\f105"}uib-accordion>.panel-group .panel-open .panel-title>a:before{content:"\f107"}.navbar-brand-txt{line-height:34px}.toast-pf .dropdown-menu>li>a,.toast-pf-action>a{cursor:pointer}.wizard-pf-footer .tooltip-wrapper{border:none;box-shadow:none;display:inline-block;margin-left:5px;padding:0;text-align:center}.wizard-pf-footer .tooltip-wrapper .btn[disabled]{pointer-events:none}.wizard-pf-singlestep{margin-left:0}.wizard-pf-position-override{position:relative}.wizard-pf-footer-inline{text-align:left}.wizard-pf-cancel-inline{margin-left:25px}.pf-expand-placeholder{margin-right:15px}.wizard-pf-steps-indicator li a.disabled{cursor:default}.wizard-pf-steps-indicator li a.disabled:hover .wizard-pf-step-number{background-color:#fff;border-color:#bbb;color:#bbb}.wizard-pf-footer .btn-cancel.wizard-pf-cancel-no-back{margin-right:0}
\ No newline at end of file
]]>
+ *
+ *
+ *
+ *