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

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

Subversion Repositories Integrator Subversion

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