text: webpackJsonp([30],{1713:function(n,a,s){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var t=function(){function n(n){var a=this;this.snippets={compiled:{},raw:{}},n.keys().forEach(function(s){var t=s.replace("./","").replace(/\W+(\w)/g,function(n){return n[1].toUpperCase()}),p=n(s);p.snippet&&(a.snippets.compiled[t]=p.snippet),p.example&&(a.snippets.raw[t]=p.example)})}return n}();a.BaseDocumentationSection=t},3259:function(n,a,s){"use strict";var t=this&&this.__decorate||function(n,a,s,t){var p,e=arguments.length,o=e<3?a:null===t?t=Object.getOwnPropertyDescriptor(a,s):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(n,a,s,t);else for(var c=n.length-1;c>=0;c--)(p=n[c])&&(o=(e<3?p(o):e>3?p(a,s,o):p(a,s))||o);return e>3&&o&&Object.defineProperty(a,s,o),o},p=this&&this.__metadata||function(n,a){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(n,a)};Object.defineProperty(a,"__esModule",{value:!0});var e=s(0),o=s(24),c=s(410),l=s(408),u=s(173),r=s(409),i=s(102),k=s(411),m=s(3260),d=s(3265),f=s(3269),v=s(3275),h=s(3282),b=[h.CssBasicFormComponent,v.CssHorizontalFormComponent,f.CssInlineFormComponent,d.CssFormValidationFieldByFieldComponent,m.CssFormValidationOnSubmitComponent],g=[{path:"**",component:r.DocumentationCategoryComponent,data:{category:u.ResolverService.resolveCategoryData(u.DocumentationPage.Css,"Forms")}}],y=function(){function n(n,a){a.registerResolver(n)}return n}();y=t([e.NgModule({imports:[i.CheckboxModule,k.WrappersModule,l.DocumentationComponentsModule,c.TabsModule,o.RouterModule.forChild(g)],exports:b,declarations:b,entryComponents:b}),p("design:paramtypes",[e.ComponentFactoryResolver,u.ResolverService])],y),a.CssFormsModule=y},3260:function(n,a,s){"use strict";var t=this&&this.__extends||function(){var n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,a){n.__proto__=a}||function(n,a){for(var s in a)a.hasOwnProperty(s)&&(n[s]=a[s])};return function(a,s){function t(){this.constructor=a}n(a,s),a.prototype=null===s?Object.create(s):(t.prototype=s.prototype,new t)}}(),p=this&&this.__decorate||function(n,a,s,t){var p,e=arguments.length,o=e<3?a:null===t?t=Object.getOwnPropertyDescriptor(a,s):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(n,a,s,t);else for(var c=n.length-1;c>=0;c--)(p=n[c])&&(o=(e<3?p(o):e>3?p(a,s,o):p(a,s))||o);return e>3&&o&&Object.defineProperty(a,s,o),o},e=this&&this.__metadata||function(n,a){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(n,a)};Object.defineProperty(a,"__esModule",{value:!0});var o=s(0),c=s(407),l=s(1713),u=function(n){function a(){var a=n.call(this,s(3261))||this;return a.codepen={html:a.snippets.raw.sampleHtml,js:[a.snippets.raw.sampleJs]},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-css-forms-form-validation-on-submit",template:s(3264)}),c.DocumentationSectionComponent("CssFormValidationOnSubmitComponent"),e("design:paramtypes",[])],u),a.CssFormValidationOnSubmitComponent=u},3261:function(n,a,s){function t(n){return s(p(n))}function p(n){var a=e[n];if(!(a+1))throw new Error("Cannot find module '"+n+"'.");return a}var e={"./sample.html":3262,"./sample.js":3263};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=3261},3262:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-6 col-xs-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>validationformsubmit<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-submit<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>off<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\t\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group-validate-on-submit has-feedback<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\t\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Username *<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>\t\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Enter username<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">ng-class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{<span class="token punctuation">\'</span>on-submit<span class="token punctuation">\'</span>: submitted}<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span>\t\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hpe-icon hpe-alert form-control-feedback<span class="token punctuation">"</span></span> <span class="token attr-name">ng-show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submitted &amp;&amp; validationformsubmit.username.$invalid<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>validation-error-text<span class="token punctuation">"</span></span> <span class="token attr-name">ng-show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submitted &amp;&amp; validationformsubmit.username.$invalid<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Required - enter a username<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bio<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Enter bio<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group-validate-on-submit has-feedback<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Telephone *<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(0[1-9][0-9]{9})|(\\+44[1-9][0-9]{9})<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Enter telephone number<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>telephone<span class="token punctuation">"</span></span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>telephone<span class="token punctuation">"</span></span> <span class="token attr-name">ng-class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{<span class="token punctuation">\'</span>on-submit<span class="token punctuation">\'</span>: submitted}<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hpe-icon hpe-alert form-control-feedback<span class="token punctuation">"</span></span> <span class="token attr-name">ng-show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submitted &amp;&amp; validationformsubmit.telephone.$invalid<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>validation-error-text<span class="token punctuation">"</span></span> <span class="token attr-name">ng-show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submitted &amp;&amp; validationformsubmit.telephone.$invalid<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Required - enter a valid UK telephone number<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn button-primary pull-right<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">ng-click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submitted<span class="token punctuation">=</span>true<span class="token punctuation">"</span></span> <span class="token attr-name">ng-class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{<span class="token punctuation">\'</span>disabled<span class="token punctuation">\'</span>: submitted &amp;&amp; validationformsubmit.$invalid}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>',example:'<div class="row demo">\r\n    <div class="col-sm-6 col-xs-12">\r\n        <form role="form" name="validationformsubmit" id="form-submit" autocomplete="off">\t\r\n            <div class="form-group-validate-on-submit has-feedback">\t\r\n                <label class="form-label">Username *</label>\t\r\n                <input type="text" placeholder="Enter username" class="form-control" name="username" ng-model="username" ng-class="{\'on-submit\': submitted}" required>\t\r\n                <span class="hpe-icon hpe-alert form-control-feedback" ng-show="submitted && validationformsubmit.username.$invalid" aria-hidden="true"></span>\r\n                <span class="validation-error-text" ng-show="submitted && validationformsubmit.username.$invalid">Required - enter a username</span>\r\n            </div>\r\n            <div class="form-group">\r\n                <label class="form-label">Bio</label>\r\n                <textarea class="form-control" rows="4" placeholder="Enter bio" type="text"></textarea>\r\n            </div>\r\n            <div class="form-group-validate-on-submit has-feedback">\r\n                <label class="form-label">Telephone *</label>\r\n                <input type="text" pattern="(0[1-9][0-9]{9})|(\\+44[1-9][0-9]{9})" placeholder="Enter telephone number" class="form-control" name="telephone" ng-model="telephone" ng-class="{\'on-submit\': submitted}" required>\r\n                <span class="hpe-icon hpe-alert form-control-feedback" ng-show="submitted && validationformsubmit.telephone.$invalid" aria-hidden="true"></span>\r\n                <span class="validation-error-text" ng-show="submitted && validationformsubmit.telephone.$invalid">Required - enter a valid UK telephone number</span>\r\n            </div>\r\n            <div>\r\n                <button class="btn button-primary pull-right" type="submit" ng-click="submitted=true" ng-class="{\'disabled\': submitted && validationformsubmit.$invalid}">Submit\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</div>'}},3263:function(n,a){n.exports={snippet:'angular<span class="token punctuation">.</span><span class="token function">module</span><span class="token punctuation">(</span><span class="token string">\'app\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">controller</span><span class="token punctuation">(</span><span class="token string">\'FormsCtrl\'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"$timeout"</span><span class="token punctuation">,</span> FormsCtrl<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\n<span class="token keyword">function</span> <span class="token function">FormsCtrl</span><span class="token punctuation">(</span>$timeout<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n    <span class="token keyword">var</span> fc <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\r\n\r\n    <span class="token function">$timeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n        angular<span class="token punctuation">.</span><span class="token function">element</span><span class="token punctuation">(</span><span class="token string">\'#form-submit\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>evt<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n            evt<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>      \r\n<span class="token punctuation">}</span>',example:"angular.module('app').controller('FormsCtrl', [\"$timeout\", FormsCtrl]);\r\n\r\nfunction FormsCtrl($timeout) {\r\n    var fc = this;\r\n\r\n    $timeout(function() {\r\n        angular.element('#form-submit').validate(function(evt) {\r\n            evt.preventDefault();\r\n        });\r\n    });      \r\n}"}},3264:function(n,a){n.exports='<uxd-form-validation-on-submit-wrapper></uxd-form-validation-on-submit-wrapper>\r\n\r\n<hr>\r\n\r\n<p>The form demonstrated above can be used to validate each field when the user clicks the ‘Submit’ button. \r\nThe user will be shown any affected fields with focus being on the first affected field.</p>\r\n\r\n<p>If you wish you use a Form with Validation on submit, any <code>div</code> tag which contains an <code>input</code> that requires validation \r\nmust implement the <code>form-group-validate-on-submit</code> class, rather than the ‘form-group-validate’ class used for field-by-field validation.</p>\r\n\r\n<p>Inputs requiring validation must set the <code>ng-class</code> attribute, applying the <code>on-submit</code> class only when the form has been submitted i.e. <code>submitted=true</code>. \r\n<code>submitted</code> is only set to true when the ‘Submit’ button has been clicked, as seen in our HTML sample below.</p>\r\n\r\n<p>When the submit button is initially clicked and there are fields with errors, it will be disabled until each field is corrected.</p>\r\n\r\n<blockquote>\r\n  <p><strong>Note</strong>: you must set the <code>ng-class</code> attribute and only apply the <code>disabled</code> class when the form has been submitted but still has errors (<code>$invalid</code>), for this to work correctly.</p>\r\n</blockquote>\r\n\r\n<p>See the above documentation on field-by-field validation for information on how to show error text and error icons, \r\nhowever you must also add <code>submitted</code> to the <code>ng-show</code> expression to only show these when the form has been submitted.</p>\r\n\r\n<p>Notice how the ‘Telephone’ input field involves setting a <code>pattern</code> attribute that makes the field invalid unless the user input follows that pattern.</p>\r\n\r\n<p>The HTML code below shows how to implement the form used above:</p>\r\n\r\n<tabset>\r\n    <tab heading="HTML">\r\n        <uxd-snippet [content]="snippets.compiled.sampleHtml"></uxd-snippet>\r\n    </tab>\r\n    <tab heading="JavaScript">\r\n        <uxd-snippet language="javascript" [content]="snippets.compiled.sampleJs"></uxd-snippet>\r\n    </tab>\r\n</tabset>\r\n\r\n<br>\r\n\r\n<blockquote>\r\n  <p><strong>Note</strong>: if you wish to disable the default validation error text (which appears as a tooltip), \r\nyou must give your form a unique ID as seen in the HTML sample above. You must then put the code seen in the Javascript tab into your controller, \r\nspecifying the form ID as the <code>.element</code> parameter. We use a <code>$timeout</code> to ensure the page has fully loaded before executing the code.</p>\r\n</blockquote>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n'},3265:function(n,a,s){"use strict";var t=this&&this.__extends||function(){var n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,a){n.__proto__=a}||function(n,a){for(var s in a)a.hasOwnProperty(s)&&(n[s]=a[s])};return function(a,s){function t(){this.constructor=a}n(a,s),a.prototype=null===s?Object.create(s):(t.prototype=s.prototype,new t)}}(),p=this&&this.__decorate||function(n,a,s,t){var p,e=arguments.length,o=e<3?a:null===t?t=Object.getOwnPropertyDescriptor(a,s):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(n,a,s,t);else for(var c=n.length-1;c>=0;c--)(p=n[c])&&(o=(e<3?p(o):e>3?p(a,s,o):p(a,s))||o);return e>3&&o&&Object.defineProperty(a,s,o),o},e=this&&this.__metadata||function(n,a){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(n,a)};Object.defineProperty(a,"__esModule",{value:!0});var o=s(0),c=s(407),l=s(1713),u=function(n){function a(){var a=n.call(this,s(3266))||this;return a.codepen={html:a.snippets.raw.sampleHtml},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-css-forms-form-validation-field-by-field",template:s(3268)}),c.DocumentationSectionComponent("CssFormValidationFieldByFieldComponent"),e("design:paramtypes",[])],u),a.CssFormValidationFieldByFieldComponent=u},3266:function(n,a,s){function t(n){return s(p(n))}function p(n){var a=e[n];if(!(a+1))throw new Error("Cannot find module '"+n+"'.");return a}var e={"./sample.html":3267};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=3266},3267:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-6 col-xs-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>validationform<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>off<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group-validate has-feedback<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Project name *<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Enter project name<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>projectname<span class="token punctuation">"</span></span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>projectname<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hpe-icon hpe-alert form-control-feedback<span class="token punctuation">"</span></span> <span class="token attr-name">ng-show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>validationform.projectname.$invalid &amp;&amp; (validationform.projectname.$touched || validationform.projectname.$dirty)<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>validation-error-text<span class="token punctuation">"</span></span> <span class="token attr-name">ng-show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>validationform.projectname.$invalid &amp;&amp; (validationform.projectname.$touched || validationform.projectname.$dirty)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Required - enter a project name<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Description<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Enter description<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group-validate has-feedback<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Owner\'s email *<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Enter owner<span class="token punctuation">\'</span>s email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>owneremail<span class="token punctuation">"</span></span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>owneremail<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hpe-icon hpe-alert form-control-feedback<span class="token punctuation">"</span></span> <span class="token attr-name">ng-show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>validationform.owneremail.$invalid &amp;&amp; (validationform.owneremail.$touched || validationform.owneremail.$dirty)<span class="token punctuation">"</span></span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>validation-error-text<span class="token punctuation">"</span></span> <span class="token attr-name">ng-show</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>validationform.owneremail.$invalid &amp;&amp; (validationform.owneremail.$dirty || validationform.owneremail.$touched)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Required - enter a valid email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn button-primary pull-right<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">ng-disabled</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>validationform.$invalid<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>',example:'<div class="row">\r\n    <div class="col-sm-6 col-xs-12">\r\n        <form role="form" name="validationform" autocomplete="off">\r\n            <div class="form-group-validate has-feedback">\r\n                <label class="form-label">Project name *</label>\r\n                <input type="text" placeholder="Enter project name" class="form-control" name="projectname" ng-model="projectname" required>\r\n                <span class="hpe-icon hpe-alert form-control-feedback" ng-show="validationform.projectname.$invalid && (validationform.projectname.$touched || validationform.projectname.$dirty)" aria-hidden="true"></span>\r\n                <span class="validation-error-text" ng-show="validationform.projectname.$invalid && (validationform.projectname.$touched || validationform.projectname.$dirty)">Required - enter a project name</span>\r\n            </div>\r\n            <div class="form-group">\r\n                <label class="form-label">Description</label>\r\n                <textarea class="form-control" rows="4" placeholder="Enter description"></textarea>\r\n            </div>\r\n            <div class="form-group-validate has-feedback">\r\n                <label class="form-label">Owner\'s email *</label>\r\n                <input type="email" placeholder="Enter owner\'s email" class="form-control" name="owneremail" ng-model="owneremail" required>\r\n                <span class="hpe-icon hpe-alert form-control-feedback" ng-show="validationform.owneremail.$invalid && (validationform.owneremail.$touched || validationform.owneremail.$dirty)" aria-hidden="true"></span>\r\n                <span class="validation-error-text" ng-show="validationform.owneremail.$invalid && (validationform.owneremail.$dirty || validationform.owneremail.$touched)">Required - enter a valid email</span>\r\n            </div>\r\n            <div>\r\n                <button class="btn button-primary pull-right" type="submit" ng-disabled="validationform.$invalid">Submit\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</div>'}},3268:function(n,a){n.exports='<uxd-form-validation-field-by-field-wrapper></uxd-form-validation-field-by-field-wrapper>\r\n\r\n<hr>\r\n\r\n<p>The form above demonstrates validation of a field’s content as the user enters the field.</p>\r\n\r\n<p>The user will be prompted if the field contains an error and may only click the ‘Submit’ button when the entire form contains \r\nno errors (see the <code>ng-disabled</code> attribute on the button in the HTML below).</p>\r\n\r\n<p>The form layout is created with the use of classes such as <code>form-group</code>, <code>form-label</code> etc. which are described in our ‘Basic Form’ documentation.</p>\r\n\r\n<p>Notice how any <code>div</code> tag which contains an <code>input</code> that requires validation implements the <code>form-group-validate</code> and <code>has-feedback</code> (used to show warning icon) classes. \r\nInputs that require validation must have their <code>name</code> and <code>ng-model</code> attributes set.</p>\r\n\r\n<p>A <code>required</code> attribute can be specified if the input is required.</p>\r\n\r\n<p>The input <code>type</code> attribute also specifies our desired type such as <code>text</code>, <code>email</code> etc. and the input will only be valid when the users input matches this.</p>\r\n\r\n<p>To display a ‘warning’ icon we add the <code>form-control-feedback</code> class in a span tag. \r\nWe then use the <code>ng-show</code> attribute to only show the warning icon when required.</p>\r\n\r\n<p>For example, to access the validity of a desired input, specify the form <code>name</code> followed by the input <code>name</code>. \r\nYou can then access the inputs properties (states) such as <code>$valid</code>, <code>$touched</code> etc. using the properties provided by <code>ng-model</code>. \r\nThis can be seen in the HTML code sample below.</p>\r\n\r\n<blockquote>\r\n  <p><strong>Note</strong>: Refer to the <a routerLink="/css/icons">Icons</a>  page for an example of how to use icons.</p>\r\n</blockquote>\r\n\r\n<p>To display ‘warning’ text we add the <code>validation-error-text</code> class in a <code>span</code> tag. \r\nWe then use <code>ng-show</code> as mentioned in the paragraph above to toggle the visibility of this text.</p>\r\n\r\n<p>The HTML code below shows how to implement the form used above:</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sampleHtml"></uxd-snippet>'},3269:function(n,a,s){"use strict";var t=this&&this.__extends||function(){var n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,a){n.__proto__=a}||function(n,a){for(var s in a)a.hasOwnProperty(s)&&(n[s]=a[s])};return function(a,s){function t(){this.constructor=a}n(a,s),a.prototype=null===s?Object.create(s):(t.prototype=s.prototype,new t)}}(),p=this&&this.__decorate||function(n,a,s,t){var p,e=arguments.length,o=e<3?a:null===t?t=Object.getOwnPropertyDescriptor(a,s):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(n,a,s,t);else for(var c=n.length-1;c>=0;c--)(p=n[c])&&(o=(e<3?p(o):e>3?p(a,s,o):p(a,s))||o);return e>3&&o&&Object.defineProperty(a,s,o),o},e=this&&this.__metadata||function(n,a){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(n,a)};Object.defineProperty(a,"__esModule",{value:!0});var o=s(0),c=s(407),l=s(1713),u=function(n){function a(){var a=n.call(this,s(3270))||this;return a.checked=!1,a.codepen={html:a.snippets.raw.codeExampleHtml},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-css-forms-inline-form",template:s(3274)}),c.DocumentationSectionComponent("CssInlineFormComponent"),e("design:paramtypes",[])],u),a.CssInlineFormComponent=u},3270:function(n,a,s){function t(n){return s(p(n))}function p(n){var a=e[n];if(!(a+1))throw new Error("Cannot find module '"+n+"'.");return a}var e={"./code.example.html":3271,"./sample1.snippet.html":3272,"./sample2.snippet.html":3273};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=3270},3271:function(n,a){n.exports={example:'<form role="form" class="form-inline" novalidate>\r\n    <div class="form-group">\r\n        <label class="form-label sr-only">Email</label>\r\n        <input type="email" placeholder="Enter email" class="form-control">\r\n    </div>\r\n    <div class="form-group">\r\n        <label class="form-label sr-only">Password</label>\r\n        <input type="password" placeholder="Enter password" class="form-control">\r\n    </div>\r\n    <checkbox ng-model="checked">Remember me</checkbox>\r\n    <button class="btn button-primary m-l-sm" type="submit">Log in\r\n    </button>\r\n</form>'}},3272:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-inline<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n    ...\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>'}},3273:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label sr-only<span class="token punctuation">"</span></span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Enter email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>'}},3274:function(n,a){n.exports='<form role="form" class="form-inline" novalidate>\r\n    <div class="form-group">\r\n        <label class="form-label sr-only">Email</label>\r\n        <input type="email" placeholder="Enter email" class="form-control">\r\n    </div>\r\n    <div class="form-group">\r\n        <label class="form-label sr-only">Password</label>\r\n        <input type="password" placeholder="Enter password" class="form-control">\r\n    </div>\r\n    <ux-checkbox [(value)]="checked">Remember Me</ux-checkbox>\r\n    <button class="btn button-primary m-l-sm" type="submit">Log in\r\n    </button>\r\n</form>\r\n\r\n<hr>\r\n\r\n<p>To make a Inline Form you must first add the <code>.form-inline</code> to the surrounding <code>form</code>.</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample1SnippetHtml"></uxd-snippet>\r\n\r\n<p>The structure of the form is very similar to that of the Basic Form with the exception of labels. \r\nWhilst it is uncommon to have labels visible on inline forms it may be useful for screen readers so by \r\nadding <code>.sr-only</code> to any labels that you do not want to be visible will mean that they will still be there for screen readers.</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample2SnippetHtml"></uxd-snippet>'},3275:function(n,a,s){"use strict";var t=this&&this.__extends||function(){var n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,a){n.__proto__=a}||function(n,a){for(var s in a)a.hasOwnProperty(s)&&(n[s]=a[s])};return function(a,s){function t(){this.constructor=a}n(a,s),a.prototype=null===s?Object.create(s):(t.prototype=s.prototype,new t)}}(),p=this&&this.__decorate||function(n,a,s,t){var p,e=arguments.length,o=e<3?a:null===t?t=Object.getOwnPropertyDescriptor(a,s):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(n,a,s,t);else for(var c=n.length-1;c>=0;c--)(p=n[c])&&(o=(e<3?p(o):e>3?p(a,s,o):p(a,s))||o);return e>3&&o&&Object.defineProperty(a,s,o),o},e=this&&this.__metadata||function(n,a){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(n,a)};Object.defineProperty(a,"__esModule",{value:!0});var o=s(0),c=s(407),l=s(1713),u=function(n){function a(){var a=n.call(this,s(3276))||this;return a.checked=!1,a.codepen={html:a.snippets.raw.codeExampleHtml},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-css-forms-horizontal-form",template:s(3281)}),c.DocumentationSectionComponent("CssHorizontalFormComponent"),e("design:paramtypes",[])],u),a.CssHorizontalFormComponent=u},3276:function(n,a,s){function t(n){return s(p(n))}function p(n){var a=e[n];if(!(a+1))throw new Error("Cannot find module '"+n+"'.");return a}var e={"./code.example.html":3277,"./sample1.snippet.html":3278,"./sample2.snippet.html":3279,"./sample3.snippet.html":3280};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=3276},3277:function(n,a){n.exports={example:'<form class="form-horizontal demo" role="form" novalidate>\r\n    <div class="row">\r\n        <div class="col-sm-6 col-xs-12">\r\n            <div class="form-group">\r\n                <label class="control-label form-label col-sm-2">Email</label>\r\n\r\n                <div class="col-sm-6">\r\n                    <input type="email" placeholder="Enter email" class="form-control">\r\n                </div>\r\n            </div>\r\n            <div class="form-group">\r\n                <label class="control-label form-label col-sm-2">Password</label>\r\n\r\n                <div class="col-sm-6">\r\n                    <input type="password" placeholder="Enter password" class="form-control">\r\n                </div>\r\n            </div>\r\n            <div class="form-group">\r\n                <div class="col-sm-offset-2 col-sm-10">\r\n                    <checkbox ng-model="checked">Remember me</checkbox>\r\n                </div>\r\n            </div>\r\n            <div class="form-group">\r\n                <div class="col-sm-offset-2 col-sm-10">\r\n                    <button class="btn button-primary" type="submit">Log in\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</form>'}},3278:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-horizontal<span class="token punctuation">"</span></span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n    ...\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>'}},3279:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>control-label form-label col-sm-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Enter email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>'}},3280:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-offset-2 col-sm-10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>checkbox</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checked<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Remember me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>checkbox</span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>'}},3281:function(n,a){n.exports='<form class="form-horizontal demo" role="form" novalidate>\r\n    <div class="form-group">\r\n        <label class="control-label form-label col-sm-2">Email</label>\r\n\r\n        <div class="col-sm-6">\r\n            <input type="email" placeholder="Enter email" class="form-control">\r\n        </div>\r\n    </div>\r\n    <div class="form-group">\r\n        <label class="control-label form-label col-sm-2">Password</label>\r\n\r\n        <div class="col-sm-6">\r\n            <input type="password" placeholder="Enter password" class="form-control">\r\n        </div>\r\n    </div>\r\n    <div class="form-group">\r\n        <div class="col-sm-offset-2 col-sm-10">\r\n            <ux-checkbox [(value)]="checked">Remember Me</ux-checkbox>\r\n        </div>\r\n    </div>\r\n    <div class="form-group">\r\n        <div class="col-sm-offset-2 col-sm-10">\r\n            <button class="btn button-primary" type="submit">Log in\r\n            </button>\r\n        </div>\r\n    </div>\r\n</form>\r\n\r\n<hr>\r\n\r\n<p>To make a Horizontal Form you must first add the <code>.form-horizontal</code> to the surrounding <code>form</code>.</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample1SnippetHtml"></uxd-snippet>\r\n\r\n<p>Each control must also be wrapped in <code>.form-group</code>. Think of each <code>.form-group</code> as a new row in our form. \r\nFor controls with labels we must add <code>.control-label</code>, <code>.form-label</code> and column width <code>.col-sm-*</code> classes. \r\nWe also need to specify the width the control can take up so we wrap the control in a div and give it a column width <code>.col-sm-*</code>.</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample2SnippetHtml"></uxd-snippet>\r\n\r\n<p>For controls that don’t have a left hand label, such as the check box in our example, it is still wrapped in <code>.form-group</code> \r\nbut we must wrap the control in a <code>div</code> with the same column width <code>.col-sm-*</code> as the above controls and specify an offset \r\n<code>.col-sm-offset-*</code> the same size as the label column width <code>.col-sm-*</code>.</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample3SnippetHtml"></uxd-snippet>'},3282:function(n,a,s){"use strict";var t=this&&this.__extends||function(){var n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(n,a){n.__proto__=a}||function(n,a){for(var s in a)a.hasOwnProperty(s)&&(n[s]=a[s])};return function(a,s){function t(){this.constructor=a}n(a,s),a.prototype=null===s?Object.create(s):(t.prototype=s.prototype,new t)}}(),p=this&&this.__decorate||function(n,a,s,t){var p,e=arguments.length,o=e<3?a:null===t?t=Object.getOwnPropertyDescriptor(a,s):t;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(n,a,s,t);else for(var c=n.length-1;c>=0;c--)(p=n[c])&&(o=(e<3?p(o):e>3?p(a,s,o):p(a,s))||o);return e>3&&o&&Object.defineProperty(a,s,o),o},e=this&&this.__metadata||function(n,a){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(n,a)};Object.defineProperty(a,"__esModule",{value:!0});var o=s(0),c=s(407),l=s(1713),u=function(n){function a(){var a=n.call(this,s(3283))||this;return a.checked=!1,a.codepen={html:a.snippets.raw.sampleHtml},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-css-forms-basic-form",template:s(3285)}),c.DocumentationSectionComponent("CssBasicFormComponent"),e("design:paramtypes",[])],u),a.CssBasicFormComponent=u},3283:function(n,a,s){function t(n){return s(p(n))}function p(n){var a=e[n];if(!(a+1))throw new Error("Cannot find module '"+n+"'.");return a}var e={"./sample.html":3284};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=3283},3284:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-sm-6 col-xs-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form<span class="token punctuation">"</span></span> <span class="token attr-name">novalidate</span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Email<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Enter email<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Password<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Enter password<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>checkbox</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checked<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Remember me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>checkbox</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn button-primary pull-right<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Log in\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>',example:'<div class="col-sm-6 col-xs-12">\r\n    <form role="form" novalidate>\r\n        <div class="form-group">\r\n            <label class="form-label">Email</label>\r\n            <input type="email" placeholder="Enter email" class="form-control">\r\n        </div>\r\n        <div class="form-group">\r\n            <label class="form-label">Password</label>\r\n            <input type="password" placeholder="Enter password" class="form-control">\r\n        </div>\r\n        <div>\r\n            <checkbox ng-model="checked">Remember me</checkbox>\r\n            <button class="btn button-primary pull-right" type="submit">Log in\r\n            </button>\r\n        </div>\r\n    </form>\r\n</div>'}},3285:function(n,a){n.exports='<div class="row demo">\r\n    <div class="col-sm-6 col-xs-12">\r\n        <form role="form" novalidate>\r\n            <div class="form-group">\r\n                <label class="form-label">Email</label>\r\n                <input type="email" placeholder="Enter email" class="form-control">\r\n            </div>\r\n            <div class="form-group">\r\n                <label class="form-label">Password</label>\r\n                <input type="password" placeholder="Enter password" class="form-control">\r\n            </div>\r\n            <div>\r\n                <ux-checkbox [(value)]="checked">Remember Me</ux-checkbox>\r\n                <button class="btn button-primary pull-right" type="submit">Log in\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </div>\r\n</div>\r\n\r\n<hr>\r\n\r\n<p>Individual controls should be wrapped in <code>.form-group</code> for spacing.<br>\r\nForm labels are contained in the .form-label.  As you see above, the form will stack vertically.</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sampleHtml"></uxd-snippet>'}});