WebSVN - Integrator Subversion - Blame - Rev 1 - /DOCUMENTOS E ANALISE/telas/templates/admin/angularjs/views/ui

Rev	Author	Line No.	Line
1	espaco	1	<!-- BEGIN PAGE HEADER-->
		2	<h3 class="page-title">
		3	UI Bootstrap <small>bootstrap components written in pure AngularJS</small>
		4	</h3>
		5	<div class="page-bar">
		6	<ul class="page-breadcrumb">
		7	<li>
		8	<i class="fa fa-home"></i>
		9	<a href="#/ng_ui_bootstrap.html">AngularJS Features</a>
		10	<i class="fa fa-angle-right"></i>
		11	</li>
		12	<li>
		13	<a href="#/ng_ui_bootstrap.html">UI Bootstrap</a>
		14	</li>
		15	</ul>
		16	<div class="page-toolbar">
		17	<div class="btn-group pull-right">
		18	<button type="button" class="btn btn-fit-height grey-salt dropdown-toggle" data-toggle="dropdown" dropdown-menu-hover data-delay="1000" data-close-others="true">
		19	Actions <i class="fa fa-angle-down"></i>
		20	</button>
		21	<ul class="dropdown-menu pull-right" role="menu">
		22	<li>
		23	<a href="#">
		24	<i class="icon-user"></i> New User </a>
		25	</li>
		26	<li>
		27	<a href="#">
		28	<i class="icon-present"></i> New Event <span class="badge badge-success">4</span>
		29	</a>
		30	</li>
		31	<li>
		32	<a href="#">
		33	<i class="icon-basket"></i> New order </a>
		34	</li>
		35	<li class="divider">
		36	</li>
		37	<li>
		38	<a href="#">
		39	<i class="icon-flag"></i> Pending Orders <span class="badge badge-danger">4</span>
		40	</a>
		41	</li>
		42	<li>
		43	<a href="#">
		44	<i class="icon-users"></i> Pending Users <span class="badge badge-warning">12</span>
		45	</a>
		46	</li>
		47	</ul>
		48	</div>
		49	</div>
		50	</div>
		51	<!-- END PAGE HEADER-->
		52
		53	<!-- BEGIN MAIN CONTENT -->
		54
		55	<div class="note note-success">
		56	<h3>UI Bootstrap</h3>
		57	<p>
		58	Bootstrap components written in pure AngularJS by the AngularUI Team. For more info please check the <a href="http://angular-ui.github.io/bootstrap/">official site</a>
		59	</p>
		60	</div>
		61
		62	<div class="row">
		63	<div class="col-md-12">
		64
		65	<!-- BEGIN: ACCORDION DEMO -->
		66	<div class="portlet light bg-inverse">
		67	<div class="portlet-title">
		68	<div class="caption font-green-sharp">
		69	<i class="icon-settings font-green-sharp"></i>
		70	<span class="caption-subject bold uppercase">Accordion</span>
		71	<span class="caption-helper">ui.bootstrap.accordion</span>
		72	</div>
		73	<div class="tools">
		74	<a href="" class="collapse">
		75	</a>
		76	<a href="#portlet-config" data-toggle="modal" class="config">
		77	</a>
		78	<a href="" class="reload">
		79	</a>
		80	<a href="" class="fullscreen">
		81	</a>
		82	<a href="" class="remove">
		83	</a>
		84	</div>
		85	</div>
		86	<div class="portlet-body">
		87
		88	<div class="row">
		89	<div class="col-md-6">
		90	<div ng-controller="AccordionDemoCtrl">
		91	<p>
		92	<button class="btn btn-success" ng-click="status.open = !status.open">Toggle last panel</button>
		93	<button class="btn btn-warning" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
		94	</p>
		95
		96	<label class="checkbox">
		97	<input type="checkbox" id="accordion_demo_toggle" checked ng-model="oneAtATime">
		98	Open only one at a time
		99	</label>
		100
		101	<accordion close-others="oneAtATime">
		102	<accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
		103	This content is straight in the template.
		104	</accordion-group>
		105	<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
		106	{{group.content}}
		107	</accordion-group>
		108	<accordion-group heading="Dynamic Body Content">
		109	<p>The body of the accordion group grows to fit the contents</p>
		110	<button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
		111	<div ng-repeat="item in items">{{item}}</div>
		112	</accordion-group>
		113	<accordion-group is-open="status.open">
		114	<accordion-heading>
		115	I can have markup, too! <i class="pull-right fa fa-angle-right" ng-class="{'fa-angle-down': status.open, 'fa-angle-right': !status.open}"></i>
		116	</accordion-heading>
		117	This is just some content to illustrate fancy headings.
		118	</accordion-group>
		119	</accordion>
		120	</div>
		121	</div>
		122	<div class="col-md-6">
		123	<p>The <strong>accordion directive</strong> builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.</p>
		124
		125	<p>We can control whether expanding an item will cause the other items to close, using the <code>close-others</code> attribute on accordion.</p>
		126
		127	<p>The body of each accordion group is transcluded in to the body of the collapsible element.</p>
		128	</div>
		129	</div>
		130
		131	</div>
		132	</div>
		133	<!-- END: ACCORDION DEMO -->
		134
		135	<!-- BEGIN ALERT DEMO -->
		136	<div class="portlet light bordered">
		137	<div class="portlet-title">
		138	<div class="caption font-green-sharp">
		139	<i class="icon-settings font-green-sharp"></i>
		140	<span class="caption-subject bold uppercase">Alert</span>
		141	<span class="caption-helper">ui.bootstrap.alert</span>
		142	</div>
		143	<div class="tools">
		144	<a href="" class="collapse">
		145	</a>
		146	<a href="#portlet-config" data-toggle="modal" class="config">
		147	</a>
		148	<a href="" class="reload">
		149	</a>
		150	<a href="" class="fullscreen">
		151	</a>
		152	<a href="" class="remove">
		153	</a>
		154	</div>
		155	</div>
		156	<div class="portlet-body">
		157
		158	<div class="row">
		159	<div class="col-md-6">
		160	<div ng-controller="AlertDemoCtrl">
		161	<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
		162	<button class='btn btn-success' ng-click="addAlert()">Add Alert</button>
		163	</div>
		164	</div>
		165	<div class="col-md-6">
		166	<p>Alert is an AngularJS-version of bootstrap's alert.</p>
		167	<p>This directive can be used to generate alerts from the dynamic model data (using the ng-repeat directive);</p>
		168	<p>The presence of the "close" attribute determines if a close button is displayed</p>
		169	</div>
		170	</div>
		171
		172	</div>
		173	</div>
		174	<!-- END ALERT DEMO -->
		175
		176	<!-- BEGIN BUTTONS DEMO -->
		177	<div class="portlet light bg-inverse">
		178	<div class="portlet-title">
		179	<div class="caption font-green-sharp">
		180	<i class="icon-settings font-green-sharp"></i>
		181	<span class="caption-subject bold uppercase">Buttons</span>
		182	<span class="caption-helper">ui.bootstrap.buttons</span>
		183	</div>
		184	<div class="tools">
		185	<a href="" class="collapse">
		186	</a>
		187	<a href="#portlet-config" data-toggle="modal" class="config" >
		188	</a>
		189	<a href="" class="reload">
		190	</a>
		191	<a href="" class="fullscreen">
		192	</a>
		193	<a href="" class="remove">
		194	</a>
		195	</div>
		196	</div>
		197	<div class="portlet-body">
		198
		199	<div class="row">
		200	<div class="col-md-6">
		201	<div ng-controller="ButtonsCtrl">
		202	<h4>Single toggle</h4>
		203	<pre>{{singleModel}}</pre>
		204	<button type="button" class="btn btn-success" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
		205	Single Toggle
		206	</button>
		207	<h4>Checkbox</h4>
		208	<pre>{{checkModel}}</pre>
		209	<div class="btn-group">
		210	<label class="btn btn-success" ng-model="checkModel.left" btn-checkbox>Left</label>
		211	<label class="btn btn-success" ng-model="checkModel.middle" btn-checkbox>Middle</label>
		212	<label class="btn btn-success" ng-model="checkModel.right" btn-checkbox>Right</label>
		213	</div>
		214	<h4>Radio & Uncheckable Radio</h4>
		215	<pre>{{radioModel \|\| 'null'}}</pre>
		216	<div class="btn-group">
		217	<label class="btn btn-warning" ng-model="radioModel" btn-radio="'Left'">Left</label>
		218	<label class="btn btn-info" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
		219	<label class="btn btn-danger" ng-model="radioModel" btn-radio="'Right'">Right</label>
		220	</div>
		221	<div class="btn-group">
		222	<label class="btn btn-info" ng-model="radioModel" btn-radio="'Left'" uncheckable>Left</label>
		223	<label class="btn btn-info" ng-model="radioModel" btn-radio="'Middle'" uncheckable>Middle</label>
		224	<label class="btn btn-info" ng-model="radioModel" btn-radio="'Right'" uncheckable>Right</label>
		225	</div>
		226	</div>
		227	</div>
		228	<div class="col-md-6">
		229	<p>There are two directives that can make a group of buttons behave like a set of checkboxes,
		230	radio buttons, or a hybrid where radio buttons can be unchecked.</p>
		231	</div>
		232	</div>
		233
		234	</div>
		235	</div>
		236	<!-- END BUTTONS DEMO -->
		237
		238	<!-- BEGIN TABS DEMO -->
		239	<div class="portlet light bordered">
		240	<div class="portlet-title">
		241	<div class="caption font-green-sharp">
		242	<i class="icon-settings font-green-sharp"></i>
		243	<span class="caption-subject bold uppercase">Tabs</span>
		244	<span class="caption-helper">ui.bootstrap.tabs</span>
		245	</div>
		246	<div class="tools">
		247	<a href="" class="collapse">
		248	</a>
		249	<a href="#portlet-config" data-toggle="modal" class="config" >
		250	</a>
		251	<a href="" class="reload">
		252	</a>
		253	<a href="" class="fullscreen">
		254	</a>
		255	<a href="" class="remove">
		256	</a>
		257	</div>
		258	</div>
		259	<div class="portlet-body">
		260	<div class="row">
		261	<div class="col-md-6">
		262	<div ng-controller="TabsDemoCtrl">
		263	<p>Select a tab by setting active binding to true:</p>
		264	<p>
		265	<button class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
		266	<button class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
		267	</p>
		268	<p>
		269	<button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
		270	</p>
		271	<hr />
		272
		273	<tabset>
		274	<tab heading="Static title">Static content</tab>
		275	<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
		276	{{tab.content}}
		277	</tab>
		278	<tab select="alertMe()">
		279	<tab-heading>
		280	<i class="glyphicon glyphicon-bell"></i> Alert!
		281	</tab-heading>
		282	I've got an HTML heading, and a select callback. Pretty cool!
		283	</tab>
		284	</tabset>
		285
		286	<hr />
		287
		288	<tabset vertical="true" type="pills">
		289	<tab heading="Vertical 1">Vertical content 1</tab>
		290	<tab heading="Vertical 2">Vertical content 2</tab>
		291	</tabset>
		292
		293	<hr />
		294
		295	<tabset justified="true">
		296	<tab heading="Justified">Justified content</tab>
		297	<tab heading="SJ">Short Labeled Justified content</tab>
		298	<tab heading="Long Justified">Long Labeled Justified content</tab>
		299	</tabset>
		300	</div>
		301	</div>
		302	<div class="col-md-6">
		303	<p>AngularJS version of the tabs directive.</p>
		304	<h3>Settings</h3>
		305	<h4><code><tabset></code></h4>
		306	<ul>
		307	<li><p><code>vertical</code>
		308	<em>(Defaults: false)</em> :
		309	Whether tabs appear vertically stacked.</p></li>
		310	<li><p><code>justified</code>
		311	<em>(Defaults: false)</em> :
		312	Whether tabs fill the container and have a consistent width.</p></li>
		313	<li><p><code>type</code>
		314	<em>(Defaults: 'tabs')</em> :
		315	Navigation type. Possible values are 'tabs' and 'pills'.</p></li>
		316	</ul>
		317	<h4><code><tab></code></h4>
		318	<ul>
		319	<li><p><code>heading</code> or <code><tab-heading></code>
		320	:
		321	Heading text or HTML markup.</p></li>
		322	<li><p><code>active</code> <i class="glyphicon glyphicon-eye-open"></i>
		323	<em>(Defaults: false)</em> :
		324	Whether tab is currently selected.</p></li>
		325	<li><p><code>disabled</code> <i class="glyphicon glyphicon-eye-open"></i>
		326	<em>(Defaults: false)</em> :
		327	Whether tab is clickable and can be activated.</p></li>
		328	<li><p><code>select()</code>
		329	<em>(Defaults: null)</em> :
		330	An optional expression called when tab is activated.</p></li>
		331	<li><p><code>deselect()</code>
		332	<em>(Defaults: null)</em> :
		333	An optional expression called when tab is deactivated.</p></li>
		334	</ul>
		335	</div>
		336	</div>
		337	</div>
		338	</div>
		339	<!-- END TABS DEMO -->
		340
		341	<!-- BEGIN CAROUSEL DEMO -->
		342	<div class="portlet light bordered">
		343	<div class="portlet-title">
		344	<div class="caption font-green-sharp">
		345	<i class="icon-settings font-green-sharp"></i>
		346	<span class="caption-subject bold uppercase">Carousel</span>
		347	<span class="caption-helper">ui.bootstrap.carousel</span>
		348	</div>
		349	<div class="tools">
		350	<a href="" class="collapse">
		351	</a>
		352	<a href="#portlet-config" data-toggle="modal" class="config" >
		353	</a>
		354	<a href="" class="reload">
		355	</a>
		356	<a href="" class="fullscreen">
		357	</a>
		358	<a href="" class="remove">
		359	</a>
		360	</div>
		361	</div>
		362	<div class="portlet-body">
		363	<div class="row">
		364	<div class="col-md-6">
		365	<div ng-controller="CarouselDemoCtrl">
		366	<div style="height: 305px">
		367	<carousel interval="myInterval">
		368	<slide ng-repeat="slide in slides" active="slide.active">
		369	<img ng-src="{{slide.image}}" style="margin:auto;">
		370	<div class="carousel-caption">
		371	<h4>Slide {{$index}}</h4>
		372	<p>{{slide.text}}</p>
		373	</div>
		374	</slide>
		375	</carousel>
		376	</div>
		377	<div class="row">
		378	<div class="col-md-6">
		379	<button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
		380	</div>
		381	<div class="col-md-6">
		382	Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
		383	<br />Enter a negative number to stop the interval.
		384	</div>
		385	</div>
		386	</div>
		387	</div>
		388	<div class="col-md-6">
		389	<p>Carousel creates a carousel similar to bootstrap's image carousel.</p>
		390
		391	<p>The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the <code>ngTouch</code> module as a dependency.</p>
		392
		393	<p>Use a <code><carousel></code> element with <code><slide></code> elements inside it. It will automatically cycle through the slides at a given rate, and a current-index variable will be kept in sync with the currently visible slide.</p>
		394	</div>
		395	</div>
		396	</div>
		397	</div>
		398	<!-- END CAROUSEL DEMO -->
		399
		400	<!-- BEGIN COLLAPSE DEMO -->
		401	<div class="portlet light bordered">
		402	<div class="portlet-title">
		403	<div class="caption font-green-sharp">
		404	<i class="icon-settings font-green-sharp"></i>
		405	<span class="caption-subject bold uppercase">Collapse</span>
		406	<span class="caption-helper">ui.bootstrap.collapse</span>
		407	</div>
		408	<div class="tools">
		409	<a href="" class="collapse">
		410	</a>
		411	<a href="#portlet-config" data-toggle="modal" class="config" >
		412	</a>
		413	<a href="" class="reload">
		414	</a>
		415	<a href="" class="fullscreen">
		416	</a>
		417	<a href="" class="remove">
		418	</a>
		419	</div>
		420	</div>
		421	<div class="portlet-body">
		422	<div class="row">
		423	<div class="col-md-6">
		424	<div ng-controller="CollapseDemoCtrl">
		425	<button class="btn btn-danger" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
		426	<hr>
		427	<div collapse="isCollapsed">
		428	<div class="well well-lg">Some content</div>
		429	</div>
		430	</div>
		431	</div>
		432	<div class="col-md-6">
		433	<p>AngularJS version of Bootstrap's collapse plugin. Provides a simple way to hide and show an element with a css transition.</p>
		434	</div>
		435	</div>
		436	</div>
		437	</div>
		438	<!-- END COLLAPSE DEMO -->
		439
		440	<!-- BEGIN DATEPICKER DEMO -->
		441	<div class="portlet light bordered">
		442	<div class="portlet-title">
		443	<div class="caption font-green-sharp">
		444	<i class="icon-settings font-green-sharp"></i>
		445	<span class="caption-subject bold uppercase">Datepicker</span>
		446	<span class="caption-helper">ui.bootstrap.datepicker</span>
		447	</div>
		448	<div class="tools">
		449	<a href="" class="collapse">
		450	</a>
		451	<a href="#portlet-config" data-toggle="modal" class="config" >
		452	</a>
		453	<a href="" class="reload">
		454	</a>
		455	<a href="" class="fullscreen">
		456	</a>
		457	<a href="" class="remove">
		458	</a>
		459	</div>
		460	</div>
		461	<div class="portlet-body">
		462	<div class="row">
		463	<div class="col-md-6">
		464	<div ng-controller="DatepickerDemoCtrl">
		465	<pre>Selected date is: <em>{{dt \| date:'fullDate' }}</em></pre>
		466
		467	<h4>Inline</h4>
		468	<div style="display:inline-block; min-height:290px;">
		469	<datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm"></datepicker>
		470	</div>
		471
		472	<h4>Popup</h4>
		473	<div class="row">
		474	<div class="col-md-6">
		475	<p class="input-group">
		476	<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
		477	<span class="input-group-btn">
		478	<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
		479	</span>
		480	</p>
		481	</div>
		482	</div>
		483	<div class="row">
		484	<div class="col-md-6">
		485	<label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
		486	</div>
		487	</div>
		488
		489	<hr />
		490	<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
		491	<button type="button" class="btn btn-sm btn-default" ng-click="dt = '2009-08-24'">2009-08-24</button>
		492	<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
		493	<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" tooltip="After today restriction">Min date</button>
		494	</div>
		495	</div>
		496	<div class="col-md-6">
		497	<div class="scroller" style="height: 600px">
		498	<p>A clean, flexible, and fully customizable date picker.</p>
		499
		500	<p>User can navigate through months and years.
		501	The datepicker shows dates that come from other than the main month being displayed. These other dates are also selectable.</p>
		502
		503	<p>Everything is formatted using the <a href="http://docs.angularjs.org/api/ng.filter:date">date filter</a> and thus is also localized.</p>
		504
		505	<h3>Datepicker Settings</h3>
		506
		507	<p>All settings can be provided as attributes in the <code>datepicker</code> or globally configured through the <code>datepickerConfig</code>.</p>
		508
		509	<ul>
		510	<li><p><code>ng-model</code> <i class="glyphicon glyphicon-eye-open"></i>
		511	:
		512	The date object.</p></li>
		513	<li><p><code>datepicker-mode</code> <i class="glyphicon glyphicon-eye-open"></i>
		514	<em>(Defaults: 'day')</em> :
		515	Current mode of the datepicker <em>(day\|month\|year)</em>. Can be used to initialize datepicker to specific mode.</p></li>
		516	<li><p><code>min-date</code> <i class="glyphicon glyphicon-eye-open"></i>
		517	<em>(Default: null)</em> :
		518	Defines the minimum available date.</p></li>
		519	<li><p><code>max-date</code> <i class="glyphicon glyphicon-eye-open"></i>
		520	<em>(Default: null)</em> :
		521	Defines the maximum available date.</p></li>
		522	<li><p><code>date-disabled (date, mode)</code>
		523	<em>(Default: null)</em> :
		524	An optional expression to disable visible options based on passing date and current mode <em>(day\|month\|year)</em>.</p></li>
		525	<li><p><code>show-weeks</code>
		526	<em>(Defaults: true)</em> :
		527	Whether to display week numbers.</p></li>
		528	<li><p><code>starting-day</code>
		529	<em>(Defaults: 0)</em> :
		530	Starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday).</p></li>
		531	<li><p><code>init-date</code>
		532	:
		533	The initial date view when no model value is not specified.</p></li>
		534	<li><p><code>min-mode</code>
		535	<em>(Defaults: 'day')</em> :
		536	Set a lower limit for mode.</p></li>
		537	<li><p><code>max-mode</code>
		538	<em>(Defaults: 'year')</em> :
		539	Set an upper limit for mode.</p></li>
		540	<li><p><code>format-day</code>
		541	<em>(Default: 'dd')</em> :
		542	Format of day in month.</p></li>
		543	<li><p><code>format-month</code>
		544	<em>(Default: 'MMMM')</em> :
		545	Format of month in year.</p></li>
		546	<li><p><code>format-year</code>
		547	<em>(Default: 'yyyy')</em> :
		548	Format of year in year range.</p></li>
		549	<li><p><code>format-day-header</code>
		550	<em>(Default: 'EEE')</em> :
		551	Format of day in week header.</p></li>
		552	<li><p><code>format-day-title</code>
		553	<em>(Default: 'MMMM yyyy')</em> :
		554	Format of title when selecting day.</p></li>
		555	<li><p><code>format-month-title</code>
		556	<em>(Default: 'yyyy')</em> :
		557	Format of title when selecting month.</p></li>
		558	<li><p><code>year-range</code>
		559	<em>(Default: 20)</em> :
		560	Number of years displayed in year selection.</p></li>
		561	</ul>
		562
		563	<h3>Popup Settings</h3>
		564
		565	<p>Options for datepicker can be passed as JSON using the <code>datepicker-options</code> attribute.
		566	Specific settings for the <code>datepicker-popup</code>, that can globally configured through the <code>datepickerPopupConfig</code>, are:</p>
		567
		568	<ul>
		569	<li><p><code>datepicker-popup</code>
		570	<em>(Default: 'yyyy-MM-dd')</em> :
		571	The format for displayed dates.</p></li>
		572	<li><p><code>show-button-bar</code>
		573	<em>(Default: true)</em> :
		574	Whether to display a button bar underneath the datepicker.</p></li>
		575	<li><p><code>current-text</code>
		576	<em>(Default: 'Today')</em> :
		577	The text to display for the current day button.</p></li>
		578	<li><p><code>clear-text</code>
		579	<em>(Default: 'Clear')</em> :
		580	The text to display for the clear button.</p></li>
		581	<li><p><code>close-text</code>
		582	<em>(Default: 'Done')</em> :
		583	The text to display for the close button.</p></li>
		584	<li><p><code>close-on-date-selection</code>
		585	<em>(Default: true)</em> :
		586	Whether to close calendar when a date is chosen.</p></li>
		587	<li><p><code>datepicker-append-to-body</code>
		588	<em>(Default: false)</em>:
		589	Append the datepicker popup element to <code>body</code>, rather than inserting after <code>datepicker-popup</code>. For global configuration, use <code>datepickerPopupConfig.appendToBody</code>.</p></li>
		590	</ul>
		591
		592	<h3>Keyboard Support</h3>
		593
		594	<p>Depending on datepicker's current mode, the date may reffer either to day, month or year. Accordingly, the term view reffers either to a month, year or year range.</p>
		595
		596	<ul>
		597	<li><code>Left</code>: Move focus to the previous date. Will move to the last date of the previous view, if the current date is the first date of a view.</li>
		598	<li><code>Right</code>: Move focus to the next date. Will move to the first date of the following view, if the current date is the last date of a view.</li>
		599	<li><code>Up</code>: Move focus to the same column of the previous row. Will wrap to the appropriate row in the previous view.</li>
		600	<li><code>Down</code>: Move focus to the same column of the following row. Will wrap to the appropriate row in the following view.</li>
		601	<li><code>PgUp</code>: Move focus to the same date of the previous view. If that date does not exist, focus is placed on the last date of the month.</li>
		602	<li><code>PgDn</code>: Move focus to the same date of the following view. If that date does not exist, focus is placed on the last date of the month.</li>
		603	<li><code>Home</code>: Move to the first date of the view.</li>
		604	<li><code>End</code>: Move to the last date of the view.</li>
		605	<li><code>Enter</code>/<code>Space</code>: Select date.</li>
		606	<li><code>Ctrl</code>+<code>Up</code>: Move to an upper mode.</li>
		607	<li><code>Ctrl</code>+<code>Down</code>: Move to a lower mode.</li>
		608	<li><code>Esc</code>: Will close popup, and move focus to the input.</li>
		609	</ul>
		610	</div>
		611	</div>
		612	</div>
		613	</div>
		614	</div>
		615	<!-- END DATEPICKER DEMO -->
		616
		617	<!-- BEGIN DATEPICKER DEMO -->
		618	<div class="portlet light bordered">
		619	<div class="portlet-title">
		620	<div class="caption font-green-sharp">
		621	<i class="icon-settings font-green-sharp"></i>
		622	<span class="caption-subject bold uppercase">Timepicker</span>
		623	<span class="caption-helper">ui.bootstrap.timepicker</span>
		624	</div>
		625	<div class="tools">
		626	<a href="" class="collapse">
		627	</a>
		628	<a href="#portlet-config" data-toggle="modal" class="config" >
		629	</a>
		630	<a href="" class="reload">
		631	</a>
		632	<a href="" class="fullscreen">
		633	</a>
		634	<a href="" class="remove">
		635	</a>
		636	</div>
		637	</div>
		638	<div class="portlet-body">
		639	<div class="row">
		640	<div class="col-md-6">
		641	<div ng-controller="TimepickerDemoCtrl">
		642	<timepicker ng-model="mytime" ng-change="changed()" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></timepicker>
		643
		644	<pre class="alert alert-info">Time is: {{mytime \| date:'shortTime' }}</pre>
		645
		646	<div class="row">
		647	<div class="col-xs-6">
		648	Hours step is:
		649	<select class="form-control" ng-model="hstep" ng-options="opt for opt in options.hstep"></select>
		650	</div>
		651	<div class="col-xs-6">
		652	Minutes step is:
		653	<select class="form-control" ng-model="mstep" ng-options="opt for opt in options.mstep"></select>
		654	</div>
		655	</div>
		656
		657	<hr>
		658
		659	<button class="btn btn-info" ng-click="toggleMode()">12H / 24H</button>
		660	<button class="btn btn-default" ng-click="update()">Set to 14:00</button>
		661	<button class="btn btn-danger" ng-click="clear()">Clear</button>
		662	</div>
		663	</div>
		664	<div class="col-md-6">
		665	<p>A lightweight & configurable timepicker directive.</p>
		666
		667	<h3>Settings</h3>
		668
		669	<p>All settings can be provided as attributes in the <code><timepicker></code> or globally configured through the <code>timepickerConfig</code>.</p>
		670
		671	<ul>
		672	<li><p><code>ng-model</code> <i class="glyphicon glyphicon-eye-open"></i>
		673	:
		674	The Date object that provides the time state.</p></li>
		675	<li><p><code>hour-step</code> <i class="glyphicon glyphicon-eye-open"></i>
		676	<em>(Defaults: 1)</em> :
		677	Number of hours to increase or decrease when using a button.</p></li>
		678	<li><p><code>minute-step</code> <i class="glyphicon glyphicon-eye-open"></i>
		679	<em>(Defaults: 1)</em> :
		680	Number of minutes to increase or decrease when using a button.</p></li>
		681	<li><p><code>show-meridian</code> <i class="glyphicon glyphicon-eye-open"></i>
		682	<em>(Defaults: true)</em> :
		683	Whether to display 12H or 24H mode.</p></li>
		684	<li><p><code>meridians</code>
		685	<em>(Defaults: null)</em> :
		686	Meridian labels based on locale. To override you must supply an array like ['AM', 'PM'].</p></li>
		687	<li><p><code>readonly-input</code>
		688	<em>(Defaults: false)</em> :
		689	Whether user can type inside the hours & minutes input.</p></li>
		690	<li><p><code>mousewheel</code>
		691	<em>(Defaults: true)</em> :
		692	Whether user can scroll inside the hours & minutes input to increase or decrease it's values.</p></li>
		693	</ul>
		694	</div>
		695	</div>
		696	</div>
		697	</div>
		698	<!-- END DATEPICKER DEMO -->
		699
		700	<!-- BEGIN DROPDOWN DEMO -->
		701	<div class="portlet light bordered">
		702	<div class="portlet-title">
		703	<div class="caption font-green-sharp">
		704	<i class="icon-settings font-green-sharp"></i>
		705	<span class="caption-subject bold uppercase">Dropdown</span>
		706	<span class="caption-helper">ui.bootstrap.dropdown</span>
		707	</div>
		708	<div class="tools">
		709	<a href="" class="collapse">
		710	</a>
		711	<a href="#portlet-config" data-toggle="modal" class="config" >
		712	</a>
		713	<a href="" class="reload">
		714	</a>
		715	<a href="" class="fullscreen">
		716	</a>
		717	<a href="" class="remove">
		718	</a>
		719	</div>
		720	</div>
		721	<div class="portlet-body">
		722	<div class="row">
		723	<div class="col-md-6">
		724	<div ng-controller="DropdownDemoCtrl">
		725	<!-- Simple dropdown -->
		726	<span class="dropdown" on-toggle="toggled(open)">
		727	<a href class="dropdown-toggle">
		728	Click me for a dropdown, yo!
		729	</a>
		730	<ul class="dropdown-menu">
		731	<li ng-repeat="choice in items">
		732	<a href>{{choice}}</a>
		733	</li>
		734	</ul>
		735	</span>
		736
		737	<!-- Single button -->
		738	<div class="btn-group" dropdown is-open="status.isopen">
		739	<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
		740	Button dropdown <span class="caret"></span>
		741	</button>
		742	<ul class="dropdown-menu" role="menu">
		743	<li><a href="#">Action</a></li>
		744	<li><a href="#">Another action</a></li>
		745	<li><a href="#">Something else here</a></li>
		746	<li class="divider"></li>
		747	<li><a href="#">Separated link</a></li>
		748	</ul>
		749	</div>
		750
		751	<!-- Split button -->
		752	<div class="btn-group" dropdown>
		753	<button type="button" class="btn btn-danger">Action</button>
		754	<button type="button" class="btn btn-danger dropdown-toggle">
		755	<span class="caret"></span>
		756	<span class="sr-only">Split button!</span>
		757	</button>
		758	<ul class="dropdown-menu" role="menu">
		759	<li><a href="#">Action</a></li>
		760	<li><a href="#">Another action</a></li>
		761	<li><a href="#">Something else here</a></li>
		762	<li class="divider"></li>
		763	<li><a href="#">Separated link</a></li>
		764	</ul>
		765	</div>
		766
		767	<hr />
		768	<p>
		769	<button type="button" class="btn btn-default btn-sm" ng-click="toggleDropdown($event)">Toggle button dropdown</button>
		770	<button type="button" class="btn btn-warning btn-sm" ng-click="disabled = !disabled">Enable/Disable</button>
		771	</p>
		772	</div>
		773	</div>
		774	<div class="col-md-6">
		775	<p>Dropdown is a simple directive which will toggle a dropdown menu on click or programmatically.
		776	You can either use <code>is-open</code> to toggle or add inside a <code><a dropdown-toggle></code> element to toggle it when is clicked.
		777	There is also the <code>on-toggle(open)</code> optional expression fired when dropdown changes state.</p>
		778	</div>
		779	</div>
		780	</div>
		781	</div>
		782	<!-- END DROPDOWN DEMO -->
		783
		784	<!-- BEGIN MODAL DEMO -->
		785	<div class="portlet light bordered">
		786	<div class="portlet-title">
		787	<div class="caption font-green-sharp">
		788	<i class="icon-settings font-green-sharp"></i>
		789	<span class="caption-subject bold uppercase">Modal</span>
		790	<span class="caption-helper">ui.bootstrap.modal</span>
		791	</div>
		792	<div class="tools">
		793	<a href="" class="collapse">
		794	</a>
		795	<a href="#portlet-config" data-toggle="modal" class="config" >
		796	</a>
		797	<a href="" class="reload">
		798	</a>
		799	<a href="" class="fullscreen">
		800	</a>
		801	<a href="" class="remove">
		802	</a>
		803	</div>
		804	</div>
		805	<div class="portlet-body">
		806	<div class="row">
		807	<div class="col-md-6">
		808	<div ng-controller="ModalDemoCtrl">
		809	<script type="text/ng-template" id="myModalContent.html">
		810	<div class="modal-header">
		811	<h3 class="modal-title">I am a modal!</h3>
		812	</div>
		813	<div class="modal-body">
		814	<ul>
		815	<li ng-repeat="item in items">
		816	<a ng-click="selected.item = item">{{ item }}</a>
		817	</li>
		818	</ul>
		819	Selected: <b>{{ selected.item }}</b>
		820	</div>
		821	<div class="modal-footer">
		822	<button class="btn btn-primary" ng-click="ok()">OK</button>
		823	<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
		824	</div>
		825	</script>
		826
		827	<button class="btn btn-default" ng-click="open()">Open me!</button>
		828	<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
		829	<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
		830	<div ng-show="selected">Selection from a modal: {{ selected }}</div>
		831	</div>
		832	</div>
		833	<div class="col-md-6">
		834	<div class="scroller" style="height: 400px">
		835	<p><code>$modal</code> is a service to quickly create AngularJS-powered modal windows.
		836	Creating custom modals is straightforward: create a partial view, its controller and reference them when using the service.</p>
		837
		838	<p>The <code>$modal</code> service has only one method: <code>open(options)</code> where available options are like follows:</p>
		839
		840	<ul>
		841	<li><code>templateUrl</code> - a path to a template representing modal's content</li>
		842	<li><code>template</code> - inline template representing the modal's content</li>
		843	<li><code>scope</code> - a scope instance to be used for the modal's content (actually the <code>$modal</code> service is going to create a child scope of a provided scope). Defaults to <code>$rootScope</code></li>
		844	<li><code>controller</code> - a controller for a modal instance - it can initialize scope used by modal. Accepts the "controller-as" syntax in the form 'SomeCtrl as myctrl'; can be injected with <code>$modalInstance</code></li>
		845	<li><code>controllerAs</code> - an alternative to the controller-as syntax, matching the API of directive definitions. Requires the <code>controller</code> option to be provided as well</li>
		846	<li><code>resolve</code> - members that will be resolved and passed to the controller as locals; it is equivalent of the <code>resolve</code> property for AngularJS routes</li>
		847	<li><code>backdrop</code> - controls presence of a backdrop. Allowed values: true (default), false (no backdrop), <code>'static'</code> - backdrop is present but modal window is not closed when clicking outside of the modal window.</li>
		848	<li><code>keyboard</code> - indicates whether the dialog should be closable by hitting the ESC key, defaults to true</li>
		849	<li><code>backdropClass</code> - additional CSS class(es) to be added to a modal backdrop template</li>
		850	<li><code>windowClass</code> - additional CSS class(es) to be added to a modal window template</li>
		851	<li><code>windowTemplateUrl</code> - a path to a template overriding modal's window template</li>
		852	<li><code>size</code> - optional size of modal window. Allowed values: <code>'sm'</code> (small) or <code>'lg'</code> (large). Requires Bootstrap 3.1.0 or later</li>
		853	</ul>
		854
		855	<p>The <code>open</code> method returns a modal instance, an object with the following properties:</p>
		856
		857	<ul>
		858	<li><code>close(result)</code> - a method that can be used to close a modal, passing a result</li>
		859	<li><code>dismiss(reason)</code> - a method that can be used to dismiss a modal, passing a reason</li>
		860	<li><code>result</code> - a promise that is resolved when a modal is closed and rejected when a modal is dismissed</li>
		861	<li><code>opened</code> - a promise that is resolved when a modal gets opened after downloading content's template and resolving all variables</li>
		862	</ul>
		863
		864	<p>In addition the scope associated with modal's content is augmented with 2 methods:</p>
		865
		866	<ul>
		867	<li><code>$close(result)</code></li>
		868	<li><code>$dismiss(reason)</code></li>
		869	</ul>
		870
		871	<p>Those methods make it easy to close a modal window without a need to create a dedicated controller.</p>
		872	</div>
		873	</div>
		874	</div>
		875	</div>
		876	</div>
		877	<!-- END DROPDOWN DEMO -->
		878
		879	<!-- BEGIN PAGINATION DEMO -->
		880	<div class="portlet light bordered">
		881	<div class="portlet-title">
		882	<div class="caption font-green-sharp">
		883	<i class="icon-settings font-green-sharp"></i>
		884	<span class="caption-subject bold uppercase">Pagination</span>
		885	<span class="caption-helper">ui.bootstrap.pagination</span>
		886	</div>
		887	<div class="tools">
		888	<a href="" class="collapse">
		889	</a>
		890	<a href="#portlet-config" data-toggle="modal" class="config" >
		891	</a>
		892	<a href="" class="reload">
		893	</a>
		894	<a href="" class="fullscreen">
		895	</a>
		896	<a href="" class="remove">
		897	</a>
		898	</div>
		899	</div>
		900	<div class="portlet-body">
		901	<div class="row">
		902	<div class="col-md-6">
		903	<div ng-controller="PaginationDemoCtrl">
		904	<h4>Default</h4>
		905	<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
		906	<pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="«" last-text="»"></pagination>
		907	<pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
		908	<pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
		909	<pre>The selected page no: {{currentPage}}</pre>
		910	<button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>
		911
		912	<hr />
		913	<h4>Pager</h4>
		914	<pager total-items="totalItems" ng-model="currentPage"></pager>
		915
		916	<hr />
		917	<h4>Limit the maximum visible buttons</h4>
		918	<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
		919	<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
		920	<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
		921	</div>
		922	</div>
		923	<div class="col-md-6">
		924	<p>A lightweight pagination directive that is focused on ... providing pagination & will take care of visualising a pagination bar and enable / disable buttons correctly!</p>
		925
		926	<h3>Pagination Settings</h3>
		927
		928	<p>Settings can be provided as attributes in the <code><pagination></code> or globally configured through the <code>paginationConfig</code>.</p>
		929
		930	<ul>
		931	<li><p><code>ng-model</code> <i class="glyphicon glyphicon-eye-open"></i>
		932	:
		933	Current page number. First page is 1.</p></li>
		934	<li><p><code>total-items</code> <i class="glyphicon glyphicon-eye-open"></i>
		935	:
		936	Total number of items in all pages.</p></li>
		937	<li><p><code>items-per-page</code> <i class="glyphicon glyphicon-eye-open"></i>
		938	<em>(Defaults: 10)</em> :
		939	Maximum number of items per page. A value less than one indicates all items on one page.</p></li>
		940	<li><p><code>max-size</code> <i class="glyphicon glyphicon-eye-open"></i>
		941	<em>(Defaults: null)</em> :
		942	Limit number for pagination size.</p></li>
		943	<li><p><code>num-pages</code> <small class="badge">readonly</small>
		944	<em>(Defaults: angular.noop)</em> :
		945	An optional expression assigned the total number of pages to display.</p></li>
		946	<li><p><code>rotate</code>
		947	<em>(Defaults: true)</em> :
		948	Whether to keep current page in the middle of the visible ones.</p></li>
		949	<li><p><code>direction-links</code>
		950	<em>(Default: true)</em> :
		951	Whether to display Previous / Next buttons.</p></li>
		952	<li><p><code>previous-text</code>
		953	<em>(Default: 'Previous')</em> :
		954	Text for Previous button.</p></li>
		955	<li><p><code>next-text</code>
		956	<em>(Default: 'Next')</em> :
		957	Text for Next button.</p></li>
		958	<li><p><code>boundary-links</code>
		959	<em>(Default: false)</em> :
		960	Whether to display First / Last buttons.</p></li>
		961	<li><p><code>first-text</code>
		962	<em>(Default: 'First')</em> :
		963	Text for First button.</p></li>
		964	<li><p><code>last-text</code>
		965	<em>(Default: 'Last')</em> :
		966	Text for Last button.</p></li>
		967	</ul>
		968
		969	<h3>Pager Settings</h3>
		970
		971	<p>Settings can be provided as attributes in the <code><pager></code> or globally configured through the <code>pagerConfig</code>. <br>
		972	For <code>ng-model</code>, <code>total-items</code>, <code>items-per-page</code> and <code>num-pages</code> see pagination settings. Other settings are:</p>
		973
		974	<ul>
		975	<li><p><code>align</code>
		976	<em>(Default: true)</em> :
		977	Whether to align each link to the sides.</p></li>
		978	<li><p><code>previous-text</code>
		979	<em>(Default: '« Previous')</em> :
		980	Text for Previous button.</p></li>
		981	<li><p><code>next-text</code>
		982	<em>(Default: 'Next »')</em> :
		983	Text for Next button.</p></li>
		984	</ul>
		985	</div>
		986	</div>
		987	</div>
		988	</div>
		989	<!-- END PAGINATION DEMO -->
		990
		991	<!-- BEGIN POPOVER DEMO -->
		992	<div class="portlet light bordered">
		993	<div class="portlet-title">
		994	<div class="caption font-green-sharp">
		995	<i class="icon-settings font-green-sharp"></i>
		996	<span class="caption-subject bold uppercase">Popover</span>
		997	<span class="caption-helper">ui.bootstrap.popover</span>
		998	</div>
		999	<div class="tools">
		1000	<a href="" class="collapse">
		1001	</a>
		1002	<a href="#portlet-config" data-toggle="modal" class="config" >
		1003	</a>
		1004	<a href="" class="reload">
		1005	</a>
		1006	<a href="" class="fullscreen">
		1007	</a>
		1008	<a href="" class="remove">
		1009	</a>
		1010	</div>
		1011	</div>
		1012	<div class="portlet-body">
		1013	<div class="row">
		1014	<div class="col-md-6">
		1015	<div ng-controller="PopoverDemoCtrl">
		1016	<h4>Dynamic</h4>
		1017	<div class="form-group">
		1018	<label>Popup Text:</label>
		1019	<input type="text" ng-model="dynamicPopover" class="form-control">
		1020	</div>
		1021	<div class="form-group">
		1022	<label>Popup Title:</label>
		1023	<input type="text" ng-model="dynamicPopoverTitle" class="form-control">
		1024	</div>
		1025	<button popover="{{dynamicPopover}}" popover-title="{{dynamicPopoverTitle}}" class="btn btn-default">Dynamic Popover</button>
		1026
		1027	<hr />
		1028	<h4>Positional</h4>
		1029	<button popover-placement="top" popover="On the Top!" class="btn btn-success">Top</button>
		1030	<button popover-placement="left" popover="On the Left!" class="btn btn-info">Left</button>
		1031	<button popover-placement="right" popover="On the Right!" class="btn btn-warning">Right</button>
		1032	<button popover-placement="bottom" popover="On the Bottom!" class="btn btn-danger">Bottom</button>
		1033
		1034	<hr />
		1035	<h4>Triggers</h4>
		1036	<p>
		1037	<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="btn red">Mouseenter</button>
		1038	</p>
		1039	<input type="text" value="Click me!" popover="I appeared on focus! Click away and I'll vanish..." popover-trigger="focus" class="form-control">
		1040
		1041	<hr />
		1042	<h4>Other</h4>
		1043	<button Popover-animation="true" popover="I fade in and out!" class="btn green-haze">fading</button>
		1044	<button popover="I have a title!" popover-title="The title." class="btn blue-hoki">title</button>
		1045	</div>
		1046	</div>
		1047	<div class="col-md-6">
		1048	<p>A lightweight, extensible directive for fancy popover creation. The popover
		1049	directive supports multiple placements, optional transition animation, and more.</p>
		1050
		1051	<p>Like the Bootstrap jQuery plugin, the popover <strong>requires</strong> the tooltip
		1052	module.</p>
		1053
		1054	<p>The popover directives provides several optional attributes to control how it
		1055	will display:</p>
		1056
		1057	<ul>
		1058	<li><code>popover-title</code>: A string to display as a fancy title.</li>
		1059	<li><code>popover-placement</code>: Where to place it? Defaults to "top", but also accepts
		1060	"bottom", "left", "right".</li>
		1061	<li><code>popover-animation</code>: Should it fade in and out? Defaults to "true".</li>
		1062	<li><code>popover-popup-delay</code>: For how long should the user have to have the mouse
		1063	over the element before the popover shows (in milliseconds)? Defaults to 0.</li>
		1064	<li><code>popover-trigger</code>: What should trigger the show of the popover? See the
		1065	<code>tooltip</code> directive for supported values.</li>
		1066	<li><code>popover-append-to-body</code>: Should the tooltip be appended to <code>$body</code> instead of
		1067	the parent element?</li>
		1068	</ul>
		1069
		1070	<p>The popover directives require the <code>$position</code> service.</p>
		1071
		1072	<p>The popover directive also supports various default configurations through the
		1073	$tooltipProvider. See the <a href="#tooltip">tooltip</a> section for more information.</p>
		1074	</div>
		1075	</div>
		1076	</div>
		1077	</div>
		1078	<!-- END POPOVER DEMO -->
		1079
		1080	<!-- BEGIN TOOLTIP DEMO -->
		1081	<div class="portlet light bordered">
		1082	<div class="portlet-title">
		1083	<div class="caption font-green-sharp">
		1084	<i class="icon-settings font-green-sharp"></i>
		1085	<span class="caption-subject bold uppercase">Tooltip</span>
		1086	<span class="caption-helper">ui.bootstrap.tooltip</span>
		1087	</div>
		1088	<div class="tools">
		1089	<a href="" class="collapse">
		1090	</a>
		1091	<a href="#portlet-config" data-toggle="modal" class="config" >
		1092	</a>
		1093	<a href="" class="reload">
		1094	</a>
		1095	<a href="" class="fullscreen">
		1096	</a>
		1097	<a href="" class="remove">
		1098	</a>
		1099	</div>
		1100	</div>
		1101	<div class="portlet-body">
		1102	<div class="row">
		1103	<div class="col-md-6">
		1104	<div ng-controller="TooltipDemoCtrl">
		1105	<div class="form-group">
		1106	<label>Dynamic Tooltip Text</label>
		1107	<input type="text" ng-model="dynamicTooltipText" class="form-control">
		1108	</div>
		1109	<div class="form-group">
		1110	<label>Dynamic Tooltip Popup Text</label>
		1111	<input type="text" ng-model="dynamicTooltip" class="form-control">
		1112	</div>
		1113	<p>
		1114	Pellentesque <a href="#" tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
		1115	sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
		1116	aliquam. Tincidunt lobortis feugiat vivamus at
		1117	<a href="#" tooltip-placement="left" tooltip="On the Left!">left</a> eget
		1118	arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
		1119	<a href="#" tooltip-placement="right" tooltip="On the Right!">right</a>
		1120	nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas
		1121	<a href="#" tooltip-placement="bottom" tooltip="On the Bottom!">bottom</a>
		1122	pharetra convallis posuere morbi leo urna,
		1123	<a href="#" tooltip-animation="false" tooltip="I don't fade. :-(">fading</a>
		1124	at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
		1125	<a href="#" tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
		1126	</p>
		1127
		1128	<p>
		1129	I can even contain HTML. <a href="#" tooltip-html-unsafe="{{htmlTooltip}}">Check me out!</a>
		1130	</p>
		1131
		1132	<form role="form">
		1133	<div class="form-group">
		1134	<label>Or use custom triggers, like focus: </label>
		1135	<input type="text" value="Click me!" tooltip="See? Now click away..." tooltip-trigger="focus" tooltip-placement="right" class="form-control" />
		1136	</div>
		1137	</form>
		1138	</div>
		1139	</div>
		1140	<div class="col-md-6">
		1141	<div class="scroller" style="height: 400px">
		1142	<p>A lightweight, extensible directive for fancy tooltip creation. The tooltip
		1143	directive supports multiple placements, optional transition animation, and more.</p>
		1144
		1145	<p>There are two versions of the tooltip: <code>tooltip</code> and <code>tooltip-html-unsafe</code>. The
		1146	former takes text only and will escape any HTML provided. The latter takes
		1147	whatever HTML is provided and displays it in a tooltip; it called "unsafe"
		1148	because the HTML is not sanitized. <em>The user is responsible for ensuring the
		1149	content is safe to put into the DOM!</em></p>
		1150
		1151	<p>The tooltip directives provide several optional attributes to control how they
		1152	will display:</p>
		1153
		1154	<ul>
		1155	<li><code>tooltip-placement</code>: Where to place it? Defaults to "top", but also accepts
		1156	"bottom", "left", "right".</li>
		1157	<li><code>tooltip-animation</code>: Should it fade in and out? Defaults to "true".</li>
		1158	<li><code>tooltip-popup-delay</code>: For how long should the user have to have the mouse
		1159	over the element before the tooltip shows (in milliseconds)? Defaults to 0.</li>
		1160	<li><code>tooltip-trigger</code>: What should trigger a show of the tooltip?</li>
		1161	<li><code>tooltip-append-to-body</code>: Should the tooltip be appended to <code>$body</code> instead of
		1162	the parent element?</li>
		1163	</ul>
		1164
		1165	<p>The tooltip directives require the <code>$position</code> service.</p>
		1166
		1167	<p><strong>Triggers</strong></p>
		1168
		1169	<p>The following show triggers are supported out of the box, along with their
		1170	provided hide triggers:</p>
		1171
		1172	<ul>
		1173	<li><code>mouseenter</code>: <code>mouseleave</code></li>
		1174	<li><code>click</code>: <code>click</code></li>
		1175	<li><code>focus</code>: <code>blur</code></li>
		1176	</ul>
		1177
		1178	<p>For any non-supported value, the trigger will be used to both show and hide the
		1179	tooltip.</p>
		1180
		1181	<p><strong>$tooltipProvider</strong></p>
		1182
		1183	<p>Through the <code>$tooltipProvider</code>, you can change the way tooltips and popovers
		1184	behave by default; the attributes above always take precedence. The following
		1185	methods are available:</p>
		1186
		1187	<ul>
		1188	<li><code>setTriggers( obj )</code>: Extends the default trigger mappings mentioned above
		1189	with mappings of your own. E.g. <code>{ 'openTrigger': 'closeTrigger' }</code>.</li>
		1190	<li><p><code>options( obj )</code>: Provide a set of defaults for certain tooltip and popover
		1191	attributes. Currently supports 'placement', 'animation', 'popupDelay', and
		1192	<code>appendToBody</code>. Here are the defaults: <code>placement: 'top'</code>, <code>animation: true</code>, <code>popupDelay: 0</code> & <code>appendToBody: false</code></p>
		1193	</li>
		1194	</ul>
		1195	</div>
		1196	</div>
		1197	</div>
		1198	</div>
		1199	</div>
		1200	<!-- END TOOLTIP DEMO -->
		1201
		1202	<!-- BEGIN PROGRESSBAR DEMO -->
		1203	<div class="portlet light bordered">
		1204	<div class="portlet-title">
		1205	<div class="caption font-green-sharp">
		1206	<i class="icon-settings font-green-sharp"></i>
		1207	<span class="caption-subject bold uppercase">Progressbar</span>
		1208	<span class="caption-helper">ui.bootstrap.progressbar</span>
		1209	</div>
		1210	<div class="tools">
		1211	<a href="" class="collapse">
		1212	</a>
		1213	<a href="#portlet-config" data-toggle="modal" class="config" >
		1214	</a>
		1215	<a href="" class="reload">
		1216	</a>
		1217	<a href="" class="fullscreen">
		1218	</a>
		1219	<a href="" class="remove">
		1220	</a>
		1221	</div>
		1222	</div>
		1223	<div class="portlet-body">
		1224	<div class="row">
		1225	<div class="col-md-6">
		1226	<div ng-controller="ProgressDemoCtrl">
		1227	<h3>Static</h3>
		1228	<div class="row">
		1229	<div class="col-sm-4"><progressbar value="55"></progressbar></div>
		1230	<div class="col-sm-4"><progressbar class="progress-striped" value="22" type="warning">22%</progressbar></div>
		1231	<div class="col-sm-4"><progressbar class="progress-striped active" max="200" value="166" type="danger"><i>166 / 200</i></progressbar></div>
		1232	</div>
		1233
		1234	<hr />
		1235	<h3>Dynamic <button class="btn btn-sm btn-primary" type="button" ng-click="random()">Randomize</button></h3>
		1236	<progressbar max="max" value="dynamic"><span style="white-space:nowrap;">{{dynamic}} / {{max}}</span></progressbar>
		1237
		1238	<small><em>No animation</em></small>
		1239	<progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>
		1240
		1241	<small><em>Object (changes type based on value)</em></small>
		1242	<progressbar class="progress-striped active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></progressbar>
		1243
		1244	<hr />
		1245	<h3>Stacked <button class="btn btn-sm btn-primary" type="button" ng-click="randomStacked()">Randomize</button></h3>
		1246	<progress><bar ng-repeat="bar in stacked track by $index" value="bar.value" type="{{bar.type}}"><span ng-hide="bar.value < 5">{{bar.value}}%</span></bar></progress>
		1247	</div>
		1248	</div>
		1249	<div class="col-md-6">
		1250	<p>A progress bar directive that is focused on providing feedback on the progress of a workflow or action.</p>
		1251	<p>It supports multiple (stacked) bars into the same <code><progress></code> element or a single <code><progressbar></code> elemtnt with optional <code>max</code> attribute and transition animations.</p>
		1252
		1253	<h3>Settings</h3>
		1254
		1255	<h4><code><progressbar></code></h4>
		1256
		1257	<ul>
		1258	<li><p><code>value</code> <i class="glyphicon glyphicon-eye-open"></i>
		1259	:
		1260	The current value of progress completed.</p></li>
		1261	<li><p><code>type</code>
		1262	<em>(Default: null)</em> :
		1263	Style type. Possible values are 'success', 'warning' etc.</p></li>
		1264	<li><p><code>max</code>
		1265	<em>(Default: 100)</em> :
		1266	A number that specifies the total value of bars that is required.</p></li>
		1267	<li><p><code>animate</code>
		1268	<em>(Default: true)</em> :
		1269	Whether bars use transitions to achieve the width change.</p></li>
		1270	</ul>
		1271
		1272	<h3>Stacked</h3>
		1273
		1274	<p>Place multiple <code><bars></code> into the same <code><progress></code> element to stack them.
		1275	<code><progress></code> supports <code>max</code> and <code>animate</code> & <code><bar></code> supports <code>value</code> and <code>type</code> attributes.</p>
		1276	</div>
		1277	</div>
		1278	</div>
		1279	</div>
		1280	<!-- END PROGRESSBAR DEMO -->
		1281
		1282	<!-- BEGIN RATING DEMO -->
		1283	<div class="portlet light bordered">
		1284	<div class="portlet-title">
		1285	<div class="caption font-green-sharp">
		1286	<i class="icon-settings font-green-sharp"></i>
		1287	<span class="caption-subject bold uppercase">Typeahead </span>
		1288	<span class="caption-helper">ui.bootstrap.typeahead</span>
		1289	</div>
		1290	<div class="tools">
		1291	<a href="" class="collapse">
		1292	</a>
		1293	<a href="#portlet-config" data-toggle="modal" class="config" >
		1294	</a>
		1295	<a href="" class="reload">
		1296	</a>
		1297	<a href="" class="fullscreen">
		1298	</a>
		1299	<a href="" class="remove">
		1300	</a>
		1301	</div>
		1302	</div>
		1303	<div class="portlet-body">
		1304	<div class="row">
		1305	<div class="col-md-6">
		1306	<script type="text/ng-template" id="customTemplate.html">
		1307	<a>
		1308	<img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
		1309	<span bind-html-unsafe="match.label \| typeaheadHighlight:query"></span>
		1310	</a>
		1311	</script>
		1312	<div class='container-fluid' ng-controller="TypeaheadCtrl">
		1313
		1314	<h4>Static arrays</h4>
		1315	<pre>Model: {{selected \| json}}</pre>
		1316	<input type="text" ng-model="selected" typeahead="state for state in states \| filter:$viewValue \| limitTo:8" class="form-control">
		1317
		1318	<h4>Asynchronous results</h4>
		1319	<pre>Model: {{asyncSelected \| json}}</pre>
		1320	<input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control">
		1321	<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
		1322
		1323	<h4>Custom templates for results</h4>
		1324	<pre>Model: {{customSelected \| json}}</pre>
		1325	<input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="state as state.name for state in statesWithFlags \| filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control">
		1326	</div>
		1327	</div>
		1328	<div class="col-md-6">
		1329	<div class="scroller" style="height: 400px">
		1330	<p>Typeahead is a AngularJS version of <a href="http://getbootstrap.com/2.3.2/javascript.html#typeahead">Bootstrap v2's typeahead plugin</a>.
		1331	This directive can be used to quickly create elegant typeaheads with any form text input.</p>
		1332
		1333	<p>It is very well integrated into AngularJS as it uses a subset of the
		1334	<a href="http://docs.angularjs.org/api/ng.directive:select">select directive</a> syntax, which is very flexible. Supported expressions are:</p>
		1335
		1336	<ul>
		1337	<li><em>label</em> for <em>value</em> in <em>sourceArray</em></li>
		1338	<li><em>select</em> as <em>label</em> for <em>value</em> in <em>sourceArray</em></li>
		1339	</ul>
		1340
		1341	<p>The <code>sourceArray</code> expression can use a special <code>$viewValue</code> variable that corresponds to the value entered inside the input.</p>
		1342
		1343	<p>This directive works with promises, meaning you can retrieve matches using the <code>$http</code> service with minimal effort.</p>
		1344
		1345	<p>The typeahead directives provide several attributes:</p>
		1346
		1347	<ul>
		1348	<li><p><code>ng-model</code> <i class="glyphicon glyphicon-eye-open"></i>
		1349	:
		1350	Assignable angular expression to data-bind to</p></li>
		1351	<li><p><code>typeahead</code> <i class="glyphicon glyphicon-eye-open"></i>
		1352	:
		1353	Comprehension Angular expression (see <a href="http://docs.angularjs.org/api/ng.directive:select">select directive</a>)</p></li>
		1354	<li><p><code>typeahead-append-to-body</code> <i class="glyphicon glyphicon-eye-open"></i>
		1355	<em>(Defaults: false)</em> : Should the typeahead popup be appended to $body instead of the parent element?</p></li>
		1356	<li><p><code>typeahead-editable</code> <i class="glyphicon glyphicon-eye-open"></i>
		1357	<em>(Defaults: true)</em> :
		1358	Should it restrict model values to the ones selected from the popup only ?</p></li>
		1359	<li><p><code>typeahead-input-formatter</code> <i class="glyphicon glyphicon-eye-open"></i>
		1360	<em>(Defaults: undefined)</em> :
		1361	Format the ng-model result after selection</p></li>
		1362	<li><p><code>typeahead-loading</code> <i class="glyphicon glyphicon-eye-open"></i>
		1363	<em>(Defaults: angular.noop)</em> :
		1364	Binding to a variable that indicates if matches are being retrieved asynchronously</p></li>
		1365	<li><p><code>typeahead-min-length</code> <i class="glyphicon glyphicon-eye-open"></i>
		1366	<em>(Defaults: 1)</em> :
		1367	Minimal no of characters that needs to be entered before typeahead kicks-in</p></li>
		1368	<li><p><code>typeahead-on-select($item, $model, $label)</code>
		1369	<em>(Defaults: null)</em> :
		1370	A callback executed when a match is selected</p></li>
		1371	<li><p><code>typeahead-template-url</code> <i class="glyphicon glyphicon-eye-open"></i>
		1372	:
		1373	Set custom item template</p></li>
		1374	<li><p><code>typeahead-wait-ms</code> <i class="glyphicon glyphicon-eye-open"></i>
		1375	<em>(Defaults: 0)</em> :
		1376	Minimal wait time after last character typed before typeahead kicks-in</p></li>
		1377	</ul>
		1378	</div>
		1379	</div>
		1380	</div>
		1381	</div>
		1382	</div>
		1383	<!-- END RATING DEMO -->
		1384
		1385	<!-- BEGIN RATING DEMO -->
		1386	<div class="portlet light bordered">
		1387	<div class="portlet-title">
		1388	<div class="caption font-green-sharp">
		1389	<i class="icon-settings font-green-sharp"></i>
		1390	<span class="caption-subject bold uppercase">Rating</span>
		1391	<span class="caption-helper">ui.bootstrap.rating</span>
		1392	</div>
		1393	<div class="tools">
		1394	<a href="" class="collapse">
		1395	</a>
		1396	<a href="#portlet-config" data-toggle="modal" class="config" >
		1397	</a>
		1398	<a href="" class="reload">
		1399	</a>
		1400	<a href="" class="fullscreen">
		1401	</a>
		1402	<a href="" class="remove">
		1403	</a>
		1404	</div>
		1405	</div>
		1406	<div class="portlet-body">
		1407	<div class="row">
		1408	<div class="col-md-6">
		1409	<div ng-controller="RatingDemoCtrl">
		1410	<h4>Default</h4>
		1411	<rating ng-model="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>
		1412	<span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>
		1413
		1414	<pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar \|\| "none"}}</b></pre>
		1415
		1416	<button class="btn btn-sm btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button>
		1417	<button class="btn btn-sm default" ng-click="isReadonly = ! isReadonly">Toggle Readonly</button>
		1418	<hr />
		1419
		1420	<h4>Custom icons</h4>
		1421	<div ng-init="x = 5"><rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'"></rating> <b>(<i>Rate:</i> {{x}})</b></div>
		1422	<div ng-init="y = 2"><rating ng-model="y" rating-states="ratingStates"></rating> <b>(<i>Rate:</i> {{y}})</b></div>
		1423	</div>
		1424	</div>
		1425	<div class="col-md-6">
		1426	<p>Rating directive that will take care of visualising a star rating bar.</p>
		1427	<h3>Settings</h3>
		1428	<h4><code><rating></code></h4>
		1429	<ul>
		1430	<li><p><code>ng-model</code> <i class="glyphicon glyphicon-eye-open"></i>
		1431	:
		1432	The current rate.</p></li>
		1433	<li><p><code>max</code>
		1434	<em>(Defaults: 5)</em> :
		1435	Changes the number of icons.</p></li>
		1436	<li><p><code>readonly</code> <i class="icon-eye-open"></i>
		1437	<em>(Defaults: false)</em> :
		1438	Prevent user's interaction.</p></li>
		1439	<li><p><code>on-hover(value)</code>
		1440	:
		1441	An optional expression called when user's mouse is over a particular icon.</p></li>
		1442	<li><p><code>on-leave()</code>
		1443	:
		1444	An optional expression called when user's mouse leaves the control altogether.</p></li>
		1445	<li><p><code>state-on</code>
		1446	<em>(Defaults: null)</em> :
		1447	A variable used in template to specify the state (class, src, etc) for selected icons.</p></li>
		1448	<li><p><code>state-off</code>
		1449	<em>(Defaults: null)</em> :
		1450	A variable used in template to specify the state for unselected icons.</p></li>
		1451	<li><p><code>rating-states</code>
		1452	<em>(Defaults: null)</em> :
		1453	An array of objects defining properties for all icons. In default template, <code>stateOn</code> & <code>stateOff</code> property is used to specify the icon's class.</p></li>
		1454	</ul>
		1455	</div>
		1456	</div>
		1457	</div>
		1458	</div>
		1459	<!-- END RATING DEMO -->
		1460	</div>
		1461	</div>
		1462
		1463	<!-- END MAIN CONTENT -->
		1464
		1465	<!-- BEGIN MAIN JS -->
		1466	<script>
		1467	// Accordion demo controller
		1468	function AccordionDemoCtrl($scope) {
		1469	$scope.oneAtATime = true;
		1470
		1471	$scope.groups = [{
		1472	title: 'Dynamic Group Header - 1',
		1473	content: 'Dynamic Group Body - 1'
		1474	}, {
		1475	title: 'Dynamic Group Header - 2',
		1476	content: 'Dynamic Group Body - 2'
		1477	}];
		1478
		1479	$scope.items = ['Item 1', 'Item 2', 'Item 3'];
		1480
		1481	$scope.addItem = function() {
		1482	var newItemNo = $scope.items.length + 1;
		1483	$scope.items.push('Item ' + newItemNo);
		1484	};
		1485
		1486	$scope.status = {
		1487	isFirstOpen: true,
		1488	isFirstDisabled: false
		1489	};
		1490	};
		1491
		1492	// Alert demo controller
		1493	function AlertDemoCtrl($scope) {
		1494	$scope.alerts = [
		1495	{ type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
		1496	{ type: 'success', msg: 'Well done! You successfully read this important alert message.' }
		1497	];
		1498
		1499	$scope.addAlert = function() {
		1500	$scope.alerts.push({msg: 'Another alert!'});
		1501	};
		1502
		1503	$scope.closeAlert = function(index) {
		1504	$scope.alerts.splice(index, 1);
		1505	};
		1506	};
		1507
		1508	// Buttons demo controller
		1509	function ButtonsCtrl($scope) {
		1510	$scope.singleModel = 1;
		1511
		1512	$scope.radioModel = 'Middle';
		1513
		1514	$scope.checkModel = {
		1515	left: false,
		1516	middle: true,
		1517	right: false
		1518	};
		1519	};
		1520
		1521	// Tabs demo controller
		1522	function TabsDemoCtrl($scope) {
		1523	$scope.tabs = [
		1524	{ title:'Dynamic Title 1', content:'Dynamic content 1' },
		1525	{ title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
		1526	];
		1527
		1528	/*
		1529	$scope.alertMe = function() {
		1530	setTimeout(function() {
		1531	alert('You\'ve selected the alert tab!');
		1532	});
		1533	};
		1534	*/
		1535	}
		1536
		1537	// Carousel demo controller
		1538	function CarouselDemoCtrl($scope) {
		1539	$scope.myInterval = 5000;
		1540	var slides = $scope.slides = [];
		1541	$scope.addSlide = function() {
		1542	var newWidth = 500 + slides.length;
		1543	slides.push({
		1544	image: 'http://placekitten.com/' + newWidth + '/300',
		1545	text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
		1546	['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
		1547	});
		1548	};
		1549
		1550	for (var i=0; i<4; i++) {
		1551	$scope.addSlide();
		1552	}
		1553	};
		1554
		1555	// Collapse demo controller
		1556	function CollapseDemoCtrl($scope) {
		1557	$scope.isCollapsed = false;
		1558	}
		1559
		1560	// Datepicker demo controller
		1561	function DatepickerDemoCtrl($scope) {
		1562	$scope.today = function() {
		1563	$scope.dt = new Date();
		1564	};
		1565	$scope.today();
		1566
		1567	$scope.clear = function () {
		1568	$scope.dt = null;
		1569	};
		1570
		1571	// Disable weekend selection
		1572	$scope.disabled = function(date, mode) {
		1573	return ( mode === 'day' && ( date.getDay() === 0 \|\| date.getDay() === 6 ) );
		1574	};
		1575
		1576	$scope.toggleMin = function() {
		1577	$scope.minDate = $scope.minDate ? null : new Date();
		1578	};
		1579	$scope.toggleMin();
		1580
		1581	$scope.open = function($event) {
		1582	$event.preventDefault();
		1583	$event.stopPropagation();
		1584
		1585	$scope.opened = true;
		1586	};
		1587
		1588	$scope.dateOptions = {
		1589	formatYear: 'yy',
		1590	startingDay: 1
		1591	};
		1592
		1593	$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
		1594	$scope.format = $scope.formats[0];
		1595	}
		1596
		1597	// Timepicker demo controller
		1598	function TimepickerDemoCtrl($scope) {
		1599	$scope.mytime = new Date();
		1600
		1601	$scope.hstep = 1;
		1602	$scope.mstep = 15;
		1603
		1604	$scope.options = {
		1605	hstep: [1, 2, 3],
		1606	mstep: [1, 5, 10, 15, 25, 30]
		1607	};
		1608
		1609	$scope.ismeridian = true;
		1610	$scope.toggleMode = function() {
		1611	$scope.ismeridian = ! $scope.ismeridian;
		1612	};
		1613
		1614	$scope.update = function() {
		1615	var d = new Date();
		1616	d.setHours( 14 );
		1617	d.setMinutes( 0 );
		1618	$scope.mytime = d;
		1619	};
		1620
		1621	$scope.changed = function () {
		1622	console.log('Time changed to: ' + $scope.mytime);
		1623	};
		1624
		1625	$scope.clear = function() {
		1626	$scope.mytime = null;
		1627	};
		1628	}
		1629
		1630	// Dropdown demo controller
		1631	function DropdownDemoCtrl($scope) {
		1632	$scope.items = [
		1633	'The first choice!',
		1634	'And another choice for you.',
		1635	'but wait! A third!'
		1636	];
		1637
		1638	$scope.status = {
		1639	isopen: false
		1640	};
		1641
		1642	$scope.toggled = function(open) {
		1643	console.log('Dropdown is now: ', open);
		1644	};
		1645
		1646	$scope.toggleDropdown = function($event) {
		1647	$event.preventDefault();
		1648	$event.stopPropagation();
		1649	$scope.status.isopen = !$scope.status.isopen;
		1650	};
		1651	}
		1652
		1653	// Modal demo controllers
		1654	function ModalDemoCtrl($scope, $modal, $log) {
		1655	$scope.items = ['item1', 'item2', 'item3'];
		1656
		1657	$scope.open = function (size) {
		1658
		1659	var modalInstance = $modal.open({
		1660	templateUrl: 'myModalContent.html',
		1661	controller: 'ModalInstanceCtrl',
		1662	size: size,
		1663	resolve: {
		1664	items: function () {
		1665	return $scope.items;
		1666	}
		1667	}
		1668	});
		1669
		1670	modalInstance.result.then(function (selectedItem) {
		1671	$scope.selected = selectedItem;
		1672	}, function () {
		1673	$log.info('Modal dismissed at: ' + new Date());
		1674	});
		1675	};
		1676	}
		1677
		1678	function ModalInstanceCtrl($scope, $modalInstance, items) {
		1679	$scope.items = items;
		1680	$scope.selected = {
		1681	item: $scope.items[0]
		1682	};
		1683
		1684	$scope.ok = function () {
		1685	$modalInstance.close($scope.selected.item);
		1686	};
		1687
		1688	$scope.cancel = function () {
		1689	$modalInstance.dismiss('cancel');
		1690	};
		1691	}
		1692
		1693	// Pagination demo controller
		1694	function PaginationDemoCtrl($scope) {
		1695	$scope.totalItems = 64;
		1696	$scope.currentPage = 4;
		1697
		1698	$scope.setPage = function (pageNo) {
		1699	$scope.currentPage = pageNo;
		1700	};
		1701
		1702	$scope.pageChanged = function() {
		1703	console.log('Page changed to: ' + $scope.currentPage);
		1704	};
		1705
		1706	$scope.maxSize = 5;
		1707	$scope.bigTotalItems = 175;
		1708	$scope.bigCurrentPage = 1;
		1709	}
		1710
		1711	// Popover demo controller
		1712	function PopoverDemoCtrl($scope) {
		1713	$scope.dynamicPopover = 'Hello, World!';
		1714	$scope.dynamicPopoverTitle = 'Title';
		1715	}
		1716
		1717	// Tooltip demo controller
		1718	function TooltipDemoCtrl($scope) {
		1719	$scope.dynamicTooltip = 'Hello, World!';
		1720	$scope.dynamicTooltipText = 'dynamic';
		1721	$scope.htmlTooltip = 'I\'ve been made <b>bold</b>!';
		1722	}
		1723
		1724	// Progressbar demo controller
		1725	function ProgressDemoCtrl($scope) {
		1726	$scope.max = 200;
		1727
		1728	$scope.random = function() {
		1729	var value = Math.floor((Math.random() * 100) + 1);
		1730	var type;
		1731
		1732	if (value < 25) {
		1733	type = 'success';
		1734	} else if (value < 50) {
		1735	type = 'info';
		1736	} else if (value < 75) {
		1737	type = 'warning';
		1738	} else {
		1739	type = 'danger';
		1740	}
		1741
		1742	$scope.showWarning = (type === 'danger' \|\| type === 'warning');
		1743
		1744	$scope.dynamic = value;
		1745	$scope.type = type;
		1746	};
		1747	$scope.random();
		1748
		1749	$scope.randomStacked = function() {
		1750	$scope.stacked = [];
		1751	var types = ['success', 'info', 'warning', 'danger'];
		1752
		1753	for (var i = 0, n = Math.floor((Math.random() * 4) + 1); i < n; i++) {
		1754	var index = Math.floor((Math.random() * 4));
		1755	$scope.stacked.push({
		1756	value: Math.floor((Math.random() * 30) + 1),
		1757	type: types[index]
		1758	});
		1759	}
		1760	};
		1761	$scope.randomStacked();
		1762	}
		1763
		1764	// Typeahead demo controller
		1765	function TypeaheadCtrl($scope) {
		1766
		1767	$scope.selected = undefined;
		1768
		1769	$scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
		1770
		1771	// Any function returning a promise object can be used to load values asynchronously
		1772	$scope.getLocation = function(val) {
		1773	return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
		1774	params: {
		1775	address: val,
		1776	sensor: false
		1777	}
		1778	}).then(function(response){
		1779	return response.data.results.map(function(item){
		1780	return item.formatted_address;
		1781	});
		1782	});
		1783	};
		1784
		1785	$scope.statesWithFlags = [{'name':'Alabama','flag':'5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png'},{'name':'Alaska','flag':'e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png'},{'name':'Arizona','flag':'9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png'},{'name':'Arkansas','flag':'9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png'},{'name':'California','flag':'0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png'},{'name':'Colorado','flag':'4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png'},{'name':'Connecticut','flag':'9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png'},{'name':'Delaware','flag':'c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png'},{'name':'Florida','flag':'f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png'},{'name':'Georgia','flag':'5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png'},{'name':'Hawaii','flag':'e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png'},{'name':'Idaho','flag':'a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png'},{'name':'Illinois','flag':'0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png'},{'name':'Indiana','flag':'a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png'},{'name':'Iowa','flag':'a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png'},{'name':'Kansas','flag':'d/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png'},{'name':'Kentucky','flag':'8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png'},{'name':'Louisiana','flag':'e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png'},{'name':'Maine','flag':'3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png'},{'name':'Maryland','flag':'a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png'},{'name':'Massachusetts','flag':'f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png'},{'name':'Michigan','flag':'b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png'},{'name':'Minnesota','flag':'b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png'},{'name':'Mississippi','flag':'4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png'},{'name':'Missouri','flag':'5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png'},{'name':'Montana','flag':'c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png'},{'name':'Nebraska','flag':'4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png'},{'name':'Nevada','flag':'f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png'},{'name':'New Hampshire','flag':'2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png'},{'name':'New Jersey','flag':'9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png'},{'name':'New Mexico','flag':'c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png'},{'name':'New York','flag':'1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png'},{'name':'North Carolina','flag':'b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png'},{'name':'North Dakota','flag':'e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png'},{'name':'Ohio','flag':'4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png'},{'name':'Oklahoma','flag':'6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png'},{'name':'Oregon','flag':'b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png'},{'name':'Pennsylvania','flag':'f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png'},{'name':'Rhode Island','flag':'f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png'},{'name':'South Carolina','flag':'6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png'},{'name':'South Dakota','flag':'1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png'},{'name':'Tennessee','flag':'9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png'},{'name':'Texas','flag':'f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png'},{'name':'Utah','flag':'f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png'},{'name':'Vermont','flag':'4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png'},{'name':'Virginia','flag':'4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png'},{'name':'Washington','flag':'5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png'},{'name':'West Virginia','flag':'2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png'},{'name':'Wisconsin','flag':'2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png'},{'name':'Wyoming','flag':'b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png'}];
		1786	}
		1787
		1788	// Rating demo controller
		1789	function RatingDemoCtrl($scope) {
		1790	$scope.rate = 7;
		1791	$scope.max = 10;
		1792	$scope.isReadonly = false;
		1793
		1794	$scope.hoveringOver = function(value) {
		1795	$scope.overStar = value;
		1796	$scope.percent = 100 * (value / $scope.max);
		1797	};
		1798
		1799	$scope.ratingStates = [
		1800	{stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
		1801	{stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
		1802	{stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
		1803	{stateOn: 'glyphicon-heart'},
		1804	{stateOff: 'glyphicon-off'}
		1805	];
		1806	}
		1807
		1808	</script>
		1809	<!-- END MAIN JS -->

Subversion Repositories Integrator Subversion

(root)/DOCUMENTOS E ANALISE/telas/templates/admin/angularjs/views/ui_bootstrap.html - Rev 1