<!DOCTYPE html>
<html lang="en" ng-app="ui.bootstrap.demo" id="top">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="assets/favicon.ico" />
    <title>Angular directives for Bootstrap 4</title>
    <meta name="description" content="AngularJS (Angular) native directives for Bootstrap 4. Small footprint (5kB gzipped!), no 3rd party JS dependencies (jQuery, bootstrap JS) required! Widgets: <% demoModules.forEach(function(module) { %><%= module.displayName %>, <% }); %>">
    <meta name="google-site-verification" content="7lc5HyceLDqpV_6oNHteYFfxDJH7-S3DwnJKtNUKcRg" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.7/fastclick.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.0.0/FileSaver.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-touch.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= ngversion %>/angular-sanitize.js"></script>
    <script src="ui-bootstrap-tpls-<%= pkg.version%>.min.js"></script>
    <script src="assets/plunker.js"></script>
    <script src="assets/app.js"></script>

    <link href="//netdna.bootstrapcdn.com/bootstrap/<%= bsversion %>/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="assets/rainbow.css"/>
    <link rel="stylesheet" href="assets/demo.css"/>
    <link rel="author" href="https://github.com/angular-ui/bootstrap/graphs/contributors">
</head>
<body class="ng-cloak" ng-controller="MainCtrl">
<header class="navbar navbar-light sticky-top navbar-expand-md bg-light">
    <div class="container">
        <a class="navbar-brand visible-xs" href="#">UI Bootstrap 4</a>
        <button type="button" class="navbar-toggler" ng-click="isCollapsed = !isCollapsed">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" uib-collapse="isCollapsed">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown" uib-dropdown>
                    <a class="nav-link dropdown-toggle" uib-dropdown-toggle id="directivesMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Directives
                    </a>
                    <div class="dropdown-menu" uib-dropdown-menu aria-labelledby="directivesMenuLink">
                        <% demoModules.forEach(function(module) {  %><a class="dropdown-item" href="#<%= module.name %>"><%= module.displayName %></a><% }); %>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#getting_started">Getting started</a>
                </li>
                <li class="nav-item dropdown" uib-dropdown>
                    <a class="nav-link dropdown-toggle" uib-dropdown-toggle id="previousDocsMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Previous docs
                    </a>
                    <div class="dropdown-menu" uib-dropdown-menu aria-labelledby="previousDocsMenuLink">
                        <a class="dropdown-item" ng-href="{{version.url}}" ng-repeat="version in oldDocs">{{version.version}}</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</header>
<div role="main">
    <header class="bs-header text-center" id="overview">
        <h1 class="text-center">UI Bootstrap 4</h1>

        <p class="text-center">
            Bootstrap components written in pure <a href="http://angularjs.org">AngularJS</a>
            by the <a href="http://angular-ui.github.io">AngularUI Team</a>
        </p>
        <p class="text-center">
            <small>Ported to Bootstrap 4 by <a href="https://github.com/Morgul">Morgul</a></small>
        </p>
        <div class="container">
            <p>
                <a class="btn btn-outline-inverse btn-lg" href="https://github.com/Morgul/ui-bootstrap4">
                    <i class="icon-github"></i>
                    Code on Github
                </a>
                <button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showDownloadModal()">

                    <i class="fa-svg-icon">
                        <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1344 1344q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm256 0q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm128-224v320q0 40-28 68t-68 28h-1472q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h465l135 136q58 56 136 56t136-56l136-136h464q40 0 68 28t28 68zm-325-569q17 41-14 70l-448 448q-18 19-45 19t-45-19l-448-448q-31-29-14-70 17-39 59-39h256v-448q0-26 19-45t45-19h256q26 0 45 19t19 45v448h256q42 0 59 39z"/>
                        </svg>
                    </i>
                    Download <small>(<%= pkg.version%>)</small>
                </button>
                <button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showBuildModal()">
                    <i class="fa-svg-icon">
                        <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                            <path d="M448 1472q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm644-420l-682 682q-37 37-90 37-52 0-91-37l-106-108q-38-36-38-90 0-53 38-91l681-681q39 98 114.5 173.5t173.5 114.5zm634-435q0 39-23 106-47 134-164.5 217.5t-258.5 83.5q-185 0-316.5-131.5t-131.5-316.5 131.5-316.5 316.5-131.5q58 0 121.5 16.5t107.5 46.5q16 11 16 28t-16 28l-293 169v224l193 107q5-3 79-48.5t135.5-81 70.5-35.5q15 0 23.5 10t8.5 25z"/>
                        </svg>
                    </i>
                    Create a Build
                </button>
            </p>
        </div>
        <div class="bs-social container">
            <ul class="bs-social-buttons">
                <li>
                    <iframe src="//ghbtns.com/github-btn.html?user=morgul&repo=ui-bootstrap4&type=watch&count=true"
                            allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
                </li>
                <li>
                    <iframe src="//ghbtns.com/github-btn.html?user=morgul&repo=ui-bootstrap4&type=fork&count=true"
                            allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
                </li>
            </ul>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <section id="getting_started">
                    <div class="page-header">
                        <h1>Getting started</h1>
                    </div>
                    <h3>Dependencies</h3>
                    <p>
                        This repository contains a set of <strong>native AngularJS directives</strong> based on
                        Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's
                        JavaScript is required. The <strong>only required dependencies</strong> are:
                    </p>
                    <ul>
                        <li><a href="http://angularjs.org" target="_blank">AngularJS</a> (requires AngularJS 1.4.x or higher, tested with <%= ngversion %>).
                            0.14.3 is the last version of this library that supports AngularJS 1.3.x and
                            0.12.0 is the last version that supports AngularJS 1.2.x.</li>
                        <li><a href="http://angularjs.org" target="_blank">Angular-animate</a> (the version should match with your angular's, tested with <%= ngversion %>) if you plan in using animations, you need to load angular-animate as well.</li>
                        <li><a href="http://angularjs.org" target="_blank">Angular-touch</a> (the version should match with your angular's, tested with <%= ngversion %>) if you plan in using swipe actions, you need to load angular-touch as well.</li>
                        <li><a href="http://getbootstrap.com" target="_blank">Bootstrap CSS</a> (tested with version <%= bsversion %>).
                            This version of the library (<%= pkg.version%>) works only with Bootstrap CSS in version 4.x.
                            2.5.0 is the last version of this library that supports Bootstrap CSS in version 3.x.x.
                            0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.
                        </li>
                    </ul>
                    <h3>Files to download</h3>
                    <p>
                        Build files for all directives are distributed in several flavours: minified for production usage, un-minified
                        for development, with or without templates. All the options are described and can be
                        <a href="https://github.com/angular-ui/bootstrap/tree/gh-pages">downloaded from here</a>. It should be noted that the <code>-tpls</code> files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ <a href="https://github.com/angular-ui/bootstrap/wiki/FAQ#full-explanation">here</a> and the README <a href="https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files">here</a>.
                    </p>
                    <p>Alternativelly, if you are only interested in a subset of directives, you can
                        <a ng-click="showBuildModal()">create your own build</a>.
                    </p>
                    <p>Whichever method you choose the good news that the overall size of a download is fairly small:
                       122K minified for all directives with templates and 98K without (~31kB with gzip
                        compression, with templates, and 28K gzipped without)</p>
                    <h3>Installation</h3>
                    <p>As soon as you've got all the files downloaded and included in your page you just need to declare
                       a dependency on the <code>ui.bootstrap</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>
                       <pre><code>angular.module('myModule', ['ui.bootstrap']);</code></pre>
                    </p>
                    <p>If you are using UI Bootstrap in the CSP mode, e.g. in an extension, make sure you link to the <code>ui-bootstrap-csp.css</code> in your HTML manually.</p>
                    <p>You can fork one of the plunkers from this page to see a working example of what is described here.</p>
                    <h3>Migration to prefixes</h3>
                    <p>Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier,
                    check our <a href="https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes">migration guide</a>.</p>
                    <h3>CSS</h3>
                    <p>Original Bootstrap's CSS depends on empty <code>href</code> attributes to style cursors for several components (pagination, tabs etc.).
                    But in AngularJS adding empty <code>href</code> attributes to link tags will cause unwanted route changes. This is why we need to remove empty <code>href</code> attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application: <pre><code>.nav, .pagination, .carousel, .card-title a { cursor: pointer; }</code></pre>
                    </p>
                    <h3>FAQ</h3>
                    <p>Please check <a href="https://github.com/angular-ui/bootstrap/wiki/FAQ" target="_blank">our FAQ section</a> for common problems / solutions.</p>
                    <h3>Reading the documentation</h3>
                    <p>
                        Each of the components provided in <code>ui-bootstrap</code> have documentation and interactive Plunker examples.
                    </p>
                    <p>
                        For the directives, we list the different attributes with their default values. In addition to this, some settings have a badge on it:

                        <ul>
                            <li>
                                <i class="fa-svg-icon">
                                    <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1664 960q-152-236-381-353 61 104 61 225 0 185-131.5 316.5t-316.5 131.5-316.5-131.5-131.5-316.5q0-121 61-225-229 117-381 353 133 205 333.5 326.5t434.5 121.5 434.5-121.5 333.5-326.5zm-720-384q0-20-14-34t-34-14q-125 0-214.5 89.5t-89.5 214.5q0 20 14 34t34 14 34-14 14-34q0-86 61-147t147-61q20 0 34-14t14-34zm848 384q0 34-20 69-140 230-376.5 368.5t-499.5 138.5-499.5-139-376.5-368q-20-35-20-69t20-69q140-229 376.5-368t499.5-139 499.5 139 376.5 368q20 35 20 69z"/></svg>
                                </i>
                                - This setting has an angular $watch listener applied to it.
                            </li>
                            <li><small class="badge">B</small> - This setting is a boolean. It doesn't need a parameter.</li>
                            <li><small class="badge">C</small> - This setting can be configured globally in a constant service*.</li>
                            <li><small class="badge">$</small> - This setting expects an angular expression instead of a literal string. If the expression support a boolean / integer, you can pass it directly.</li>
                            <li><small class="badge">readonly</small> - This setting is readonly.</li>
                        </ul>
                    </p>
                    <p>
                        For the services (you will recognize them with the <code>$</code> prefix), we list all the possible parameters you can pass to them and their default values if any.
                    </p>
                    <p>
                        * Some directives have a config service that follows the next pattern: <code>uibDirectiveConfig</code>. The service's settings use camel case. The services can be configured in a <code>.config</code> function for example.
                    </p>
                </section>
                <% demoModules.forEach(function(module) { %>
                    <section id="<%= module.name %>">
                        <div class="page-header">
                          <h1><%= module.displayName %><small>
                              (<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/<%= module.name %>">ui.bootstrap.<%= module.name %></a>)
                          </small></h1>
                          </div>
                          <div class="row">
                            <div class="col-md-6 show-grid">
                                <%= module.docs.html %>
                            </div>
                            <div class="col-md-6">
                                <%= module.docs.md %>
                            </div>
                        </div>
                        <hr>
                        <div class="row code">
                            <div class="col-md-12" ng-controller="PlunkerCtrl">
                                <div class="float-right">
                                    <button type="button" class="btn btn-info plunk-btn" ng-click="edit('<%= ngversion%>', '<%= bsversion %>', '<%= pkg.version%>', '<%= module.name %>')">
                                        <i class="fa-svg-icon">
                                            <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"/></svg>
                                        </i>
                                        Edit in plunker
                                    </button>
                                </div>
                                <uib-tabset active="activeTab">
                                    <uib-tab index="0" heading="Markup">
                                        <div plunker-content="markup">
                                            <pre ng-non-bindable><code data-language="html"><%- module.docs.html %></code></pre>
                                        </div>
                                    </uib-tab>
                                    <uib-tab index="1" heading="JavaScript">
                                        <div plunker-content="javascript">
                                            <pre ng-non-bindable><code data-language="javascript"><%- module.docs.js %></code></pre>
                                        </div>
                                    </uib-tab>
                                </uib-tabset>
                            </div>
                        </div>
                    </section>
                    <script><%= module.docs.js %></script>
                <% }); %>
            </div>
        </div>
    </div><!-- /.container -->
</div><!-- /.main -->
<footer class="footer">
    <div class="container">
        <p>Designed and built by all ui-bootstrap <a href="https://github.com/angular-ui/bootstrap/graphs/contributors" target="_blank">contributors</a>.</p>
        <p>Code licensed under <a href="https://github.com/angular-ui/bootstrap/blob/master/LICENSE"><%= pkg.license %> License</a>.</p>
        <p><a href="https://github.com/angular-ui/bootstrap/issues?state=open">Issues</a></p>
    </div>
</footer>
<script src="assets/rainbow.js"></script>
<script src="assets/rainbow-generic.js"></script>
<script src="assets/rainbow-javascript.js"></script>
<script src="assets/rainbow-html.js"></script>
<script type="text/ng-template" id="downloadModal.html">
    <div class="modal-header"><h4 class="modal-title">Download Angular UI Bootstrap</h4></div>
    <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group row">
            <label class="col-sm-3 control-label text-right"><strong>Build</strong></label>
            <div class="col-sm-9">
              <span class="btn-group btn-group-sm">
                <button type="button" class="btn btn-secondary" ng-model="options.minified" uib-btn-radio="true">Minified</button>
                <button type="button" class="btn btn-secondary" ng-model="options.minified" uib-btn-radio="false">Uncompressed</button>
              </span>
              <small class="form-text">Use <b>Minified</b> version in your deployed application. <b>Uncompressed</b> source code is useful only for debugging and development purpose.</small>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-3 control-label text-right"><strong>Include Templates</strong></label>
            <div class="col-sm-9">
              <span class="btn-group btn-group-sm">
                <button type="button" class="btn btn-secondary" ng-model="options.tpls" uib-btn-radio="true">Yes</button>
                <button type="button" class="btn btn-secondary" ng-model="options.tpls" uib-btn-radio="false">No</button>
              </span>
              <small class="form-text">Whether you want to include the <i>default templates</i>, bundled with most of the directives. These templates are based on Bootstrap's markup and CSS.</small>
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-3 control-label text-right"><strong>npm</strong></label>
            <div class="col-sm-9">
              <pre style="margin-bottom:0;">npm install ui-bootstrap4</pre>
              <small class="form-text"><a href="https://www.npmjs.com/" target="_blank">npm</a> is a package manager for the web.</small>
            </div>
          </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-secondary" ng-click="cancel()">Close</button>
        <a class="btn btn-primary" ng-href="{{download('<%= pkg.version%>')}}" download>
            <i class="fa-svg-icon">
                <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1344 1344q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm256 0q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm128-224v320q0 40-28 68t-68 28h-1472q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h465l135 136q58 56 136 56t136-56l136-136h464q40 0 68 28t28 68zm-325-569q17 41-14 70l-448 448q-18 19-45 19t-45-19l-448-448q-31-29-14-70 17-39 59-39h256v-448q0-26 19-45t45-19h256q26 0 45 19t19 45v448h256q42 0 59 39z"/>
                </svg>
            </i>
            Download <%= pkg.version %>
        </a>
    </div>
</script>
<script type="text/ng-template" id="buildModal.html">
    <div class="modal-header">
      <h4>
      Create a Custom Build
      <br>
      <small>Select the modules you wish to download</small>
      </h4>
    </div>
    <div class="modal-body">
        <div ng-show="isOldBrowser()">
            Your current browser doesn't support creating custom builds.
            Please take a second to <a href="http://browsehappy.com/">upgrade to a
            more modern browser</a> (other than Safari).
        </div>
        <div ng-show="buildErrorText">
            <h4 style="text-align: center;">{{buildErrorText}}</h4>
        </div>
        <div ng-hide="buildErrorText || isOldBrowser()">
            <% modules.forEach(function(module,i) { %>
              <% if (i % 3 === 0) {%>
                <div class="btn-group" style="width: 100%;">
              <% } %>
              <button type="button" class="btn btn-secondary"
               style="width: 33%; border-radius: 0;"
               ng-class="{'btn-primary': module.<%= module.name %>}"
               ng-model="module.<%= module.name %>"
               uib-btn-checkbox
               ng-change="selectedChanged('<%= module.name %>', module.<%= module.name %>)">
                  <%= module.displayName %>
              </button>
              <% if ((i+1) % 3 === 0) { //end button group%>
                </div>
              <% } %>
            <% }); %>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-secondary" ng-click="cancel()">Close</button>
        <button class="btn btn-primary" ng-hide="isOldBrowser()"
            ng-disabled="isOldBrowser() !== false && !selectedModules.length"
            ng-click="selectedModules.length && build(selectedModules, '<%= pkg.version %>')">
            <i class="fa-svg-icon">
                <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1344 1344q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm256 0q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm128-224v320q0 40-28 68t-68 28h-1472q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h465l135 136q58 56 136 56t136-56l136-136h464q40 0 68 28t28 68zm-325-569q17 41-14 70l-448 448q-18 19-45 19t-45-19l-448-448q-31-29-14-70 17-39 59-39h256v-448q0-26 19-45t45-19h256q26 0 45 19t19 45v448h256q42 0 59 39z"/>
                </svg>
            </i>
            Download {{selectedModules.length}} Modules
        </button>
    </div>
</script>

<script src="assets/smoothscroll-angular-custom.js"></script>
<script src="assets/uglifyjs.js"></script>
</body>
</html>
