text: webpackJsonp([8],{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},1717:function(n,a,s){"use strict";s.d(a,"a",function(){return e});var t=s(0),p=s(1718),e=function(){function n(n){this.groups=[],Object.assign(this,n)}return n.prototype.closeOtherPanels=function(n){this.closeOthers&&this.groups.forEach(function(a){a!==n&&(a.isOpen=!1)})},n.prototype.addGroup=function(n){this.groups.push(n)},n.prototype.removeGroup=function(n){var a=this.groups.indexOf(n);-1!==a&&this.groups.splice(a,1)},n.decorators=[{type:t.Component,args:[{selector:"accordion",template:"<ng-content></ng-content>",host:{"[attr.aria-multiselectable]":"closeOthers",role:"tablist",class:"panel-group",style:"display: block"}}]}],n.ctorParameters=function(){return[{type:p.a}]},n.propDecorators={closeOthers:[{type:t.Input}]},n}()},1718:function(n,a,s){"use strict";s.d(a,"a",function(){return p});var t=s(0),p=function(){function n(){this.closeOthers=!1}return n.decorators=[{type:t.Injectable}],n.ctorParameters=function(){return[]},n}()},1720:function(n,a,s){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.MAPPINGS={NgxBootstrap:{alias:"ngx-bootstrap",source:"https://unpkg.com/ngx-bootstrap"},Chance:{alias:"chance",source:"npm:chance@1.0.6"},ChartJs:{alias:"chart.js",source:"https://unpkg.com/chart.js@2.5.0/dist/Chart.min.js"},Ng2Charts:{alias:"ng2-charts",source:"https://unpkg.com/ng2-charts@1.5.0/bundles/ng2-charts.umd.min.js"}}},1721:function(n,a,s){"use strict";s.d(a,"a",function(){return o});var t=s(0),p=s(83),e=s(1717),o=function(){function n(n){this.accordion=n}return Object.defineProperty(n.prototype,"isOpen",{get:function(){return this._isOpen},set:function(n){this._isOpen=n,n&&this.accordion.closeOtherPanels(this)},enumerable:!0,configurable:!0}),Object.defineProperty(n.prototype,"isBs3",{get:function(){return p.a()},enumerable:!0,configurable:!0}),n.prototype.ngOnInit=function(){this.panelClass=this.panelClass||"panel-default",this.accordion.addGroup(this)},n.prototype.ngOnDestroy=function(){this.accordion.removeGroup(this)},n.prototype.toggleOpen=function(n){this.isDisabled||(this.isOpen=!this.isOpen)},n.decorators=[{type:t.Component,args:[{selector:"accordion-group, accordion-panel",template:'\n    <div class="panel card" [ngClass]="panelClass">\n      <div class="panel-heading card-header" role="tab" (click)="toggleOpen($event)">\n        <div class="panel-title">\n          <div role="button" class="accordion-toggle" [attr.aria-expanded]="isOpen">\n            <div *ngIf="heading"[ngClass]="{\'text-muted\': isDisabled}">{{heading}}</div>\n            <ng-content select="[accordion-heading]"></ng-content>\n          </div>\n        </div>\n      </div>\n      <div class="panel-collapse collapse" role="tabpanel" [collapse]="!isOpen">\n        <div class="panel-body card-block card-body">\n          <ng-content></ng-content>\n        </div>\n      </div>\n    </div>\n  ',host:{class:"panel",style:"display: block"}}]}],n.ctorParameters=function(){return[{type:e.a,decorators:[{type:t.Inject,args:[e.a]}]}]},n.propDecorators={heading:[{type:t.Input}],panelClass:[{type:t.Input}],isDisabled:[{type:t.Input}],isOpen:[{type:t.HostBinding,args:["class.panel-open"]},{type:t.Input}]},n}()},1725:function(n,a,s){"use strict";s.d(a,"a",function(){return e});var t=s(0),p=s(1727),e=function(){function n(){}return n.forRoot=function(){return{ngModule:n,providers:[]}},n.decorators=[{type:t.NgModule,args:[{declarations:[p.a],exports:[p.a]}]}],n.ctorParameters=function(){return[]},n}()},1726:function(n,a,s){"use strict";s.d(a,"a",function(){return u});var t=s(9),p=s(0),e=s(1725),o=s(1721),c=s(1717),l=s(1718),u=function(){function n(){}return n.forRoot=function(){return{ngModule:n,providers:[l.a]}},n.decorators=[{type:p.NgModule,args:[{imports:[t.CommonModule,e.a],declarations:[c.a,o.a],exports:[c.a,o.a]}]}],n.ctorParameters=function(){return[]},n}()},1727:function(n,a,s){"use strict";s.d(a,"a",function(){return p});var t=s(0),p=function(){function n(n,a){this.collapsed=new t.EventEmitter,this.expanded=new t.EventEmitter,this.isExpanded=!0,this.isCollapsed=!1,this.isCollapse=!0,this.isCollapsing=!1,this._el=n,this._renderer=a}return Object.defineProperty(n.prototype,"collapse",{get:function(){return this.isExpanded},set:function(n){this.isExpanded=n,this.toggle()},enumerable:!0,configurable:!0}),n.prototype.toggle=function(){this.isExpanded?this.hide():this.show()},n.prototype.hide=function(){this.isCollapse=!1,this.isCollapsing=!0,this.isExpanded=!1,this.isCollapsed=!0,this.isCollapse=!0,this.isCollapsing=!1,this.display="none",this.collapsed.emit(this)},n.prototype.show=function(){this.isCollapse=!1,this.isCollapsing=!0,this.isExpanded=!0,this.isCollapsed=!1,this.display="block",this.isCollapse=!0,this.isCollapsing=!1,this._renderer.setElementStyle(this._el.nativeElement,"overflow","visible"),this._renderer.setElementStyle(this._el.nativeElement,"height","auto"),this.expanded.emit(this)},n.decorators=[{type:t.Directive,args:[{selector:"[collapse]",exportAs:"bs-collapse",host:{"[class.collapse]":"true"}}]}],n.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer}]},n.propDecorators={collapsed:[{type:t.Output}],expanded:[{type:t.Output}],display:[{type:t.HostBinding,args:["style.display"]}],isExpanded:[{type:t.HostBinding,args:["class.in"]},{type:t.HostBinding,args:["class.show"]},{type:t.HostBinding,args:["attr.aria-expanded"]}],isCollapsed:[{type:t.HostBinding,args:["attr.aria-hidden"]}],isCollapse:[{type:t.HostBinding,args:["class.collapse"]}],isCollapsing:[{type:t.HostBinding,args:["class.collapsing"]}],collapse:[{type:t.Input}]},n}()},1729:function(n,a,s){"use strict";Object.defineProperty(a,"__esModule",{value:!0});var t=s(1721);s.d(a,"AccordionPanelComponent",function(){return t.a});var p=s(1717);s.d(a,"AccordionComponent",function(){return p.a});var e=s(1726);s.d(a,"AccordionModule",function(){return e.a});var o=s(1718);s.d(a,"AccordionConfig",function(){return o.a})},1889:function(n,a,s){"use strict";function t(n,a){return this.lift(new l(n,a))}var p=this&&this.__extends||function(n,a){function s(){this.constructor=n}for(var t in a)a.hasOwnProperty(t)&&(n[t]=a[t]);n.prototype=null===a?Object.create(a):(s.prototype=a.prototype,new s)},e=s(18),o=s(174),c=s(104);a.distinctUntilChanged=t;var l=function(){function n(n,a){this.compare=n,this.keySelector=a}return n.prototype.call=function(n,a){return a.subscribe(new u(n,this.compare,this.keySelector))},n}(),u=function(n){function a(a,s,t){n.call(this,a),this.keySelector=t,this.hasKey=!1,"function"==typeof s&&(this.compare=s)}return p(a,n),a.prototype.compare=function(n,a){return n===a},a.prototype._next=function(n){var a=this.keySelector,s=n;if(a&&(s=o.tryCatch(this.keySelector)(n))===c.errorObject)return this.destination.error(c.errorObject.e);var t=!1;if(this.hasKey){if((t=o.tryCatch(this.compare)(this.key,s))===c.errorObject)return this.destination.error(c.errorObject.e)}else this.hasKey=!0;!1===Boolean(t)&&(this.key=s,this.destination.next(n))},a}(e.Subscriber)},2316: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(9),l=s(12),u=s(1729),r=s(408),i=s(173),k=s(409),d=s(102),m=s(410),g=s(411),h=s(2317),v=s(2322),b=s(2327),f=s(2334),w=s(2338),x=s(2343),y=s(2348),C=s(2353),S=s(2359),T=s(2364),O=s(2369),D=s(2375),j=s(2387),I=s(2397),_=s(2402),R=s(2413),P=s(2418),M=s(2427),E=[h.ComponentsCheckboxComponent,v.ComponentsCheckboxNg1Component,b.ComponentsCustomDropdownNg1Component,f.ComponentsExpandingTextAreaNg1Component,w.ComponentsInlineDropdownNg1Component,x.ComponentsInputExpandNg1Component,y.ComponentsInputMaskNg1Component,C.ComponentsNumberPickerNg1Component,S.ComponentsRadioButtonComponent,T.ComponentsRadioButtonNg1Component,O.ComponentsSliderChartsNg1Component,D.ComponentsSlidersComponent,j.ComponentsSlidersNg1Component,I.ComponentsTagsComponent,_.ComponentsTagsNg1Component,R.ComponentsToggleSwitchComponent,P.ComponentsToggleSwitchNg1Component,M.ComponentsNumberPickerComponent],A=[{path:"**",component:k.DocumentationCategoryComponent,data:{category:i.ResolverService.resolveCategoryData(i.DocumentationPage.Components,"Input Controls")}}],N=function(){function n(n,a){a.registerResolver(n)}return n}();N=t([e.NgModule({imports:[g.WrappersModule,m.TabsModule,d.CheckboxModule,d.ToggleSwitchModule,d.RadioButtonModule,c.CommonModule,g.WrappersModule,m.TabsModule,d.TagInputModule,d.TypeaheadModule,d.SliderModule,l.FormsModule,d.NumberPickerModule,d.ColorServiceModule,r.DocumentationComponentsModule,o.RouterModule.forChild(A),l.ReactiveFormsModule,u.AccordionModule.forRoot()],exports:E,declarations:E,entryComponents:E}),p("design:paramtypes",[e.ComponentFactoryResolver,i.ResolverService])],N),a.ComponentsInputControlsModule=N},2317: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(2318))||this;return a.sliderValue=50,a.sliderOptions={type:"value",handles:{style:"button",callout:{trigger:"none",background:"#464646",color:"#fff",formatter:function(n){return n}}},track:{height:"wide",min:0,max:100,ticks:{snap:"none",major:{show:!0,steps:10,labels:!0,formatter:function(n){return n}},minor:{show:!0,steps:5,labels:!1,formatter:function(n){return n}}},colors:{lower:"#f2f2f2",range:"rgba(96,121,141, 0.75)",higher:"#f2f2f2"}}},a.plunk={files:{"app.component.ts":a.snippets.raw.appTs,"app.component.html":a.snippets.raw.appHtml},modules:[{imports:["CheckboxModule"],library:"ux-aspects"}]},a.checkModel={option1:!0,option2:!1,option3:!1,option4:!1},a.simplified=!1,a.indeterminateValue=-1,a.disableCheck=!1,a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-components-checkbox",template:s(2321)}),c.DocumentationSectionComponent("ComponentsCheckboxComponent"),e("design:paramtypes",[])],u),a.ComponentsCheckboxComponent=u},2318: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={"./app.html":2319,"./app.ts":2320};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2318},2319: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 punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ux-checkbox</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkModel.option1<span class="token punctuation">"</span></span> <span class="token attr-name">[disabled]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>disableCheck<span class="token punctuation">"</span></span> <span class="token attr-name">[simplified]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n    Option1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-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\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>ux-checkbox</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkModel.option2<span class="token punctuation">"</span></span> <span class="token attr-name">[indeterminateValue]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>indeterminateValue<span class="token punctuation">"</span></span> \r\n    <span class="token attr-name">[simplified]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-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\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>ux-checkbox</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkModel.option3<span class="token punctuation">"</span></span> <span class="token attr-name">[simplified]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-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\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>ux-checkbox</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkModel.option4<span class="token punctuation">"</span></span> <span class="token attr-name">[simplified]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Onsectetur adipiscing elit. \r\n        Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing \r\n        elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur \r\n        adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-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\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>m-t-xl<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>code</span><span class="token punctuation">></span></span>checkModel.option1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>{{ checkModel.option1 }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span>.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>checkModel.option2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>{{ checkModel.option2 }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span>.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>checkModel.option3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>{{ checkModel.option3 }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span>.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>checkModel.option4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>{{ checkModel.option4 }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span>.\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</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>br</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>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 m-r-xs<span class="token punctuation">"</span></span> \r\n            <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>disableCheck <span class="token punctuation">=</span> !disableCheck<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n            {{ disableCheck ? \'Click to enable Option1\' : \'Click to disable Option1\' }}\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\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-secondary m-r-xs<span class="token punctuation">"</span></span> \r\n            <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkModel.option2 <span class="token punctuation">=</span> indeterminateValue<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n            Set Option2 to indeterminate state\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\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-accent<span class="token punctuation">"</span></span> \r\n            <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>simplified <span class="token punctuation">=</span> !simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n            {{ simplified ? \'Disable Simplified Style\' : \'Enable Simplified Style\' }}\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>',example:'<div>\r\n    <ux-checkbox [(value)]="checkModel.option1" [disabled]="disableCheck" [simplified]="simplified">\r\n    Option1</ux-checkbox>\r\n</div>\r\n\r\n<div>\r\n    <ux-checkbox [(value)]="checkModel.option2" [indeterminateValue]="indeterminateValue" \r\n    [simplified]="simplified">Option2</ux-checkbox>\r\n</div>\r\n\r\n<div>\r\n    <ux-checkbox [(value)]="checkModel.option3" [simplified]="simplified">Option3</ux-checkbox>\r\n</div>\r\n\r\n<div>\r\n    <ux-checkbox [(value)]="checkModel.option4" [simplified]="simplified">Onsectetur adipiscing elit. \r\n        Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing \r\n        elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur \r\n        adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit.</ux-checkbox>\r\n</div>\r\n\r\n<br>\r\n\r\n<p class="m-t-xl">\r\n    <code>checkModel.option1</code> is <em>{{ checkModel.option1 }}</em>.\r\n    <code>checkModel.option2</code> is <em>{{ checkModel.option2 }}</em>.\r\n    <code>checkModel.option3</code> is <em>{{ checkModel.option3 }}</em>.\r\n    <code>checkModel.option4</code> is <em>{{ checkModel.option4 }}</em>.\r\n</p>\r\n\r\n<br>\r\n\r\n<div>\r\n    <button class="btn button-primary m-r-xs" \r\n            (click)="disableCheck = !disableCheck">\r\n            {{ disableCheck ? \'Click to enable Option1\' : \'Click to disable Option1\' }}\r\n    </button>\r\n\r\n    <button class="btn button-secondary m-r-xs" \r\n            (click)="checkModel.option2 = indeterminateValue">\r\n            Set Option2 to indeterminate state\r\n    </button>\r\n\r\n    <button class="btn button-accent" \r\n            (click)="simplified = !simplified">\r\n            {{ simplified ? \'Disable Simplified Style\' : \'Enable Simplified Style\' }}\r\n    </button>\r\n</div>'}},2320:function(n,a){n.exports={snippet:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@angular/core\'</span><span class="token punctuation">;</span>\r\n\r\n@<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\r\n    selector<span class="token punctuation">:</span> <span class="token string">\'app\'</span><span class="token punctuation">,</span>\r\n    templateUrl<span class="token punctuation">:</span> <span class="token string">\'./src/app.component.html\'</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\r\n<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppComponent</span> <span class="token punctuation">{</span>\r\n    checkModel <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        option1<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n        option2<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n        option3<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n        option4<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    simplified <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n    indeterminateValue <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>\r\n    disableCheck <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:"import { Component } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'app',\r\n    templateUrl: './src/app.component.html'\r\n})\r\nexport class AppComponent {\r\n    checkModel = {\r\n        option1: true,\r\n        option2: false,\r\n        option3: false,\r\n        option4: false\r\n    };\r\n\r\n    simplified = false;\r\n    indeterminateValue = -1;\r\n    disableCheck = false;\r\n}"}},2321:function(n,a){n.exports='<div>\r\n    <ux-checkbox [(value)]="checkModel.option1" [disabled]="disableCheck" [simplified]="simplified">Option1</ux-checkbox>\r\n</div>\r\n\r\n<div>\r\n    <ux-checkbox [(value)]="checkModel.option2" [indeterminateValue]="indeterminateValue" [simplified]="simplified">Option2</ux-checkbox>\r\n</div>\r\n\r\n<div>\r\n    <ux-checkbox [(value)]="checkModel.option3" [simplified]="simplified">Option3</ux-checkbox>\r\n</div>\r\n\r\n<div>\r\n    <ux-checkbox [(value)]="checkModel.option4" [simplified]="simplified">Onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit.</ux-checkbox>\r\n</div>\r\n\r\n<br>\r\n\r\n<p class="m-t-xl">\r\n    <code>checkModel.option1</code> is <em>{{ checkModel.option1 }}</em>.\r\n    <code>checkModel.option2</code> is <em>{{ checkModel.option2 }}</em>.\r\n    <code>checkModel.option3</code> is <em>{{ checkModel.option3 }}</em>.\r\n    <code>checkModel.option4</code> is <em>{{ checkModel.option4 }}</em>.\r\n</p>\r\n\r\n<br>\r\n\r\n<div>\r\n    <button class="btn button-primary m-r-xs" \r\n            (click)="disableCheck = !disableCheck">\r\n            {{ disableCheck ? \'Click to enable Option1\' : \'Click to disable Option1\' }}\r\n    </button>\r\n\r\n    <button class="btn button-secondary m-r-xs" \r\n            (click)="checkModel.option2 = indeterminateValue">\r\n            Set Option2 to indeterminate state\r\n    </button>\r\n\r\n    <button class="btn button-accent" \r\n            (click)="simplified = !simplified">\r\n            {{ simplified ? \'Disable Simplified Style\' : \'Enable Simplified Style\' }}\r\n    </button>\r\n</div>\r\n\r\n<hr>\r\n\r\n<p>The code used for the above example is shown below:</p>\r\n\r\n<tabset>\r\n    <tab heading="HTML">\r\n        <uxd-snippet [content]="snippets.compiled.appHtml"></uxd-snippet>\r\n    </tab>\r\n    <tab heading="TypeScript">\r\n        <uxd-snippet [content]="snippets.compiled.appTs" language="javascript"></uxd-snippet>\r\n    </tab>\r\n</tabset>\r\n\r\n<p>The following attributes can be set to customize the behavior of the control.</p>\r\n\r\n<p>In an Angular application, <code>ngModel</code> may be used to bind the control to a form.</p>\r\n\r\n<table class="table">\r\n\r\n    <thead>\r\n        <tr>\r\n            <th>Name</th>\r\n            <th>Type</th>\r\n            <th>Description</th>\r\n        </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n\r\n        <tr>\r\n            <td><b>@Input @Output</b> value</td>\r\n            <td><b>any</b></td>\r\n            <td>Determines if the checkbox should be checked, unchecked or indeterminate. The default value is <code>false</code>.</td>\r\n        </tr>\r\n\r\n        <tr>\r\n            <td><b>@Input</b> indeterminateValue</td>\r\n            <td><b>any</b></td>\r\n            <td>If <code>value</code> is set to the indeterminate value specified using this attribute, it will neither display the checkbox as checked or unchecked, and will instead show the indeterminate variation. The default value is <code>-1</code>.</td>\r\n        </tr>\r\n\r\n        <tr>\r\n            <td><b>@Input</b> simplified</td>\r\n            <td><b>boolean</b></td>\r\n            <td>If set to <code>true</code> the checkbox will be displayed without a border and background. The default value is <code>false</code>.</td>\r\n        </tr>\r\n\r\n        <tr>\r\n            <td><b>@Input</b> clickable</td>\r\n            <td><b>boolean</b></td>\r\n            <td>If set to <code>true</code> the checkbox will not toggle state when clicked. The default value is <code>false</code>.</td>\r\n        </tr>\r\n\r\n    </tbody>\r\n</table>\r\n'},2322: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(2323))||this;return a.codepen={html:a.snippets.raw.sampleHtml,htmlAttributes:{"ng-controller":"CheckboxDemoCtrl as vm"},js:[a.snippets.raw.sampleJs]},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-components-checkbox-ng1",template:s(2326),changeDetection:o.ChangeDetectionStrategy.OnPush}),c.DocumentationSectionComponent("ComponentsCheckboxNg1Component"),e("design:paramtypes",[])],u),a.ComponentsCheckboxNg1Component=u},2323: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":2324,"./sample.js":2325};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2323},2324: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 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>vm.checkModel.option1<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>vm.disableCheck<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>checkboxOption1<span class="token punctuation">"</span></span> <span class="token attr-name">simplified</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option1<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\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>vm.checkModel.option2<span class="token punctuation">"</span></span> <span class="token attr-name">indeterminate-value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.indeterminateValue<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>checkboxOption2<span class="token punctuation">"</span></span> <span class="token attr-name">simplified</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option2<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\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>vm.checkModel.option3<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>checkboxOption3<span class="token punctuation">"</span></span> <span class="token attr-name">simplified</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option3<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\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>vm.checkModel.option4<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>checkboxOption4<span class="token punctuation">"</span></span> <span class="token attr-name">simplified</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit.<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\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>m-t<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>code</span><span class="token punctuation">></span></span>checkModel.option1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.checkModel.option1<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>em</span><span class="token punctuation">></span></span>.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>checkModel.option2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.checkModel.option2<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>em</span><span class="token punctuation">></span></span>.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>checkModel.option3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.checkModel.option3<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>em</span><span class="token punctuation">></span></span>.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>checkModel.option4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.checkModel.option4<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>em</span><span class="token punctuation">></span></span>.\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</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>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 m-r-xs<span class="token punctuation">"</span></span> \r\n            <span class="token attr-name">ng-click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.disableCheck <span class="token punctuation">=</span> !vm.disableCheck<span class="token punctuation">"</span></span>\r\n            <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.disableCheck ? <span class="token punctuation">\'</span>Click to enable Option1<span class="token punctuation">\'</span> : <span class="token punctuation">\'</span>Click to disable Option1<span class="token punctuation">\'</span><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>button</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>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-secondary m-r-xs<span class="token punctuation">"</span></span> \r\n            <span class="token attr-name">ng-click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.checkModel.option2 <span class="token punctuation">=</span> vm.indeterminateValue<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n            Set Option2 to indeterminate state\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\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-accent<span class="token punctuation">"</span></span> \r\n            <span class="token attr-name">ng-click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.simplified <span class="token punctuation">=</span> !vm.simplified<span class="token punctuation">"</span></span>\r\n            <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.simplified ? <span class="token punctuation">\'</span>Disable Simplified Style<span class="token punctuation">\'</span> : <span class="token punctuation">\'</span>Enable Simplified Style<span class="token punctuation">\'</span><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>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>',example:'<div>\r\n    <checkbox ng-model="vm.checkModel.option1" ng-disabled="vm.disableCheck" name="checkboxOption1" simplified="vm.simplified">Option1</checkbox>\r\n</div>\r\n\r\n<div>\r\n    <checkbox ng-model="vm.checkModel.option2" indeterminate-value="vm.indeterminateValue" name="checkboxOption2" simplified="vm.simplified">Option2</checkbox>\r\n</div>\r\n\r\n<div>\r\n    <checkbox ng-model="vm.checkModel.option3" name="checkboxOption3" simplified="vm.simplified">Option3</checkbox>\r\n</div>\r\n\r\n<div>\r\n    <checkbox ng-model="vm.checkModel.option4" name="checkboxOption4" simplified="vm.simplified">Onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit.</checkbox>\r\n</div>\r\n\r\n<p class="m-t">\r\n    <code>checkModel.option1</code> is <em ng-bind="vm.checkModel.option1"></em>.\r\n    <code>checkModel.option2</code> is <em ng-bind="vm.checkModel.option2"></em>.\r\n    <code>checkModel.option3</code> is <em ng-bind="vm.checkModel.option3"></em>.\r\n    <code>checkModel.option4</code> is <em ng-bind="vm.checkModel.option4"></em>.\r\n</p>\r\n\r\n<div>\r\n    <button class="btn button-primary m-r-xs" \r\n            ng-click="vm.disableCheck = !vm.disableCheck"\r\n            ng-bind="vm.disableCheck ? \'Click to enable Option1\' : \'Click to disable Option1\'">\r\n    </button>\r\n\r\n    <button class="btn button-secondary m-r-xs" \r\n            ng-click="vm.checkModel.option2 = vm.indeterminateValue">\r\n            Set Option2 to indeterminate state\r\n    </button>\r\n\r\n    <button class="btn button-accent" \r\n            ng-click="vm.simplified = !vm.simplified"\r\n            ng-bind="vm.simplified ? \'Disable Simplified Style\' : \'Enable Simplified Style\'">\r\n    </button>\r\n</div>'}},2325: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">\'CheckboxDemoCtrl\'</span><span class="token punctuation">,</span> CheckboxDemoCtrl<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\n<span class="token keyword">function</span> <span class="token function">CheckboxDemoCtrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n    <span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>checkModel <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        option1<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n        option2<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n        option3<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n        option4<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>simplified <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>indeterminateValue <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>disableCheck <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:"angular.module('app').controller('CheckboxDemoCtrl', CheckboxDemoCtrl);\r\n\r\nfunction CheckboxDemoCtrl() {\r\n    var vm = this;\r\n\r\n    vm.checkModel = {\r\n        option1: true,\r\n        option2: false,\r\n        option3: false,\r\n        option4: false\r\n    };\r\n\r\n    vm.simplified = false;\r\n    vm.indeterminateValue = -1;\r\n    vm.disableCheck = false;\r\n}"}},2326:function(n,a){n.exports='<uxd-checkbox-wrapper></uxd-checkbox-wrapper>\r\n\r\n<hr>\r\n\r\n<p>To create a checkbox use the <code>checkbox</code> directive with an <code>ng-model</code> to set and store the value.</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 [content]="snippets.compiled.sampleJs" language="javascript"></uxd-snippet>\r\n    </tab>\r\n</tabset>\r\n\r\n<p>The following attributes can be set to customize the behavior of the control.</p>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table m-t">\r\n        <tr>\r\n            <th>Name</th>\r\n            <th>Type</th>\r\n            <th>Binding</th>\r\n            <th>Description</th>\r\n            <th>Optional</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">ng-model</td>\r\n            <td>boolean</td>\r\n            <td>variable</td>\r\n            <td>Initially sets the value of the checkbox and will be updated to contain the current value if a user toggles the\r\n                checkbox.</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">indeterminate-value</td>\r\n            <td>value</td>\r\n            <td>variable</td>\r\n            <td>If <code>ng-model</code> is set to the indeterminate value specified using this attribute, it will neither display\r\n                the checkbox as checked or unchecked, and will instead show the indeterminate variation.</td>\r\n            <td>true</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">simplified</td>\r\n            <td>boolean</td>\r\n            <td>variable</td>\r\n            <td>If set to <code>true</code> the checkbox will be displayed without a border and background.</td>\r\n            <td>true</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">clickable</td>\r\n            <td>boolean</td>\r\n            <td>variable</td>\r\n            <td>If set to <code>false</code> the checkbox will not be updated when clicking on it, can be used if something else\r\n                is updating the state of the checkbox.</td>\r\n            <td>true</td>\r\n        </tr>\r\n    </table>\r\n</div>'},2327: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(2328))||this;return a.codepen={html:a.snippets.raw.sampleHtml,htmlTemplates:[{id:"template.html",content:a.snippets.raw.templateHtml}],css:[a.snippets.raw.sampleCss],js:[a.snippets.raw.sampleJs]},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-custom-dropdown-ng1",template:s(2333),changeDetection:o.ChangeDetectionStrategy.OnPush}),c.DocumentationSectionComponent("ComponentsCustomDropdownNg1Component"),e("design:paramtypes",[])],u),a.ComponentsCustomDropdownNg1Component=u},2328: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.css":2329,"./sample.html":2330,"./sample.js":2331,"./template.html":2332};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2328},2329:function(n,a){n.exports={snippet:'<span class="token selector">.dropdown-popover</span> <span class="token punctuation">{</span>\r\n    <span class="token property">z-index</span><span class="token punctuation">:</span> 1005<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.dropdown-outer-container</span> <span class="token punctuation">{</span>\r\n    <span class="token property">padding-top</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>\r\n    <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.dropdown-container</span> <span class="token punctuation">{</span>\r\n    <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>\r\n    <span class="token property">width</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.dropdown-container table</span> <span class="token punctuation">{</span>\r\n    <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid #e5e5e5<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.dropdown-container table tbody tr td</span> <span class="token punctuation">{</span>\r\n    <span class="token property">padding-bottom</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.dropdown-container table .check>label</span> <span class="token punctuation">{</span>\r\n    <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.btn-pull-right</span> <span class="token punctuation">{</span>\r\n    <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>\r\n    <span class="token property">margin-top</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.group-header</span> <span class="token punctuation">{</span>\r\n    <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.dropdown-body</span> <span class="token punctuation">{</span>\r\n    <span class="token property">font-size</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.dropdown-footer</span> <span class="token punctuation">{</span>\r\n    <span class="token property">text-align</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>\r\n    <span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid #e5e5e5<span class="token punctuation">;</span>\r\n    <span class="token property">padding</span><span class="token punctuation">:</span> 15px 15px 6px 0<span class="token punctuation">;</span>\r\n    <span class="token property">margin-left</span><span class="token punctuation">:</span> -15px<span class="token punctuation">;</span>\r\n    <span class="token property">margin-right</span><span class="token punctuation">:</span> -15px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.inner-addon</span> <span class="token punctuation">{</span>\r\n    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n\r\n<span class="token comment" spellcheck="true">/* style icon */</span>\r\n\r\n<span class="token selector">.inner-addon .hpe-icon</span> <span class="token punctuation">{</span>\r\n    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>\r\n    <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>\r\n    <span class="token property">pointer-events</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n\r\n<span class="token comment" spellcheck="true">/* align icon */</span>\r\n\r\n<span class="token selector">.left-addon .hpe-icon</span> <span class="token punctuation">{</span>\r\n    <span class="token property">left</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.right-addon .hpe-icon</span> <span class="token punctuation">{</span>\r\n    <span class="token property">right</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n\r\n<span class="token comment" spellcheck="true">/* add padding  */</span>\r\n\r\n<span class="token selector">.left-addon input</span> <span class="token punctuation">{</span>\r\n    <span class="token property">padding-left</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.right-addon input</span> <span class="token punctuation">{</span>\r\n    <span class="token property">padding-right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:".dropdown-popover {\r\n    z-index: 1005;\r\n}\r\n\r\n.dropdown-outer-container {\r\n    padding-top: 5px;\r\n    padding-bottom: 5px;\r\n}\r\n\r\n.dropdown-container {\r\n    overflow: auto;\r\n    width: 250px;\r\n}\r\n\r\n.dropdown-container table {\r\n    border-bottom: 1px solid #e5e5e5;\r\n}\r\n\r\n.dropdown-container table tbody tr td {\r\n    padding-bottom: 6px;\r\n}\r\n\r\n.dropdown-container table .check>label {\r\n    margin-bottom: 0px;\r\n}\r\n\r\n.btn-pull-right {\r\n    float: right;\r\n    margin-top: 3px;\r\n}\r\n\r\n.group-header {\r\n    font-size: 18px;\r\n}\r\n\r\n.dropdown-body {\r\n    font-size: 16px;\r\n}\r\n\r\n.dropdown-footer {\r\n    text-align: right;\r\n    border-top: 1px solid #e5e5e5;\r\n    padding: 15px 15px 6px 0;\r\n    margin-left: -15px;\r\n    margin-right: -15px;\r\n}\r\n\r\n.inner-addon {\r\n    position: relative;\r\n}\r\n\r\n\r\n/* style icon */\r\n\r\n.inner-addon .hpe-icon {\r\n    position: absolute;\r\n    padding: 10px;\r\n    pointer-events: none;\r\n}\r\n\r\n\r\n/* align icon */\r\n\r\n.left-addon .hpe-icon {\r\n    left: 0px;\r\n}\r\n\r\n.right-addon .hpe-icon {\r\n    right: 0px;\r\n}\r\n\r\n\r\n/* add padding  */\r\n\r\n.left-addon input {\r\n    padding-left: 30px;\r\n}\r\n\r\n.right-addon input {\r\n    padding-right: 30px;\r\n}"}},2330: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-md-4 col-md-offset-1 col-sm-4<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>br</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>btn-group filter<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>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>filter-dropdown btn popover-button dropdown-toggle<span class="token punctuation">"</span></span> <span class="token attr-name">popover-class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-popover<span class="token punctuation">"</span></span> <span class="token attr-name">popover-animation</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">popover-template</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">\'</span>template.html<span class="token punctuation">\'</span><span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">popover-trigger</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>outsideClick<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">popover-placement</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span> <span class="token attr-name">popover-append-to-body</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span> <span class="token attr-name">popover-popup-delay</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n                Show Dropdown<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-down<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>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>br</span><span class="token punctuation">/></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</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-md-4 col-md-offset-1 col-sm-4">\r\n        <br/>\r\n        <div class="btn-group filter">\r\n            <button class="filter-dropdown btn popover-button dropdown-toggle" popover-class="dropdown-popover" popover-animation="false"\r\n                popover-template="\'template.html\'"\r\n                popover-trigger="outsideClick"\r\n                popover-placement="bottom" popover-append-to-body="false" popover-popup-delay="0">\r\n                Show Dropdown<span class="hpe-icon hpe-down"></span>\r\n            </button>\r\n        </div>\r\n        <br/>\r\n        <br/>\r\n    </div>\r\n</div>'}},2331: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">"CustomDropdownCtrl"</span><span class="token punctuation">,</span> CustomDropdownCtrl<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\nCustomDropdownCtrl<span class="token punctuation">.</span>$inject <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">\'$scope\'</span><span class="token punctuation">,</span> <span class="token string">\'$timeout\'</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">CustomDropdownCtrl</span><span class="token punctuation">(</span>$scope<span class="token punctuation">,</span> $timeout<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n    <span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>searchBox <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>searchText <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>footer <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>applyText <span class="token operator">=</span> <span class="token string">"OK"</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>cancelText <span class="token operator">=</span> <span class="token string">"Cancel"</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>selectAllText <span class="token operator">=</span> <span class="token string">"Select All"</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>deselectAllText <span class="token operator">=</span> <span class="token string">"Deselect All"</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>dropdownHeight <span class="token operator">=</span> <span class="token number">500</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>values <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        groups<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\r\n            groupName<span class="token punctuation">:</span> <span class="token string">"Group A"</span><span class="token punctuation">,</span>\r\n            values<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\r\n                    name<span class="token punctuation">:</span> <span class="token string">"From"</span><span class="token punctuation">,</span>\r\n                    selected<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n                    selectedChecked<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n                    name<span class="token punctuation">:</span> <span class="token string">"ID"</span><span class="token punctuation">,</span>\r\n                    selected<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n                    selectedChecked<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n                    name<span class="token punctuation">:</span> <span class="token string">"From Address"</span><span class="token punctuation">,</span>\r\n                    selected<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                    selectedChecked<span class="token punctuation">:</span> <span class="token boolean">true</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n                    name<span class="token punctuation">:</span> <span class="token string">"Feedback"</span><span class="token punctuation">,</span>\r\n                    selected<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                    selectedChecked<span class="token punctuation">:</span> <span class="token boolean">true</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n                    name<span class="token punctuation">:</span> <span class="token string">"To"</span><span class="token punctuation">,</span>\r\n                    selected<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                    selectedChecked<span class="token punctuation">:</span> <span class="token boolean">true</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n                    name<span class="token punctuation">:</span> <span class="token string">"To Address"</span><span class="token punctuation">,</span>\r\n                    selected<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n                    selectedChecked<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                <span class="token punctuation">}</span>\r\n\r\n            <span class="token punctuation">]</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n            groupName<span class="token punctuation">:</span> <span class="token string">"Group B"</span><span class="token punctuation">,</span>\r\n            values<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\r\n                    name<span class="token punctuation">:</span> <span class="token string">"Feedback Score"</span><span class="token punctuation">,</span>\r\n                    selected<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n                    selectedChecked<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n                    name<span class="token punctuation">:</span> <span class="token string">"Attachment Count"</span><span class="token punctuation">,</span>\r\n                    selected<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n                    selectedChecked<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n                    name<span class="token punctuation">:</span> <span class="token string">"Comment"</span><span class="token punctuation">,</span>\r\n                    selected<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                    selectedChecked<span class="token punctuation">:</span> <span class="token boolean">true</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n                    name<span class="token punctuation">:</span> <span class="token string">"Content Length"</span><span class="token punctuation">,</span>\r\n                    selected<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n                    selectedChecked<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n                    name<span class="token punctuation">:</span> <span class="token string">"Content Type"</span><span class="token punctuation">,</span>\r\n                    selected<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n                    selectedChecked<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                <span class="token punctuation">}</span>\r\n\r\n            <span class="token punctuation">]</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n            groupName<span class="token punctuation">:</span> <span class="token string">"Group C"</span><span class="token punctuation">,</span>\r\n            values<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\r\n                name<span class="token punctuation">:</span> <span class="token string">"Overall Sentiment"</span><span class="token punctuation">,</span>\r\n                selected<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n                selectedChecked<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n                name<span class="token punctuation">:</span> <span class="token string">"Analysis"</span><span class="token punctuation">,</span>\r\n                selected<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                selectedChecked<span class="token punctuation">:</span> <span class="token boolean">true</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n                name<span class="token punctuation">:</span> <span class="token string">"Index Values"</span><span class="token punctuation">,</span>\r\n                selected<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n                selectedChecked<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n                name<span class="token punctuation">:</span> <span class="token string">"Generate Report"</span><span class="token punctuation">,</span>\r\n                selected<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                selectedChecked<span class="token punctuation">:</span> <span class="token boolean">true</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">]</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">]</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>updateSelected <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n        value<span class="token punctuation">.</span>selected <span class="token operator">=</span> <span class="token operator">!</span>value<span class="token punctuation">.</span>selected<span class="token punctuation">;</span>\r\n        value<span class="token punctuation">.</span>selectedChecked <span class="token operator">=</span> value<span class="token punctuation">.</span>selected<span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>applyCallback <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n        <span class="token comment" spellcheck="true">//  do processing when apply is called</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">\'.popover-button\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</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\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>cancelCallback <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n        <span class="token comment" spellcheck="true">//  do processing when cancel is called</span>\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            vm<span class="token punctuation">.</span>inputVal <span class="token operator">=</span> <span class="token string">""</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">\'.popover-button\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</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\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>selectAll <span class="token operator">=</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">forEach</span><span class="token punctuation">(</span>vm<span class="token punctuation">.</span>values<span class="token punctuation">.</span>groups<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>group<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n\r\n            angular<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>group<span class="token punctuation">.</span>values<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                <span class="token keyword">if</span> <span class="token punctuation">(</span>vm<span class="token punctuation">.</span>searchText <span class="token operator">===</span> undefined <span class="token operator">||</span> vm<span class="token punctuation">.</span>searchText <span class="token operator">===</span> <span class="token string">""</span> <span class="token operator">||</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>vm<span class="token punctuation">.</span>searchText<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span>\r\n                    value<span class="token punctuation">.</span>selected <span class="token operator">=</span> <span class="token boolean">true</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><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>deselectAll <span class="token operator">=</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">forEach</span><span class="token punctuation">(</span>vm<span class="token punctuation">.</span>values<span class="token punctuation">.</span>groups<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>group<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n            angular<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>group<span class="token punctuation">.</span>values<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n\r\n                <span class="token keyword">if</span> <span class="token punctuation">(</span>vm<span class="token punctuation">.</span>searchText <span class="token operator">===</span> undefined <span class="token operator">||</span> vm<span class="token punctuation">.</span>searchText <span class="token operator">===</span> <span class="token string">""</span> <span class="token operator">||</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>vm<span class="token punctuation">.</span>searchText<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span>\r\n                    value<span class="token punctuation">.</span>selected <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n\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><span class="token punctuation">;</span>\r\n\r\n<span class="token punctuation">}</span>',example:'angular.module("app").controller("CustomDropdownCtrl", CustomDropdownCtrl);\r\n\r\nCustomDropdownCtrl.$inject = [\'$scope\', \'$timeout\'];\r\n\r\nfunction CustomDropdownCtrl($scope, $timeout) {\r\n    var vm = this;\r\n\r\n    vm.searchBox = true;\r\n    vm.searchText = "";\r\n    vm.footer = true;\r\n    vm.applyText = "OK";\r\n    vm.cancelText = "Cancel";\r\n    vm.selectAllText = "Select All";\r\n    vm.deselectAllText = "Deselect All";\r\n    vm.dropdownHeight = 500;\r\n\r\n    vm.values = {\r\n        groups: [{\r\n            groupName: "Group A",\r\n            values: [{\r\n                    name: "From",\r\n                    selected: false,\r\n                    selectedChecked: false\r\n                }, {\r\n                    name: "ID",\r\n                    selected: false,\r\n                    selectedChecked: false\r\n                }, {\r\n                    name: "From Address",\r\n                    selected: true,\r\n                    selectedChecked: true\r\n                }, {\r\n                    name: "Feedback",\r\n                    selected: true,\r\n                    selectedChecked: true\r\n                }, {\r\n                    name: "To",\r\n                    selected: true,\r\n                    selectedChecked: true\r\n                }, {\r\n                    name: "To Address",\r\n                    selected: false,\r\n                    selectedChecked: false\r\n                }\r\n\r\n            ]\r\n        }, {\r\n            groupName: "Group B",\r\n            values: [{\r\n                    name: "Feedback Score",\r\n                    selected: false,\r\n                    selectedChecked: false\r\n                }, {\r\n                    name: "Attachment Count",\r\n                    selected: false,\r\n                    selectedChecked: false\r\n                }, {\r\n                    name: "Comment",\r\n                    selected: true,\r\n                    selectedChecked: true\r\n                }, {\r\n                    name: "Content Length",\r\n                    selected: false,\r\n                    selectedChecked: false\r\n                }, {\r\n                    name: "Content Type",\r\n                    selected: false,\r\n                    selectedChecked: false\r\n                }\r\n\r\n            ]\r\n        }, {\r\n            groupName: "Group C",\r\n            values: [{\r\n                name: "Overall Sentiment",\r\n                selected: false,\r\n                selectedChecked: false\r\n            }, {\r\n                name: "Analysis",\r\n                selected: true,\r\n                selectedChecked: true\r\n            }, {\r\n                name: "Index Values",\r\n                selected: false,\r\n                selectedChecked: false\r\n            }, {\r\n                name: "Generate Report",\r\n                selected: true,\r\n                selectedChecked: true\r\n            }]\r\n        }]\r\n    };\r\n\r\n    vm.updateSelected = function (value) {\r\n        value.selected = !value.selected;\r\n        value.selectedChecked = value.selected;\r\n    };\r\n\r\n    vm.applyCallback = function () {\r\n        //  do processing when apply is called\r\n\r\n        $timeout(function () {\r\n            angular.element(\'.popover-button\').click();\r\n        });\r\n\r\n    };\r\n    vm.cancelCallback = function () {\r\n        //  do processing when cancel is called\r\n        $timeout(function () {\r\n            vm.inputVal = "";\r\n            angular.element(\'.popover-button\').click();\r\n        });\r\n\r\n    };\r\n\r\n    vm.selectAll = function () {\r\n        angular.forEach(vm.values.groups, function (group) {\r\n\r\n            angular.forEach(group.values, function (value) {\r\n                if (vm.searchText === undefined || vm.searchText === "" || (value.name.toLowerCase()).indexOf(vm.searchText.toLowerCase()) > -1)\r\n                    value.selected = true;\r\n            });\r\n        });\r\n    };\r\n\r\n    vm.deselectAll = function () {\r\n        angular.forEach(vm.values.groups, function (group) {\r\n            angular.forEach(group.values, function (value) {\r\n\r\n                if (vm.searchText === undefined || vm.searchText === "" || (value.name.toLowerCase()).indexOf(vm.searchText.toLowerCase()) > -1)\r\n                    value.selected = false;\r\n\r\n            });\r\n        });\r\n    };\r\n\r\n}'}},2332: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">ng-controller</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>CustomDropdownCtrl as vm<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>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>vm.searchBox<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>inner-addon right-addon<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>i</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-search<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>i</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">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.searchText<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>searchBox<span class="token punctuation">"</span></span>\r\n            <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Find Column..<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>br</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 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>dropdown-outer-container<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>dropdown-container<span class="token punctuation">"</span></span> <span class="token attr-name">ng-</span><span class="token style-attr language-css"><span class="token attr-name"><span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token punctuation">{</span><span class="token property">height</span><span class="token punctuation">:</span> vm.dropdownHeight+<span class="token string">\'px\'</span><span class="token punctuation">}</span></span><span class="token punctuation">"</span></span> <span class="token attr-name">scroll-config</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{autoReinitialise: true,showOnlyOnHover:true,enableKeyboardNavigation:true} <span class="token punctuation">"</span></span>\r\n            <span class="token attr-name">scroll-pane</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>example-dropdown<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>table</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>table table-hover m-b-sm<span class="token punctuation">"</span></span> <span class="token attr-name">ng-repeat</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group in vm.values.groups<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>thead</span><span class="token punctuation">></span></span>\r\n                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span> <span class="token attr-name">ng-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(group.values |  filter:{name:vm.searchText}).length<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>th</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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group-header<span class="token punctuation">"</span></span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group.groupName<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><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>\r\n                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>\r\n                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>thead</span><span class="token punctuation">></span></span>\r\n                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tbody</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-body<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>tr</span> <span class="token attr-name">ng-repeat</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>value in group.values |  filter:{name:vm.searchText}<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>vm.updateSelected(value)<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>td</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>check<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>value.selectedChecked<span class="token punctuation">"</span></span> <span class="token attr-name">simplified</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 attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>value.name<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>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>listview-text-emphasis<span class="token punctuation">"</span></span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>value.name<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>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>td</span><span class="token punctuation">></span></span>\r\n                        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>\r\n                    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tbody</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</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>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>dropdown-footer<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>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<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>btn btn-w-m btn-primary m-r-sm<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>vm.applyCallback()<span class="token punctuation">"</span></span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.applyText<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>button</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">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<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>btn btn-w-m btn-white<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>vm.cancelCallback()<span class="token punctuation">"</span></span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.cancelText<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>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>div</span><span class="token punctuation">></span></span>',example:'<div ng-controller="CustomDropdownCtrl as vm">\r\n    <span ng-show="vm.searchBox">\r\n  <div class="inner-addon right-addon">\r\n    <i class="hpe-icon hpe-search"></i>\r\n    <input  type="text" ng-model="vm.searchText" name="searchBox"\r\n            placeholder="Find Column.." class="form-control">\r\n  </div>\r\n  <br/>\r\n  </span>\r\n    <div class="dropdown-outer-container">\r\n        <div class="dropdown-container" ng-style="{height: vm.dropdownHeight+\'px\'}" scroll-config="{autoReinitialise: true,showOnlyOnHover:true,enableKeyboardNavigation:true} "\r\n            scroll-pane id="example-dropdown">\r\n            <div>\r\n                <table class="table table-hover m-b-sm" ng-repeat="group in vm.values.groups">\r\n                    <thead>\r\n                        <tr ng-if="(group.values |  filter:{name:vm.searchText}).length">\r\n                            <th><span class="group-header" ng-bind="group.groupName"></span></th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody class="dropdown-body">\r\n                        <tr ng-repeat="value in group.values |  filter:{name:vm.searchText}" ng-click="vm.updateSelected(value)">\r\n                            <td>\r\n                                <div class="check">\r\n                                    <checkbox ng-model="value.selectedChecked" simplified="true" name="value.name">\r\n                                        <span class="listview-text-emphasis" ng-bind="value.name"></span>\r\n                                    </checkbox>\r\n                                </div>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class="dropdown-footer">\r\n        <button type="button" class="btn btn-w-m btn-primary m-r-sm" ng-click="vm.applyCallback()" ng-bind="vm.applyText"></button>\r\n        <button type="button" class="btn btn-w-m btn-white" ng-click="vm.cancelCallback()" ng-bind="vm.cancelText"></button>\r\n    </div>\r\n</div>'}},2333:function(n,a){n.exports='<uxd-custom-dropdown-wrapper></uxd-custom-dropdown-wrapper>\r\n\r\n<hr>\r\n\r\n<p>The custom dropdown can be added to a component as a popover. The contents of the custom dropdown can be defined in a template\r\n    and the path can be provided to the <code>popover-template</code> attribute. The example shows a custom dropdown with\r\n    an option to search. Additional buttons and components can be added and the callbacks should be implemented accordingly.</p>\r\n\r\n<p>The code used for the above example is shown below:</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="Template HTML">\r\n        <uxd-snippet [content]="snippets.compiled.templateHtml"></uxd-snippet>\r\n    </tab>\r\n    <tab heading="JavaScript">\r\n        <uxd-snippet [content]="snippets.compiled.sampleJs" language="javascript"></uxd-snippet>\r\n    </tab>\r\n    <tab heading="CSS">\r\n        <uxd-snippet [content]="snippets.compiled.sampleCss" language="css"></uxd-snippet>\r\n    </tab>\r\n</tabset>'},2334: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(2335))||this;return a.codepen={html:a.snippets.raw.sampleHtml},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-expanding-text-area-ng1",template:s(2337),changeDetection:o.ChangeDetectionStrategy.OnPush}),c.DocumentationSectionComponent("ComponentsExpandingTextAreaNg1Component"),e("design:paramtypes",[])],u),a.ComponentsExpandingTextAreaNg1Component=u},2335: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":2336};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2335},2336: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-md-4 col-sm-6 col-xs-12 m-t-md<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>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>1<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 text<span class="token punctuation">"</span></span> <span class="token attr-name">expanding-textarea</span> <span class="token attr-name">disable-return</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span> \r\n                  <span class="token attr-name">max-visible-lines</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<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 punctuation">></span></span>',example:'<div class="row">\r\n    <div class="col-md-4 col-sm-6 col-xs-12 m-t-md">\r\n        <textarea class="form-control" rows="1" placeholder="Enter text" expanding-textarea disable-return="true" \r\n                  max-visible-lines="2"></textarea>\r\n    </div>\r\n</div>'}},2337:function(n,a){n.exports='<div class="row">\r\n    <div class="col-md-6 col-xs-12 m-t-md">\r\n        <uxd-expanding-text-area-wrapper></uxd-expanding-text-area-wrapper>\r\n    </div>\r\n</div>\r\n\r\n<hr>\r\n\r\n<p>Expanding textareas provide the same functionality as regular textareas however with the additional feature that they can\r\n    grow in height as more content is added to them.</p>\r\n\r\n<p>To create an expanding textarea use the <code>expanding-textarea</code> directive.</p>\r\n\r\n<uxd-snippet [content]="this.snippets.compiled.sampleHtml"></uxd-snippet>\r\n\r\n<p>Additional attributes can be specified to configure the behavior of the textarea:</p>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Name</th>\r\n            <th>Type</th>\r\n            <th>Binding</th>\r\n            <th>Description</th>\r\n            <th>Optional</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">disable-return</td>\r\n            <td>boolean</td>\r\n            <td>literal</td>\r\n            <td>If true this will prevent the user from being able to take a new line by pressing the return key.</td>\r\n            <td>true</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">max-visible-lines</td>\r\n            <td>number</td>\r\n            <td>literal</td>\r\n            <td>Once the textarea has this many lines it will no longer grow and instead show a scrollbar. A value of 0 will\r\n                grow the textarea regardless of the number of lines.</td>\r\n            <td>true</td>\r\n        </tr>\r\n    </table>\r\n</div>'},2338: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(2339))||this;return a.codepen={html:a.snippets.raw.sampleHtml,htmlAttributes:{"ng-controller":"InlineDropDownCtrl as vm"},js:[a.snippets.raw.sampleJs]},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-components-inline-dropdown-ng1",template:s(2342),changeDetection:o.ChangeDetectionStrategy.OnPush}),c.DocumentationSectionComponent("ComponentsInlineDropdownNg1Component"),e("design:paramtypes",[])],u),a.ComponentsInlineDropdownNg1Component=u},2339: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":2340,"./sample.js":2341};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2339},2340:function(n,a){n.exports={snippet:'<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>inline-dropdown-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Repeat the collection<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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>btn-group<span class="token punctuation">"</span></span> <span class="token attr-name">dropdown</span> <span class="token attr-name">is-open</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.inlineDropDownOpen<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>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<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>btn inline-dropdown dropdown-toggle<span class="token punctuation">"</span></span> <span class="token attr-name">dropdown-toggle</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">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.inlineDropDownOptions[vm.inlineDefaultIndex]<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>hpe-icon hpe-down<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>button</span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropdown-menu<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>menu<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>li</span> <span class="token attr-name">ng-repeat</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>option in vm.inlineDropDownOptions<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>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><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>vm.dropClick($index)<span class="token punctuation">"</span></span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>option<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>a</span><span class="token punctuation">></span></span>\r\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</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:'<span class="inline-dropdown-text">Repeat the collection</span>\r\n<div class="btn-group" dropdown is-open="vm.inlineDropDownOpen">\r\n    <button type="button" class="btn inline-dropdown dropdown-toggle" dropdown-toggle>\r\n    <span ng-bind="vm.inlineDropDownOptions[vm.inlineDefaultIndex]"></span>\r\n    <span class="hpe-icon hpe-down"></span>\r\n  </button>\r\n    <ul class="dropdown-menu" role="menu">\r\n        <li ng-repeat="option in vm.inlineDropDownOptions">\r\n            <a href="" ng-click="vm.dropClick($index)" ng-bind="option"></a>\r\n        </li>\r\n    </ul>\r\n</div>'}},2341: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">"InlineDropDownCtrl"</span><span class="token punctuation">,</span> InlineDropDownCtrl<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\n<span class="token keyword">function</span> <span class="token function">InlineDropDownCtrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n    <span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>inlineDropDownOpen <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>inlineDropDownOptions <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Every Day"</span><span class="token punctuation">,</span> <span class="token string">"Every Week"</span><span class="token punctuation">,</span> <span class="token string">"Every Hour"</span><span class="token punctuation">,</span> <span class="token string">"Every Month"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>inlineDefaultIndex <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>dropClick <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n        vm<span class="token punctuation">.</span>inlineDefaultIndex <span class="token operator">=</span> index<span class="token punctuation">;</span>        \r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:'angular.module("app").controller("InlineDropDownCtrl", InlineDropDownCtrl);\r\n\r\nfunction InlineDropDownCtrl() {\r\n    var vm = this;\r\n\r\n    vm.inlineDropDownOpen = false;\r\n    vm.inlineDropDownOptions = ["Every Day", "Every Week", "Every Hour", "Every Month"];\r\n    vm.inlineDefaultIndex = 2;\r\n\r\n    vm.dropClick = function(index) {\r\n        vm.inlineDefaultIndex = index;        \r\n    };\r\n}'}},2342:function(n,a){n.exports='<uxd-inline-dropdown-wrapper></uxd-inline-dropdown-wrapper>\r\n\r\n<hr>\r\n\r\n<p>Inline dropdowns adjust their width according to the length of the selected item. \r\nThe text preceding the dropdown can be provided using a span with the <code>.inline-dropdown-text</code> class.</p>\r\n\r\n<p>On the <code>div.btn-group</code> set the <code>dropdown</code> attribute. The button should have the <code>.btn</code>, <code>.inline-dropdown</code> and <code>.dropdown-toggle</code> classes.</p>\r\n\r\n<p>If you do not require the dotted line under the selected dropdown you can add the <code>.no-line</code> class to the button.</p>\r\n\r\n<p>The dropdown can either be opened by setting the <code>is-open</code> attribute, or by setting the dropdown-toggle attribute on the <code>.btn</code>. \r\nSet <code>on-toggle="yourFunction(open)"</code> for <code>yourFunction</code> to be executed every time the dropdown changes state.</p>\r\n\r\n<p>An example code for inline dropdowns is provided below:</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 [content]="snippets.compiled.sampleJs" language="javascript"></uxd-snippet>\r\n    </tab>\r\n</tabset>'},2343: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(2344))||this;return a.codepen={html:a.snippets.raw.sampleHtml,htmlAttributes:{"ng-controller":"InputExpandCtrl as vm"},js:[a.snippets.raw.sampleJs]},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-components-input-expand-ng1",template:s(2347),changeDetection:o.ChangeDetectionStrategy.OnPush}),c.DocumentationSectionComponent("ComponentsInputExpandNg1Component"),e("design:paramtypes",[])],u),a.ComponentsInputExpandNg1Component=u},2344: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":2345,"./sample.js":2346};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2344},2345: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">ng-class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{<span class="token punctuation">\'</span>col-lg-12 col-md-12 col-xs-12 col-sm-12<span class="token punctuation">\'</span>:vm.filterSearchExpanded<span class="token punctuation">=</span><span class="token punctuation">=</span>true,<span class="token punctuation">\'</span>p-r-nil col-lg-2 col-md-2 col-sm-2 col-xs-11<span class="token punctuation">\'</span>:vm.filterSearchExpanded<span class="token punctuation">=</span><span class="token punctuation">=</span>false}<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>expand-input</span> <span class="token attr-name">place-holder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Filter...<span class="token punctuation">"</span></span> <span class="token attr-name">class-name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-sm form-control filter-text<span class="token punctuation">"</span></span> <span class="token attr-name">elname</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input-expand-search<span class="token punctuation">"</span></span> <span class="token attr-name">focus</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.expandFilter(value)<span class="token punctuation">"</span></span>\r\n            <span class="token attr-name">clear-text-icon</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hpe-close<span class="token punctuation">"</span></span> <span class="token attr-name">close-search</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Cancel<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>expand-input</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 ng-class="{\'col-lg-12 col-md-12 col-xs-12 col-sm-12\':vm.filterSearchExpanded==true,\'p-r-nil col-lg-2 col-md-2 col-sm-2 col-xs-11\':vm.filterSearchExpanded==false}">\r\n        <expand-input place-holder="Filter..." class-name="input-sm form-control filter-text" elname="input-expand-search" focus="vm.expandFilter(value)"\r\n            clear-text-icon="hpe-close" close-search="Cancel">\r\n        </expand-input>\r\n    </div>\r\n</div>'}},2346: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">"InputExpandCtrl"</span><span class="token punctuation">,</span> InputExpandCtrl<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\n<span class="token keyword">function</span> <span class="token function">InputExpandCtrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n    <span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>filterSearchExpanded <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>expandFilter <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n        vm<span class="token punctuation">.</span>filterSearchExpanded <span class="token operator">=</span> value<span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n<span class="token punctuation">}</span>',example:'angular.module("app").controller("InputExpandCtrl", InputExpandCtrl);\r\n\r\nfunction InputExpandCtrl() {\r\n    var vm = this;\r\n\r\n    vm.filterSearchExpanded = false;\r\n\r\n    vm.expandFilter = function(value) {\r\n        vm.filterSearchExpanded = value;\r\n    };\r\n\r\n}'}},2347:function(n,a){n.exports='<uxd-input-expand-wrapper></uxd-input-expand-wrapper>\r\n\r\n<hr>\r\n\r\n<p>Input Expand is contained in the <code>expand-input</code> directive and the <code>.expand-input</code> class.</p>\r\n\r\n<p>Input Expand takes the following attributes:</p>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Name</th>\r\n            <th>Type</th>\r\n            <th>Binding</th>\r\n            <th>Description</th>\r\n            <th>Optional</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">elname</td>\r\n            <td>string</td>\r\n            <td>literal</td>\r\n            <td>Name of the input element.</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">place-holder</td>\r\n            <td>string</td>\r\n            <td>literal</td>\r\n            <td>Placeholder text for an input.<br></td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">class-name</td>\r\n            <td>string</td>\r\n            <td>literal</td>\r\n            <td>Defines the classes for the input.</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">focus</td>\r\n            <td>function</td>\r\n            <td>expression</td>\r\n            <td>A method that defines a boolean value to indicate whether an input is expanded. Can be used to display or hide\r\n                other elements.</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">clear-text-icon</td>\r\n            <td>string</td>\r\n            <td>literal</td>\r\n            <td>Icon used in the clear input text button.</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">close-search</td>\r\n            <td>string</td>\r\n            <td>literal</td>\r\n            <td>Should be set to a value which when clicked closes the input text</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">expand-always</td>\r\n            <td>boolean</td>\r\n            <td>variable</td>\r\n            <td>Indicates whether the search should always expand or only on a larger viewport.</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">on-enter</td>\r\n            <td>function</td>\r\n            <td>variable</td>\r\n            <td>Defines the function to be called when the enter key is pressed. The function will be called with the current\r\n                text entered in the field as an argument.</td>\r\n            <td>true</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<p>The HTML used in the example above can be found below:</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sampleHtml"></uxd-snippet>'},2348: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(2349))||this;return a.codepen={html:a.snippets.raw.sampleHtml,htmlAttributes:{"ng-controller":"InputMaskCtrl as vm"},js:[a.snippets.raw.sampleJs]},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-components-input-mask-ng1",template:s(2352),changeDetection:o.ChangeDetectionStrategy.OnPush}),c.DocumentationSectionComponent("ComponentsInputMaskNg1Component"),e("design:paramtypes",[])],u),a.ComponentsInputMaskNg1Component=u},2349: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":2350,"./sample.js":2351};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2349},2350: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>input-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>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">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">data-mask</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.ISBNMask<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>ISBN 1<span class="token punctuation">"</span></span>\r\n        <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ISBN 1 13 digits only<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>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>help-block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>999-99-999-9999-9<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>input-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>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">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">data-mask</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.phoneMask<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>Telephone Number<span class="token punctuation">"</span></span>\r\n        <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Telephone number 10 digits only<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>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>help-block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>(999) 999-9999<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>input-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>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">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">data-mask</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.currencyMask<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>Currency<span class="token punctuation">"</span></span>\r\n        <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Currency 11 digits only<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>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>help-block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>$ 999,999,999.99<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>input-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>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">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">data-mask</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.IPMask<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>IP Address<span class="token punctuation">"</span></span>\r\n        <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IP address 11 or 12 digits only<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>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>help-block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>99[9].999.999.999<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>',example:'<div class="input-group">\r\n    <input type="text" class="form-control" data-mask="vm.ISBNMask" placeholder="ISBN 1"\r\n        aria-label="ISBN 1 13 digits only"/>\r\n    <span class="help-block">999-99-999-9999-9</span>\r\n</div>\r\n<div class="input-group">\r\n    <input type="text" class="form-control" data-mask="vm.phoneMask" placeholder="Telephone Number"\r\n        aria-label="Telephone number 10 digits only"/>\r\n    <span class="help-block">(999) 999-9999</span>\r\n</div>\r\n<div class="input-group">\r\n    <input type="text" class="form-control" data-mask="vm.currencyMask" placeholder="Currency"\r\n        aria-label="Currency 11 digits only"/>\r\n    <span class="help-block">$ 999,999,999.99</span>\r\n</div>\r\n<div class="input-group">\r\n    <input type="text" class="form-control" data-mask="vm.IPMask" placeholder="IP Address"\r\n        aria-label="IP address 11 or 12 digits only"/>\r\n    <span class="help-block">99[9].999.999.999</span>\r\n</div>'}},2351: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">"InputMaskCtrl"</span><span class="token punctuation">,</span> InputMaskCtrl<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\n<span class="token keyword">function</span> <span class="token function">InputMaskCtrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n    <span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>ISBNMask <span class="token operator">=</span> <span class="token string">"999-99-999-9999-9"</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>phoneMask <span class="token operator">=</span> <span class="token string">"(999) 999-9999"</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>currencyMask <span class="token operator">=</span> <span class="token string">"$ 999,999,999.99"</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>IPMask <span class="token operator">=</span> <span class="token string">"99[9].999.999.999"</span><span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:'angular.module("app").controller("InputMaskCtrl", InputMaskCtrl);\r\n\r\nfunction InputMaskCtrl() {\r\n    var vm = this;\r\n\r\n    vm.ISBNMask = "999-99-999-9999-9";\r\n    vm.phoneMask = "(999) 999-9999";\r\n    vm.currencyMask = "$ 999,999,999.99";\r\n    vm.IPMask = "99[9].999.999.999";\r\n}'}},2352:function(n,a){n.exports='<p>An input mask can be useful when you want to restrict the format of the string a user can input. To create an input mask\r\n    add a <code>data-mask</code> attribute with a valid format string.</p>\r\n\r\n<p>Add the <code>placeholder</code> attribute with the value you want to be displayed as a placeholder. Add the <code>data-placeholder</code>    attribute with the character you want to be displayed when a character needs to be typed, by default it is ‘_’.</p>\r\n\r\n<p>The format string can take the following values:</p>\r\n\r\n<ul>\r\n    <li>9 - represents a number</li>\r\n    <li>a - represents a letter</li>\r\n    <li>* - represents an alphanumeric</li>\r\n    <li>[] - optional - any characters within the sqaure braces will become optional.</li>\r\n</ul>\r\n\r\n<p>Include an <code>aria-label</code> attribute that describes the restrictions of the input mask to provide accessibility to\r\n    users using assistive technologies.</p>\r\n\r\n<hr>\r\n\r\n<uxd-input-mask-wrapper></uxd-input-mask-wrapper>\r\n\r\n<hr>\r\n\r\n<p>The code to create the input masks in the example above is as follows:</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 [content]="snippets.compiled.sampleJs" language="javascript"></uxd-snippet>\r\n    </tab>\r\n</tabset>\r\n\r\n<blockquote>\r\n    <p>Refer to <a href="https://github.com/RobinHerbots/jquery.inputmask">Inputmask</a> for more options.</p>\r\n</blockquote>'},2353: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(2354))||this;return a.codepen={html:a.snippets.raw.sampleHtml,htmlAttributes:{"ng-controller":"NumberPickerCtrl as vm"},js:[a.snippets.raw.sampleJs],css:[a.snippets.raw.sampleCss]},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-components-number-picker-ng1",template:s(2358),changeDetection:o.ChangeDetectionStrategy.OnPush}),c.DocumentationSectionComponent("ComponentsNumberPickerNg1Component"),e("design:paramtypes",[])],u),a.ComponentsNumberPickerNg1Component=u},2354: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.css":2355,"./sample.html":2356,"./sample.js":2357};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2354},2355:function(n,a){n.exports={snippet:'<span class="token selector">.number-picker-demo</span> <span class="token punctuation">{</span>\r\n    <span class="token property">width</span><span class="token punctuation">:</span> 70px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:".number-picker-demo {\r\n    width: 70px;\r\n}"}},2356:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">></span></span>Selecting an integer:<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 punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>number-picker</span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.step<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.min<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.max<span class="token punctuation">"</span></span> <span class="token attr-name">validate</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.validate<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>vm.value1<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>number-picker-demo<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>number-picker</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>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>m-t-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Selecting a decimal:<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 punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>number-picker</span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">\'</span>0.5<span class="token punctuation">\'</span><span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">\'</span>0<span class="token punctuation">\'</span><span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">\'</span>10<span class="token punctuation">\'</span><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>vm.value2<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>number-picker-demo<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>number-picker</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:'<label>Selecting an integer:</label>\r\n<div>\r\n    <number-picker step="vm.step" min="vm.min" max="vm.max" validate="vm.validate" ng-model="vm.value1" class="number-picker-demo"></number-picker>\r\n</div>\r\n<label class="m-t-md">Selecting a decimal:</label>\r\n<div>\r\n    <number-picker step="\'0.5\'" min="\'0\'" max="\'10\'" ng-model="vm.value2" class="number-picker-demo"></number-picker>\r\n</div>'}},2357: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">"NumberPickerCtrl"</span><span class="token punctuation">,</span> NumberPickerCtrl<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\n<span class="token keyword">function</span> <span class="token function">NumberPickerCtrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n    <span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>step <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>min <span class="token operator">=</span> <span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>max <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>value1 <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>value2 <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>\r\n    \r\n    vm<span class="token punctuation">.</span>validate <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n      <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">%</span> vm<span class="token punctuation">.</span>step <span class="token operator">!==</span> <span class="token number">0</span> <span class="token operator">||</span> value<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">\'.\'</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span>\r\n        <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\r\n      <span class="token keyword">else</span> \r\n        <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:'angular.module("app").controller("NumberPickerCtrl", NumberPickerCtrl);\r\n\r\nfunction NumberPickerCtrl() {\r\n    var vm = this;\r\n\r\n    vm.step = 1;\r\n    vm.min = -10;\r\n    vm.max = 10;\r\n\r\n    vm.value1 = 0;\r\n    vm.value2 = 0;\r\n    \r\n    vm.validate = function(value) {\r\n      if (value % vm.step !== 0 || value.toString().indexOf(\'.\') !== -1)\r\n        return true;\r\n      else \r\n        return false;\r\n    };\r\n}'}},2358:function(n,a){n.exports='<uxd-number-picker-wrapper></uxd-number-picker-wrapper>\r\n\r\n<hr>\r\n\r\n<p>The Number Picker provides a way in which users can easily select a number value from a specified range by clicking the up\r\n    and down buttons or by using the up/down arrow keys on their keyboard.</p>\r\n\r\n<p>To implement the Number Picker you must use the <code>number-picker</code> directive. There are some attributes you may specify\r\n    on the <code>number-picker</code> directive to obtain the functionality you desire:</p>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Name</th>\r\n            <th>Type</th>\r\n            <th>Binding</th>\r\n            <th>Description</th>\r\n            <th>Optional</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">ng-model</td>\r\n            <td>number</td>\r\n            <td>variable</td>\r\n            <td>Describes the value the Number Picker is initialised with. It should be a value within the <code>max</code> and\r\n                <code>min</code> range and must be declared</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">step</td>\r\n            <td>number</td>\r\n            <td>variable</td>\r\n            <td>Describes the value the Number Picker is incremeted/decremented by each time. The default value is <code>1</code></td>\r\n            <td>true</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">max</td>\r\n            <td>number</td>\r\n            <td>variable</td>\r\n            <td>Describes the upper limit value</td>\r\n            <td>true</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">min</td>\r\n            <td>number</td>\r\n            <td>variable</td>\r\n            <td>Describes the lower limit value</td>\r\n            <td>true</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">validate</td>\r\n            <td>function</td>\r\n            <td>variable</td>\r\n            <td>Describes the function that will validate the input value. It should return <code>true</code> if the input is\r\n                invalid, <code>false</code> otherwise</td>\r\n            <td>true</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">ng-disabled</td>\r\n            <td>boolean</td>\r\n            <td>variable</td>\r\n            <td>Determines the disabled state of the Number Picker.</td>\r\n            <td>true</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<p>The Number Picker contains validation that will show if an input value is invalid which can occur for a number of reasons:</p>\r\n\r\n<ol>\r\n    <li>The value doesn\'t fall between the specified range (<code>max</code> and <code>min</code>)</li>\r\n    <li>The value is not a number</li>\r\n</ol>\r\n\r\n<p>You can see the code used in our example above by selecting the appropriate tabs below:</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 [content]="snippets.compiled.sampleJs" language="javascript"></uxd-snippet>\r\n    </tab>\r\n    <tab heading="CSS">\r\n        <uxd-snippet [content]="snippets.compiled.sampleCss" language="css"></uxd-snippet>\r\n    </tab>\r\n</tabset>'},2359: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(2360))||this;return a.selected=100,a.radioOptions={option1:100,option2:"string",option3:{test:1},option4:"Wrap-Text"},a.disabled=!1,a.simplified=!1,a.plunk={files:{"app.component.html":a.snippets.raw.appHtml,"app.component.ts":a.snippets.raw.appTs},modules:[{imports:["RadioButtonModule"],library:"ux-aspects"}]},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-components-radio-button",template:s(2363)}),c.DocumentationSectionComponent("ComponentsRadioButtonComponent"),e("design:paramtypes",[])],u),a.ComponentsRadioButtonComponent=u},2360: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={"./app.html":2361,"./app.ts":2362};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2360},2361: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 punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ux-radio-button</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span> <span class="token attr-name">[option]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radioOptions.option1<span class="token punctuation">"</span></span> <span class="token attr-name">[disabled]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span> <span class="token attr-name">[simplified]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-radio-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\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>ux-radio-button</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span> <span class="token attr-name">[option]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radioOptions.option2<span class="token punctuation">"</span></span> <span class="token attr-name">[simplified]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-radio-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\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>ux-radio-button</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span> <span class="token attr-name">[option]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radioOptions.option3<span class="token punctuation">"</span></span> <span class="token attr-name">[simplified]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-radio-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\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>ux-radio-button</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>selected<span class="token punctuation">"</span></span> <span class="token attr-name">[option]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radioOptions.option4<span class="token punctuation">"</span></span> <span class="token attr-name">[simplified]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        Option four onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-radio-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\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>m-t<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>code</span><span class="token punctuation">></span></span>radioModel<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>{{ selected }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span>.\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</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>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 m-r-xs<span class="token punctuation">"</span></span> <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>disabled <span class="token punctuation">=</span> !disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        {{ disabled ? \'Click to enable Option1\' : \'Click to disable Option1\' }}\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\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-accent<span class="token punctuation">"</span></span> <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>simplified <span class="token punctuation">=</span> !simplified<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        {{ simplified ? \'Disable Simplified Style\' : \'Enable Simplified Style\' }}\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>',example:'<div>\r\n    <ux-radio-button [(value)]="selected" [option]="radioOptions.option1" [disabled]="disabled" [simplified]="simplified">Option1</ux-radio-button>\r\n</div>\r\n\r\n<div>\r\n    <ux-radio-button [(value)]="selected" [option]="radioOptions.option2" [simplified]="simplified">Option2</ux-radio-button>\r\n</div>\r\n\r\n<div>\r\n    <ux-radio-button [(value)]="selected" [option]="radioOptions.option3" [simplified]="simplified">Option3</ux-radio-button>\r\n</div>\r\n\r\n<div>\r\n    <ux-radio-button [(value)]="selected" [option]="radioOptions.option4" [simplified]="simplified">\r\n        Option four onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit.\r\n    </ux-radio-button>\r\n</div>\r\n\r\n<p class="m-t">\r\n    <code>radioModel</code> is <em>{{ selected }}</em>.\r\n</p>\r\n\r\n<div>\r\n    <button class="btn button-primary m-r-xs" (click)="disabled = !disabled">\r\n        {{ disabled ? \'Click to enable Option1\' : \'Click to disable Option1\' }}\r\n    </button>\r\n\r\n    <button class="btn button-accent" (click)="simplified = !simplified">\r\n        {{ simplified ? \'Disable Simplified Style\' : \'Enable Simplified Style\' }}\r\n    </button>\r\n</div>'}},2362:function(n,a){n.exports={snippet:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@angular/core\'</span><span class="token punctuation">;</span>\r\n\r\n@<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\r\n    selector<span class="token punctuation">:</span> <span class="token string">\'app\'</span><span class="token punctuation">,</span>\r\n    templateUrl<span class="token punctuation">:</span> <span class="token string">\'./src/app.component.html\'</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\r\n<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppComponent</span> <span class="token punctuation">{</span>\r\n\r\n    selected <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>\r\n\r\n    radioOptions <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        option1<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>\r\n        option2<span class="token punctuation">:</span> <span class="token string">\'string\'</span><span class="token punctuation">,</span>\r\n        option3<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            test<span class="token punctuation">:</span> <span class="token number">1</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n        option4<span class="token punctuation">:</span> <span class="token string">\'Wrap-Text\'</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    disabled <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n    simplified <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n\r\n<span class="token punctuation">}</span>',example:"import { Component } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'app',\r\n    templateUrl: './src/app.component.html'\r\n})\r\nexport class AppComponent {\r\n\r\n    selected = 100;\r\n\r\n    radioOptions = {\r\n        option1: 100,\r\n        option2: 'string',\r\n        option3: {\r\n            test: 1\r\n        },\r\n        option4: 'Wrap-Text'\r\n    };\r\n\r\n    disabled = false;\r\n    simplified = false;\r\n\r\n}"}},2363:function(n,a){n.exports='<div>\r\n    <ux-radio-button [(value)]="selected" [option]="radioOptions.option1" [disabled]="disabled" [simplified]="simplified">Option1</ux-radio-button>\r\n</div>\r\n\r\n<div>\r\n    <ux-radio-button [(value)]="selected" [option]="radioOptions.option2" [simplified]="simplified">Option2</ux-radio-button>\r\n</div>\r\n\r\n<div>\r\n    <ux-radio-button [(value)]="selected" [option]="radioOptions.option3" [simplified]="simplified">Option3</ux-radio-button>\r\n</div>\r\n\r\n<div>\r\n    <ux-radio-button [(value)]="selected" [option]="radioOptions.option4" [simplified]="simplified">\r\n        Option four onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur\r\n        adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit.\r\n        Inte adipiscing elit onsectetur adipiscing elit.\r\n    </ux-radio-button>\r\n</div>\r\n\r\n<p class="m-t">\r\n    <code>radioModel</code> is <em>{{ selected }}</em>.\r\n</p>\r\n\r\n<div>\r\n    <button class="btn button-primary m-r-xs" (click)="disabled = !disabled">\r\n        {{ disabled ? \'Click to enable Option1\' : \'Click to disable Option1\' }}\r\n    </button>\r\n\r\n    <button class="btn button-accent" (click)="simplified = !simplified">\r\n        {{ simplified ? \'Disable Simplified Style\' : \'Enable Simplified Style\' }}\r\n    </button>\r\n</div>\r\n\r\n<hr>\r\n\r\n<p>\r\n    A radio button can be created by using the <code>ux-radio-button</code> component. The following attributes can be used\r\n    to configure the appearance and behavior of the component:\r\n</p>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table m-t">\r\n        <thead>\r\n            <tr>\r\n                <th>Name</th>\r\n                <th>Type</th>\r\n                <th>Description</th>\r\n            </tr>\r\n        </thead>\r\n\r\n        <tbody>\r\n            <tr>\r\n                <td><b>@Input @Output</b> value</td>\r\n                <td>any</td>\r\n                <td>This should be a two way binding and will store the currently selected option. Each radio button in the same\r\n                    group should have the same <code>value</code> variable.</td>\r\n            </tr>\r\n            <tr>\r\n                <td><b>@Input</b> option</td>\r\n                <td>any</td>\r\n                <td>\r\n                    This should contain the value that this radio button represents. This will be stored in the <code>value</code> \r\n                    variable when the radio button is selected. No two radio buttons should have the same <code>option</code> \r\n                    value within the same group of radio buttons.\r\n                </td>\r\n            </tr>\r\n\r\n            <tr>\r\n                <td><b>@Input</b> simplified</td>\r\n                <td><b>boolean</b></td>\r\n                <td>If set to <code>true</code> the checkbox will be displayed without a border and background. The default value\r\n                    is <code>false</code>.</td>\r\n            </tr>\r\n\r\n            <tr>\r\n                <td><b>@Input</b> clickable</td>\r\n                <td><b>boolean</b></td>\r\n                <td>If set to <code>true</code> the checkbox will not toggle state when clicked. The default value is <code>false</code>.</td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n\r\n<p>\r\n    In addition to the options listed above, a radio button can be disabled using the <code>disabled</code> attribute. You can also provide\r\n    the radio button with a <code>name</code> or <code>id</code> if required.\r\n</p>\r\n\r\n<p>The following code can be used to create the example above:</p>\r\n\r\n<tabset>\r\n    <tab heading="HTML">\r\n        <uxd-snippet language="html" [content]="snippets.compiled.appHtml"></uxd-snippet>\r\n    </tab>\r\n    <tab heading="TypeScript">\r\n        <uxd-snippet language="javascript" [content]="snippets.compiled.appTs"></uxd-snippet>\r\n    </tab>\r\n</tabset>'},2364: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(2365))||this;return a.codepen={html:a.snippets.raw.sampleHtml,htmlAttributes:{"ng-controller":"RadioButtonCtrl as vm"},js:[a.snippets.raw.sampleJs]},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-components-radio-button-ng1",template:s(2368),changeDetection:o.ChangeDetectionStrategy.OnPush}),c.DocumentationSectionComponent("ComponentsRadioButtonNg1Component"),e("design:paramtypes",[])],u),a.ComponentsRadioButtonNg1Component=u},2365: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":2366,"./sample.js":2367};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2365},2366: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 punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>radiobutton</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.radioModel<span class="token punctuation">"</span></span> \r\n                    <span class="token attr-name">ng-value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.radioOptions.option1<span class="token punctuation">"</span></span> \r\n                    <span class="token attr-name">ng-disabled</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.disableRadio<span class="token punctuation">"</span></span> \r\n                    <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>group1<span class="token punctuation">"</span></span> \r\n                    <span class="token attr-name">simplified</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.simplified<span class="token punctuation">"</span></span>\r\n                    <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radioOption1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n                    Option1\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>radiobutton</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\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>radiobutton</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.radioModel<span class="token punctuation">"</span></span> <span class="token attr-name">ng-value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.radioOptions.option2<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>group1<span class="token punctuation">"</span></span> <span class="token attr-name">simplified</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.simplified<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>radioOption2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>radiobutton</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\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>radiobutton</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.radioModel<span class="token punctuation">"</span></span> <span class="token attr-name">ng-value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.radioOptions.option3<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>group1<span class="token punctuation">"</span></span> <span class="token attr-name">simplified</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.simplified<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>radioOption3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>radiobutton</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\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>radiobutton</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.radioModel<span class="token punctuation">"</span></span> <span class="token attr-name">ng-value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.radioOptions.option4<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>group1<span class="token punctuation">"</span></span> <span class="token attr-name">simplified</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.simplified<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>radioOption4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        Option four onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>radiobutton</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\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>m-t<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>code</span><span class="token punctuation">></span></span>radioModel<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.radioModel<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>em</span><span class="token punctuation">></span></span>.\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</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>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 m-r-xs<span class="token punctuation">"</span></span> \r\n            <span class="token attr-name">ng-click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.disableRadio <span class="token punctuation">=</span> !vm.disableRadio<span class="token punctuation">"</span></span>\r\n            <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.disableRadio ? <span class="token punctuation">\'</span>Click to enable Option1<span class="token punctuation">\'</span> : <span class="token punctuation">\'</span>Click to disable Option1<span class="token punctuation">\'</span><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>button</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>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-accent<span class="token punctuation">"</span></span> \r\n            <span class="token attr-name">ng-click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.simplified <span class="token punctuation">=</span> !vm.simplified<span class="token punctuation">"</span></span>\r\n            <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.simplified ? <span class="token punctuation">\'</span>Disable Simplified Style<span class="token punctuation">\'</span> : <span class="token punctuation">\'</span>Enable Simplified Style<span class="token punctuation">\'</span><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>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>',example:'<div>\r\n    <radiobutton ng-model="vm.radioModel" \r\n                    ng-value="vm.radioOptions.option1" \r\n                    ng-disabled="vm.disableRadio" \r\n                    name="group1" \r\n                    simplified="vm.simplified"\r\n                    id="radioOption1">\r\n                    Option1\r\n    </radiobutton>\r\n</div>\r\n\r\n<div>\r\n    <radiobutton ng-model="vm.radioModel" ng-value="vm.radioOptions.option2" name="group1" simplified="vm.simplified" id="radioOption2">Option2</radiobutton>\r\n</div>\r\n\r\n<div>\r\n    <radiobutton ng-model="vm.radioModel" ng-value="vm.radioOptions.option3" name="group1" simplified="vm.simplified" id="radioOption3">Option3</radiobutton>\r\n</div>\r\n\r\n<div>\r\n    <radiobutton ng-model="vm.radioModel" ng-value="vm.radioOptions.option4" name="group1" simplified="vm.simplified" id="radioOption4">\r\n        Option four onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit. Inte adipiscing elit onsectetur adipiscing elit.\r\n    </radiobutton>\r\n</div>\r\n\r\n<p class="m-t">\r\n    <code>radioModel</code> is <em ng-bind="vm.radioModel"></em>.\r\n</p>\r\n\r\n<div>\r\n    <button class="btn button-primary m-r-xs" \r\n            ng-click="vm.disableRadio = !vm.disableRadio"\r\n            ng-bind="vm.disableRadio ? \'Click to enable Option1\' : \'Click to disable Option1\'">\r\n    </button>\r\n\r\n    <button class="btn button-accent" \r\n            ng-click="vm.simplified = !vm.simplified"\r\n            ng-bind="vm.simplified ? \'Disable Simplified Style\' : \'Enable Simplified Style\'">\r\n    </button>\r\n</div>'}},2367: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">"RadioButtonCtrl"</span><span class="token punctuation">,</span> RadioButtonCtrl<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\n<span class="token keyword">function</span> <span class="token function">RadioButtonCtrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n    <span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>radioModel <span class="token operator">=</span> <span class="token number">100</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>radioOptions <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        option1<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>\r\n        option2<span class="token punctuation">:</span> <span class="token string">"string"</span><span class="token punctuation">,</span>\r\n        option3<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            test<span class="token punctuation">:</span> <span class="token number">1</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n        option4<span class="token punctuation">:</span> <span class="token string">"Wrap-Text"</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>disableRadio <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>simplified <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:'angular.module("app").controller("RadioButtonCtrl", RadioButtonCtrl);\r\n\r\nfunction RadioButtonCtrl() {\r\n    var vm = this;\r\n\r\n    vm.radioModel = 100;\r\n\r\n    vm.radioOptions = {\r\n        option1: 100,\r\n        option2: "string",\r\n        option3: {\r\n            test: 1\r\n        },\r\n        option4: "Wrap-Text"\r\n    };\r\n\r\n    vm.disableRadio = false;\r\n    vm.simplified = false;\r\n}'}},2368:function(n,a){n.exports='<uxd-radio-button-wrapper></uxd-radio-button-wrapper>\r\n\r\n<hr>\r\n\r\n<p>To create a radio button use the <code>radiobutton</code> directive with an <code>ng-model</code> to set and store the value.</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 [content]="snippets.compiled.sampleJs" language="javascript"></uxd-snippet>\r\n    </tab>\r\n</tabset>\r\n\r\n<p>The following attributes can be set to customize the behavior of the control.</p>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table m-t">\r\n        <tr>\r\n            <th>Name</th>\r\n            <th>Type</th>\r\n            <th>Binding</th>\r\n            <th>Description</th>\r\n            <th>Optional</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">ng-model</td>\r\n            <td>boolean</td>\r\n            <td>variable</td>\r\n            <td>Initially sets the value of the radio button and will be updated to contain the current value if a user toggles\r\n                the radio button.</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">ng-value</td>\r\n            <td>value</td>\r\n            <td>variable</td>\r\n            <td>If this value equals the value in <code>ng-model</code> then the radio button will appear selected. If a user\r\n                clicks the radio button <code>ng-model</code> will be given the value specified by this attribute.</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">simplified</td>\r\n            <td>boolean</td>\r\n            <td>variable</td>\r\n            <td>If set to <code>true</code> the radio button will be displayed without a border and background.</td>\r\n            <td>true</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">clickable</td>\r\n            <td>boolean</td>\r\n            <td>variable</td>\r\n            <td>If set to <code>false</code> the radio button will not be updated when clicking on it, can be used if something\r\n                else is updating the state of the radio button.</td>\r\n            <td>true</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<p>Use the <code>name</code> attribute to indicate which radio buttons are part of the same group.</p>'},2369: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(2370))||this;return a.codepen={html:a.snippets.raw.codepenHtml,htmlAttributes:{"ng-controller":"SlidersChartsCtrl as vm"},js:[a.snippets.raw.codepenJs]},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-components-slider-charts-ng1",template:s(2374)}),c.DocumentationSectionComponent("ComponentsSliderChartsNg1Component"),e("design:paramtypes",[])],u),a.ComponentsSliderChartsNg1Component=u},2370: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={"./codepen.html":2371,"./codepen.js":2372,"./sample.html":2373};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2370},2371: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\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-md-5<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>slider-chart</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.value<span class="token punctuation">"</span></span> <span class="token attr-name">slider-options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.sliderOptions<span class="token punctuation">"</span></span> <span class="token attr-name">chart-data</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.chart.data<span class="token punctuation">"</span></span> <span class="token attr-name">chart-options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.chart.options<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>slider-chart</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>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-3 m-t-sm<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>text<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 m-b<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>vm.value.low<span class="token punctuation">"</span></span> <span class="token attr-name">ng-model-options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{ debounce: 500 }<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>col-sm-offset-6 col-sm-3 m-t-sm<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>text<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 m-b<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>vm.value.high<span class="token punctuation">"</span></span> <span class="token attr-name">ng-model-options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{ debounce: 500 }<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\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\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\r\n    <div class="col-md-5">\r\n        <slider-chart ng-model="vm.value" slider-options="vm.sliderOptions" chart-data="vm.chart.data" chart-options="vm.chart.options"></slider-chart>\r\n\r\n        <div class="col-sm-3 m-t-sm">\r\n            <input type="text" class="form-control m-b" ng-model="vm.value.low" ng-model-options="{ debounce: 500 }">\r\n        </div>\r\n        <div class="col-sm-offset-6 col-sm-3 m-t-sm">\r\n            <input type="text" class="form-control m-b" ng-model="vm.value.high" ng-model-options="{ debounce: 500 }">\r\n        </div>\r\n\r\n    </div>\r\n\r\n</div>'}},2372: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">\'SlidersChartsCtrl\'</span><span class="token punctuation">,</span> SlidersChartsCtrl<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\nSlidersChartsCtrl<span class="token punctuation">.</span>$inject <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">\'$colorService\'</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">SlidersChartsCtrl</span><span class="token punctuation">(</span>$colorService<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n\r\n\t<span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\r\n\r\n    <span class="token keyword">var</span> accentColor <span class="token operator">=</span> $colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'accent\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toRgb</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\t   \r\n\r\n    vm<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n\t    low<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n\t    high<span class="token punctuation">:</span> <span class="token number">30</span>\r\n\t<span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n\tvm<span class="token punctuation">.</span>sliderOptions <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n\t    type<span class="token punctuation">:</span> <span class="token string">\'range\'</span><span class="token punctuation">,</span>\r\n\t    handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t        style<span class="token punctuation">:</span> <span class="token string">\'button\'</span><span class="token punctuation">,</span>\r\n\t        callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t            trigger<span class="token punctuation">:</span> <span class="token string">\'hover\'</span><span class="token punctuation">,</span>\r\n\t            background<span class="token punctuation">:</span> <span class="token string">\'#464646\'</span><span class="token punctuation">,</span>\r\n\t            color<span class="token punctuation">:</span> <span class="token string">\'#fff\'</span><span class="token punctuation">,</span>\r\n\t            formatter<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n\t                <span class="token keyword">return</span> value<span class="token punctuation">;</span>\r\n\t            <span class="token punctuation">}</span>\r\n\t        <span class="token punctuation">}</span>\r\n\t    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n\t    track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t        height<span class="token punctuation">:</span> <span class="token string">\'narrow\'</span><span class="token punctuation">,</span>\r\n\t        min<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n\t        max<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">,</span>\r\n\t        ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t            snap<span class="token punctuation">:</span> <span class="token string">\'major\'</span><span class="token punctuation">,</span>\r\n\t            major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t                show<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n\t                steps<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n\t                labels<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n\t                formatter<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n\t                    <span class="token keyword">return</span> value<span class="token punctuation">;</span>\r\n\t                <span class="token punctuation">}</span>\r\n\t            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n\t            minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t                show<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n\t                steps<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>\r\n\t                labels<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n\t                formatter<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n\t                    <span class="token keyword">return</span> value<span class="token punctuation">;</span>\r\n\t                <span class="token punctuation">}</span>\r\n\t            <span class="token punctuation">}</span>\r\n\t        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n\t        colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t            lower<span class="token punctuation">:</span> <span class="token string">\'#f2f2f2\'</span><span class="token punctuation">,</span>\r\n\t            range<span class="token punctuation">:</span> accentColor<span class="token punctuation">,</span>\r\n\t            higher<span class="token punctuation">:</span> <span class="token string">\'#f2f2f2\'</span>\r\n\t        <span class="token punctuation">}</span>\r\n\t    <span class="token punctuation">}</span>\r\n\t<span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>chart <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n\t    data<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\r\n\t\t    label<span class="token punctuation">:</span> <span class="token string">"line"</span><span class="token punctuation">,</span>\r\n\t\t    data<span class="token punctuation">:</span> <span class="token punctuation">[</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">6</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">7</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">9</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">11</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">41</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">13</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">14</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">15</span><span class="token punctuation">,</span> <span class="token number">31</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">16</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">17</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">18</span><span class="token punctuation">,</span> <span class="token number">44</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">19</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">21</span><span class="token punctuation">,</span> <span class="token number">19</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">22</span><span class="token punctuation">,</span> <span class="token number">21</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">32</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">24</span><span class="token punctuation">,</span> <span class="token number">30</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">25</span><span class="token punctuation">,</span> <span class="token number">34</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">26</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">27</span><span class="token punctuation">,</span> <span class="token number">45</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">29</span><span class="token punctuation">,</span> <span class="token number">55</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        <span class="token punctuation">[</span><span class="token number">30</span><span class="token punctuation">,</span> <span class="token number">48</span><span class="token punctuation">]</span>\r\n\t\t    <span class="token punctuation">]</span>\r\n\t\t<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\toptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t\t    series<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t\t        lines<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t\t            show<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n\t\t            lineWidth<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n\t\t            fill<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n\t\t            fillColor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t\t                colors<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>\r\n\t\t                    opacity<span class="token punctuation">:</span> <span class="token number">0.1</span>\r\n\t\t                <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>\r\n\t\t                    opacity<span class="token punctuation">:</span> <span class="token number">0.3</span>\r\n\t\t                <span class="token punctuation">}</span><span class="token punctuation">]</span>\r\n\t\t            <span class="token punctuation">}</span>\r\n\t\t        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n\t\t        shadowSize<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n\t\t        highlightColor<span class="token punctuation">:</span> <span class="token punctuation">[</span>accentColor<span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t        forecastDashStyle<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n\t\t    xaxis<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t\t        show<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n\t\t    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n\t\t    yaxis<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t\t    \tshow<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n\t\t    <span class="token punctuation">}</span><span class="token punctuation">,</span> \r\n\t\t    colors<span class="token punctuation">:</span> <span class="token punctuation">[</span>accentColor<span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n\t\t    grid<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t\t        borderWidth<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t\t            <span class="token string">"left"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n\t\t            <span class="token string">"bottom"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n\t\t            <span class="token string">"right"</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n\t\t            <span class="token string">"top"</span><span class="token punctuation">:</span> <span class="token number">0</span>\r\n\t\t        <span class="token punctuation">}</span>\r\n\t\t    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n\t\t    legend<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t\t        show<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n\t\t    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n\t\t    tooltip<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t\t        show <span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n\t\t        snap<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n\t\t        shifts<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n\t\t            x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n\t\t            y<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">35</span>\r\n\t\t        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n\t\t        content<span class="token punctuation">:</span> <span class="token string">"x: %x, y: %y"</span>\r\n\t\t    <span class="token punctuation">}</span>\r\n\t\t<span class="token punctuation">}</span>\r\n\t<span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n    \r\n<span class="token punctuation">}</span>',example:"angular.module('app').controller('SlidersChartsCtrl', SlidersChartsCtrl);\r\n\r\nSlidersChartsCtrl.$inject = ['$colorService'];\r\n\r\nfunction SlidersChartsCtrl($colorService) {\r\n\r\n\tvar vm = this;\r\n\r\n    var accentColor = $colorService.getColor('accent').toRgb();\t   \r\n\r\n    vm.value = {\r\n\t    low: 1,\r\n\t    high: 30\r\n\t};\r\n\r\n\tvm.sliderOptions = {\r\n\t    type: 'range',\r\n\t    handles: {\r\n\t        style: 'button',\r\n\t        callout: {\r\n\t            trigger: 'hover',\r\n\t            background: '#464646',\r\n\t            color: '#fff',\r\n\t            formatter: function (value) {\r\n\t                return value;\r\n\t            }\r\n\t        }\r\n\t    },\r\n\t    track: {\r\n\t        height: 'narrow',\r\n\t        min: 1,\r\n\t        max: 30,\r\n\t        ticks: {\r\n\t            snap: 'major',\r\n\t            major: {\r\n\t                show: false,\r\n\t                steps: 1,\r\n\t                labels: true,\r\n\t                formatter: function (value) {\r\n\t                    return value;\r\n\t                }\r\n\t            },\r\n\t            minor: {\r\n\t                show: false,\r\n\t                steps: 5,\r\n\t                labels: false,\r\n\t                formatter: function (value) {\r\n\t                    return value;\r\n\t                }\r\n\t            }\r\n\t        },\r\n\t        colors: {\r\n\t            lower: '#f2f2f2',\r\n\t            range: accentColor,\r\n\t            higher: '#f2f2f2'\r\n\t        }\r\n\t    }\r\n\t};\r\n\r\n    vm.chart = {\r\n\t    data: [{\r\n\t\t    label: \"line\",\r\n\t\t    data: [\r\n\t\t        [1, 34],\r\n\t\t        [2, 25],\r\n\t\t        [3, 19],\r\n\t\t        [4, 34],\r\n\t\t        [5, 32],\r\n\t\t        [6, 44],\r\n\t\t        [7, 34],\r\n\t\t        [8, 25],\r\n\t\t        [9, 19],\r\n\t\t        [10, 36],\r\n\t\t        [11, 20],\r\n\t\t        [12, 41],\r\n\t\t        [13, 34],\r\n\t\t        [14, 20],\r\n\t\t        [15, 31],\r\n\t\t        [16, 34],\r\n\t\t        [17, 32],\r\n\t\t        [18, 44],\r\n\t\t        [19, 19],\r\n\t\t        [20, 25],\r\n\t\t        [21, 19],\r\n\t\t        [22, 21],\r\n\t\t        [23, 32],\r\n\t\t        [24, 30],\r\n\t\t        [25, 34],\r\n\t\t        [26, 25],\r\n\t\t        [27, 45],\r\n\t\t        [28, 50],\r\n\t\t        [29, 55],\r\n\t\t        [30, 48]\r\n\t\t    ]\r\n\t\t}],\r\n\t\toptions: {\r\n\t\t    series: {\r\n\t\t        lines: {\r\n\t\t            show: true,\r\n\t\t            lineWidth: 0,\r\n\t\t            fill: true,\r\n\t\t            fillColor: {\r\n\t\t                colors: [{\r\n\t\t                    opacity: 0.1\r\n\t\t                }, {\r\n\t\t                    opacity: 0.3\r\n\t\t                }]\r\n\t\t            }\r\n\t\t        },\r\n\t\t        shadowSize: 0,\r\n\t\t        highlightColor: [accentColor],\r\n\t\t        forecastDashStyle: [5],\r\n\t\t    },\r\n\t\t    xaxis: {\r\n\t\t        show: false\r\n\t\t    },\r\n\t\t    yaxis: {\r\n\t\t    \tshow: false\r\n\t\t    }, \r\n\t\t    colors: [accentColor],\r\n\t\t    grid: {\r\n\t\t        borderWidth: {\r\n\t\t            \"left\": 0,\r\n\t\t            \"bottom\": 0,\r\n\t\t            \"right\": 0,\r\n\t\t            \"top\": 0\r\n\t\t        }\r\n\t\t    },\r\n\t\t    legend: {\r\n\t\t        show: false\r\n\t\t    },\r\n\t\t    tooltip: {\r\n\t\t        show : true,\r\n\t\t        snap: true,\r\n\t\t        shifts: {\r\n\t\t            x: 0,\r\n\t\t            y: -35\r\n\t\t        },\r\n\t\t        content: \"x: %x, y: %y\"\r\n\t\t    }\r\n\t\t}\r\n\t};\r\n    \r\n}"}},2373:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slider-chart</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.value<span class="token punctuation">"</span></span> <span class="token attr-name">slider-options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.sliderOptions<span class="token punctuation">"</span></span> <span class="token attr-name">chart-data</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.chart.data<span class="token punctuation">"</span></span> <span class="token attr-name">chart-options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.chart.options<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>slider-chart</span><span class="token punctuation">></span></span>',example:'<slider-chart ng-model="vm.value" slider-options="vm.sliderOptions" chart-data="vm.chart.data" chart-options="vm.chart.options"></slider-chart>'}},2374:function(n,a){n.exports='<uxd-slider-charts-wrapper></uxd-slider-charts-wrapper>\r\n\r\n<hr>\r\n\r\n<h4>Slider Chart Directive</h4>\r\n\r\n<p>The component can be added to a page by using the following HTML:</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sampleHtml"></uxd-snippet>\r\n\r\n<p>The slider chart has been primarily designed for use for filtering by date eg. within facets and should have the following\r\n    attributes:</p>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Property</th>\r\n            <th>Type</th>\r\n            <th>Binding</th>\r\n            <th>Description</th>\r\n            <th>Optional</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">ng-model</td>\r\n            <td>Object</td>\r\n            <td>Variable</td>\r\n            <td>The range of values for the slider.</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">slider-options</td>\r\n            <td>Object</td>\r\n            <td>Variable</td>\r\n            <td>The options for the slider.</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">chart-data</td>\r\n            <td>Object</td>\r\n            <td>Variable</td>\r\n            <td>The data to populate the chart.</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">chart-options</td>\r\n            <td>Object</td>\r\n            <td>Variable</td>\r\n            <td>The options for the chart.</td>\r\n            <td>false</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<blockquote>\r\n    <p><strong>Note</strong>: Refer to the <a routerLink="/charts/flot-options">Flot Options</a> page for details of chart options.</p>\r\n</blockquote>\r\n\r\n<blockquote>\r\n    <p><strong>Note</strong>: Refer to the <a routerLink="/components/input-controls" fragment="sliders-ng1">Sliders</a> page for details of\r\n        sliders.</p>\r\n</blockquote>'},2375: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=s(102);s(107),s(2376);var r=function(n){function a(a){var t=n.call(this,s(2377))||this;return t.plunk={files:{"app.component.ts":t.snippets.raw.appTs,"app.component.html":t.snippets.raw.appHtml},modules:[{imports:["SliderModule","ColorServiceModule"],library:"ux-aspects"}]},t.slider1={value:50,options:{track:{ticks:{major:{steps:[0,50,100],labels:!0,formatter:function(n){return 0===n?"Minimum":50===n?"Default":100===n?"Maximum":void 0}},minor:{show:!1}}}}},t.slider2={value:3.8,options:{handles:{style:u.SliderStyle.Line,callout:{trigger:u.SliderCalloutTrigger.Drag,formatter:function(n){return n?n.toFixed(1):n}}},track:{min:1,max:5,ticks:{major:{steps:[1,5],labels:!0},minor:{steps:1,labels:!1}}}}},t.slider3={value:4,options:{track:{min:0,max:5,height:u.SliderSize.Narrow,ticks:{snap:u.SliderSnap.All,major:{steps:5,labels:!0},minor:{steps:1,labels:!0}},colors:{lower:a.getColor("accent").toHex()}}}},t.slider4={value:60,options:{handles:{style:u.SliderStyle.Line,callout:{trigger:u.SliderCalloutTrigger.Hover,formatter:function(n){return n?n.toFixed(0):n}}},track:{height:u.SliderSize.Narrow,ticks:{major:{steps:50},minor:{steps:10}},colors:{higher:["#fdf690","#f14a50"]}}}},t.slider5={value:{low:1234,high:9876},options:{type:u.SliderType.Range,handles:{callout:{trigger:u.SliderCalloutTrigger.Persistent,formatter:function(n){return n?n.toFixed(0):n}}},track:{height:u.SliderSize.Narrow,min:1e3,max:1e4,ticks:{major:{show:!1},minor:{show:!1}},colors:{range:a.getColor("accent").toHex()}}}},t.slider6={value:{low:22,high:76},options:{type:u.SliderType.Range,handles:{style:u.SliderStyle.Line,callout:{trigger:u.SliderCalloutTrigger.Hover,background:a.getColor("alternate1").toHex(),formatter:function(n){return n?n.toFixed(0):n}}},track:{height:u.SliderSize.Narrow,ticks:{major:{steps:25},minor:{steps:5}},colors:{range:a.getColor("alternate1").toHex()}}}},t.slider7={value:{low:25,high:75},options:{type:u.SliderType.Range,handles:{style:u.SliderStyle.Line,callout:{trigger:u.SliderCalloutTrigger.Hover,background:a.getColor("accent").toHex(),formatter:function(n){return n?n.toFixed(0):n}}},track:{ticks:{snap:u.SliderSnap.All,major:{steps:25},minor:{steps:5}},colors:{range:a.getColor("accent").toHex()}}}},t}return t(a,n),a.prototype.updateValues=function(){this.slider7.value=this.slider7.value,isNaN(Number(this.lowerValue))||(this.slider7.value.low=Number(this.lowerValue)),isNaN(Number(this.upperValue))||(this.slider7.value.high=Number(this.upperValue))},a.prototype.valueHasChanged=function(n){this.slider7.value=n,this.lowerValue=n.low.toString(),this.upperValue=n.high.toString()},a}(l.BaseDocumentationSection);r=p([o.Component({selector:"uxd-components-sliders",template:s(2386)}),c.DocumentationSectionComponent("ComponentsSlidersComponent"),e("design:paramtypes",[u.ColorService])],r),a.ComponentsSlidersComponent=r},2376:function(n,a,s){"use strict";var t=s(4),p=s(1889);t.Observable.prototype.distinctUntilChanged=p.distinctUntilChanged},2377: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={"./app.html":2378,"./app.ts":2379,"./sample1.html":2380,"./sample1.ts":2381,"./sample2.ts":2382,"./sample3.ts":2383,"./sample4.html":2384,"./sample4.ts":2385};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2377},2378: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>container-fluid<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>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\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-md-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>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-t-md p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Single Value Sliders<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</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\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-md-6 p-r-md p-b-md<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Button Handle - Custom Labels<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ux-slider</span> <span class="token attr-name">[value]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider1.value<span class="token punctuation">"</span></span> <span class="token attr-name">[options]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider1.options<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>ux-slider</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>col-md-6 p-l-md p-b-md<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Line Handle - Callout on Drag<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ux-slider</span> <span class="token attr-name">[value]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider2.value<span class="token punctuation">"</span></span> <span class="token attr-name">[options]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider2.options<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>ux-slider</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\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</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>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\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-md-6 p-r-md p-b-md<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Narrow - Track Styling - Snapping<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ux-slider</span> <span class="token attr-name">[value]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider3.value<span class="token punctuation">"</span></span> <span class="token attr-name">[options]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider3.options<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>ux-slider</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>col-md-6 p-l-md p-b-md<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Narrow - Gradient Track Styling - Callout on Hover<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ux-slider</span> <span class="token attr-name">[value]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider4.value<span class="token punctuation">"</span></span> <span class="token attr-name">[options]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider4.options<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>ux-slider</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\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</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>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\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-md-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>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-t-md p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Range Value Sliders<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</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\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-md-6 p-r-md p-b-md<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-b-lg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Range Track - Persistent Callout<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ux-slider</span> <span class="token attr-name">[value]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider5.value<span class="token punctuation">"</span></span> <span class="token attr-name">[options]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider5.options<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>ux-slider</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>col-md-6 p-l-md p-b-md<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-b-lg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Range Track Style - Custom Callout Styles<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ux-slider</span> <span class="token attr-name">[value]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider6.value<span class="token punctuation">"</span></span> <span class="token attr-name">[options]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider6.options<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>ux-slider</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\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</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>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\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-md-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>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-t-md p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Range Slider with Text Inputs<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</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\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-md-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>ux-slider</span> <span class="token attr-name">[value]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider7.value<span class="token punctuation">"</span></span> <span class="token attr-name">(valueChange)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>valueHasChanged($event)<span class="token punctuation">"</span></span> \r\n                <span class="token attr-name">[options]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>slider7.options<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>ux-slider</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\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>row m-t-sm p-t-xs<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-2<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>text<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 m-b<span class="token punctuation">"</span></span> <span class="token attr-name">[(ngModel)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lowerValue<span class="token punctuation">"</span></span> \r\n                <span class="token attr-name">(blur)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>updateValues()<span class="token punctuation">"</span></span> <span class="token attr-name">(keyup.enter)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>updateValues()<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>col-sm-offset-8 col-sm-2<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>text<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 m-b<span class="token punctuation">"</span></span> <span class="token attr-name">[(ngModel)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>upperValue<span class="token punctuation">"</span></span> \r\n                <span class="token attr-name">(blur)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>updateValues()<span class="token punctuation">"</span></span> <span class="token attr-name">(keyup.enter)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>updateValues()<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\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',example:'<div class="container-fluid">\r\n\r\n    <div class="row">\r\n\r\n        <div class="col-md-12">\r\n            <h4 class="text-black p-t-md p-b-md">Single Value Sliders</h4>\r\n        </div>\r\n\r\n        <div class="col-md-6 p-r-md p-b-md">\r\n            <p class="text-black p-b-md">Button Handle - Custom Labels</p>\r\n            <ux-slider [value]="slider1.value" [options]="slider1.options"></ux-slider>\r\n        </div>\r\n        <div class="col-md-6 p-l-md p-b-md">\r\n            <p class="text-black p-b-md">Line Handle - Callout on Drag</p>\r\n            <ux-slider [value]="slider2.value" [options]="slider2.options"></ux-slider>\r\n        </div>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <div class="row">\r\n\r\n        <div class="col-md-6 p-r-md p-b-md">\r\n            <p class="text-black p-b-md">Narrow - Track Styling - Snapping</p>\r\n            <ux-slider [value]="slider3.value" [options]="slider3.options"></ux-slider>\r\n        </div>\r\n        <div class="col-md-6 p-l-md p-b-md">\r\n            <p class="text-black p-b-md">Narrow - Gradient Track Styling - Callout on Hover</p>\r\n            <ux-slider [value]="slider4.value" [options]="slider4.options"></ux-slider>\r\n        </div>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <div class="row">\r\n\r\n        <div class="col-md-12">\r\n            <h4 class="text-black p-t-md p-b-md">Range Value Sliders</h4>\r\n        </div>\r\n\r\n        <div class="col-md-6 p-r-md p-b-md">\r\n            <p class="text-black p-b-lg">Range Track - Persistent Callout</p>\r\n            <ux-slider [value]="slider5.value" [options]="slider5.options"></ux-slider>\r\n        </div>\r\n        <div class="col-md-6 p-l-md p-b-md">\r\n            <p class="text-black p-b-lg">Range Track Style - Custom Callout Styles</p>\r\n            <ux-slider [value]="slider6.value" [options]="slider6.options"></ux-slider>\r\n        </div>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <div class="row">\r\n\r\n        <div class="col-md-12">\r\n            <h4 class="text-black p-t-md p-b-md">Range Slider with Text Inputs</h4>\r\n        </div>\r\n\r\n        <div class="col-md-12">\r\n            <ux-slider [value]="slider7.value" (valueChange)="valueHasChanged($event)" \r\n                [options]="slider7.options"></ux-slider>\r\n        </div>\r\n    </div>\r\n\r\n    <div class="row m-t-sm p-t-xs">\r\n        <div class="col-sm-2">\r\n            <input type="text" class="form-control m-b" [(ngModel)]="lowerValue" \r\n                (blur)="updateValues()" (keyup.enter)="updateValues()">\r\n        </div>\r\n        <div class="col-sm-offset-8 col-sm-2">\r\n            <input type="text" class="form-control m-b" [(ngModel)]="upperValue" \r\n                (blur)="updateValues()" (keyup.enter)="updateValues()">\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n'}},2379:function(n,a){n.exports={snippet:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@angular/core\'</span><span class="token punctuation">;</span>\r\n<span class="token keyword">import</span> <span class="token punctuation">{</span> SliderValue<span class="token punctuation">,</span> SliderOptions<span class="token punctuation">,</span> ColorService<span class="token punctuation">,</span> SliderStyle<span class="token punctuation">,</span> SliderCalloutTrigger<span class="token punctuation">,</span> SliderSize<span class="token punctuation">,</span> SliderSnap<span class="token punctuation">,</span> SliderType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'ux-aspects\'</span><span class="token punctuation">;</span>\r\n\r\n@<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\r\n    selector<span class="token punctuation">:</span> <span class="token string">\'app\'</span><span class="token punctuation">,</span>\r\n    templateUrl<span class="token punctuation">:</span> <span class="token string">\'./src/app.component.html\'</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\r\n<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppComponent</span> <span class="token punctuation">{</span>\r\n\r\n    slider1<span class="token punctuation">:</span> SliderExample<span class="token punctuation">;</span>\r\n    slider2<span class="token punctuation">:</span> SliderExample<span class="token punctuation">;</span>\r\n    slider3<span class="token punctuation">:</span> SliderExample<span class="token punctuation">;</span>\r\n    slider4<span class="token punctuation">:</span> SliderExample<span class="token punctuation">;</span>\r\n    slider5<span class="token punctuation">:</span> SliderExample<span class="token punctuation">;</span>\r\n    slider6<span class="token punctuation">:</span> SliderExample<span class="token punctuation">;</span>\r\n    slider7<span class="token punctuation">:</span> SliderExample<span class="token punctuation">;</span>\r\n\r\n    lowerValue<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token number">25</span><span class="token punctuation">;</span>\r\n    upperValue<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token number">75</span><span class="token punctuation">;</span>\r\n\r\n    <span class="token function">constructor</span><span class="token punctuation">(</span>colorService<span class="token punctuation">:</span> ColorService<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>slider1 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n            value<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>\r\n            options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            steps<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                            labels<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                            formatter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\r\n                                <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                                    <span class="token keyword">return</span> <span class="token string">\'Minimum\'</span><span class="token punctuation">;</span>\r\n                                <span class="token punctuation">}</span>\r\n                                <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">===</span> <span class="token number">50</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                                    <span class="token keyword">return</span> <span class="token string">\'Default\'</span><span class="token punctuation">;</span>\r\n                                <span class="token punctuation">}</span>\r\n                                <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">===</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                                    <span class="token keyword">return</span> <span class="token string">\'Maximum\'</span><span class="token punctuation">;</span>\r\n                                <span class="token punctuation">}</span>\r\n                            <span class="token punctuation">}</span>\r\n                        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                        minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            show<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                        <span class="token punctuation">}</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>slider2 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n            value<span class="token punctuation">:</span> <span class="token number">3.8</span><span class="token punctuation">,</span>\r\n            options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    style<span class="token punctuation">:</span> SliderStyle<span class="token punctuation">.</span>Line<span class="token punctuation">,</span>\r\n                    callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        trigger<span class="token punctuation">:</span> SliderCalloutTrigger<span class="token punctuation">.</span>Drag<span class="token punctuation">,</span>\r\n                        formatter<span class="token punctuation">:</span> value <span class="token operator">=></span> value <span class="token operator">?</span> value<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> value\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    min<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n                    max<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>\r\n                    ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            steps<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                            labels<span class="token punctuation">:</span> <span class="token boolean">true</span>\r\n                        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                        minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            steps<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n                            labels<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                        <span class="token punctuation">}</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>slider3 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n            value<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>\r\n            options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    min<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n                    max<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>\r\n                    height<span class="token punctuation">:</span> SliderSize<span class="token punctuation">.</span>Narrow<span class="token punctuation">,</span>\r\n                    ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        snap<span class="token punctuation">:</span> SliderSnap<span class="token punctuation">.</span>All<span class="token punctuation">,</span>\r\n                        major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            steps<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>\r\n                            labels<span class="token punctuation">:</span> <span class="token boolean">true</span>\r\n                        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                        minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            steps<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n                            labels<span class="token punctuation">:</span> <span class="token boolean">true</span>\r\n                        <span class="token punctuation">}</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        lower<span class="token punctuation">:</span> colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'accent\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>slider4 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n            value<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span>\r\n            options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    style<span class="token punctuation">:</span> SliderStyle<span class="token punctuation">.</span>Line<span class="token punctuation">,</span>\r\n                    callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        trigger<span class="token punctuation">:</span> SliderCalloutTrigger<span class="token punctuation">.</span>Hover<span class="token punctuation">,</span>\r\n                        formatter<span class="token punctuation">:</span> value <span class="token operator">=></span> value <span class="token operator">?</span> value<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> value\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    height<span class="token punctuation">:</span> SliderSize<span class="token punctuation">.</span>Narrow<span class="token punctuation">,</span>\r\n                    ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            steps<span class="token punctuation">:</span> <span class="token number">50</span>\r\n                        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                        minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            steps<span class="token punctuation">:</span> <span class="token number">10</span>\r\n                        <span class="token punctuation">}</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        higher<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">\'#fdf690\'</span><span class="token punctuation">,</span> <span class="token string">\'#f14a50\'</span><span class="token punctuation">]</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>slider5 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n            value<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                low<span class="token punctuation">:</span> <span class="token number">1234</span><span class="token punctuation">,</span>\r\n                high<span class="token punctuation">:</span> <span class="token number">9876</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                type<span class="token punctuation">:</span> SliderType<span class="token punctuation">.</span>Range<span class="token punctuation">,</span>\r\n                handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        trigger<span class="token punctuation">:</span> SliderCalloutTrigger<span class="token punctuation">.</span>Persistent<span class="token punctuation">,</span>\r\n                        formatter<span class="token punctuation">:</span> value <span class="token operator">=></span> value <span class="token operator">?</span> value<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> value\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    height<span class="token punctuation">:</span> SliderSize<span class="token punctuation">.</span>Narrow<span class="token punctuation">,</span>\r\n                    min<span class="token punctuation">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>\r\n                    max<span class="token punctuation">:</span> <span class="token number">10000</span><span class="token punctuation">,</span>\r\n                    ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            show<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                        minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            show<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                        <span class="token punctuation">}</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        range<span class="token punctuation">:</span> colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'accent\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>slider6 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n            value<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                low<span class="token punctuation">:</span> <span class="token number">22</span><span class="token punctuation">,</span>\r\n                high<span class="token punctuation">:</span> <span class="token number">76</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                type<span class="token punctuation">:</span> SliderType<span class="token punctuation">.</span>Range<span class="token punctuation">,</span>\r\n                handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    style<span class="token punctuation">:</span> SliderStyle<span class="token punctuation">.</span>Line<span class="token punctuation">,</span>\r\n                    callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        trigger<span class="token punctuation">:</span> SliderCalloutTrigger<span class="token punctuation">.</span>Hover<span class="token punctuation">,</span>\r\n                        background<span class="token punctuation">:</span> colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'alternate1\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\r\n                        formatter<span class="token punctuation">:</span> value <span class="token operator">=></span> value <span class="token operator">?</span> value<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> value\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    height<span class="token punctuation">:</span> SliderSize<span class="token punctuation">.</span>Narrow<span class="token punctuation">,</span>\r\n                    ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            steps<span class="token punctuation">:</span> <span class="token number">25</span>\r\n                        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                        minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            steps<span class="token punctuation">:</span> <span class="token number">5</span>\r\n                        <span class="token punctuation">}</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        range<span class="token punctuation">:</span> colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'alternate1\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>slider7 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n            value<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                low<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span>\r\n                high<span class="token punctuation">:</span> <span class="token number">75</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                type<span class="token punctuation">:</span> SliderType<span class="token punctuation">.</span>Range<span class="token punctuation">,</span>\r\n                handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    style<span class="token punctuation">:</span> SliderStyle<span class="token punctuation">.</span>Line<span class="token punctuation">,</span>\r\n                    callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        trigger<span class="token punctuation">:</span> SliderCalloutTrigger<span class="token punctuation">.</span>Hover<span class="token punctuation">,</span>\r\n                        background<span class="token punctuation">:</span> colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'accent\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\r\n                        formatter<span class="token punctuation">:</span> value <span class="token operator">=></span> value <span class="token operator">?</span> value<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> value\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        snap<span class="token punctuation">:</span> SliderSnap<span class="token punctuation">.</span>All<span class="token punctuation">,</span>\r\n                        major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            steps<span class="token punctuation">:</span> <span class="token number">25</span>\r\n                        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                        minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                            steps<span class="token punctuation">:</span> <span class="token number">5</span>\r\n                        <span class="token punctuation">}</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        range<span class="token punctuation">:</span> colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'accent\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span>\r\n\r\n    <span class="token function">updateValues</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>slider7<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>slider7<span class="token punctuation">.</span>value <span class="token keyword">as</span> SliderValue<span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>lowerValue<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n            <span class="token keyword">this</span><span class="token punctuation">.</span>slider7<span class="token punctuation">.</span>value<span class="token punctuation">.</span>low <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>lowerValue<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token punctuation">}</span>\r\n\r\n        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>upperValue<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n            <span class="token keyword">this</span><span class="token punctuation">.</span>slider7<span class="token punctuation">.</span>value<span class="token punctuation">.</span>high <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>upperValue<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span>\r\n\r\n    <span class="token function">valueHasChanged</span><span class="token punctuation">(</span>value<span class="token punctuation">:</span> SliderValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>slider7<span class="token punctuation">.</span>value <span class="token operator">=</span> value<span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>lowerValue <span class="token operator">=</span> value<span class="token punctuation">.</span>low<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>upperValue <span class="token operator">=</span> value<span class="token punctuation">.</span>high<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span>\r\n\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token keyword">interface</span> <span class="token class-name">SliderExample</span> <span class="token punctuation">{</span>\r\n    value<span class="token punctuation">:</span> number <span class="token operator">|</span> SliderValue<span class="token punctuation">;</span>\r\n    options<span class="token punctuation">:</span> SliderOptions<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:"import { Component } from '@angular/core';\r\nimport { SliderValue, SliderOptions, ColorService, SliderStyle, SliderCalloutTrigger, SliderSize, SliderSnap, SliderType } from 'ux-aspects';\r\n\r\n@Component({\r\n    selector: 'app',\r\n    templateUrl: './src/app.component.html'\r\n})\r\nexport class AppComponent {\r\n\r\n    slider1: SliderExample;\r\n    slider2: SliderExample;\r\n    slider3: SliderExample;\r\n    slider4: SliderExample;\r\n    slider5: SliderExample;\r\n    slider6: SliderExample;\r\n    slider7: SliderExample;\r\n\r\n    lowerValue: number = 25;\r\n    upperValue: number = 75;\r\n\r\n    constructor(colorService: ColorService) {\r\n\r\n        this.slider1 = {\r\n            value: 50,\r\n            options: {\r\n                track: {\r\n                    ticks: {\r\n                        major: {\r\n                            steps: [0, 50, 100],\r\n                            labels: true,\r\n                            formatter: (value) => {\r\n                                if (value === 0) {\r\n                                    return 'Minimum';\r\n                                }\r\n                                if (value === 50) {\r\n                                    return 'Default';\r\n                                }\r\n                                if (value === 100) {\r\n                                    return 'Maximum';\r\n                                }\r\n                            }\r\n                        },\r\n                        minor: {\r\n                            show: false\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        };\r\n\r\n        this.slider2 = {\r\n            value: 3.8,\r\n            options: {\r\n                handles: {\r\n                    style: SliderStyle.Line,\r\n                    callout: {\r\n                        trigger: SliderCalloutTrigger.Drag,\r\n                        formatter: value => value ? value.toFixed(1) : value\r\n                    }\r\n                },\r\n                track: {\r\n                    min: 1,\r\n                    max: 5,\r\n                    ticks: {\r\n                        major: {\r\n                            steps: [1, 5],\r\n                            labels: true\r\n                        },\r\n                        minor: {\r\n                            steps: 1,\r\n                            labels: false\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        };\r\n\r\n        this.slider3 = {\r\n            value: 4,\r\n            options: {\r\n                track: {\r\n                    min: 0,\r\n                    max: 5,\r\n                    height: SliderSize.Narrow,\r\n                    ticks: {\r\n                        snap: SliderSnap.All,\r\n                        major: {\r\n                            steps: 5,\r\n                            labels: true\r\n                        },\r\n                        minor: {\r\n                            steps: 1,\r\n                            labels: true\r\n                        }\r\n                    },\r\n                    colors: {\r\n                        lower: colorService.getColor('accent').toHex()\r\n                    }\r\n                }\r\n            }\r\n        };\r\n\r\n        this.slider4 = {\r\n            value: 60,\r\n            options: {\r\n                handles: {\r\n                    style: SliderStyle.Line,\r\n                    callout: {\r\n                        trigger: SliderCalloutTrigger.Hover,\r\n                        formatter: value => value ? value.toFixed(0) : value\r\n                    }\r\n                },\r\n                track: {\r\n                    height: SliderSize.Narrow,\r\n                    ticks: {\r\n                        major: {\r\n                            steps: 50\r\n                        },\r\n                        minor: {\r\n                            steps: 10\r\n                        }\r\n                    },\r\n                    colors: {\r\n                        higher: ['#fdf690', '#f14a50']\r\n                    }\r\n                }\r\n            }\r\n        };\r\n\r\n        this.slider5 = {\r\n            value: {\r\n                low: 1234,\r\n                high: 9876\r\n            },\r\n            options: {\r\n                type: SliderType.Range,\r\n                handles: {\r\n                    callout: {\r\n                        trigger: SliderCalloutTrigger.Persistent,\r\n                        formatter: value => value ? value.toFixed(0) : value\r\n                    }\r\n                },\r\n                track: {\r\n                    height: SliderSize.Narrow,\r\n                    min: 1000,\r\n                    max: 10000,\r\n                    ticks: {\r\n                        major: {\r\n                            show: false\r\n                        },\r\n                        minor: {\r\n                            show: false\r\n                        }\r\n                    },\r\n                    colors: {\r\n                        range: colorService.getColor('accent').toHex()\r\n                    }\r\n                }\r\n            }\r\n        };\r\n\r\n        this.slider6 = {\r\n            value: {\r\n                low: 22,\r\n                high: 76\r\n            },\r\n            options: {\r\n                type: SliderType.Range,\r\n                handles: {\r\n                    style: SliderStyle.Line,\r\n                    callout: {\r\n                        trigger: SliderCalloutTrigger.Hover,\r\n                        background: colorService.getColor('alternate1').toHex(),\r\n                        formatter: value => value ? value.toFixed(0) : value\r\n                    }\r\n                },\r\n                track: {\r\n                    height: SliderSize.Narrow,\r\n                    ticks: {\r\n                        major: {\r\n                            steps: 25\r\n                        },\r\n                        minor: {\r\n                            steps: 5\r\n                        }\r\n                    },\r\n                    colors: {\r\n                        range: colorService.getColor('alternate1').toHex()\r\n                    }\r\n                }\r\n            }\r\n        };\r\n\r\n        this.slider7 = {\r\n            value: {\r\n                low: 25,\r\n                high: 75\r\n            },\r\n            options: {\r\n                type: SliderType.Range,\r\n                handles: {\r\n                    style: SliderStyle.Line,\r\n                    callout: {\r\n                        trigger: SliderCalloutTrigger.Hover,\r\n                        background: colorService.getColor('accent').toHex(),\r\n                        formatter: value => value ? value.toFixed(0) : value\r\n                    }\r\n                },\r\n                track: {\r\n                    ticks: {\r\n                        snap: SliderSnap.All,\r\n                        major: {\r\n                            steps: 25\r\n                        },\r\n                        minor: {\r\n                            steps: 5\r\n                        }\r\n                    },\r\n                    colors: {\r\n                        range: colorService.getColor('accent').toHex()\r\n                    }\r\n                }\r\n            }\r\n        };\r\n    }\r\n\r\n    updateValues() {\r\n        this.slider7.value = this.slider7.value as SliderValue;\r\n\r\n        if (!isNaN(Number(this.lowerValue))) {\r\n            this.slider7.value.low = Number(this.lowerValue);\r\n        }\r\n\r\n        if (!isNaN(Number(this.upperValue))) {\r\n            this.slider7.value.high = Number(this.upperValue);\r\n        }\r\n    }\r\n\r\n    valueHasChanged(value: SliderValue) {\r\n        this.slider7.value = value;\r\n\r\n        this.lowerValue = value.low.toString();\r\n        this.upperValue = value.high.toString();\r\n    }\r\n\r\n}\r\n\r\ninterface SliderExample {\r\n    value: number | SliderValue;\r\n    options: SliderOptions;\r\n}"}},2380:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ux-slider</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>value<span class="token punctuation">"</span></span> <span class="token attr-name">[options]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>options<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>ux-slider</span><span class="token punctuation">></span></span>',example:'<ux-slider [(value)]="value" [options]="options"></ux-slider>'}},2381:function(n,a){n.exports={snippet:'value<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token number">50</span><span class="token punctuation">;</span>',example:"value: number = 50;"}},2382:function(n,a){n.exports={snippet:'value<span class="token punctuation">:</span> SliderValue <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n    low<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span>\r\n    high<span class="token punctuation">:</span> <span class="token number">75</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">;</span>',example:"value: SliderValue = {\r\n    low: 25,\r\n    high: 75\r\n};"}},2383:function(n,a){n.exports={snippet:'options<span class="token punctuation">:</span> SliderOptions <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n    type<span class="token punctuation">:</span> SliderType<span class="token punctuation">.</span>Value<span class="token punctuation">,</span>\r\n    handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n        style<span class="token punctuation">:</span> SliderStyle<span class="token punctuation">.</span>Button<span class="token punctuation">,</span>\r\n        callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            trigger<span class="token punctuation">:</span> SliderCalloutTrigger<span class="token punctuation">.</span>None<span class="token punctuation">,</span>\r\n            background<span class="token punctuation">:</span> <span class="token string">\'#464646\'</span><span class="token punctuation">,</span>\r\n            color<span class="token punctuation">:</span> <span class="token string">\'#fff\'</span><span class="token punctuation">,</span>\r\n            formatter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">:</span> string <span class="token operator">|</span> number <span class="token operator">=></span> value\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n    track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n        height<span class="token punctuation">:</span> SliderSize<span class="token punctuation">.</span>Wide<span class="token punctuation">,</span>\r\n        min<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n        max<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>\r\n        ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            snap<span class="token punctuation">:</span> SliderSnap<span class="token punctuation">.</span>None<span class="token punctuation">,</span>\r\n            major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                show<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                steps<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\r\n                labels<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                formatter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">:</span> string <span class="token operator">|</span> number <span class="token operator">=></span> value\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                show<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                steps<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>\r\n                labels<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n                formatter<span class="token punctuation">:</span> <span class="token punctuation">(</span>value<span class="token punctuation">:</span> number<span class="token punctuation">)</span><span class="token punctuation">:</span> string <span class="token operator">|</span> number <span class="token operator">=></span> value\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n        colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            lower<span class="token punctuation">:</span> <span class="token string">\'#f2f2f2\'</span><span class="token punctuation">,</span>\r\n            range<span class="token punctuation">:</span> <span class="token string">\'rgba(96,121,141, 0.75)\'</span><span class="token punctuation">,</span>\r\n            higher<span class="token punctuation">:</span> <span class="token string">\'#f2f2f2\'</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">;</span>',example:"options: SliderOptions = {\r\n    type: SliderType.Value,\r\n    handles: {\r\n        style: SliderStyle.Button,\r\n        callout: {\r\n            trigger: SliderCalloutTrigger.None,\r\n            background: '#464646',\r\n            color: '#fff',\r\n            formatter: (value: number): string | number => value\r\n        }\r\n    },\r\n    track: {\r\n        height: SliderSize.Wide,\r\n        min: 0,\r\n        max: 100,\r\n        ticks: {\r\n            snap: SliderSnap.None,\r\n            major: {\r\n                show: true,\r\n                steps: 10,\r\n                labels: true,\r\n                formatter: (value: number): string | number => value\r\n            },\r\n            minor: {\r\n                show: true,\r\n                steps: 5,\r\n                labels: false,\r\n                formatter: (value: number): string | number => value\r\n            }\r\n        },\r\n        colors: {\r\n            lower: '#f2f2f2',\r\n            range: 'rgba(96,121,141, 0.75)',\r\n            higher: '#f2f2f2'\r\n        }\r\n    }\r\n};"}},2384: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\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-md-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>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-t-md p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Range Slider with Text Inputs<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</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\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-md-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>ux-slider</span> <span class="token attr-name">[value]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>value<span class="token punctuation">"</span></span> <span class="token attr-name">(valueChange)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>valueHasChanged($event)<span class="token punctuation">"</span></span> \r\n            <span class="token attr-name">[options]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>options<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>ux-slider</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\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>row m-t-sm p-t-xs<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-2<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>text<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 m-b<span class="token punctuation">"</span></span> <span class="token attr-name">[(ngModel)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>lowerValue<span class="token punctuation">"</span></span> \r\n            <span class="token attr-name">(blur)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>updateValues()<span class="token punctuation">"</span></span> <span class="token attr-name">(keyup.enter)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>updateValues()<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>col-sm-offset-8 col-sm-2<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>text<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 m-b<span class="token punctuation">"</span></span> <span class="token attr-name">[(ngModel)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>upperValue<span class="token punctuation">"</span></span> \r\n            <span class="token attr-name">(blur)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>updateValues()<span class="token punctuation">"</span></span> <span class="token attr-name">(keyup.enter)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>updateValues()<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>',example:'<div class="row">\r\n\r\n    <div class="col-md-12">\r\n        <h4 class="text-black p-t-md p-b-md">Range Slider with Text Inputs</h4>\r\n    </div>\r\n\r\n    <div class="col-md-12">\r\n        <ux-slider [value]="value" (valueChange)="valueHasChanged($event)" \r\n            [options]="options"></ux-slider>\r\n    </div>\r\n</div>\r\n\r\n<div class="row m-t-sm p-t-xs">\r\n    <div class="col-sm-2">\r\n        <input type="text" class="form-control m-b" [(ngModel)]="lowerValue" \r\n            (blur)="updateValues()" (keyup.enter)="updateValues()">\r\n    </div>\r\n    <div class="col-sm-offset-8 col-sm-2">\r\n        <input type="text" class="form-control m-b" [(ngModel)]="upperValue" \r\n            (blur)="updateValues()" (keyup.enter)="updateValues()">\r\n    </div>\r\n</div>'}},2385:function(n,a){n.exports={snippet:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@angular/core\'</span><span class="token punctuation">;</span>\r\n<span class="token keyword">import</span> <span class="token punctuation">{</span>\r\n    SliderValue<span class="token punctuation">,</span> SliderOptions<span class="token punctuation">,</span> ColorService<span class="token punctuation">,</span> SliderStyle<span class="token punctuation">,</span>\r\n    SliderCalloutTrigger<span class="token punctuation">,</span> SliderSnap<span class="token punctuation">,</span> SliderType\r\n<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'ux-aspects\'</span><span class="token punctuation">;</span>\r\n\r\n@<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\r\n    selector<span class="token punctuation">:</span> <span class="token string">\'my-slider-example\'</span><span class="token punctuation">,</span>\r\n    templateUrl<span class="token punctuation">:</span> <span class="token string">\'./slider.component.html\'</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\r\n<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">SliderExampleComponent</span> <span class="token punctuation">{</span>\r\n\r\n    value<span class="token punctuation">:</span> SliderValue <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        low<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span>\r\n        high<span class="token punctuation">:</span> <span class="token number">75</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    options<span class="token punctuation">:</span> SliderOptions<span class="token punctuation">;</span>\r\n\r\n    lowerValue<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token number">25</span><span class="token punctuation">;</span>\r\n    upperValue<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token number">75</span><span class="token punctuation">;</span>\r\n\r\n    <span class="token function">constructor</span><span class="token punctuation">(</span>colorService<span class="token punctuation">:</span> ColorService<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>options <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n            type<span class="token punctuation">:</span> SliderType<span class="token punctuation">.</span>Range<span class="token punctuation">,</span>\r\n            handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                style<span class="token punctuation">:</span> SliderStyle<span class="token punctuation">.</span>Line<span class="token punctuation">,</span>\r\n                callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    trigger<span class="token punctuation">:</span> SliderCalloutTrigger<span class="token punctuation">.</span>Hover<span class="token punctuation">,</span>\r\n                    background<span class="token punctuation">:</span> colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'accent\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\r\n                    formatter<span class="token punctuation">:</span> value <span class="token operator">=></span> value <span class="token operator">?</span> value<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> value\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    snap<span class="token punctuation">:</span> SliderSnap<span class="token punctuation">.</span>All<span class="token punctuation">,</span>\r\n                    major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        steps<span class="token punctuation">:</span> <span class="token number">25</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        steps<span class="token punctuation">:</span> <span class="token number">5</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    range<span class="token punctuation">:</span> colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'accent\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span>\r\n\r\n    <span class="token function">updateValues</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n\r\n        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>lowerValue<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n            <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">.</span>low <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>lowerValue<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token punctuation">}</span>\r\n\r\n        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">isNaN</span><span class="token punctuation">(</span><span class="token function">Number</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>upperValue<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n            <span class="token keyword">this</span><span class="token punctuation">.</span>value<span class="token punctuation">.</span>high <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>upperValue<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span>\r\n\r\n    <span class="token function">valueHasChanged</span><span class="token punctuation">(</span>value<span class="token punctuation">:</span> SliderValue<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>value <span class="token operator">=</span> value<span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>lowerValue <span class="token operator">=</span> value<span class="token punctuation">.</span>low<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>upperValue <span class="token operator">=</span> value<span class="token punctuation">.</span>high<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span>\r\n\r\n<span class="token punctuation">}</span>',example:"import { Component } from '@angular/core';\r\nimport {\r\n    SliderValue, SliderOptions, ColorService, SliderStyle,\r\n    SliderCalloutTrigger, SliderSnap, SliderType\r\n} from 'ux-aspects';\r\n\r\n@Component({\r\n    selector: 'my-slider-example',\r\n    templateUrl: './slider.component.html'\r\n})\r\nexport class SliderExampleComponent {\r\n\r\n    value: SliderValue = {\r\n        low: 25,\r\n        high: 75\r\n    };\r\n\r\n    options: SliderOptions;\r\n\r\n    lowerValue: number = 25;\r\n    upperValue: number = 75;\r\n\r\n    constructor(colorService: ColorService) {\r\n\r\n        this.options = {\r\n            type: SliderType.Range,\r\n            handles: {\r\n                style: SliderStyle.Line,\r\n                callout: {\r\n                    trigger: SliderCalloutTrigger.Hover,\r\n                    background: colorService.getColor('accent').toHex(),\r\n                    formatter: value => value ? value.toFixed(0) : value\r\n                }\r\n            },\r\n            track: {\r\n                ticks: {\r\n                    snap: SliderSnap.All,\r\n                    major: {\r\n                        steps: 25\r\n                    },\r\n                    minor: {\r\n                        steps: 5\r\n                    }\r\n                },\r\n                colors: {\r\n                    range: colorService.getColor('accent').toHex()\r\n                }\r\n            }\r\n        };\r\n    }\r\n\r\n    updateValues() {\r\n\r\n        if (!isNaN(Number(this.lowerValue))) {\r\n            this.value.low = Number(this.lowerValue);\r\n        }\r\n\r\n        if (!isNaN(Number(this.upperValue))) {\r\n            this.value.high = Number(this.upperValue);\r\n        }\r\n    }\r\n\r\n    valueHasChanged(value: SliderValue) {\r\n        this.value = value;\r\n\r\n        this.lowerValue = value.low.toString();\r\n        this.upperValue = value.high.toString();\r\n    }\r\n\r\n}"}},2386:function(n,a){n.exports='<div class="container-fluid">\r\n\r\n    <div class="row">\r\n\r\n        <div class="col-md-12">\r\n            <h4 class="text-black p-t-md p-b-md">Single Value Sliders</h4>\r\n        </div>\r\n\r\n        <div class="col-md-6 p-r-md p-b-md">\r\n            <p class="text-black p-b-md">Button Handle - Custom Labels</p>\r\n            <ux-slider [value]="slider1.value" [options]="slider1.options"></ux-slider>\r\n        </div>\r\n        <div class="col-md-6 p-l-md p-b-md">\r\n            <p class="text-black p-b-md">Line Handle - Callout on Drag</p>\r\n            <ux-slider [value]="slider2.value" [options]="slider2.options"></ux-slider>\r\n        </div>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <div class="row">\r\n\r\n        <div class="col-md-6 p-r-md p-b-md">\r\n            <p class="text-black p-b-md">Narrow - Track Styling - Snapping</p>\r\n            <ux-slider [value]="slider3.value" [options]="slider3.options"></ux-slider>\r\n        </div>\r\n        <div class="col-md-6 p-l-md p-b-md">\r\n            <p class="text-black p-b-md">Narrow - Gradient Track Styling - Callout on Hover</p>\r\n            <ux-slider [value]="slider4.value" [options]="slider4.options"></ux-slider>\r\n        </div>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <div class="row">\r\n\r\n        <div class="col-md-12">\r\n            <h4 class="text-black p-t-md p-b-md">Range Value Sliders</h4>\r\n        </div>\r\n\r\n        <div class="col-md-6 p-r-md p-b-md">\r\n            <p class="text-black p-b-lg">Range Track - Persistent Callout</p>\r\n            <ux-slider [value]="slider5.value" [options]="slider5.options"></ux-slider>\r\n        </div>\r\n        <div class="col-md-6 p-l-md p-b-md">\r\n            <p class="text-black p-b-lg">Range Track Style - Custom Callout Styles</p>\r\n            <ux-slider [value]="slider6.value" [options]="slider6.options"></ux-slider>\r\n        </div>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <div class="row">\r\n\r\n        <div class="col-md-12">\r\n            <h4 class="text-black p-t-md p-b-md">Range Slider with Text Inputs</h4>\r\n        </div>\r\n\r\n        <div class="col-md-12">\r\n            <ux-slider [value]="slider7.value" (valueChange)="valueHasChanged($event)" [options]="slider7.options"></ux-slider>\r\n        </div>\r\n    </div>\r\n\r\n    <div class="row m-t-sm p-t-xs">\r\n        <div class="col-sm-2">\r\n            <input type="text" class="form-control m-b" [(ngModel)]="lowerValue" (blur)="updateValues()" (keyup.enter)="updateValues()">\r\n        </div>\r\n        <div class="col-sm-offset-8 col-sm-2">\r\n            <input type="text" class="form-control m-b" [(ngModel)]="upperValue" (blur)="updateValues()" (keyup.enter)="updateValues()">\r\n        </div>\r\n    </div>\r\n\r\n</div>\r\n\r\n<hr>\r\n\r\n<p>The slider component can be used to allow a user to select a single value or a range of values. It can easily be customized\r\n    to match the desired appearance and behavior.</p>\r\n\r\n<h4>Slider Component</h4>\r\n\r\n<p>The component can be added to a page by using the following HTML:</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample1Html"></uxd-snippet>\r\n\r\n<blockquote>\r\n    <p>Reference Plunker for the code used in all examples above</p>\r\n</blockquote>\r\n\r\n\r\n<h4>Values</h4>\r\n\r\n<p>The value or range should be specified by adding an <code>value</code> attribute to the component tag. This should reference\r\n    either a single number or a <code>SliderValue</code> object, depending on the slider type specified.</p>\r\n\r\n<p>For single value selection, an example value might be:</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample1Ts" language="javascript"></uxd-snippet>\r\n\r\n<p>For range selection, an example value might be:</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample2Ts" language="javascript"></uxd-snippet>\r\n\r\n<p>The variable containing the value can be updated with the correct value, or values, when the slider is dragged if two way\r\n    binding is used.</p>\r\n\r\n<h4>Options</h4>\r\n\r\n<p>A wide range of options can used to customize the appearance and behavior of the component. These options should be stored\r\n    in an object and passed to the component by adding an <code>options</code> attribute to the directive.</p>\r\n\r\n<p>The default options for each chart are as follows:</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample3Ts" language="javascript"></uxd-snippet>\r\n\r\n<p>Full details on each property and the possible values for each can be found below. All properties are optional, if they are\r\n    not specified the default value will be used.</p>\r\n\r\n<h4>SliderOptions</h4>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Property</th>\r\n            <th>Type</th>\r\n            <th>Description</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">type</td>\r\n            <td>SliderType</td>\r\n            <td>Defines whether the slider should allow selection of a single value or a range of values. The two valid values\r\n                are <code>SliderType.Value</code> and <code>SliderType.Range</code>. The default value for this property\r\n                is <code>SliderType.Value</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">handles</td>\r\n            <td>SliderHandleOptions</td>            \r\n            <td>This should be an object that contains properties configuring the appearance and behavior of the draggable handles\r\n                on the slider. If not specified the default options will be used.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">track</td>\r\n            <td>SliderTrackOptions</td>                        \r\n            <td>This should be an object that contains properties configuring the appearance and behavior of the track on the\r\n                slider. If not specified the default options will be used.</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<h4>SliderHandleOptions</h4>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Property</th>\r\n            <th>Type</th>\r\n            <th>Description</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">style</td>\r\n            <td>SliderStyle</td>\r\n            <td>This allows you to choose the appearance of the drag handles. The two available options are <code>SliderStyle.Button</code>\r\n            and <code>SliderStyle.Line</code>. The default option is <code>SliderStyle.Button</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">callout</td>\r\n            <td>SliderCallout</td>\r\n            <td>This should be an object that configures the appearance and behavior of the drag handle callout. If not specified\r\n                no callout will be shown.</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<h4>SliderCallout</h4>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Property</th>\r\n            <th>Type</th>\r\n            <th>Description</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">trigger</td>\r\n            <td>SliderCalloutTrigger</td>\r\n            <td>This option will specify when the callout should appear. The available options are:\r\n                <br>\r\n                <ul>\r\n                    <li><code>SliderCalloutTrigger.None</code> - The callout will never appear. This is the default option.</li>\r\n                    <li><code>SliderCalloutTrigger.Hover</code> - The callout will appear when the mouse is over the handle and will remain visible\r\n                        when dragging the handle.</li>\r\n                    <li><code>SliderCalloutTrigger.Drag</code> - The callout will appear only when the handle is being dragged.</li>\r\n                    <li><code>SliderCalloutTrigger.Persistent</code> - The callout will always be visible.</li>\r\n                </ul>\r\n            </td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">background</td>\r\n            <td>string</td>\r\n            <td>Specifies the background color of the callout. The default value is <code>grey2</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">color</td>\r\n            <td>string</td>\r\n            <td>Specifies the text color of the callout. The default value is <code>white</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">formatter</td>\r\n            <td>(value: number) => string | number</td>\r\n            <td>This allows you to specify a function that will format the value in the callout. The function should accept the\r\n                value as a parameter and return the modified value. By default the value will not be modified.</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<h4>SliderTrackOptions</h4>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Property</th>\r\n            <th>Type</th>\r\n            <th>Description</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">height</td>\r\n            <td>SliderSize</td>\r\n            <td>This specifies the height of the track. There are two available values, <code>SliderSize.Wide</code> and <code>SliderSize.Narrow</code>.\r\n                The default value is <code>SliderSize.Wide</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">min</td>\r\n            <td>number</td>\r\n            <td>Specifies the minimum value shown on the slider. The default is <code>0</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">max</td>\r\n            <td>number</td>\r\n            <td>Specifies the maximum value shown on the slider. The default is <code>100</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">ticks</td>\r\n            <td>SliderTicksOptions</td>\r\n            <td>Should be an object containing properties to customize the ticks shown beneath the chart. By default major ticks\r\n                are shown on every 10th value with labels, minor ticks are shown every 5 values with no labels.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">colors</td>\r\n            <td>SliderTrackColors</td>\r\n            <td>Specifies the colors that should be used on different parts of the track. This should be an object that can contain\r\n                the following properties:\r\n                <br>\r\n                <br>\r\n                <ul>\r\n                    <li><code>lower</code> - Specifies the color or colors to be shown in the area before the first drag handle.\r\n                        This can be a string containing a color value or an array of strings which will result in a gradient.</li>\r\n                    <li><code>range</code> - Specifies the color or colors to be shown in the area between the first and second\r\n                        drag handle (the selected range of values). This only applies when a range of values can be selected.\r\n                        This can be a string containing a color value or an array of strings which will result in a gradient.</li>\r\n                    <li><code>higher</code> - Specifies the color or colors to be shown in the area after the last drag handle.\r\n                        This can be a string containing a color value or an array of strings which will result in a gradient.</li>\r\n                </ul>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<h4>SliderTicksOptions</h4>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Property</th>\r\n            <th>Type</th>\r\n            <th>Description</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">snap</td>\r\n            <td>SliderSnap</td>\r\n            <td>Specifies if the slider should snap to the ticks. There are several available options:\r\n                <br>\r\n                <br>\r\n                <ul>\r\n                    <li><code>SliderSnap.None</code> - No snapping will occur. This is the default value.</li>\r\n                    <li><code>SliderSnap.Major</code> - Will snap to the major ticks.</li>\r\n                    <li><code>SliderSnap.Minor</code> - Will snap to the minor ticks.</li>\r\n                    <li><code>SliderSnap.All</code> - Will snap to both the major and minor ticks.</li>\r\n                </ul>\r\n            </td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">major</td>\r\n            <td>SliderTickOptions</td>\r\n            <td>Should be an object containing properties that configure the major ticks. Major ticks will be more prominent\r\n                than minor ticks and tend to be less frequent.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">minor</td>\r\n            <td>SliderTickOptions</td>\r\n            <td>Should be an object containing properties that configure the minor ticks. Minor ticks will be less prominent\r\n                than major ticks and tend to be more frequent.</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<h4>SliderTickOptions</h4>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Property</th>\r\n            <th>Type</th>\r\n            <th>Description</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">show</td>\r\n            <td>boolean</td>\r\n            <td>Specifies whether this variety of ticks should be shown. The available options are <code>true</code> or <code>false</code>.\r\n                By default both major and minor ticks will be shown.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">steps</td>\r\n            <td>number | number[]</td>\r\n            <td>Specifies at what interval this variety of tick should appear. Default for major ticks is <code>10</code>, the\r\n                default for minor ticks is <code>5</code>. Additionally this can be an array containing precise values of\r\n                where ticks should appear. This can be useful when ticks should not appear at regular intervals.\r\n            </td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">labels</td>\r\n            <td>boolean</td>\r\n            <td>Specifies whether or not this variety of ticks should display labels. The available options are <code>true</code>                or <code>false</code>. By default major ticks will show labels, minor ticks will not.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">formatter</td>\r\n            <td>(value: number) => string | number</td>\r\n            <td>This allows you to specify a function that will format the value in the tick label. This should accept a value\r\n                as a parameter and return a modified value. By default the value will not be modified.</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<h4>Adding Text Input Controls</h4>\r\n\r\n<p>Text inputs, or other controls can be used to allow users to change the value shown on the slider or to display the value\r\n    the slider has selected. These controls are not part of the slider component but can be easily combined by using the\r\n    <code>ngModel</code> directive. Below is an example of how this can be achieved:</p>\r\n\r\n<tabset>\r\n    <tab heading="HTML">\r\n        <uxd-snippet language="html" [content]="snippets.compiled.sample4Html"></uxd-snippet>\r\n    </tab>\r\n    <tab heading="TypeScript">\r\n        <uxd-snippet language="javascript" [content]="snippets.compiled.sample4Ts"></uxd-snippet>\r\n    </tab>\r\n</tabset>'},2387: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(2388))||this;return a.codepen={html:a.snippets.raw.codepenHtml,htmlAttributes:{"ng-controller":"SlidersCtrl as vm"},js:[a.snippets.raw.codepenJs]},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-components-sliders-ng1",template:s(2396),changeDetection:o.ChangeDetectionStrategy.OnPush}),c.DocumentationSectionComponent("ComponentsSlidersNg1Component"),e("design:paramtypes",[])],u),a.ComponentsSlidersNg1Component=u},2388: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={"./codepen.html":2389,"./codepen.js":2390,"./sample1.html":2391,"./sample1.js":2392,"./sample2.html":2393,"./sample2.js":2394,"./sample3.js":2395};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2388},2389: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>container-fluid<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>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\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-md-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>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-t-md p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Single Value Sliders<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</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\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-md-6 p-r-md p-b-md<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Button Handle - Custom Labels<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slider</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider1.value<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider1.options<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>slider</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>col-md-6 p-l-md p-b-md<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Line Handle - Callout on Drag<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slider</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider2.value<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider2.options<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>slider</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\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</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>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\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-md-6 p-r-md p-b-md<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Narrow - Track Styling - Snapping<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slider</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider3.value<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider3.options<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>slider</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>col-md-6 p-l-md p-b-md<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Narrow - Gradient Track Styling - Callout on Hover<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slider</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider4.value<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider4.options<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>slider</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\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</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>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\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-md-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>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-t-md p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Range Value Sliders<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</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\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-md-6 p-r-md p-b-md<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-b-lg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Range Track - Persistent Callout<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slider</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider5.value<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider5.options<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>slider</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>col-md-6 p-l-md p-b-md<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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-b-lg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Range Track Style - Custom Callout Styles<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slider</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider6.value<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider6.options<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>slider</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\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</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>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\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-md-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>h4</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-black p-t-md p-b-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Range Slider with Text Inputs<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</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\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-md-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>slider</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider7.value<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.slider7.options<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>slider</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\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>row m-t-sm p-t-xs<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-2<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>text<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 m-b<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>vm.slider7.value.low<span class="token punctuation">"</span></span> <span class="token attr-name">ng-model-options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{ debounce: 500 }<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>col-sm-offset-8 col-sm-2<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>text<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 m-b<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>vm.slider7.value.high<span class="token punctuation">"</span></span> <span class="token attr-name">ng-model-options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{ debounce: 500 }<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\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="container-fluid">\r\n\r\n    <div class="row">\r\n\r\n        <div class="col-md-12">\r\n            <h4 class="text-black p-t-md p-b-md">Single Value Sliders</h4>\r\n        </div>\r\n\r\n        <div class="col-md-6 p-r-md p-b-md">\r\n            <p class="text-black p-b-md">Button Handle - Custom Labels</p>\r\n            <slider ng-model="vm.slider1.value" options="vm.slider1.options"></slider>\r\n        </div>\r\n        <div class="col-md-6 p-l-md p-b-md">\r\n            <p class="text-black p-b-md">Line Handle - Callout on Drag</p>\r\n            <slider ng-model="vm.slider2.value" options="vm.slider2.options"></slider>\r\n        </div>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <div class="row">\r\n\r\n        <div class="col-md-6 p-r-md p-b-md">\r\n            <p class="text-black p-b-md">Narrow - Track Styling - Snapping</p>\r\n            <slider ng-model="vm.slider3.value" options="vm.slider3.options"></slider>\r\n        </div>\r\n        <div class="col-md-6 p-l-md p-b-md">\r\n            <p class="text-black p-b-md">Narrow - Gradient Track Styling - Callout on Hover</p>\r\n            <slider ng-model="vm.slider4.value" options="vm.slider4.options"></slider>\r\n        </div>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <div class="row">\r\n\r\n        <div class="col-md-12">\r\n            <h4 class="text-black p-t-md p-b-md">Range Value Sliders</h4>\r\n        </div>\r\n\r\n        <div class="col-md-6 p-r-md p-b-md">\r\n            <p class="text-black p-b-lg">Range Track - Persistent Callout</p>\r\n            <slider ng-model="vm.slider5.value" options="vm.slider5.options"></slider>\r\n        </div>\r\n        <div class="col-md-6 p-l-md p-b-md">\r\n            <p class="text-black p-b-lg">Range Track Style - Custom Callout Styles</p>\r\n            <slider ng-model="vm.slider6.value" options="vm.slider6.options"></slider>\r\n        </div>\r\n    </div>\r\n\r\n    <hr>\r\n\r\n    <div class="row">\r\n\r\n        <div class="col-md-12">\r\n            <h4 class="text-black p-t-md p-b-md">Range Slider with Text Inputs</h4>\r\n        </div>\r\n\r\n        <div class="col-md-12">\r\n            <slider ng-model="vm.slider7.value" options="vm.slider7.options"></slider>\r\n        </div>\r\n    </div>\r\n\r\n    <div class="row m-t-sm p-t-xs">\r\n        <div class="col-sm-2">\r\n            <input type="text" class="form-control m-b" ng-model="vm.slider7.value.low" ng-model-options="{ debounce: 500 }">\r\n        </div>\r\n        <div class="col-sm-offset-8 col-sm-2">\r\n            <input type="text" class="form-control m-b" ng-model="vm.slider7.value.high" ng-model-options="{ debounce: 500 }">\r\n        </div>\r\n    </div>\r\n\r\n</div>'}},2390: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">\'SlidersCtrl\'</span><span class="token punctuation">,</span> SlidersCtrl<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\nSlidersCtrl<span class="token punctuation">.</span>$inject <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">\'$colorService\'</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">SlidersCtrl</span><span class="token punctuation">(</span>$colorService<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n    <span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>slider1 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        value<span class="token punctuation">:</span> <span class="token number">50</span><span class="token punctuation">,</span>\r\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        steps<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                        labels<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                        formatter<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                            <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                                <span class="token keyword">return</span> <span class="token string">\'Minimum\'</span><span class="token punctuation">;</span>\r\n                            <span class="token punctuation">}</span>\r\n                            <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">===</span> <span class="token number">50</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                                <span class="token keyword">return</span> <span class="token string">\'Default\'</span><span class="token punctuation">;</span>\r\n                            <span class="token punctuation">}</span>\r\n                            <span class="token keyword">if</span> <span class="token punctuation">(</span>value <span class="token operator">===</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                                <span class="token keyword">return</span> <span class="token string">\'Maximum\'</span><span class="token punctuation">;</span>\r\n                            <span class="token punctuation">}</span>\r\n                        <span class="token punctuation">}</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        show<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>slider2 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        value<span class="token punctuation">:</span> <span class="token number">3.8</span><span class="token punctuation">,</span>\r\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                style<span class="token punctuation">:</span> <span class="token string">\'line\'</span><span class="token punctuation">,</span>\r\n                callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    trigger<span class="token punctuation">:</span> <span class="token string">\'drag\'</span><span class="token punctuation">,</span>\r\n                    formatter<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                        <span class="token keyword">return</span> value <span class="token operator">?</span> value<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> value<span class="token punctuation">;</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                min<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n                max<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>\r\n                ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        steps<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n                        labels<span class="token punctuation">:</span> <span class="token boolean">true</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        steps<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n                        labels<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>slider3 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        value<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>\r\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                min<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n                max<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>\r\n                height<span class="token punctuation">:</span> <span class="token string">\'narrow\'</span><span class="token punctuation">,</span>\r\n                ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    snap<span class="token punctuation">:</span> <span class="token string">\'all\'</span><span class="token punctuation">,</span>\r\n                    major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        steps<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>\r\n                        labels<span class="token punctuation">:</span> <span class="token boolean">true</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        steps<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n                        labels<span class="token punctuation">:</span> <span class="token boolean">true</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    lower<span class="token punctuation">:</span> $colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'accent\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>slider4 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        value<span class="token punctuation">:</span> <span class="token number">60</span><span class="token punctuation">,</span>\r\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                style<span class="token punctuation">:</span> <span class="token string">\'line\'</span><span class="token punctuation">,</span>\r\n                callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    trigger<span class="token punctuation">:</span> <span class="token string">\'hover\'</span><span class="token punctuation">,</span>\r\n                    formatter<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                        <span class="token keyword">return</span> value <span class="token operator">?</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">:</span> value<span class="token punctuation">;</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                height<span class="token punctuation">:</span> <span class="token string">\'narrow\'</span><span class="token punctuation">,</span>\r\n                ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        steps<span class="token punctuation">:</span> <span class="token number">50</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        steps<span class="token punctuation">:</span> <span class="token number">10</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    higher<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">\'#fdf690\'</span><span class="token punctuation">,</span> <span class="token string">\'#f14a50\'</span><span class="token punctuation">]</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>slider5 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        value<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            low<span class="token punctuation">:</span> <span class="token number">1234</span><span class="token punctuation">,</span>\r\n            high<span class="token punctuation">:</span> <span class="token number">9876</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            type<span class="token punctuation">:</span> <span class="token string">\'range\'</span><span class="token punctuation">,</span>\r\n            handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    trigger<span class="token punctuation">:</span> <span class="token string">\'persistent\'</span><span class="token punctuation">,</span>\r\n                    formatter<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                        <span class="token keyword">return</span> value <span class="token operator">?</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">:</span> value<span class="token punctuation">;</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                height<span class="token punctuation">:</span> <span class="token string">\'narrow\'</span><span class="token punctuation">,</span>\r\n                min<span class="token punctuation">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>\r\n                max<span class="token punctuation">:</span> <span class="token number">10000</span><span class="token punctuation">,</span>\r\n                ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        show<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        show<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    range<span class="token punctuation">:</span> $colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'accent\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>slider6 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        value<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            low<span class="token punctuation">:</span> <span class="token number">22</span><span class="token punctuation">,</span>\r\n            high<span class="token punctuation">:</span> <span class="token number">76</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            type<span class="token punctuation">:</span> <span class="token string">\'range\'</span><span class="token punctuation">,</span>\r\n            handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                style<span class="token punctuation">:</span> <span class="token string">\'line\'</span><span class="token punctuation">,</span>\r\n                callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    trigger<span class="token punctuation">:</span> <span class="token string">\'hover\'</span><span class="token punctuation">,</span>\r\n                    background<span class="token punctuation">:</span> $colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'accent\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\r\n                    formatter<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                        <span class="token keyword">return</span> value <span class="token operator">?</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">:</span> value<span class="token punctuation">;</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                height<span class="token punctuation">:</span> <span class="token string">\'narrow\'</span><span class="token punctuation">,</span>\r\n                ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        steps<span class="token punctuation">:</span> <span class="token number">25</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        steps<span class="token punctuation">:</span> <span class="token number">5</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    range<span class="token punctuation">:</span> $colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'alternate1\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>slider7 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        value<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            low<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span>\r\n            high<span class="token punctuation">:</span> <span class="token number">75</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            type<span class="token punctuation">:</span> <span class="token string">\'range\'</span><span class="token punctuation">,</span>\r\n            handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                style<span class="token punctuation">:</span> <span class="token string">\'line\'</span><span class="token punctuation">,</span>\r\n                callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    trigger<span class="token punctuation">:</span> <span class="token string">\'hover\'</span><span class="token punctuation">,</span>\r\n                    background<span class="token punctuation">:</span> $colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'accent\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\r\n                    formatter<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                        <span class="token keyword">return</span> value <span class="token operator">?</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">:</span> value<span class="token punctuation">;</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    snap<span class="token punctuation">:</span> <span class="token string">\'all\'</span><span class="token punctuation">,</span>\r\n                    major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        steps<span class="token punctuation">:</span> <span class="token number">25</span>\r\n                    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                    minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                        steps<span class="token punctuation">:</span> <span class="token number">5</span>\r\n                    <span class="token punctuation">}</span>\r\n                <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n                colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                    range<span class="token punctuation">:</span> $colorService<span class="token punctuation">.</span><span class="token function">getColor</span><span class="token punctuation">(</span><span class="token string">\'accent\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toHex</span><span class="token punctuation">(</span><span class="token punctuation">)</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:"angular.module('app').controller('SlidersCtrl', SlidersCtrl);\r\n\r\nSlidersCtrl.$inject = ['$colorService'];\r\n\r\nfunction SlidersCtrl($colorService) {\r\n    var vm = this;\r\n\r\n    vm.slider1 = {\r\n        value: 50,\r\n        options: {\r\n            track: {\r\n                ticks: {\r\n                    major: {\r\n                        steps: [0, 50, 100],\r\n                        labels: true,\r\n                        formatter: function (value) {\r\n                            if (value === 0) {\r\n                                return 'Minimum';\r\n                            }\r\n                            if (value === 50) {\r\n                                return 'Default';\r\n                            }\r\n                            if (value === 100) {\r\n                                return 'Maximum';\r\n                            }\r\n                        }\r\n                    },\r\n                    minor: {\r\n                        show: false\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    };\r\n\r\n    vm.slider2 = {\r\n        value: 3.8,\r\n        options: {\r\n            handles: {\r\n                style: 'line',\r\n                callout: {\r\n                    trigger: 'drag',\r\n                    formatter: function (value) {\r\n                        return value ? value.toFixed(1) : value;\r\n                    }\r\n                }\r\n            },\r\n            track: {\r\n                min: 1,\r\n                max: 5,\r\n                ticks: {\r\n                    major: {\r\n                        steps: [1, 5],\r\n                        labels: true\r\n                    },\r\n                    minor: {\r\n                        steps: 1,\r\n                        labels: false\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    };\r\n\r\n    vm.slider3 = {\r\n        value: 4,\r\n        options: {\r\n            track: {\r\n                min: 0,\r\n                max: 5,\r\n                height: 'narrow',\r\n                ticks: {\r\n                    snap: 'all',\r\n                    major: {\r\n                        steps: 5,\r\n                        labels: true\r\n                    },\r\n                    minor: {\r\n                        steps: 1,\r\n                        labels: true\r\n                    }\r\n                },\r\n                colors: {\r\n                    lower: $colorService.getColor('accent').toHex()\r\n                }\r\n            }\r\n        }\r\n    };\r\n\r\n    vm.slider4 = {\r\n        value: 60,\r\n        options: {\r\n            handles: {\r\n                style: 'line',\r\n                callout: {\r\n                    trigger: 'hover',\r\n                    formatter: function (value) {\r\n                        return value ? parseInt(value) : value;\r\n                    }\r\n                }\r\n            },\r\n            track: {\r\n                height: 'narrow',\r\n                ticks: {\r\n                    major: {\r\n                        steps: 50\r\n                    },\r\n                    minor: {\r\n                        steps: 10\r\n                    }\r\n                },\r\n                colors: {\r\n                    higher: ['#fdf690', '#f14a50']\r\n                }\r\n            }\r\n        }\r\n    };\r\n\r\n    vm.slider5 = {\r\n        value: {\r\n            low: 1234,\r\n            high: 9876\r\n        },\r\n        options: {\r\n            type: 'range',\r\n            handles: {\r\n                callout: {\r\n                    trigger: 'persistent',\r\n                    formatter: function (value) {\r\n                        return value ? parseInt(value) : value;\r\n                    }\r\n                }\r\n            },\r\n            track: {\r\n                height: 'narrow',\r\n                min: 1000,\r\n                max: 10000,\r\n                ticks: {\r\n                    major: {\r\n                        show: false\r\n                    },\r\n                    minor: {\r\n                        show: false\r\n                    }\r\n                },\r\n                colors: {\r\n                    range: $colorService.getColor('accent').toHex()\r\n                }\r\n            }\r\n        }\r\n    };\r\n\r\n    vm.slider6 = {\r\n        value: {\r\n            low: 22,\r\n            high: 76\r\n        },\r\n        options: {\r\n            type: 'range',\r\n            handles: {\r\n                style: 'line',\r\n                callout: {\r\n                    trigger: 'hover',\r\n                    background: $colorService.getColor('accent').toHex(),\r\n                    formatter: function (value) {\r\n                        return value ? parseInt(value) : value;\r\n                    }\r\n                }\r\n            },\r\n            track: {\r\n                height: 'narrow',\r\n                ticks: {\r\n                    major: {\r\n                        steps: 25\r\n                    },\r\n                    minor: {\r\n                        steps: 5\r\n                    }\r\n                },\r\n                colors: {\r\n                    range: $colorService.getColor('alternate1').toHex()\r\n                }\r\n            }\r\n        }\r\n    };\r\n\r\n    vm.slider7 = {\r\n        value: {\r\n            low: 25,\r\n            high: 75\r\n        },\r\n        options: {\r\n            type: 'range',\r\n            handles: {\r\n                style: 'line',\r\n                callout: {\r\n                    trigger: 'hover',\r\n                    background: $colorService.getColor('accent').toHex(),\r\n                    formatter: function (value) {\r\n                        return value ? parseInt(value) : value;\r\n                    }\r\n                }\r\n            },\r\n            track: {\r\n                ticks: {\r\n                    snap: 'all',\r\n                    major: {\r\n                        steps: 25\r\n                    },\r\n                    minor: {\r\n                        steps: 5\r\n                    }\r\n                },\r\n                colors: {\r\n                    range: $colorService.getColor('accent').toHex()\r\n                }\r\n            }\r\n        }\r\n    };\r\n}"}},2391:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slider</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.value<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.options<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>slider</span><span class="token punctuation">></span></span>',example:'<slider ng-model="vm.value" options="vm.options"></slider>'}},2392:function(n,a){n.exports={snippet:'vm<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token number">50</span><span class="token punctuation">;</span>',example:"vm.value = 50;"}},2393:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slider</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.value<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.options<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>slider</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">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form-control m-b<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>vm.value<span class="token punctuation">"</span></span> <span class="token attr-name">ng-model-options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>{ debounce: 500 }<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>',example:'<slider ng-model="vm.value" options="vm.options"></slider>\r\n<input type="text" class="form-control m-b" ng-model="vm.value" ng-model-options="{ debounce: 500 }">'}},2394:function(n,a){n.exports={snippet:'vm<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n    low<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span>\r\n    high<span class="token punctuation">:</span> <span class="token number">75</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">;</span>',example:"vm.value = {\r\n    low: 25,\r\n    high: 75\r\n};"}},2395:function(n,a){n.exports={snippet:'vm<span class="token punctuation">.</span>options <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n    type<span class="token punctuation">:</span> <span class="token string">\'value\'</span><span class="token punctuation">,</span>\r\n    handles<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n        style<span class="token punctuation">:</span> <span class="token string">\'button\'</span><span class="token punctuation">,</span>\r\n        callout<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            trigger<span class="token punctuation">:</span> <span class="token string">\'none\'</span><span class="token punctuation">,</span>\r\n            background<span class="token punctuation">:</span> <span class="token string">\'#464646\'</span><span class="token punctuation">,</span>\r\n            color<span class="token punctuation">:</span> <span class="token string">\'#fff\'</span><span class="token punctuation">,</span>\r\n            formatter<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                <span class="token keyword">return</span> value<span class="token punctuation">;</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n    track<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n        height<span class="token punctuation">:</span> <span class="token string">\'wide\'</span><span class="token punctuation">,</span>\r\n        min<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>\r\n        max<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>\r\n        ticks<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            snap<span class="token punctuation">:</span> <span class="token string">\'none\'</span><span class="token punctuation">,</span>\r\n            major<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                show<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                steps<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>\r\n                labels<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                formatter<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                    <span class="token keyword">return</span> value<span class="token punctuation">;</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n            minor<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n                show<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n                steps<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>\r\n                labels<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n                formatter<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                    <span class="token keyword">return</span> value<span class="token punctuation">;</span>\r\n                <span class="token punctuation">}</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n        colors<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            lower<span class="token punctuation">:</span> <span class="token string">\'#f2f2f2\'</span><span class="token punctuation">,</span>\r\n            range<span class="token punctuation">:</span> <span class="token string">\'#7b63a3\'</span><span class="token punctuation">,</span>\r\n            higher<span class="token punctuation">:</span> <span class="token string">\'#f2f2f2\'</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">;</span>',example:"vm.options = {\r\n    type: 'value',\r\n    handles: {\r\n        style: 'button',\r\n        callout: {\r\n            trigger: 'none',\r\n            background: '#464646',\r\n            color: '#fff',\r\n            formatter: function (value) {\r\n                return value;\r\n            }\r\n        }\r\n    },\r\n    track: {\r\n        height: 'wide',\r\n        min: 0,\r\n        max: 100,\r\n        ticks: {\r\n            snap: 'none',\r\n            major: {\r\n                show: true,\r\n                steps: 10,\r\n                labels: true,\r\n                formatter: function (value) {\r\n                    return value;\r\n                }\r\n            },\r\n            minor: {\r\n                show: true,\r\n                steps: 5,\r\n                labels: false,\r\n                formatter: function (value) {\r\n                    return value;\r\n                }\r\n            }\r\n        },\r\n        colors: {\r\n            lower: '#f2f2f2',\r\n            range: '#7b63a3',\r\n            higher: '#f2f2f2'\r\n        }\r\n    }\r\n};"}},2396:function(n,a){n.exports='<uxd-sliders-wrapper></uxd-sliders-wrapper>\r\n\r\n<hr>\r\n\r\n<p>The slider component can be used to allow a user to select a single value or a range of values. It can easily be customized\r\n    to match the desired appearance and behavior.</p>\r\n\r\n<h4>Slider Directive</h4>\r\n\r\n<p>The component can be added to a page by using the following HTML:</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample1Html"></uxd-snippet>\r\n\r\n<blockquote>\r\n    <p>Reference the CodePen for the code used in all examples above</p>\r\n</blockquote>\r\n\r\n<h4>Values</h4>\r\n\r\n<p>The value or range should be specified by adding an <code>ng-model</code> attribute to the directive. This should reference\r\n    either a value or an object in your controller, depending on the slider type specified in the chart options.</p>\r\n\r\n<p>For single value selection, an example of the data in the controller may be:</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample1Js" language="javascript"></uxd-snippet>\r\n\r\n<p>For range selection, an example of the data in the controller may be:</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample2Js" language="javascript"></uxd-snippet>\r\n\r\n<p>The variable in the controller will be updated with the correct value, or values, when the slider is dragged.</p>\r\n\r\n<h4>Options</h4>\r\n\r\n<p>A wide ranges of options can be configured to customize the control. These options should be stored in the controller and\r\n    passed to the control by adding an <code>options</code> attribute to the directive.</p>\r\n\r\n<p>The default options for each chart are as follows:</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample3Js" language="javascript"></uxd-snippet>\r\n\r\n<p>Full details on each property and the possible values for each can be found below. All properties are optional, if they are\r\n    not specified the default value will be used.</p>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Property</th>\r\n            <th>Description</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">type</td>\r\n            <td>Defines whether the slider should allow selection of a single value or a range of values. The two valid values\r\n                are <code>value</code> and <code>range</code>. The default value for this property is <code>value</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">handles</td>\r\n            <td>This should be an object that contains properties configuring the appearance and behavior of the draggable handles\r\n                on the slider. If not specified the default options will be used.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">track</td>\r\n            <td>This should be an object that contains properties configuring the appearance and behavior of the track on the\r\n                slider. If not specified the default options will be used.</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<h4>Handle Options</h4>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Property</th>\r\n            <th>Description</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">style</td>\r\n            <td>This allows you to choose the appearance of the drag handles. The two available options are <code>button</code>                and <code>line</code>. The default option is <code>button</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">callout</td>\r\n            <td>This should be an object that configures the appearance and behavior of the drag handle callout. If not specified\r\n                no callout will be shown.</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<h4>Callout Options</h4>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Property</th>\r\n            <th>Description</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">trigger</td>\r\n            <td>This option will specify when the callout should appear. The available options are:\r\n                <br>\r\n                <ul>\r\n                    <li><code>none</code> - The callout will never appear. This is the default option.</li>\r\n                    <li><code>hover</code> - The callout will appear when the mouse is over the handle and will remain visible\r\n                        when dragging the handle.</li>\r\n                    <li><code>drag</code> - The callout will appear only when the handle is being dragged.</li>\r\n                    <li><code>persistent</code> - The callout will always be visible.</li>\r\n                </ul>\r\n            </td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">background</td>\r\n            <td>Specified the background color of the callout. The default value is <code>#464646</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">color</td>\r\n            <td>Specified the text color of the callout. The default value is <code>#fff</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">formatter</td>\r\n            <td>This allows you to specify a function that will format the value in the callout. The function should accept the\r\n                value as a parameter and return the modified value. By default the value will not be modified.</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<h4>Track Options</h4>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Property</th>\r\n            <th>Description</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">height</td>\r\n            <td>This specifies the height of the track. There are two available values, <code>wide</code> and <code>narrow</code>.\r\n                The default value is <code>wide</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">min</td>\r\n            <td>Specifies the minimum value shown on the slider. The default is <code>0</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">max</td>\r\n            <td>Specifies the maximum value shown on the slider. The default is <code>100</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">ticks</td>\r\n            <td>Should be an object containing properties to customize the ticks shown beneath the chart. By default major ticks\r\n                are shown on every 10th value with labels, minor ticks are shown every 5 values with no labels.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">colors</td>\r\n            <td>Specifies the colors that should be used on different parts of the track. This should be an object that can contain\r\n                the following properties:\r\n                <br>\r\n                <br>\r\n                <ul>\r\n                    <li><code>lower</code> - Specifies the color or colors to be shown in the area before the first drag handle.\r\n                        This can be a string containing a color value or an array of strings which will result in a gradient.</li>\r\n                    <li><code>range</code> - Specifies the color or colors to be shown in the area between the first and second\r\n                        drag handle (the selected range of values). This only applies when a range of values can be selected.\r\n                        This can be a string containing a color value or an array of strings which will result in a gradient.</li>\r\n                    <li><code>higher</code> - Specifies the color or colors to be shown in the area after the last drag handle.\r\n                        This can be a string containing a color value or an array of strings which will result in a gradient.</li>\r\n                </ul>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<h4>Tick Options</h4>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Property</th>\r\n            <th>Description</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">snap</td>\r\n            <td>Specifies if the slider should snap to the ticks. There are several available options:\r\n                <br>\r\n                <br>\r\n                <ul>\r\n                    <li><code>none</code> - No snapping will occur. This is the default value.</li>\r\n                    <li><code>major</code> - Will snap to the major ticks.</li>\r\n                    <li><code>minor</code> - Will snap to the minor ticks.</li>\r\n                    <li><code>all</code> - Will snap to both the major and minor ticks.</li>\r\n                </ul>\r\n            </td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">major</td>\r\n            <td>Should be an object containing properties that configure the major ticks. Major ticks will be more prominent\r\n                that minor ticks and tend to be less frequent.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">minor</td>\r\n            <td>Should be an object containing properties that configure the minor ticks. Minor ticks will be less prominent\r\n                that major ticks and tend to be more frequent.</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<h4>Major & Minor Tick Options</h4>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table">\r\n        <tr>\r\n            <th>Property</th>\r\n            <th>Description</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">show</td>\r\n            <td>Specifies whether this variety of ticks should be shown. The available options are <code>true</code> or <code>false</code>.\r\n                By default both major and minor ticks will be shown.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">steps</td>\r\n            <td>Specifies at what interval this variety of tick should appear. Default for major ticks is <code>10</code>, the\r\n                default for minor ticks is <code>5</code>. Additionally this can be an array containing precise values of\r\n                when ticks should appear. This can be useful when ticks should not appear at regular intervals.\r\n            </td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">labels</td>\r\n            <td>Specifies whether or not this variety of ticks should display labels. The available options are <code>true</code>                or <code>false</code>. By default major ticks will show labels, minor ticks will not.</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">formatter</td>\r\n            <td>This allows you to specify a function that will format the value in the tick label. This should accept a value\r\n                as a parameter and return a modified value. By default the value will not be modified.</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<h4>Adding Text Input Controls</h4>\r\n\r\n<p>Text inputs, or other controls can be used to allow users to change the value shown on the slider or to display the value\r\n    the slider has selected. These controls are not part of the slider component but can be easily combined by using the\r\n    <code>ng-model</code> directive. Adding this directive to a text input control and binding to the same value as the slider\r\n    will result in both controls displaying the same value, and if one is updated the other will update also. It may also\r\n    be useful to debounce the update in text controls to allow users to finish typing before updating the slider. For example:</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample2Html"></uxd-snippet>'},2397: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(1713),c=s(407),l=s(1720),u=s(0),r=function(n){function a(){var a=n.call(this,s(2398))||this;return a.tags=["Alpha","Beta","Kappa"],a.allTags=["Alpha","Beta","Gamma","Delta","Epsilon","Zeta","Eta","Theta","Iota","Kappa","Lambda","Mu","Nu","Xi","Omicron","Pi","Rho","Sigma","Tau","Upsilon","Phi","Chi","Psi","Omega"],a.addOnPaste=!0,a.disabled=!1,a.enforceTagLimits=!1,a.freeInput=!0,a.minTags=1,a.maxTags=10,a.placeholder="Add a tag",a.tagDelimiters=" ,",a.typeaheadEnabled=!1,a.selectFirst=!0,a.dropDirection="down",a.showTypeaheadOnClick=!1,a.plunk={files:{"app.component.ts":a.snippets.raw.appTs,"app.component.html":a.snippets.raw.appHtml},modules:[{imports:["TagInputModule","TypeaheadModule","CheckboxModule","RadioButtonModule","NumberPickerModule"],library:"ux-aspects"},{library:"ngx-bootstrap",imports:["AccordionModule"],providers:["AccordionModule.forRoot()"]}],mappings:[l.MAPPINGS.NgxBootstrap]},a}return t(a,n),Object.defineProperty(a.prototype,"tagPattern",{get:function(){return this.tagPatternRegExp?this.tagPatternRegExp.source:""},set:function(n){if(n)try{this.tagPatternRegExp=new RegExp(n)}catch(n){this.tagPatternRegExp=null}else this.tagPatternRegExp=null},enumerable:!0,configurable:!0}),a}(o.BaseDocumentationSection);r=p([u.Component({selector:"uxd-components-tags",template:s(2401)}),c.DocumentationSectionComponent("ComponentsTagsComponent"),e("design:paramtypes",[])],r),a.ComponentsTagsComponent=r},2398: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={"./app.html":2399,"./app.ts":2400};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2398},2399: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 m-b-md<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-md-12 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>form</span><span class="token punctuation">></span></span>\r\n            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ux-tag-input</span> <span class="token attr-name">#tagInput</span>\r\n                <span class="token attr-name">[(tags)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tags<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">[(input)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">[addOnPaste]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>addOnPaste<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">[disabled]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">[enforceTagLimits]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>enforceTagLimits<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">[freeInput]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>freeInput<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">[minTags]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>minTags<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">[maxTags]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>maxTags<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">[placeholder]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>placeholder<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">[showTypeaheadOnClick]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>showTypeaheadOnClick<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">[tagDelimiters]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tagDelimiters<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">[tagPattern]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tagPatternRegExp<span class="token punctuation">"</span></span>\r\n                <span class="token attr-name">[tagTemplate]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demoTagTemplate<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>ux-typeahead</span> <span class="token attr-name">*ngIf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>typeaheadEnabled<span class="token punctuation">"</span></span>\r\n                    <span class="token attr-name">[filter]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>input<span class="token punctuation">"</span></span>\r\n                    <span class="token attr-name">[options]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>allTags<span class="token punctuation">"</span></span>\r\n                    <span class="token attr-name">[disabledOptions]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tags<span class="token punctuation">"</span></span>\r\n                    <span class="token attr-name">[dropDirection]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropDirection<span class="token punctuation">"</span></span>\r\n                    <span class="token attr-name">[selectFirst]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>selectFirst<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>ux-typeahead</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>ux-tag-input</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">*ngIf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tagInput.validationErrors.tagRangeError<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>validation-error-text<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>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<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                Required: number of tags between {{tagInput.validationErrors.tagRangeError.min}}\r\n                and {{tagInput.validationErrors.tagRangeError.max}}.\r\n            <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">*ngIf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tagInput.validationErrors.inputPattern<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>validation-error-text<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>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<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                Expected format: {{tagInput.validationErrors.inputPattern.pattern.source}}\r\n            <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>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>\r\n\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>accordion</span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>accordion-group</span> <span class="token attr-name">heading</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Customize Example...<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>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-md-4 col-sm-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>ux-checkbox</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>addOnPaste<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>addOnPaste<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-4 col-sm-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>ux-checkbox</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>disabled<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-4 col-sm-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>ux-checkbox</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>enforceTagLimits<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>enforceTagLimits<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-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>\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>row m-t-md<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-md-4 col-sm-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>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>minTags<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>minTags<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>ux-number-picker</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>minTags<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">[max]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>maxTags<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>ux-number-picker</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>col-md-4 col-sm-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>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>maxTags<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>maxTags<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>ux-number-picker</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>maxTags<span class="token punctuation">"</span></span> <span class="token attr-name">[min]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>minTags<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1000<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>ux-number-picker</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>col-md-4 col-sm-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>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tagPattern<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>tagPattern<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">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tagPattern<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">[(ngModel)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tagPattern<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>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 m-t-md<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-md-4 col-sm-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>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>placeholder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>placeholder<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">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>placeholder<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">[(ngModel)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>placeholder<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>col-md-4 col-sm-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>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tagDelimiters<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>tagDelimiters<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">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tagDelimiters<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">[(ngModel)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tagDelimiters<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>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 m-t-md<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-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>ux-checkbox</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>typeaheadEnabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enable Typeahead<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-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>\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>row m-t-md<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-md-4 col-sm-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>ux-checkbox</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>freeInput<span class="token punctuation">"</span></span> <span class="token attr-name">[disabled]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>!typeaheadEnabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>freeInput<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-4 col-sm-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>ux-checkbox</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>selectFirst<span class="token punctuation">"</span></span>\r\n                    <span class="token attr-name">[disabled]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>!typeaheadEnabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>selectFirst<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-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 attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>col-md-4 col-sm-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>ux-checkbox</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>showTypeaheadOnClick<span class="token punctuation">"</span></span>\r\n                    <span class="token attr-name">[disabled]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>!typeaheadEnabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>showTypeaheadOnClick<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-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>\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>row m-t-md<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-md-4 col-sm-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>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropDirection<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>dropDirection<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>ux-radio-button</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropDirection<span class="token punctuation">"</span></span> <span class="token attr-name">option</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>down<span class="token punctuation">"</span></span>\r\n                    <span class="token attr-name">[disabled]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>!typeaheadEnabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>down<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-radio-button</span><span class="token punctuation">></span></span>\r\n                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ux-radio-button</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dropDirection<span class="token punctuation">"</span></span> <span class="token attr-name">option</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>up<span class="token punctuation">"</span></span>\r\n                    <span class="token attr-name">[disabled]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>!typeaheadEnabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>up<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-radio-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>div</span><span class="token punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>accordion-group</span><span class="token punctuation">></span></span>\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>accordion</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>ng-template</span> <span class="token attr-name">#demoTagTemplate</span> <span class="token attr-name">let-tag</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tag<span class="token punctuation">"</span></span> <span class="token attr-name">let-index</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>index<span class="token punctuation">"</span></span> <span class="token attr-name">let-api</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>api<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>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>m-r-sm<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>i</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-tag<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>i</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>ux-tag-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{api.getTagDisplay(tag)}}<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>button</span> <span class="token attr-name">*ngIf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>api.canRemoveTagAt(index)<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>button<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>ux-tag-remove<span class="token punctuation">"</span></span>\r\n        <span class="token attr-name">[disabled]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span>\r\n        <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>api.removeTagAt(index); $event.stopPropagation();<span class="token punctuation">"</span></span>\r\n        <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</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-close<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>i</span><span class="token punctuation">></span></span><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>ng-template</span><span class="token punctuation">></span></span>',example:'<div class="row m-b-md">\r\n    <div class="col-md-12 form-group-validate has-feedback">\r\n        <form>\r\n            <ux-tag-input #tagInput\r\n                [(tags)]="tags"\r\n                [(input)]="input"\r\n                [addOnPaste]="addOnPaste"\r\n                [disabled]="disabled"\r\n                [enforceTagLimits]="enforceTagLimits"\r\n                [freeInput]="freeInput"\r\n                [minTags]="minTags"\r\n                [maxTags]="maxTags"\r\n                [placeholder]="placeholder"\r\n                [showTypeaheadOnClick]="showTypeaheadOnClick"\r\n                [tagDelimiters]="tagDelimiters"\r\n                [tagPattern]="tagPatternRegExp"\r\n                [tagTemplate]="demoTagTemplate">\r\n\r\n                <ux-typeahead *ngIf="typeaheadEnabled"\r\n                    [filter]="input"\r\n                    [options]="allTags"\r\n                    [disabledOptions]="tags"\r\n                    [dropDirection]="dropDirection"\r\n                    [selectFirst]="selectFirst">\r\n                </ux-typeahead>\r\n\r\n            </ux-tag-input>\r\n            <span *ngIf="tagInput.validationErrors.tagRangeError" class="validation-error-text">\r\n                <span class="hpe-icon hpe-alert"></span> \r\n                Required: number of tags between {{tagInput.validationErrors.tagRangeError.min}}\r\n                and {{tagInput.validationErrors.tagRangeError.max}}.\r\n            </span>\r\n            <span *ngIf="tagInput.validationErrors.inputPattern" class="validation-error-text">\r\n                <span class="hpe-icon hpe-alert"></span> \r\n                Expected format: {{tagInput.validationErrors.inputPattern.pattern.source}}\r\n            </span>\r\n        </form>\r\n    </div>\r\n</div>\r\n\r\n<accordion>\r\n    <accordion-group heading="Customize Example...">\r\n        <div class="row">\r\n            <div class="col-md-4 col-sm-12">\r\n                <ux-checkbox [(value)]="addOnPaste">addOnPaste</ux-checkbox>\r\n            </div>\r\n            <div class="col-md-4 col-sm-12">\r\n                <ux-checkbox [(value)]="disabled">disabled</ux-checkbox>\r\n            </div>\r\n            <div class="col-md-4 col-sm-12">\r\n                <ux-checkbox [(value)]="enforceTagLimits">enforceTagLimits</ux-checkbox>\r\n            </div>\r\n        </div>\r\n        <div class="row m-t-md">\r\n            <div class="col-md-4 col-sm-12">\r\n                <label for="minTags">minTags</label>\r\n                <ux-number-picker [(value)]="minTags" min="0" [max]="maxTags"></ux-number-picker>\r\n            </div>\r\n            <div class="col-md-4 col-sm-12">\r\n                <label for="maxTags">maxTags</label>\r\n                <ux-number-picker [(value)]="maxTags" [min]="minTags" max="1000"></ux-number-picker>\r\n            </div>\r\n            <div class="col-md-4 col-sm-12">\r\n                <label for="tagPattern">tagPattern</label>\r\n                <input type="text" name="tagPattern" class="form-control" [(ngModel)]="tagPattern">\r\n            </div>\r\n        </div>\r\n        <div class="row m-t-md">\r\n            <div class="col-md-4 col-sm-12">\r\n                <label for="placeholder">placeholder</label>\r\n                <input type="text" name="placeholder" class="form-control" [(ngModel)]="placeholder">\r\n            </div>\r\n            <div class="col-md-4 col-sm-12">\r\n                <label for="tagDelimiters">tagDelimiters</label>\r\n                <input type="text" name="tagDelimiters" class="form-control" [(ngModel)]="tagDelimiters">\r\n            </div>\r\n        </div>\r\n        <div class="row m-t-md">\r\n            <div class="col-sm-12">\r\n                <ux-checkbox [(value)]="typeaheadEnabled">Enable Typeahead</ux-checkbox>\r\n            </div>\r\n        </div>\r\n        <div class="row m-t-md">\r\n            <div class="col-md-4 col-sm-12">\r\n                <ux-checkbox [(value)]="freeInput" [disabled]="!typeaheadEnabled">freeInput</ux-checkbox>\r\n            </div>\r\n            <div class="col-md-4 col-sm-12">\r\n                <ux-checkbox [(value)]="selectFirst"\r\n                    [disabled]="!typeaheadEnabled">selectFirst</ux-checkbox>\r\n            </div>\r\n            <div class="col-md-4 col-sm-12">\r\n                <ux-checkbox [(value)]="showTypeaheadOnClick"\r\n                    [disabled]="!typeaheadEnabled">showTypeaheadOnClick</ux-checkbox>\r\n            </div>\r\n        </div>\r\n        <div class="row m-t-md">\r\n            <div class="col-md-4 col-sm-12">\r\n                <label for="dropDirection">dropDirection</label>\r\n                <ux-radio-button [(value)]="dropDirection" option="down"\r\n                    [disabled]="!typeaheadEnabled">down</ux-radio-button>\r\n                <ux-radio-button [(value)]="dropDirection" option="up"\r\n                    [disabled]="!typeaheadEnabled">up</ux-radio-button>\r\n            </div>\r\n        </div>\r\n    </accordion-group>\r\n</accordion>\r\n\r\n<ng-template #demoTagTemplate let-tag="tag" let-index="index" let-api="api">\r\n    <span class="m-r-sm"><i class="hpe-icon hpe-tag"></i></span>\r\n    <span class="ux-tag-text">{{api.getTagDisplay(tag)}}</span>\r\n    <button *ngIf="api.canRemoveTagAt(index)" type="button" class="ux-tag-remove"\r\n        [disabled]="disabled"\r\n        (click)="api.removeTagAt(index); $event.stopPropagation();"\r\n        ><i class="hpe-icon hpe-close"></i></button>\r\n</ng-template>'}},2400:function(n,a){n.exports={snippet:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@angular/core\'</span><span class="token punctuation">;</span>\r\n\r\n@<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\r\n    selector<span class="token punctuation">:</span> <span class="token string">\'app\'</span><span class="token punctuation">,</span>\r\n    templateUrl<span class="token punctuation">:</span> <span class="token string">\'./src/app.component.html\'</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\r\n<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppComponent</span> <span class="token punctuation">{</span>\r\n    tags <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">\'Alpha\'</span><span class="token punctuation">,</span> <span class="token string">\'Beta\'</span><span class="token punctuation">,</span> <span class="token string">\'Kappa\'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n\r\n    allTags <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">\'Alpha\'</span><span class="token punctuation">,</span> <span class="token string">\'Beta\'</span><span class="token punctuation">,</span> <span class="token string">\'Gamma\'</span><span class="token punctuation">,</span> <span class="token string">\'Delta\'</span><span class="token punctuation">,</span> <span class="token string">\'Epsilon\'</span><span class="token punctuation">,</span> <span class="token string">\'Zeta\'</span><span class="token punctuation">,</span> <span class="token string">\'Eta\'</span><span class="token punctuation">,</span> <span class="token string">\'Theta\'</span><span class="token punctuation">,</span> <span class="token string">\'Iota\'</span><span class="token punctuation">,</span> <span class="token string">\'Kappa\'</span><span class="token punctuation">,</span>\r\n        <span class="token string">\'Lambda\'</span><span class="token punctuation">,</span> <span class="token string">\'Mu\'</span><span class="token punctuation">,</span> <span class="token string">\'Nu\'</span><span class="token punctuation">,</span> <span class="token string">\'Xi\'</span><span class="token punctuation">,</span> <span class="token string">\'Omicron\'</span><span class="token punctuation">,</span> <span class="token string">\'Pi\'</span><span class="token punctuation">,</span> <span class="token string">\'Rho\'</span><span class="token punctuation">,</span> <span class="token string">\'Sigma\'</span><span class="token punctuation">,</span> <span class="token string">\'Tau\'</span><span class="token punctuation">,</span> <span class="token string">\'Upsilon\'</span><span class="token punctuation">,</span> <span class="token string">\'Phi\'</span><span class="token punctuation">,</span> <span class="token string">\'Chi\'</span><span class="token punctuation">,</span>\r\n        <span class="token string">\'Psi\'</span><span class="token punctuation">,</span> <span class="token string">\'Omega\'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n\r\n    input<span class="token punctuation">:</span> string<span class="token punctuation">;</span>\r\n\r\n    addOnPaste<span class="token punctuation">:</span> boolean <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\r\n    disabled<span class="token punctuation">:</span> boolean <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n    enforceTagLimits<span class="token punctuation">:</span> boolean <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n    freeInput<span class="token punctuation">:</span> boolean <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\r\n    minTags<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>\r\n    maxTags<span class="token punctuation">:</span> number <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>\r\n    tagPatternRegExp<span class="token punctuation">:</span> RegExp<span class="token punctuation">;</span>\r\n    <span class="token keyword">get</span> <span class="token function">tagPattern</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> string <span class="token punctuation">{</span>\r\n        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>tagPatternRegExp <span class="token operator">?</span> <span class="token keyword">this</span><span class="token punctuation">.</span>tagPatternRegExp<span class="token punctuation">.</span>source <span class="token punctuation">:</span> <span class="token string">\'\'</span><span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span>\r\n    <span class="token keyword">set</span> <span class="token function">tagPattern</span><span class="token punctuation">(</span>value<span class="token punctuation">:</span> string<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n        <span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n            <span class="token keyword">try</span> <span class="token punctuation">{</span>\r\n                <span class="token keyword">this</span><span class="token punctuation">.</span>tagPatternRegExp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n            <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                <span class="token keyword">this</span><span class="token punctuation">.</span>tagPatternRegExp <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>\r\n            <span class="token punctuation">}</span>\r\n        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>\r\n            <span class="token keyword">this</span><span class="token punctuation">.</span>tagPatternRegExp <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span>\r\n    placeholder<span class="token punctuation">:</span> string <span class="token operator">=</span> <span class="token string">\'Add a tag\'</span><span class="token punctuation">;</span>\r\n    tagDelimiters<span class="token punctuation">:</span> string <span class="token operator">=</span> <span class="token string">\' ,\'</span><span class="token punctuation">;</span>\r\n    typeaheadEnabled<span class="token punctuation">:</span> boolean <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n    selectFirst<span class="token punctuation">:</span> boolean <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\r\n    dropDirection<span class="token punctuation">:</span> <span class="token string">\'up\'</span> <span class="token operator">|</span> <span class="token string">\'down\'</span> <span class="token operator">=</span> <span class="token string">\'down\'</span><span class="token punctuation">;</span>\r\n    showTypeaheadOnClick<span class="token punctuation">:</span> boolean <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:"import { Component } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'app',\r\n    templateUrl: './src/app.component.html'\r\n})\r\nexport class AppComponent {\r\n    tags = ['Alpha', 'Beta', 'Kappa'];\r\n\r\n    allTags = ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon', 'Zeta', 'Eta', 'Theta', 'Iota', 'Kappa',\r\n        'Lambda', 'Mu', 'Nu', 'Xi', 'Omicron', 'Pi', 'Rho', 'Sigma', 'Tau', 'Upsilon', 'Phi', 'Chi',\r\n        'Psi', 'Omega'];\r\n\r\n    input: string;\r\n\r\n    addOnPaste: boolean = true;\r\n    disabled: boolean = false;\r\n    enforceTagLimits: boolean = false;\r\n    freeInput: boolean = true;\r\n    minTags: number = 1;\r\n    maxTags: number = 10;\r\n    tagPatternRegExp: RegExp;\r\n    get tagPattern(): string {\r\n        return this.tagPatternRegExp ? this.tagPatternRegExp.source : '';\r\n    }\r\n    set tagPattern(value: string) {\r\n        if (value) {\r\n            try {\r\n                this.tagPatternRegExp = new RegExp(value);\r\n            } catch (e) {\r\n                this.tagPatternRegExp = null;\r\n            }\r\n        } else {\r\n            this.tagPatternRegExp = null;\r\n        }\r\n    }\r\n    placeholder: string = 'Add a tag';\r\n    tagDelimiters: string = ' ,';\r\n    typeaheadEnabled: boolean = false;\r\n    selectFirst: boolean = true;\r\n    dropDirection: 'up' | 'down' = 'down';\r\n    showTypeaheadOnClick: boolean = false;\r\n}"}},2401:function(n,a){n.exports='<div class="row">\r\n    <div class="col-md-12 form-group-validate has-feedback">\r\n        <form>\r\n            <ux-tag-input #tagInput\r\n                [(tags)]="tags"\r\n                [(input)]="input"\r\n                [addOnPaste]="addOnPaste"\r\n                [disabled]="disabled"\r\n                [enforceTagLimits]="enforceTagLimits"\r\n                [freeInput]="freeInput"\r\n                [minTags]="minTags"\r\n                [maxTags]="maxTags"\r\n                [placeholder]="placeholder"\r\n                [showTypeaheadOnClick]="showTypeaheadOnClick"\r\n                [tagDelimiters]="tagDelimiters"\r\n                [tagPattern]="tagPatternRegExp"\r\n                [tagTemplate]="demoTagTemplate">\r\n\r\n                <ux-typeahead *ngIf="typeaheadEnabled"\r\n                    [filter]="input"\r\n                    [options]="allTags"\r\n                    [disabledOptions]="tags"\r\n                    [dropDirection]="dropDirection"\r\n                    [selectFirst]="selectFirst">\r\n                </ux-typeahead>\r\n\r\n            </ux-tag-input>\r\n            <span *ngIf="tagInput.validationErrors.tagRangeError" class="validation-error-text">\r\n                <span class="hpe-icon hpe-alert"></span> \r\n                Required: number of tags between {{tagInput.validationErrors.tagRangeError.min}} and {{tagInput.validationErrors.tagRangeError.max}}.\r\n            </span>\r\n            <span *ngIf="tagInput.validationErrors.inputPattern" class="validation-error-text">\r\n                <span class="hpe-icon hpe-alert"></span> \r\n                Expected format: {{tagInput.validationErrors.inputPattern.pattern.source}}\r\n            </span>\r\n        </form>\r\n    </div>\r\n</div>\r\n\r\n<div class="row uxd-customize-example">\r\n    <div class="col-md-12">\r\n        <accordion>\r\n            <accordion-group heading="Customize Example...">\r\n                <div class="row uxd-customize-row">\r\n                    <div class="col-md-4 col-sm-12">\r\n                        <ux-checkbox [(value)]="addOnPaste">addOnPaste</ux-checkbox>\r\n                    </div>\r\n                    <div class="col-md-4 col-sm-12">\r\n                        <ux-checkbox [(value)]="disabled">disabled</ux-checkbox>\r\n                    </div>\r\n                    <div class="col-md-4 col-sm-12">\r\n                        <ux-checkbox [(value)]="enforceTagLimits">enforceTagLimits</ux-checkbox>\r\n                    </div>\r\n                </div>\r\n                <div class="row uxd-customize-row">\r\n                    <div class="col-md-4 col-sm-12">\r\n                        <label for="minTags">minTags</label>\r\n                        <ux-number-picker [(value)]="minTags" min="0" [max]="maxTags"></ux-number-picker>\r\n                    </div>\r\n                    <div class="col-md-4 col-sm-12">\r\n                        <label for="maxTags">maxTags</label>\r\n                        <ux-number-picker [(value)]="maxTags" [min]="minTags" max="1000"></ux-number-picker>\r\n                    </div>\r\n                    <div class="col-md-4 col-sm-12">\r\n                        <label for="tagPattern">tagPattern</label>\r\n                        <input type="text" name="tagPattern" class="form-control" [(ngModel)]="tagPattern">\r\n                    </div>\r\n                </div>\r\n                <div class="row uxd-customize-row">\r\n                    <div class="col-md-4 col-sm-12">\r\n                        <label for="placeholder">placeholder</label>\r\n                        <input type="text" name="placeholder" class="form-control" [(ngModel)]="placeholder">\r\n                    </div>\r\n                    <div class="col-md-4 col-sm-12">\r\n                        <label for="tagDelimiters">tagDelimiters</label>\r\n                        <input type="text" name="tagDelimiters" class="form-control" [(ngModel)]="tagDelimiters">\r\n                    </div>\r\n                </div>\r\n                <div class="row uxd-customize-row">\r\n                    <div class="col-sm-12">\r\n                        <ux-checkbox [(value)]="typeaheadEnabled">Enable Typeahead</ux-checkbox>\r\n                    </div>\r\n                </div>\r\n                <div class="row uxd-customize-row">\r\n                    <div class="col-md-4 col-sm-12">\r\n                        <ux-checkbox [(value)]="freeInput" [disabled]="!typeaheadEnabled">freeInput</ux-checkbox>\r\n                    </div>\r\n                    <div class="col-md-4 col-sm-12">\r\n                        <ux-checkbox [(value)]="selectFirst" [disabled]="!typeaheadEnabled">selectFirst</ux-checkbox>\r\n                    </div>\r\n                    <div class="col-md-4 col-sm-12">\r\n                        <ux-checkbox [(value)]="showTypeaheadOnClick" [disabled]="!typeaheadEnabled">showTypeaheadOnClick</ux-checkbox>\r\n                    </div>\r\n                </div>\r\n                <div class="row uxd-customize-row">\r\n                    <div class="col-md-4 col-sm-12">\r\n                        <label for="dropDirection">dropDirection</label>\r\n                        <ux-radio-button [(value)]="dropDirection" option="down" [disabled]="!typeaheadEnabled">down</ux-radio-button>\r\n                        <ux-radio-button [(value)]="dropDirection" option="up" [disabled]="!typeaheadEnabled">up</ux-radio-button>\r\n                    </div>\r\n                </div>\r\n            </accordion-group>\r\n        </accordion>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #demoTagTemplate let-tag="tag" let-index="index" let-api="api">\r\n    <span class="m-r-sm"><i class="hpe-icon hpe-tag"></i></span>\r\n    <span class="ux-tag-text">{{api.getTagDisplay(tag)}}</span>\r\n    <button *ngIf="api.canRemoveTagAt(index)" type="button" class="ux-tag-remove" [disabled]="disabled" (click)="api.removeTagAt(index); $event.stopPropagation();"><i class="hpe-icon hpe-close"></i></button>\r\n</ng-template>\r\n\r\n<hr>\r\n\r\n<p>The <code>ux-tag-input</code> component allows an array of strings or custom objects to be displayed as tags inside a text input box. Optionally, a typeahead dropdown can be configured to aid addition of tags to the control.</p>\r\n\r\n<p>Many of the customization parameters of the tag input component are available to edit in the example above by expanding the "Customize Example..." section. Documentation of these parameters follows.</p>\r\n\r\n<h4>Tag Input</h4>\r\n\r\n<p>The <code>ux-tag-input</code> component provides the input field seen in the example, and has the following properties:</p>\r\n\r\n<table class="table">\r\n    <thead>\r\n        <tr>\r\n            <th>Name</th>\r\n            <th>Type</th>\r\n            <th>Description</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <tr>\r\n            <td><b>@Input @Output</b> tags</td>\r\n            <td><b>any[]</b></td>\r\n            <td>The list of tags appearing in the tag input. This can be an array of strings or custom objects. See the <code>displayProperty</code> property for details of using a custom object.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input @Output</b> input</td>\r\n            <td><b>string</b></td>\r\n            <td>The editable text appearing in the tag input.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> addOnPaste</td>\r\n            <td><b>boolean</b></td>\r\n            <td>Controls whether pasting text into the text input area automatically converts that text into one or more tags. Default is true.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> disabled</td>\r\n            <td><b>boolean</b></td>\r\n            <td>Controls the disabled state of the tag input. Default is false.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> display</td>\r\n            <td><b>(option: any) => string | string</b></td>\r\n            <td>Determines the display value of the <code>options</code>, if they are custom objects. This may be a function or a string. If a function is provided, it receives the option object as an argument, and should return the appropriate display value. If the name of a property is provided as a string, that property is used as the display value.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> enforceTagLimits</td>\r\n            <td><b>boolean</b></td>\r\n            <td>If set to true, the tag input will prevent addition and removal of tags to enforce the <code>minTags</code> and <code>maxTags</code> settings. Otherwise, a validation error will be raised. Default is false.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> freeInput</td>\r\n            <td><b>boolean</b></td>\r\n            <td>If true, input entered into the text input area can be converted into a tag by pressing enter. Otherwise, tags can only be added from the typeahead list or other external means. (Note that the <code>maxTags</code> and <code>tagPattern</code> will prevent invalid inputs regardless of this setting.) Default is true.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> maxTags</td>\r\n            <td><b>number</b></td>\r\n            <td>The maximum number of tags permitted in the tag input. If the number of tags is equal to <code>maxTags</code> and <code>enforceTagLimits</code> is true, addition of tags will be prevented until a tag is removed. Default is unlimited.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> minTags</td>\r\n            <td><b>number</b></td>\r\n            <td>The minimum number of tags permitted in the tag input. If the number of tags is equal to <code>minTags</code> and <code>enforceTagLimits</code> is true, removal of tags will be prevented until a new tag is added. Default is 0.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> placeholder</td>\r\n            <td><b>string</b></td>\r\n            <td>The placeholder text which appears in the text input area when it is empty.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> showTypeaheadOnClick</td>\r\n            <td><b>boolean</b></td>\r\n            <td>Controls whether the typeahead appears when the text input area is clicked. This has no effect if the <code>ux-typeahead</code> component is not configured. Default is false.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> tagDelimiters</td>\r\n            <td><b>string</b></td>\r\n            <td>A string containing the characters which delimit tags. Typing one of the characters in <code>tagDelimiters</code> will cause the preceding text to be added as a tag, and the text input area will be cleared. Pasting a string containing one or more of characters in <code>tagDelimiters</code> will cause the string to be split into multiple tags. Note that the delimiter character will not be part of the tag text. Default is empty (no delimiters).</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> tagPattern</td>\r\n            <td><b>RegExp</b></td>\r\n            <td>The validation expression for tags added via the input text area. Strings which do not match this expression will not be added as tags. Default is null (no validation).</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> tagTemplate</td>\r\n            <td><b>TemplateRef</b></td>\r\n            <td>\r\n                <p>A template which will be rendered as the content of each tag. The following context properties are available in the template:</p>\r\n                <ul>\r\n                    <li><code>tag: any</code> - the string or custom object representing the tag.</li>\r\n                    <li><code>index: number</code> - the zero-based index of the tag as it appears in the tag input.</li>\r\n                    <li><code>api: TagApi</code> - provides the functions <code>getTagDisplay</code>, <code>removeTagAt</code> and <code>canRemoveTagAt</code>. See the section below for more information.</li>\r\n                </ul>\r\n            </td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> validationErrors</td>\r\n            <td><b>any</b></td>\r\n            <td>\r\n                <p>An object which contains details of validation errors. The following properties will be present if there is a related validation error:</p>\r\n                <ul>\r\n                    <li><code>tagRangeError</code> - present if the number of tags is outside the range specified by <code>minTags</code> and <code>maxTags</code>.</li>\r\n                    <li><code>inputPattern</code> - present if an input has been submitted which does not match the <code>tagPattern</code>.</li>\r\n                </ul>\r\n            </td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> createTag</td>\r\n            <td><b>(value: string) => any</b></td>\r\n            <td>A custom function which is called to create a new tag object. This can be used to populate other properties in the tag object. If <code>createTag</code> is not provided, then an object is created with the <code>displayProperty</code> set to the input. If <code>displayProperty</code> is also not set, then the tag is created as a simple string.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Output</b> tagAdding</td>\r\n            <td><b>EventEmitter&lt;TagInputEvent&gt;</b></td>\r\n            <td>Raised when a tag is about to be added. The <code>tag</code> property of the event contains the tag to be added. Call <code>preventDefault()</code> on the event to prevent addition.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Output</b> tagAdded</td>\r\n            <td><b>EventEmitter&lt;TagInputEvent&gt;</b></td>\r\n            <td>Raised when a tag has been added. The <code>tag</code> property of the event contains the tag.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Output</b> tagInvalidated</td>\r\n            <td><b>EventEmitter&lt;TagInputEvent&gt;</b></td>\r\n            <td>Raised when a tag has failed validation according to the <code>tagPattern</code>. The <code>tag</code> property of the event contains the string which failed validation.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Output</b> tagRemoving</td>\r\n            <td><b>EventEmitter&lt;TagInputEvent&gt;</b></td>\r\n            <td>Raised when a tag is about to be removed. The <code>tag</code> property of the event contains the tag to be removed. Call <code>preventDefault()</code> on the event to prevent removal.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Output</b> tagRemoved</td>\r\n            <td><b>EventEmitter&lt;TagInputEvent&gt;</b></td>\r\n            <td>Raised when a tag has been removed. The <code>tag</code> property of the event contains the tag.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Output</b> tagClick</td>\r\n            <td><b>EventEmitter&lt;TagInputEvent&gt;</b></td>\r\n            <td>Raised when a tag has been clicked. The <code>tag</code> property of the event contains the clicked tag. Call <code>preventDefault()</code> on the event to prevent the default behaviour of selecting the tag.</td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n\r\n<h4>TagApi</h4>\r\n\r\n<p>The <code>api</code> object available to the <code>tagTemplate</code> has the following interface:</p>\r\n\r\n<table class="table">\r\n    <thead>\r\n        <tr>\r\n            <th>Name</th>\r\n            <th>Args</th>\r\n            <th>Returns</th>\r\n            <th>Description</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <tr>\r\n            <td>getTagDisplay</td>\r\n            <td>tag: any</td>\r\n            <td>string</td>\r\n            <td>Returns the display value of the given <code>tag</code>, according to the <code>displayProperty</code> property. In custom templates where the tag data format is known, this function does not need to be called.</td>\r\n        </tr>\r\n        <tr>\r\n            <td>removeTagAt</td>\r\n            <td>index: number</td>\r\n            <td></td>\r\n            <td>Removes the tag at the given <code>index</code>, if possible. This may be prevented by the <code>minTags</code> setting.</td>\r\n        </tr>\r\n        <tr>\r\n            <td>canRemoveTagAt</td>\r\n            <td>index: number</td>\r\n            <td>boolean</td>\r\n            <td>Returns true if the tag at the given <code>index</code> can be removed. In the example, this is used to control the visibility of the remove button.</td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n\r\n<h4>Typeahead</h4>\r\n\r\n<p>Typeahead functionality is provided by defining a <code>ux-typeahead</code> component as a child of the <code>ux-tag-input</code>. It has the following properties:</p>\r\n\r\n<table class="table">\r\n    <thead>\r\n        <tr>\r\n            <th>Name</th>\r\n            <th>Type</th>\r\n            <th>Description</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <tr>\r\n            <td><b>@Input</b> options</td>\r\n            <td><b>any[] | InfiniteScrollLoadFunction</b></td>\r\n            <td>\r\n                <p>If an array is provided, this is the list of options which can be chosen from. It can be an array of strings or custom objects, matching the format used by the tag input control. If custom objects are required, the <code>display</code> property must also be set.</p>\r\n                <p>If a function is provided, this is used as a callback to dynamically retrieve options in pages. The parameters are:</p>\r\n                <ul>\r\n                    <li><code>pageNum: number</code> - The index of the requested page, starting from 0.</li>\r\n                    <li><code>pageSize: number</code> - The number of items requested.</li>\r\n                    <li><code>filter: any</code> - The filter details as provided via the <code>filter</code> binding.</li>\r\n                </ul>\r\n                <p>The return value should be either a promise which resolves to an array, or a plain array in case the data can be loaded synchronously. An empty array or an array with fewer than <code>pageSize</code> items can be returned, which indicates that the end of the data set has been reached.</p>\r\n            </td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> filter</td>\r\n            <td><b>string</b></td>\r\n            <td>The string which is used to filter the list of options. This is matched to the display property if custom objects are used. The tag input <code>input</code> binding can be used here, to refine the typeahead as the user enters text.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input @Output</b> open</td>\r\n            <td><b>boolean</b></td>\r\n            <td>Controls whether the typeahead dropdown is visible.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> display</td>\r\n            <td><b>(option: any) => string | string</b></td>\r\n            <td>Determines the display value of the <code>options</code>, if they are custom objects. This may be a function or a string. If a function is provided, it receives the option object as an argument, and should return the appropriate display value. If the name of a property is provided as a string, that property is used as the display value.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> key</td>\r\n            <td><b>(option: any) => string | string</b></td>\r\n            <td>Determines the unique key value of the <code>options</code>, if they are custom objects. This is only relevant if multiple options will have the same display value. This may be a function or a string. If a function is provided, it receives the option object as an argument, and should return the appropriate key value. If the name of a property is provided as a string, that property is used as the key value. The default behaviour is to use the <code>display</code> value as the key.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> disabledOptions</td>\r\n            <td><b>any[]</b></td>\r\n            <td>The list of options which should appear disabled in the typeahead. This is useful if duplicate tags are not wanted in the tag input, in which case the  <code>tags</code> binding should also be set here.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> dropDirection</td>\r\n            <td><b>\'up\' | \'down\'</b></td>\r\n            <td>The positioning of the typeahead dropdown in relation to its parent. Default is \'down\'.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> maxHeight</td>\r\n            <td><b>string</b></td>\r\n            <td>The maximum height of the typeahead dropdown, as a CSS value. Default is \'250px\'.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> loadingTemplate</td>\r\n            <td><b>TemplateRef</b></td>\r\n            <td>A template which will be rendered in the dropdown while options are being loaded.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> optionTemplate</td>\r\n            <td><b>TemplateRef</b></td>\r\n            <td>\r\n                <p>A template which will be rendered in the dropdown for each option. The following context properties are available in the template:</p>\r\n                <ul>\r\n                    <li><code>option: any</code> - the string or custom object representing the option.</li>\r\n                    <li><code>api: TypeaheadOptionApi</code> - provides the functions <code>getKey</code>, <code>getDisplay</code> and <code>getDisplayHtml</code>. See the section below for more information.</li>\r\n                </ul>\r\n            </td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> noOptionsTemplate</td>\r\n            <td><b>TemplateRef</b></td>\r\n            <td>A template which will be rendered in the dropdown if no options match the current filter value.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> pageSize</td>\r\n            <td><b>number</b></td>\r\n            <td>\r\n                The number of options to request in a page. This should ideally be more than twice the number of items which fit into the height of the dropdown, but this is not required. Default is 20.\r\n            </td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Input</b> selectFirst</td>\r\n            <td><b>boolean</b></td>\r\n            <td>Controls whether the first non-disabled option in the dropdown is highlighted by default. Default is true.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Output</b> optionSelected</td>\r\n            <td><b>EventEmitter&lt;TypeaheadOptionEvent&gt;</b></td>\r\n            <td>Raised when an option on the dropdown is clicked. The <code>option</code> property on the event contains the clicked option.</td>\r\n        </tr>\r\n        <tr>\r\n            <td><b>@Output</b> highlighted</td>\r\n            <td><b>any</b></td>\r\n            <td>The currently highlighted option.</td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n\r\n<h4>TypeaheadOptionApi</h4>\r\n\r\n<p>The <code>api</code> object available to the <code>optionTemplate</code> has the following interface:</p>\r\n\r\n<table class="table">\r\n    <thead>\r\n        <tr>\r\n            <th>Name</th>\r\n            <th>Args</th>\r\n            <th>Returns</th>\r\n            <th>Description</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <tr>\r\n            <td>getKey</td>\r\n            <td>option: any</td>\r\n            <td>string</td>\r\n            <td>Returns the unique key value of the given <code>option</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td>getDisplay</td>\r\n            <td>option: any</td>\r\n            <td>string</td>\r\n            <td>Returns the display value of the given <code>option</code>.</td>\r\n        </tr>\r\n        <tr>\r\n            <td>getDisplayHtml</td>\r\n            <td>option: any</td>\r\n            <td>string</td>\r\n            <td>Returns the display value of the given <code>option</code> with HTML markup added to highlight the part which matches the current <code>filter</code> value. Override the <code>ux-filter-match</code> class in CSS to modify the default appearance.</td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n\r\n<p>The following code was used to create the example at the top of this section.</p>\r\n\r\n<tabset>\r\n    <tab heading="HTML">\r\n        <uxd-snippet language="html" [content]="snippets.compiled.appHtml"></uxd-snippet>\r\n    </tab>\r\n    <tab heading="TypeScript">\r\n        <uxd-snippet language="javascript" [content]="snippets.compiled.appTs"></uxd-snippet>\r\n    </tab>\r\n</tabset>'},2402: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(2403))||this;return a.codepen={html:a.snippets.raw.codepenHtml,htmlAttributes:{"ng-controller":"TagsCtrl as vm"},js:[a.snippets.raw.codepenJs]},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-components-tags-ng1",template:s(2412),changeDetection:o.ChangeDetectionStrategy.OnPush}),c.DocumentationSectionComponent("ComponentsTagsNg1Component"),e("design:paramtypes",[])],u),a.ComponentsTagsNg1Component=u},2403: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={"./autocomplete.html":2404,"./autocomplete.js":2405,"./codepen.html":2406,"./codepen.js":2407,"./custom.html":2408,"./custom.js":2409,"./sample.html":2410,"./sample.js":2411};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2403},2404:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tag-input</span> <span class="token attr-name">tags</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.tags2<span class="token punctuation">"</span></span> <span class="token attr-name">full-tag-set</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.tagSet<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.demoOptions2<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>tag-input</span><span class="token punctuation">></span></span>',example:'<tag-input tags="vm.tags2" full-tag-set="vm.tagSet" options="vm.demoOptions2"></tag-input>'}},2405:function(n,a){n.exports={snippet:'vm<span class="token punctuation">.</span>tags2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n\r\nvm<span class="token punctuation">.</span>tagSet <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Red"</span><span class="token punctuation">,</span> <span class="token string">"Orange"</span><span class="token punctuation">,</span> <span class="token string">"Yellow"</span><span class="token punctuation">,</span> <span class="token string">"Green"</span><span class="token punctuation">,</span> <span class="token string">"Blue"</span><span class="token punctuation">,</span> <span class="token string">"Indigo"</span><span class="token punctuation">,</span> <span class="token string">"Violet"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n\r\nvm<span class="token punctuation">.</span>demoOptions2 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n    placeholder<span class="token punctuation">:</span> <span class="token string">"Add tag"</span><span class="token punctuation">,</span>\r\n    autocomplete<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n        addFromAutocompleteOnly<span class="token punctuation">:</span><span class="token boolean">true</span>\r\n    <span class="token punctuation">}</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">;</span>',example:'vm.tags2 = [];\r\n\r\nvm.tagSet = ["Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Violet"];\r\n\r\nvm.demoOptions2 = {\r\n    placeholder: "Add tag",\r\n    autocomplete: {\r\n        addFromAutocompleteOnly:true\r\n    }\r\n};'}},2406: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 m-b-sm<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<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>tag-input</span> <span class="token attr-name">tags</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.tags<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.demoOptions1<span class="token punctuation">"</span></span> <span class="token attr-name">api</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.demoApi<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>tag-input</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>div</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 punctuation">></span></span>Current Tags<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>pre</span><span class="token punctuation">></span></span>{{vm.tags}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pre</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 m-b-sm">\r\n    <div class="col-sm-6">\r\n        <tag-input tags="vm.tags" options="vm.demoOptions1" api="vm.demoApi"></tag-input>\r\n    </div>\r\n</div>\r\n<div>\r\n    <span>Current Tags</span>\r\n    <pre>{{vm.tags}}</pre>\r\n</div>'}},2407: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">\'TagsCtrl\'</span><span class="token punctuation">,</span> TagsCtrl<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\n<span class="token keyword">function</span> <span class="token function">TagsCtrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n    <span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>tags <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Redundant"</span><span class="token punctuation">,</span> <span class="token string">"Trivial"</span><span class="token punctuation">,</span> <span class="token string">"Obsolete"</span><span class="token punctuation">,</span> <span class="token string">"Deletion Scheduled"</span><span class="token punctuation">,</span> <span class="token string">"SharePoint 2007 Repository"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>tags2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>tags3 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>tagSet <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Red"</span><span class="token punctuation">,</span> <span class="token string">"Orange"</span><span class="token punctuation">,</span> <span class="token string">"Yellow"</span><span class="token punctuation">,</span> <span class="token string">"Green"</span><span class="token punctuation">,</span> <span class="token string">"Blue"</span><span class="token punctuation">,</span> <span class="token string">"Indigo"</span><span class="token punctuation">,</span> <span class="token string">"Violet"</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>people <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>posts <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">\'Labs\'</span><span class="token punctuation">,</span> <span class="token string">\'Finance\'</span><span class="token punctuation">,</span> <span class="token string">\'Auditing\'</span><span class="token punctuation">,</span> <span class="token string">\'Technical\'</span><span class="token punctuation">,</span> <span class="token string">\'Investor Relations\'</span><span class="token punctuation">,</span> <span class="token string">\'Operations\'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">20</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n        <span class="token keyword">var</span> names <span class="token operator">=</span> chance<span class="token punctuation">.</span><span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n        <span class="token keyword">var</span> email <span class="token operator">=</span> names<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">" "</span><span class="token punctuation">,</span> <span class="token string">"."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\n        vm<span class="token punctuation">.</span>people<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\r\n            name<span class="token punctuation">:</span> names<span class="token punctuation">,</span>\r\n            email<span class="token punctuation">:</span> email <span class="token operator">+</span> <span class="token string">\'@business.com\'</span><span class="token punctuation">,</span>\r\n            position<span class="token punctuation">:</span> vm<span class="token punctuation">.</span>posts<span class="token punctuation">[</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> vm<span class="token punctuation">.</span>posts<span class="token punctuation">.</span>length<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>\r\n\r\n    vm<span class="token punctuation">.</span>demoOptions1 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        placeholder<span class="token punctuation">:</span> <span class="token string">"Add tag"</span><span class="token punctuation">,</span>\r\n        maxNumberTags<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>\r\n        maxTagsMessage<span class="token punctuation">:</span> <span class="token string">"Maximum number of tags has been added"</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>demoApi <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        onTagAdding<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            <span class="token keyword">if</span> <span class="token punctuation">(</span>vm<span class="token punctuation">.</span>tags<span class="token punctuation">.</span>length <span class="token operator">>=</span> vm<span class="token punctuation">.</span>demoOptions1<span class="token punctuation">.</span>maxNumberTags<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n            <span class="token punctuation">}</span>\r\n            <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n\r\n        onTagRemoving<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            <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>demoOptions2 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        placeholder<span class="token punctuation">:</span> <span class="token string">"Add tag"</span><span class="token punctuation">,</span>\r\n        autocomplete<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            addFromAutocompleteOnly<span class="token punctuation">:</span> <span class="token boolean">true</span>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>demoOptions3 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        placeholder<span class="token punctuation">:</span> <span class="token string">"Add tag"</span><span class="token punctuation">,</span>\r\n        format<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            display<span class="token punctuation">:</span> <span class="token string">"name"</span><span class="token punctuation">,</span>\r\n            key<span class="token punctuation">:</span> <span class="token string">"name"</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n        autocomplete<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n            addFromAutocompleteOnly<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n            template<span class="token punctuation">:</span> <span class="token string">"directives/tagInput/customAutocompleteTemplate.html"</span><span class="token punctuation">,</span>\r\n            minLength<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n            source<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>$query<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                <span class="token keyword">return</span> vm<span class="token punctuation">.</span>people<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span>person<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                    <span class="token keyword">return</span> person<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>$query<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</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>\r\n        <span class="token punctuation">}</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:'angular.module(\'app\').controller(\'TagsCtrl\', TagsCtrl);\r\n\r\nfunction TagsCtrl() {\r\n    var vm = this;\r\n\r\n    vm.tags = ["Redundant", "Trivial", "Obsolete", "Deletion Scheduled", "SharePoint 2007 Repository"];\r\n    vm.tags2 = [];\r\n    vm.tags3 = [];\r\n\r\n    vm.tagSet = ["Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Violet"];\r\n\r\n    vm.people = [];\r\n    vm.posts = [\'Labs\', \'Finance\', \'Auditing\', \'Technical\', \'Investor Relations\', \'Operations\'];\r\n    for (var i = 0; i < 20; i++) {\r\n        var names = chance.name();\r\n        var email = names.toLowerCase().replace(" ", ".");\r\n\r\n        vm.people.push({\r\n            name: names,\r\n            email: email + \'@business.com\',\r\n            position: vm.posts[Math.floor(Math.random() * vm.posts.length)]\r\n        });\r\n    }\r\n\r\n    vm.demoOptions1 = {\r\n        placeholder: "Add tag",\r\n        maxNumberTags: 8,\r\n        maxTagsMessage: "Maximum number of tags has been added"\r\n    };\r\n\r\n    vm.demoApi = {\r\n        onTagAdding: function () {\r\n            if (vm.tags.length >= vm.demoOptions1.maxNumberTags) {\r\n                return false;\r\n            }\r\n            return true;\r\n        },\r\n\r\n        onTagRemoving: function () {\r\n            return true;\r\n        }\r\n    };\r\n\r\n    vm.demoOptions2 = {\r\n        placeholder: "Add tag",\r\n        autocomplete: {\r\n            addFromAutocompleteOnly: true\r\n        }\r\n    };\r\n\r\n    vm.demoOptions3 = {\r\n        placeholder: "Add tag",\r\n        format: {\r\n            display: "name",\r\n            key: "name"\r\n        },\r\n        autocomplete: {\r\n            addFromAutocompleteOnly: true,\r\n            template: "directives/tagInput/customAutocompleteTemplate.html",\r\n            minLength: 1,\r\n            source: function ($query) {\r\n                return vm.people.filter(function (person) {\r\n                    return person.name.toLowerCase().indexOf($query.toLowerCase()) !== -1;\r\n                });\r\n            }\r\n        }\r\n    };\r\n}'}},2408:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tag-input</span> <span class="token attr-name">tags</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.tags3<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.demoOptions3<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>tag-input</span><span class="token punctuation">></span></span>',example:'<tag-input tags="vm.tags3" options="vm.demoOptions3"></tag-input>'}},2409:function(n,a){n.exports={snippet:'vm<span class="token punctuation">.</span>tags3 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n\r\nvm<span class="token punctuation">.</span>people <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\nvm<span class="token punctuation">.</span>posts <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">\'Labs\'</span><span class="token punctuation">,</span> <span class="token string">\'Finance\'</span><span class="token punctuation">,</span> <span class="token string">\'Auditing\'</span><span class="token punctuation">,</span> <span class="token string">\'Technical\'</span><span class="token punctuation">,</span> <span class="token string">\'Investor Relations\'</span><span class="token punctuation">,</span> <span class="token string">\'Operations\'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n\r\n<span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span><span class="token number">20</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n    <span class="token comment" spellcheck="true">//generating dummy data</span>\r\n    <span class="token keyword">var</span> names <span class="token operator">=</span> chance<span class="token punctuation">.</span><span class="token function">name</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n    <span class="token keyword">var</span> email <span class="token operator">=</span> names<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">" "</span><span class="token punctuation">,</span> <span class="token string">"."</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n    \r\n    vm<span class="token punctuation">.</span>people<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\r\n        name<span class="token punctuation">:</span> names<span class="token punctuation">,</span>\r\n        email<span class="token punctuation">:</span> email <span class="token operator">+</span> <span class="token string">\'@business.com\'</span><span class="token punctuation">,</span>\r\n        position<span class="token punctuation">:</span> vm<span class="token punctuation">.</span>posts<span class="token punctuation">[</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> vm<span class="token punctuation">.</span>posts<span class="token punctuation">.</span>length<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>\r\n\r\nvm<span class="token punctuation">.</span>demoOptions3 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n    placeholder<span class="token punctuation">:</span> <span class="token string">"Add tag"</span><span class="token punctuation">,</span>\r\n    format<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n        display<span class="token punctuation">:</span> <span class="token string">"name"</span><span class="token punctuation">,</span>\r\n        key<span class="token punctuation">:</span> <span class="token string">"name"</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n    autocomplete<span class="token punctuation">:</span> <span class="token punctuation">{</span>\r\n        addFromAutocompleteOnly<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n        template<span class="token punctuation">:</span> <span class="token string">"directives/tagInput/customAutocompleteTemplate.html"</span><span class="token punctuation">,</span>\r\n        minLength<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\r\n        source<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>$query<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n            <span class="token keyword">return</span> vm<span class="token punctuation">.</span>people<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n                <span class="token keyword">return</span> person<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>$query<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</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>\r\n    <span class="token punctuation">}</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">;</span>',example:"vm.tags3 = [];\r\n\r\nvm.people = [];\r\nvm.posts = ['Labs', 'Finance', 'Auditing', 'Technical', 'Investor Relations', 'Operations'];\r\n\r\nfor(var i = 0; i<20; i++) {\r\n    //generating dummy data\r\n    var names = chance.name();\r\n    var email = names.toLowerCase().replace(\" \", \".\");\r\n    \r\n    vm.people.push({\r\n        name: names,\r\n        email: email + '@business.com',\r\n        position: vm.posts[Math.floor(Math.random() * vm.posts.length)]\r\n    });\r\n}\r\n\r\nvm.demoOptions3 = {\r\n    placeholder: \"Add tag\",\r\n    format: {\r\n        display: \"name\",\r\n        key: \"name\"\r\n    },\r\n    autocomplete: {\r\n        addFromAutocompleteOnly: true,\r\n        template: \"directives/tagInput/customAutocompleteTemplate.html\",\r\n        minLength: 1,\r\n        source: function($query) {\r\n            return vm.people.filter(function(person) {\r\n                return person.name.toLowerCase().indexOf($query.toLowerCase()) !== -1;\r\n            });\r\n        }\r\n    }\r\n};"}},2410:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tag-input</span> <span class="token attr-name">tags</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.tags<span class="token punctuation">"</span></span> <span class="token attr-name">options</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.demoOptions1<span class="token punctuation">"</span></span> <span class="token attr-name">api</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.demoApi<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>tag-input</span><span class="token punctuation">></span></span>',example:'<tag-input tags="vm.tags" options="vm.demoOptions1" api="vm.demoApi"></tag-input>'}},2411:function(n,a){n.exports={snippet:'vm<span class="token punctuation">.</span>tags <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"Redundant"</span><span class="token punctuation">,</span> <span class="token string">"Trivial"</span><span class="token punctuation">,</span> <span class="token string">"Obsolete"</span><span class="token punctuation">,</span> <span class="token string">"Deletion Scheduled"</span><span class="token punctuation">,</span> <span class="token string">"SharePoint 2007 Repository"</span> <span class="token punctuation">]</span><span class="token punctuation">;</span>\r\nvm<span class="token punctuation">.</span>tags2 <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\r\n\r\nvm<span class="token punctuation">.</span>demoOptions1 <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n    placeholder <span class="token punctuation">:</span> <span class="token string">"Add tag"</span><span class="token punctuation">,</span>\r\n    maxNumberTags<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>\r\n    maxTagsMessage<span class="token punctuation">:</span> <span class="token string">"Maximum number of tags has been added"</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\nvm<span class="token punctuation">.</span>demoApi <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n    onTagAdding<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>tag<span class="token punctuation">)</span><span class="token punctuation">{</span>\r\n        <span class="token keyword">if</span><span class="token punctuation">(</span>vm<span class="token punctuation">.</span>tags<span class="token punctuation">.</span>length <span class="token operator">>=</span> vm<span class="token punctuation">.</span>demoOptions1<span class="token punctuation">.</span>maxNumberTags<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n            <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n        <span class="token punctuation">}</span>\r\n        <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">,</span>\r\n    onTagRemoving<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>tag<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n        <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">;</span>',example:'vm.tags = ["Redundant", "Trivial", "Obsolete", "Deletion Scheduled", "SharePoint 2007 Repository" ];\r\nvm.tags2 = [];\r\n\r\nvm.demoOptions1 = {\r\n    placeholder : "Add tag",\r\n    maxNumberTags: 8,\r\n    maxTagsMessage: "Maximum number of tags has been added"\r\n};\r\n\r\nvm.demoApi = {\r\n    onTagAdding: function(tag){\r\n        if(vm.tags.length >= vm.demoOptions1.maxNumberTags) {\r\n            return false;\r\n        }\r\n        return true;\r\n    },\r\n    onTagRemoving: function(tag) {\r\n        return true;\r\n    }\r\n};'}},2412:function(n,a){n.exports='<uxd-tags-wrapper></uxd-tags-wrapper>\r\n\r\n<hr>\r\n\r\n<p>The tag input is set with the <code class="highlighter-rouge">tag-input</code> directive. It accepts the following attributes:</p>\r\n\r\n<div class="demo-attributes table-responsive">\r\n<table class="table">\r\n  <tr>\r\n    <th>Name</th>\r\n    <th>Type</th>\r\n    <th>Binding</th>\r\n    <th>Description</th>\r\n    <th>Optional</th>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">tags</td>\r\n    <td>array</td>\r\n    <td>variable</td>\r\n    <td>An initial set of tags to be displayed</td>\r\n    <td>false</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">full-tag-set</td>\r\n    <td>array</td>\r\n    <td>variable</td>\r\n    <td>A set of tags to be used for autocompletion</td>\r\n    <td>true</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">api</td>\r\n    <td>object</td>\r\n    <td>variable</td>\r\n    <td>A set of callback functions for events and validation</td>\r\n    <td>true</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">options</td>\r\n    <td>object</td>\r\n    <td>variable</td>\r\n    <td>An object allowing configuration of the control\'s behaviour</td>\r\n    <td>true</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">ng-disabled</td>\r\n    <td>boolean</td>\r\n    <td>variable</td>\r\n    <td>Determines whether the control is disabled. Default is false.</td>\r\n    <td>true</td>\r\n  </tr>\r\n</table>\r\n</div>\r\n\r\n<h4>Tags</h4>\r\n\r\n<p>Tags can be specified in a number of formats. \r\nThe simplest format is to provide tags as an array of strings; these will be internally converted to an array of objects holding a <code class="highlighter-rouge">text</code> property. \r\nTags can also be supplied as an array of objects, where the <code class="highlighter-rouge">text</code> property of each member will be used for the tag control.</p>\r\n\r\n<p>Alternatively, you can specify a <code class="highlighter-rouge">format</code> property in the options for the control, and map the display properties to arbitrary values. \r\nSee the Options section below for more details.</p>\r\n\r\n<p>By default, tags will be added when the user presses the enter key.</p>\r\n\r\n<p>Configuration options are available for extending this to cover the space and comma keys, as well as options for the blur event of the control \r\nand how to handle text pasted from the clipboard. When the backspace key is pressed after a tag has been entered, the tag will be highlighted. \r\nThe highlighted tag can be changed with the arrow keys, and pressing backspace again will delete the tag.</p>\r\n\r\n<h4>Autocomplete</h4>\r\n\r\n<p>The tag control supports free-form typing, autocomplete assisted free-form typing, and inputs limited to autocomplete values. \r\nThe Options section below describes how to configure the autocomplete behaviour.</p>\r\n\r\n<p>The set of tags should be an array of strings.</p>\r\n\r\n<blockquote>\r\n  <p><strong>Note</strong>: that for autocomplete functionality, you must provide a value for the <code class="highlighter-rouge">full-tag-set</code> attribute, and the <code class="highlighter-rouge">autocomplete</code> configuration block must be supplied.</p>\r\n</blockquote>\r\n\r\n<h4>API</h4>\r\n\r\n<p>The <code class="highlighter-rouge">API</code> attribute allows you to provide an object hosting functions, which will be invoked when the corresponding internal behaviour is executed. \r\nAll of these functions will be called with the tag available as <code class="highlighter-rouge">$tag</code>.</p>\r\n\r\n<br>\r\n\r\n<div class="demo-attributes table-responsive">\r\n<table class="table">\r\n  <tr>\r\n    <th>Property</th>\r\n    <th>Description</th>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">onTagAdding</td>\r\n    <td>Called before a new tag is added. This method must return <code>true</code> or <code>false</code>, with a return value of <code>false</code> preventing the tag from being added</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">onTagAdded</td>\r\n    <td>Called after a new tag is added</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">onInvalidTag</td>\r\n    <td>Called when a tag is invalid</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">onTagRemoving</td>\r\n    <td>Called before removing a tag. This method must return <code>true</code> or <code>false</code>, with a return value of <code>false</code> preventing the tag from being removed</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">onTagRemoved</td>\r\n    <td>Called after a tag is removed</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">onTagClicked</td>\r\n    <td>Called when the user clicks on an existing tag</td>\r\n  </tr>\r\n</table>\r\n</div>\r\n\r\n<h4>Options</h4>\r\n\r\n<p>The <code class="highlighter-rouge">options</code> attribute allows you to provide an object which will configure the behaviour of the control. The following options are available:</p>\r\n\r\n<div class="demo-attributes table-responsive">\r\n<table class="table">\r\n  <tr>\r\n    <th>Property</th>\r\n    <th>Description</th>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">placeholder</td>\r\n    <td>Placeholder text for the input control</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">initialPlaceholder</td>\r\n    <td>Defines if the placeholder should only show when there are no selected tags (Default: false)</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">minTagLength</td>\r\n    <td>Minimum length for a new tag (Default: 1)</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">maxTagLength</td>\r\n    <td>Maximum length for a new tag (Default: Max Int)</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">minNumberTags</td>\r\n    <td>Minimum valid number of tags (Default: 0)</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">maxNumberTags</td>\r\n    <td>Maximum valid number of tags (Default: Max Int)</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">addOnSpace</td>\r\n    <td>Flag for if new tags should be added when the space key is pressed (Default: false)</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">addOnComma</td>\r\n    <td>Flag for if new tags should be added when the comma key is pressed (Default: false)</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">addOnBlur</td>\r\n    <td>Flag for if new tags should be added when the control loses focus (Default: true)</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">addOnPaste</td>\r\n    <td>Flag for if new tags should be added when pasting from the clipboard (Default: true)</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">pasteSplitPattern</td>\r\n    <td>When pasting from the clipboard, string delimiter for parsing input into tags (Default: \',\' )</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">tabIndex</td>\r\n    <td>Tabindex for the control (Default: Undefined )</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">template</td>\r\n    <td>HTML for custom tag style (optional)</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">maxTagsMessage</td>\r\n    <td>String for the message which will be displayed if the user exceeds the maximum number of tags (optional)</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">maxTagsHidden</td>\r\n    <td>Boolean value to hide the placeholder and autocomplete dropdown if the maximum number of tags has been reached (Default: false)</td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">format</td>\r\n    <td>\r\n        Object with the following properties:\r\n        <ul>\r\n            <li><code>key</code> - property name in your object format for uniquely identifying tags (Default: \'text\')</li>\r\n            <li><code>display</code> - property name in your object format for displaying as the tag\'s text (Default: \'text\')</li>\r\n        </ul>\r\n    </td>\r\n  </tr>\r\n  <tr>\r\n    <td class="attribute">autocomplete</td>\r\n    <td>\r\n        Object with the following properties:\r\n        <ul>\r\n            <li><code>addFromAutocompleteOnly</code> - flag for allowing only autocomplete values (Default: \'false\')</li>\r\n            <li><code>delay</code> - delay in ms before the autocomplete will open (Default: 100)</li>\r\n            <li><code>minLength</code> - number of characters the user should type before the autocomplete will open (Default: 3)</li>\r\n            <li><code>template</code> - html for custom autocomplete style (optional)</li>\r\n            <li><code>source</code> - expression to evaluate upon changing the input content (optional)</li>\r\n        </ul>\r\n    </td>\r\n  </tr>\r\n</table>\r\n</div>\r\n\r\n<p>The code for the above example is as follows:</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 [content]="snippets.compiled.sampleJs" language="javascript"></uxd-snippet>\r\n    </tab>\r\n</tabset>\r\n\r\n<hr>\r\n\r\n<p>The following example demonstrates how to use the autocomplete behaviour. Try typing the names of colours.</p>\r\n\r\n<uxd-tags-autocomplete-wrapper></uxd-tags-autocomplete-wrapper>\r\n\r\n<hr>\r\n\r\n<p>The code for the above example is as follows:</p>\r\n\r\n<tabset>\r\n    <tab heading="HTML">\r\n        <uxd-snippet [content]="snippets.compiled.autocompleteHtml"></uxd-snippet>\r\n    </tab>\r\n    <tab heading="JavaScript">\r\n        <uxd-snippet [content]="snippets.compiled.autocompleteJs" language="javascript"></uxd-snippet>\r\n    </tab>\r\n</tabset>\r\n\r\n<hr>\r\n\r\n<p>The following example shows how a custom template can be added to the autocomplete to provide more details. Try typing a name.</p>\r\n\r\n<uxd-tags-custom-wrapper></uxd-tags-custom-wrapper>\r\n\r\n<hr>\r\n\r\n<p>The code for the above example is as follows:</p>\r\n\r\n<tabset>\r\n    <tab heading="HTML">\r\n        <uxd-snippet [content]="snippets.compiled.customHtml"></uxd-snippet>\r\n    </tab>\r\n    <tab heading="JavaScript">\r\n        <uxd-snippet [content]="snippets.compiled.customJs" language="javascript"></uxd-snippet>\r\n    </tab>\r\n</tabset>'},2413: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(2414))||this;return a.plunk={files:{"app.component.ts":a.snippets.raw.appTs,"app.component.html":a.snippets.raw.appHtml},modules:[{imports:["ToggleSwitchModule"],library:"ux-aspects"}]},a.toggleSwitches={option1:!0,option2:!1,option3:!1,option4:!1},a.toggleSwitchDisable=!1,a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-components-toggleswitch",template:s(2417)}),c.DocumentationSectionComponent("ComponentsToggleSwitchComponent"),e("design:paramtypes",[])],u),a.ComponentsToggleSwitchComponent=u},2414: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={"./app.html":2415,"./app.ts":2416};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2414},2415: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 punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ux-toggleswitch</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toggleSwitches.option1<span class="token punctuation">"</span></span> <span class="token attr-name">[disabled]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toggleSwitchDisable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        Toggle 1\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-toggleswitch</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>m-t-xs<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>ux-toggleswitch</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toggleSwitches.option2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toggle 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-toggleswitch</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>m-t-xs<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>ux-toggleswitch</span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toggleSwitches.option3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toggle 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-toggleswitch</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>m-t-sm<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>ux-toggleswitch</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toggleswitch-lg<span class="token punctuation">"</span></span> <span class="token attr-name">[(value)]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toggleSwitches.option4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n        Large Toggle\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ux-toggleswitch</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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>m-t-md<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>code</span><span class="token punctuation">></span></span>toggleSwitches.option1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>{{toggleSwitches.option1}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span>.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>toggleSwitches.option2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>{{toggleSwitches.option2}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span>.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>toggleSwitches.option3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>{{toggleSwitches.option3}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span>.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>toggleSwitches.option4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">></span></span>{{toggleSwitches.option4}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">></span></span>.\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</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<span class="token punctuation">"</span></span> <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toggleSwitchDisable <span class="token punctuation">=</span> !toggleSwitchDisable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\r\n  {{toggleSwitchDisable ? \'Click to enable Toggle 1\' : \'Click to disable Toggle 1\'}}\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>',example:'<div>\r\n    <ux-toggleswitch [(value)]="toggleSwitches.option1" [disabled]="toggleSwitchDisable">\r\n        Toggle 1\r\n    </ux-toggleswitch>\r\n</div>\r\n<div class="m-t-xs">\r\n    <ux-toggleswitch [(value)]="toggleSwitches.option2">Toggle 2</ux-toggleswitch>\r\n</div>\r\n<div class="m-t-xs">\r\n    <ux-toggleswitch [(value)]="toggleSwitches.option3">Toggle 3</ux-toggleswitch>\r\n</div>\r\n<div class="m-t-sm">\r\n    <ux-toggleswitch class="toggleswitch-lg" [(value)]="toggleSwitches.option4">\r\n        Large Toggle\r\n    </ux-toggleswitch>\r\n</div>\r\n<p class="m-t-md">\r\n    <code>toggleSwitches.option1</code> is <em>{{toggleSwitches.option1}}</em>.\r\n    <code>toggleSwitches.option2</code> is <em>{{toggleSwitches.option2}}</em>.\r\n    <code>toggleSwitches.option3</code> is <em>{{toggleSwitches.option3}}</em>.\r\n    <code>toggleSwitches.option4</code> is <em>{{toggleSwitches.option4}}</em>.\r\n</p>\r\n<button class="btn button-primary" (click)="toggleSwitchDisable = !toggleSwitchDisable">\r\n  {{toggleSwitchDisable ? \'Click to enable Toggle 1\' : \'Click to disable Toggle 1\'}}\r\n</button>'}},2416:function(n,a){n.exports={snippet:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@angular/core\'</span><span class="token punctuation">;</span>\r\n\r\n@<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\r\n    selector<span class="token punctuation">:</span> <span class="token string">\'app\'</span><span class="token punctuation">,</span>\r\n    templateUrl<span class="token punctuation">:</span> <span class="token string">\'./src/app.component.html\'</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\r\n<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppComponent</span> <span class="token punctuation">{</span>\r\n    toggleSwitches<span class="token punctuation">:</span> any<span class="token punctuation">;</span>\r\n    toggleSwitchDisable<span class="token punctuation">:</span> boolean<span class="token punctuation">;</span>\r\n\r\n    <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>toggleSwitches <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n            option1<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n            option2<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n            option3<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n            option4<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n        <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>toggleSwitchDisable <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n    <span class="token punctuation">}</span>\r\n<span class="token punctuation">}</span>',example:"import { Component } from '@angular/core';\r\n\r\n@Component({\r\n    selector: 'app',\r\n    templateUrl: './src/app.component.html'\r\n})\r\nexport class AppComponent {\r\n    toggleSwitches: any;\r\n    toggleSwitchDisable: boolean;\r\n\r\n    constructor() {\r\n\r\n        this.toggleSwitches = {\r\n            option1: true,\r\n            option2: false,\r\n            option3: false,\r\n            option4: false\r\n        };\r\n\r\n        this.toggleSwitchDisable = false;\r\n    }\r\n}"}},2417:function(n,a){n.exports='<div>\r\n  <ux-toggleswitch [(value)]="toggleSwitches.option1" [disabled]="toggleSwitchDisable">Toggle 1</ux-toggleswitch>\r\n</div>\r\n<div class="m-t-xs">\r\n  <ux-toggleswitch [(value)]="toggleSwitches.option2">Toggle 2</ux-toggleswitch>\r\n</div>\r\n<div class="m-t-xs">\r\n  <ux-toggleswitch [(value)]="toggleSwitches.option3">Toggle 3</ux-toggleswitch>\r\n</div>\r\n<div class="m-t-sm">\r\n  <ux-toggleswitch class="toggleswitch-lg" [(value)]="toggleSwitches.option4">Large Toggle</ux-toggleswitch>\r\n</div>\r\n<p class="m-t-md">\r\n  <code>toggleSwitches.option1</code> is <em>{{toggleSwitches.option1}}</em>.\r\n  <code>toggleSwitches.option2</code> is <em>{{toggleSwitches.option2}}</em>.\r\n  <code>toggleSwitches.option3</code> is <em>{{toggleSwitches.option3}}</em>.\r\n  <code>toggleSwitches.option4</code> is <em>{{toggleSwitches.option4}}</em>.\r\n</p>\r\n<button class="btn button-primary" (click)="toggleSwitchDisable = !toggleSwitchDisable">\r\n  {{toggleSwitchDisable ? \'Click to enable Toggle 1\' : \'Click to disable Toggle 1\'}}\r\n</button>\r\n\r\n<hr>\r\n\r\n<p>To create a toggle switch, use the <code>toggleswitch</code> component with the <code>value</code> attribute to bind the value. Use <code>disabled</code>\r\nto control the disabled state.</p>\r\n\r\n<p>The code used for the above example is shown below:</p>\r\n\r\n<tabset>\r\n    <tab heading="HTML">\r\n        <uxd-snippet [content]="snippets.compiled.appHtml"></uxd-snippet>\r\n    </tab>\r\n    <tab heading="TypeScript">\r\n        <uxd-snippet [content]="snippets.compiled.appTs" language="javascript"></uxd-snippet>\r\n    </tab>\r\n</tabset>\r\n\r\n<p>In an Angular application, <code>ngModel</code> may be used to bind the control to a form.</p>\r\n\r\n<table class="table">\r\n  <thead>\r\n    <tr>\r\n      <th>Name</th>\r\n      <th>Type</th>\r\n      <th>Description</th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr>\r\n      <td><b>@Input @Output</b> value</td>\r\n      <td><b>boolean</b></td>\r\n      <td>Binding for the state of the switch; <code>true</code> for "on" and <code>false</code> for "off."</td>\r\n    </tr>\r\n    <tr>\r\n      <td><b>@Input</b> disabled</td>\r\n      <td><b>boolean</b></td>\r\n      <td>If this value is set to <code>true</code> then the toggle switch will be disabled. The default value is <code>false</code>.</td>\r\n    </tr>\r\n    <tr>\r\n      <td><b>@Input</b> clickable</td>\r\n      <td><b>boolean</b></td>\r\n      <td>If set to <code>false</code> the switch will not be updated when clicking on it, can be used if something else is updating\r\nthe state of the switch. The default value is <code>true</code>.</td>\r\n    </tr>\r\n  </tbody>\r\n</table>'},2418: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(2419))||this;return a.codepen={html:a.snippets.raw.sampleHtml,htmlAttributes:{"ng-controller":"ToggleSwitchDemoCtrl as vm"},css:[a.snippets.raw.sampleCss],js:[a.snippets.raw.sampleJs]},a}return t(a,n),a}(l.BaseDocumentationSection);u=p([o.Component({selector:"uxd-toggle-switch-ng1",template:s(2426),changeDetection:o.ChangeDetectionStrategy.OnPush}),c.DocumentationSectionComponent("ComponentsToggleSwitchNg1Component"),e("design:paramtypes",[])],u),a.ComponentsToggleSwitchNg1Component=u},2419: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.css":2420,"./sample.html":2421,"./sample.js":2422,"./sample1.html":2423,"./sample2.html":2424,"./sample3.html":2425};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2419},2420:function(n,a){n.exports={snippet:'<span class="token selector">.toggleswitch-custom .el-toggleswitch > .el-toggleswitch-bg</span> <span class="token punctuation">{</span>\r\n    <span class="token comment" spellcheck="true">/* This is the color of the background in the unchecked state. */</span> \r\n    <span class="token property">background-color</span><span class="token punctuation">:</span> #ebebeb<span class="token punctuation">;</span>\r\n    <span class="token comment" spellcheck="true">/* These three properties are used to "shrink" the default rounded backdrop. */</span>\r\n    <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>\r\n    <span class="token property">background-clip</span><span class="token punctuation">:</span> content-box<span class="token punctuation">;</span>\r\n    <span class="token property">border</span><span class="token punctuation">:</span> 2px solid transparent<span class="token punctuation">;</span>\r\n    <span class="token comment" spellcheck="true">/* The new animation for the background. */</span>\r\n    <span class="token property">transition</span><span class="token punctuation">:</span> background-color 0.3s<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.toggleswitch-custom .el-toggleswitch.checked > .el-toggleswitch-bg</span> <span class="token punctuation">{</span>\r\n    <span class="token comment" spellcheck="true">/* This is the color of the background in the checked state. */</span> \r\n    <span class="token property">background-color</span><span class="token punctuation">:</span> #9dd4a1<span class="token punctuation">;</span>\r\n    <span class="token comment" spellcheck="true">/* The default control uses box-shadow to create the animation, so remove that. */</span>\r\n    <span class="token property">box-shadow</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>\r\n    <span class="token comment" spellcheck="true">/* The default control changes the border, so override that. */</span>\r\n    <span class="token property">border</span><span class="token punctuation">:</span> 2px solid transparent<span class="token punctuation">;</span>\r\n    <span class="token comment" spellcheck="true">/* The default control has a slightly different animation for unchecking, so override that. */</span>\r\n    <span class="token property">transition</span><span class="token punctuation">:</span> background-color 0.3s<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.toggleswitch-custom .el-toggleswitch > .el-toggleswitch-nub</span> <span class="token punctuation">{</span>\r\n    <span class="token comment" spellcheck="true">/* This is the color of the switch in the unchecked state. */</span> \r\n    <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>\r\n    <span class="token comment" spellcheck="true">/* Remove the border. */</span>\r\n    <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>\r\n    <span class="token comment" spellcheck="true">/* Create a dropshadow. */</span>\r\n    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 1px 4px 1px <span class="token function">rgba</span><span class="token punctuation">(</span>0, 0, 0, 0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n    <span class="token comment" spellcheck="true">/* Add a color transition to the switch as well as the slide animation. */</span>\r\n    <span class="token property">transition</span><span class="token punctuation">:</span> background-color 0.3s, left 0.15s<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>\r\n\r\n<span class="token selector">.toggleswitch-custom .el-toggleswitch.checked > .el-toggleswitch-nub</span> <span class="token punctuation">{</span>\r\n    <span class="token comment" spellcheck="true">/* This is the color of the switch in the checked state. */</span> \r\n    <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:'.toggleswitch-custom .el-toggleswitch > .el-toggleswitch-bg {\r\n    /* This is the color of the background in the unchecked state. */ \r\n    background-color: #ebebeb;\r\n    /* These three properties are used to "shrink" the default rounded backdrop. */\r\n    box-sizing: border-box;\r\n    background-clip: content-box;\r\n    border: 2px solid transparent;\r\n    /* The new animation for the background. */\r\n    transition: background-color 0.3s;\r\n}\r\n\r\n.toggleswitch-custom .el-toggleswitch.checked > .el-toggleswitch-bg {\r\n    /* This is the color of the background in the checked state. */ \r\n    background-color: #9dd4a1;\r\n    /* The default control uses box-shadow to create the animation, so remove that. */\r\n    box-shadow: none;\r\n    /* The default control changes the border, so override that. */\r\n    border: 2px solid transparent;\r\n    /* The default control has a slightly different animation for unchecking, so override that. */\r\n    transition: background-color 0.3s;\r\n}\r\n\r\n.toggleswitch-custom .el-toggleswitch > .el-toggleswitch-nub {\r\n    /* This is the color of the switch in the unchecked state. */ \r\n    background-color: #fff;\r\n    /* Remove the border. */\r\n    border: 0;\r\n    /* Create a dropshadow. */\r\n    box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.3);\r\n    /* Add a color transition to the switch as well as the slide animation. */\r\n    transition: background-color 0.3s, left 0.15s;\r\n}\r\n\r\n.toggleswitch-custom .el-toggleswitch.checked > .el-toggleswitch-nub {\r\n    /* This is the color of the switch in the checked state. */ \r\n    background-color: #fff;\r\n}'}},2421: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 punctuation">></span></span>\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>toggleswitch</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.toggleSwitches.option1<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>vm.toggleSwitchDisable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toggle 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>toggleswitch</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>toggleswitch</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.toggleSwitches.option2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toggle 2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>toggleswitch</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>toggleswitch</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.toggleSwitches.option3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toggle 3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>toggleswitch</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>m-t-sm<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>toggleswitch</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toggleswitch-lg<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>vm.toggleSwitches.option4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large Toggle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>toggleswitch</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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>m-t<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>code</span><span class="token punctuation">></span></span>toggleSwitches.option1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.toggleSwitches.option1<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>em</span><span class="token punctuation">></span></span>.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>toggleSwitches.option2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.toggleSwitches.option2<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>em</span><span class="token punctuation">></span></span>.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>toggleSwitches.option3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.toggleSwitches.option3<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>em</span><span class="token punctuation">></span></span>.\r\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span><span class="token punctuation">></span></span>toggleSwitches.option4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">></span></span> is <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.toggleSwitches.option4<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>em</span><span class="token punctuation">></span></span>.\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</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 m-r-xs<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>vm.toggleSwitchDisable <span class="token punctuation">=</span> !vm.toggleSwitchDisable<span class="token punctuation">"</span></span> <span class="token attr-name">ng-bind</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.toggleSwitchDisable ? <span class="token punctuation">\'</span>Click to enable Toggle 1<span class="token punctuation">\'</span> : <span class="token punctuation">\'</span>Click to disable Toggle 1<span class="token punctuation">\'</span><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>button</span><span class="token punctuation">></span></span>\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</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>toggleswitch</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toggleswitch-custom<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>vm.toggleSwitches.option5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Custom Toggle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>toggleswitch</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>\r\n    <toggleswitch ng-model="vm.toggleSwitches.option1" ng-disabled="vm.toggleSwitchDisable">Toggle 1</toggleswitch>\r\n</div>\r\n<div>\r\n    <toggleswitch ng-model="vm.toggleSwitches.option2">Toggle 2</toggleswitch>\r\n</div>\r\n<div>\r\n    <toggleswitch ng-model="vm.toggleSwitches.option3">Toggle 3</toggleswitch>\r\n</div>\r\n<div class="m-t-sm">\r\n    <toggleswitch class="toggleswitch-lg" ng-model="vm.toggleSwitches.option4">Large Toggle</toggleswitch>\r\n</div>\r\n<p class="m-t">\r\n    <code>toggleSwitches.option1</code> is <em ng-bind="vm.toggleSwitches.option1"></em>.\r\n    <code>toggleSwitches.option2</code> is <em ng-bind="vm.toggleSwitches.option2"></em>.\r\n    <code>toggleSwitches.option3</code> is <em ng-bind="vm.toggleSwitches.option3"></em>.\r\n    <code>toggleSwitches.option4</code> is <em ng-bind="vm.toggleSwitches.option4"></em>.\r\n</p>\r\n<button class="btn button-primary m-r-xs" ng-click="vm.toggleSwitchDisable = !vm.toggleSwitchDisable" ng-bind="vm.toggleSwitchDisable ? \'Click to enable Toggle 1\' : \'Click to disable Toggle 1\'"></button>\r\n<hr>\r\n<div>\r\n    <toggleswitch class="toggleswitch-custom" ng-model="vm.toggleSwitches.option5">Custom Toggle</toggleswitch>\r\n</div>'}},2422: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">\'ToggleSwitchDemoCtrl\'</span><span class="token punctuation">,</span> ToggleSwitchDemoCtrl<span class="token punctuation">)</span><span class="token punctuation">;</span>\r\n\r\n<span class="token keyword">function</span> <span class="token function">ToggleSwitchDemoCtrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n    <span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>\r\n\r\n    vm<span class="token punctuation">.</span>toggleSwitches <span class="token operator">=</span> <span class="token punctuation">{</span>\r\n        option1<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\r\n        option2<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n        option3<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n        option4<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\r\n        option5<span class="token punctuation">:</span> <span class="token boolean">false</span>\r\n    <span class="token punctuation">}</span><span class="token punctuation">;</span>\r\n    vm<span class="token punctuation">.</span>toggleSwitchDisable <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:"angular.module('app').controller('ToggleSwitchDemoCtrl', ToggleSwitchDemoCtrl);\r\n\r\nfunction ToggleSwitchDemoCtrl() {\r\n    var vm = this;\r\n\r\n    vm.toggleSwitches = {\r\n        option1: true,\r\n        option2: false,\r\n        option3: false,\r\n        option4: false,\r\n        option5: false\r\n    };\r\n    vm.toggleSwitchDisable = false;\r\n}"}},2423:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>toggleswitch</span> <span class="token attr-name">ng-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vm.toggleSwitches.option1<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>vm.toggleSwitchDisable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Toggle 1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>toggleswitch</span><span class="token punctuation">></span></span>',example:'<toggleswitch ng-model="vm.toggleSwitches.option1" ng-disabled="vm.toggleSwitchDisable">Toggle 1</toggleswitch>'}},2424:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>toggleswitch</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toggleswitch-lg<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>vm.toggleSwitches.option4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large Toggle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>toggleswitch</span><span class="token punctuation">></span></span>',example:'<toggleswitch class="toggleswitch-lg" ng-model="vm.toggleSwitches.option4">Large Toggle</toggleswitch>'}},2425:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>toggleswitch</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>toggleswitch-custom<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>vm.toggleSwitches.option5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Custom Toggle<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>toggleswitch</span><span class="token punctuation">></span></span>',example:'<toggleswitch class="toggleswitch-custom" ng-model="vm.toggleSwitches.option5">Custom Toggle</toggleswitch>'}},2426:function(n,a){n.exports='<uxd-toggle-switch-wrapper></uxd-toggle-switch-wrapper>\r\n\r\n<hr>\r\n\r\n<p>To create a toggle switch use the <code>toggleswitch</code> directive with an <code>ng-model</code> attribute to set and\r\n    store the value. Use <code>ng-disabled</code> to control the disabled state.</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample1Html"></uxd-snippet>\r\n\r\n<p>Add the class <code>toggleswitch-lg</code> to use the large variant of the toggle switch.</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample2Html"></uxd-snippet>\r\n\r\n<p>The following attributes can be set to customize the behavior of the control.</p>\r\n\r\n<div class="demo-attributes table-responsive">\r\n    <table class="table m-t">\r\n        <tr>\r\n            <th>Name</th>\r\n            <th>Type</th>\r\n            <th>Binding</th>\r\n            <th>Description</th>\r\n            <th>Optional</th>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">ng-model</td>\r\n            <td>boolean</td>\r\n            <td>variable</td>\r\n            <td>Initially sets the value of the swtich and will be updated to contain the current value if a user toggles the\r\n                switch.</td>\r\n            <td>false</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">ng-disabled</td>\r\n            <td>value</td>\r\n            <td>variable</td>\r\n            <td>If this value is set to <code>true</code> the toggle switch will be disabled.</td>\r\n            <td>true</td>\r\n        </tr>\r\n        <tr>\r\n            <td class="attribute">clickable</td>\r\n            <td>boolean</td>\r\n            <td>variable</td>\r\n            <td>If set to <code>false</code> the switch will not be updated when clicking on it, can be used if something else\r\n                is updating the state of the switch.</td>\r\n            <td>true</td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n\r\n<h4>Custom Styling</h4>\r\n\r\n<uxd-custom-toggle-switch-wrapper></uxd-custom-toggle-switch-wrapper>\r\n\r\n<hr>\r\n\r\n<p>Above is an example of a custom style applied to the toggle switch using CSS. Using the classes described below, one may\r\n    modify the appearance, size, and animations associated with the toggle switch.</p>\r\n\r\n<p>The control consists of the following components that may be styled.</p>\r\n\r\n<ul>\r\n    <li><code>.el-toggleswitch-label</code> is the container of both the toggle switch and the associated label.\r\n        <ul>\r\n            <li><code>.el-toggleswitch</code> contains the toggle switch components. It will also have additional classes based\r\n                on the state of the control. <code>.checked</code> will be present when the control is in the checked state.\r\n                <code>.disabled</code> will be present if the <code>ng-disabled</code> expression evaluates to true.\r\n                <ul>\r\n                    <li><code>.el-toggleswitch-bg</code> is the visible backdrop of the toggle switch.</li>\r\n                    <li><code>.el-toggleswitch-nub</code> is the switch component which moves when changing state.</li>\r\n                </ul>\r\n            </li>\r\n            <li><code>.el-toggleswitch-content</code> contains the text label.</li>\r\n        </ul>\r\n    </li>\r\n</ul>\r\n\r\n<p>The CSS used to create the custom appearance above is as follows. Note that a custom parent class has been applied to each\r\n    style rule.</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sampleCss" language="css"></uxd-snippet>\r\n\r\n<p>To ensure that the styles override the default, create the toggle switch with the custom class applied.</p>\r\n\r\n<uxd-snippet [content]="snippets.compiled.sample3Html"></uxd-snippet>'},2427: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(12),l=s(407),u=s(1713),r=function(n){function a(a){var t=n.call(this,s(2428))||this;return t.plunk={files:{"app.component.ts":t.snippets.raw.appTs,"app.component.html":t.snippets.raw.appHtml,"app.component.css":t.snippets.raw.appCss},modules:[{imports:["NumberPickerModule"],library:"ux-aspects"}]},t.form=a.group({integer:[0,c.Validators.compose([c.Validators.required,c.Validators.min(-10),c.Validators.max(10)])],decimal:[0,c.Validators.compose([c.Validators.required,c.Validators.min(0),c.Validators.max(10)])]}),t}return t(a,n),a}(u.BaseDocumentationSection);r=p([o.Component({selector:"uxd-components-number-picker-ng1",template:s(2432)}),l.DocumentationSectionComponent("ComponentsNumberPickerComponent"),e("design:paramtypes",[c.FormBuilder])],r),a.ComponentsNumberPickerComponent=r},2428: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={"./app.css":2429,"./app.html":2430,"./app.ts":2431};t.keys=function(){return Object.keys(e)},t.resolve=p,n.exports=t,t.id=2428},2429:function(n,a){n.exports={snippet:'<span class="token selector">.number-picker-component-demo</span> <span class="token punctuation">{</span>\r\n    <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>\r\n<span class="token punctuation">}</span>',example:".number-picker-component-demo {\r\n    width: 100px;\r\n}"}},2430:function(n,a){n.exports={snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Selecting an integer:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</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>ux-number-picker</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number-picker-component-demo<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>-10<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">[valid]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form.controls[<span class="token punctuation">\'</span>integer<span class="token punctuation">\'</span>].valid<span class="token punctuation">"</span></span> <span class="token attr-name">[formControl]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form.controls[<span class="token punctuation">\'</span>integer<span class="token punctuation">\'</span>]<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>ux-number-picker</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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-error<span class="token punctuation">"</span></span> <span class="token attr-name">*ngIf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form.controls[<span class="token punctuation">\'</span>integer<span class="token punctuation">\'</span>].invalid<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>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<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> Enter a number between -10 and 10.\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>m-t-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Selecting a decimal:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</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>ux-number-picker</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number-picker-component-demo<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.5<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">[valid]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form.controls[<span class="token punctuation">\'</span>decimal<span class="token punctuation">\'</span>].valid<span class="token punctuation">"</span></span> <span class="token attr-name">[formControl]</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form.controls[<span class="token punctuation">\'</span>decimal<span class="token punctuation">\'</span>]<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>ux-number-picker</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>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-error<span class="token punctuation">"</span></span> <span class="token attr-name">*ngIf</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>form.controls[<span class="token punctuation">\'</span>decimal<span class="token punctuation">\'</span>].invalid<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>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<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> Enter a number between 0 and 10.\r\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>',example:'<p>Selecting an integer:</p>\r\n\r\n<ux-number-picker class="number-picker-component-demo" min="-10" max="10" [valid]="form.controls[\'integer\'].valid" [formControl]="form.controls[\'integer\']"></ux-number-picker>\r\n\r\n<p class="text-error" *ngIf="form.controls[\'integer\'].invalid">\r\n    <span class="hpe-icon hpe-alert"></span> Enter a number between -10 and 10.\r\n</p>\r\n\r\n<p class="m-t-md">Selecting a decimal:</p>\r\n\r\n<ux-number-picker class="number-picker-component-demo" step="0.5" min="0" max="10" [valid]="form.controls[\'decimal\'].valid" [formControl]="form.controls[\'decimal\']"></ux-number-picker>\r\n\r\n<p class="text-error" *ngIf="form.controls[\'decimal\'].invalid">\r\n    <span class="hpe-icon hpe-alert"></span> Enter a number between 0 and 10.\r\n</p>'}},2431:function(n,a){n.exports={snippet:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@angular/core\'</span><span class="token punctuation">;</span>\r\n<span class="token keyword">import</span> <span class="token punctuation">{</span> FormBuilder<span class="token punctuation">,</span> Validators<span class="token punctuation">,</span> FormGroup <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'@angular/forms\'</span><span class="token punctuation">;</span>\r\n\r\n@<span class="token function">Component</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\r\n    selector<span class="token punctuation">:</span> <span class="token string">\'app\'</span><span class="token punctuation">,</span>\r\n    templateUrl<span class="token punctuation">:</span> <span class="token string">\'./src/app.component.html\'</span><span class="token punctuation">,</span>\r\n    styleUrls<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">\'./src/app.component.css\'</span><span class="token punctuation">]</span>\r\n<span class="token punctuation">}</span><span class="token punctuation">)</span>\r\n<span class="token keyword">export</span> <span class="token keyword">class</span> <span class="token class-name">AppComponent</span> <span class="token punctuation">{</span>\r\n    form<span class="token punctuation">:</span> FormGroup<span class="token punctuation">;</span>\r\n\r\n    <span class="token function">constructor</span><span class="token punctuation">(</span>formBuilder<span class="token punctuation">:</span> FormBuilder<span class="token punctuation">)</span> <span class="token punctuation">{</span>\r\n\r\n        <span class="token keyword">this</span><span class="token punctuation">.</span>form <span class="token operator">=</span> formBuilder<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\r\n            integer<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> Validators<span class="token punctuation">.</span><span class="token function">compose</span><span class="token punctuation">(</span><span class="token punctuation">[</span>Validators<span class="token punctuation">.</span>required<span class="token punctuation">,</span> Validators<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">,</span> Validators<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\r\n            decimal<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> Validators<span class="token punctuation">.</span><span class="token function">compose</span><span class="token punctuation">(</span><span class="token punctuation">[</span>Validators<span class="token punctuation">.</span>required<span class="token punctuation">,</span> Validators<span class="token punctuation">.</span><span class="token function">min</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span> Validators<span class="token punctuation">.</span><span class="token function">max</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</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>\r\n<span class="token punctuation">}</span>',example:"import { Component } from '@angular/core';\r\nimport { FormBuilder, Validators, FormGroup } from '@angular/forms';\r\n\r\n@Component({\r\n    selector: 'app',\r\n    templateUrl: './src/app.component.html',\r\n    styleUrls: ['./src/app.component.css']\r\n})\r\nexport class AppComponent {\r\n    form: FormGroup;\r\n\r\n    constructor(formBuilder: FormBuilder) {\r\n\r\n        this.form = formBuilder.group({\r\n            integer: [0, Validators.compose([Validators.required, Validators.min(-10), Validators.max(10)])],\r\n            decimal: [0, Validators.compose([Validators.required, Validators.min(0), Validators.max(10)])]\r\n        });\r\n    }\r\n}"}},2432:function(n,a){n.exports='<p>Selecting an integer:</p>\r\n\r\n<ux-number-picker class="number-picker-component-demo" min="-10" max="10" [valid]="form.controls[\'integer\'].valid" [formControl]="form.controls[\'integer\']"></ux-number-picker>\r\n\r\n<p class="text-error" *ngIf="form.controls[\'integer\'].invalid">\r\n    <span class="hpe-icon hpe-alert"></span> Enter a number between -10 and 10.\r\n</p>\r\n\r\n<p class="m-t-md">Selecting a decimal:</p>\r\n\r\n<ux-number-picker class="number-picker-component-demo" step="0.5" min="0" max="10" [valid]="form.controls[\'decimal\'].valid" [formControl]="form.controls[\'decimal\']"></ux-number-picker>\r\n\r\n<p class="text-error" *ngIf="form.controls[\'decimal\'].invalid">\r\n    <span class="hpe-icon hpe-alert"></span> Enter a number between 0 and 10.\r\n</p>\r\n\r\n<hr>\r\n\r\n<p>\r\n    The <code>ux-number-picker</code> component provides a way in which users can easily select a number value from a specified\r\n    range by clicking the up and down buttons, using the up/down arrow keys or by using the mouse wheel while hovering over\r\n    the control.\r\n</p>\r\n\r\n<p>The number picker behavior can be customized by using the following attributes:</p>\r\n\r\n<table class="table">\r\n\r\n    <thead>\r\n        <tr>\r\n            <th>Name</th>\r\n            <th>Type</th>\r\n            <th>Description</th>\r\n        </tr>\r\n    </thead>\r\n\r\n    <tbody>\r\n\r\n        <tr>\r\n            <td><b>@Input @Output</b> value</td>\r\n            <td><b>number</b></td>\r\n            <td>Sets the value displayed in the number picker component. If two way binding is used this value will be updated\r\n                any time the number picker value changes.</td>\r\n        </tr>\r\n\r\n        <tr>\r\n            <td><b>@Input</b> step</td>\r\n            <td><b>number</b></td>\r\n            <td>Defines the amount the number picker should increase or decrease when the buttons or arrow keys are used. Default\r\n                value is <code>1</code>.</td>\r\n        </tr>\r\n\r\n        <tr>\r\n            <td><b>@Input</b> min</td>\r\n            <td><b>number</b></td>\r\n            <td>Defines the minimum value the number picker can set. Default value is <code>-Infinity</code>.</td>\r\n        </tr>\r\n\r\n        <tr>\r\n            <td><b>@Input</b> max</td>\r\n            <td><b>number</b></td>\r\n            <td>Defines the maximum value the number picker can set. Default value is <code>Infinity</code>.</td>\r\n        </tr>\r\n\r\n        <tr>\r\n            <td><b>@Input</b> valid</td>\r\n            <td><b>boolean</b></td>\r\n            <td>\r\n                Can be used to show a red outline around the input to indicate an invalid value. By default the error state will appear if\r\n                the user enters a number below the minimum value or above the maximum value.\r\n            </td>\r\n        </tr>\r\n\r\n    </tbody>\r\n</table>\r\n\r\n<p>The number picker component can be disabled using the <code>disabled</code> attribute. It also supports <code>ngModel</code>    for use within forms.</p>\r\n\r\n<p>The following code can be used to create the example shown above:</p>\r\n\r\n<tabset>\r\n    <tab heading="HTML">\r\n        <uxd-snippet [content]="snippets.compiled.appHtml"></uxd-snippet>\r\n    </tab>\r\n    <tab heading="TypeScript">\r\n        <uxd-snippet [content]="snippets.compiled.appTs"></uxd-snippet>\r\n    </tab>\r\n    <tab heading="CSS">\r\n        <uxd-snippet [content]="snippets.compiled.appCss"></uxd-snippet>\r\n    </tab>\r\n</tabset>'}});