text: /**
    * @ngdoc directive
    * @name patternfly.wizard.directive:pfWizard
    * @restrict E
    *
    * @description
    * Component for rendering a Wizard modal.  Each wizard dynamically creates the step navigation both in the header and the left-hand side based on nested steps.
    * Use pf-wizard-step to define individual steps within a wizard and pf-wizard-substep to define portions of pf-wizard-steps if so desired.  For instance, Step one can have two substeps - 1A and 1B when it is logical to group those together.
    * <br /><br />
    * The basic structure should be:
    * <pre>
    * <pf-wizard>
    *   <pf-wizard-step>
    *     <pf-wizard-substep><!-- content here --></pf-wizard-substep>
    *     <pf-wizard-substep><!-- content here --></pf-wizard-substep>
    *   </pf-wizard-step>
    *   <pf-wizard-step><!-- additional configuration can be added here with substeps if desired --></pf-wizard-step>
    *   <pf-wizard-step><!-- review steps and final command here --></pf-wizard-step>
    * </pf-wizard>
    * </pre>
    *
    * @param {string} wizardTitle The wizard title displayed in the header
    * @param {boolean=} hideIndicators  Hides the step indicators in the header of the wizard
    * @param {boolean=} activeStepTitleOnly  Shows the title only for the active step in the step indicators, optional, default is false.
    * @param {boolean=} hideSidebar  Hides page navigation sidebar on the wizard pages
    * @param {boolean=} hideHeader Optional value to hide the title bar. Default is false.
    * @param {boolean=} hideBackButton Optional value to hide the back button, useful in 2 step wizards. Default is false.
    * @param {string=} stepClass Optional CSS class to be given to the steps page container. Used for the sidebar panel as well unless a sidebarClass is provided.
    * @param {string=} sidebarClass Optional CSS class to be give to the sidebar panel. Only used if the stepClass is also provided.
    * @param {string=} contentHeight The height the wizard content should be set to. This is used ONLY if the stepClass is not given. This defaults to 300px if the property is not supplied.
    * @param {boolean=} hideIndicators  Hides the step indicators in the header of the wizard
    * @param {string=} currentStep The current step can be changed externally - this is the title of the step to switch the wizard to
    * @param {string=} cancelTitle The text to display on the cancel button
    * @param {string=} backTitle The text to display on the back button
    * @param {string=} nextTitle The text to display on the next button
    * @param {function(step)=} backCallback Called to notify when the back button is clicked
    * @param {function(step)=} nextCallback Called to notify when the next button is clicked
    * @param {function()=} onFinish Called to notify when when the wizard is complete.  Returns a boolean value to indicate if the finish operation is complete
    * @param {function()=} onCancel Called when the wizard is canceled, returns a boolean value to indicate if cancel is successful
    * @param {boolean} wizardReady Value that is set when the wizard is ready
    * @param {boolean=} wizardDone  Value that is set when the wizard is done
    * @param {string} loadingWizardTitle The text displayed when the wizard is loading
    * @param {string=} loadingSecondaryInformation Secondary descriptive information to display when the wizard is loading
    * @param {boolean=} embedInPage Value that indicates wizard is embedded in a page (not a modal).  This moves the navigation buttons to the left hand side of the footer and removes the close button.
    * @param {function(step, index)=} onStepChanged Called when the wizard step is changed, passes in the step and the step index of the step changed to
    * @deprecated {string} title The wizard title displayed in the head (use wizardTitle instead)
    * @example
    <example module="patternfly.wizard" deps="patternfly.form">
    <file name="index.html">
      <div ng-controller="WizardModalController">
        <button ng-click="openWizardModel()" class="btn btn-default">Launch Wizard</button>
      </div>
    </file>
    <file name="wizard-container.html">
    <pf-wizard wizard-title="Wizard Title"
      wizard-ready="wizardReady"
      on-finish="finishedWizard()"
      on-cancel="cancelDeploymentWizard()"
      next-title="nextButtonTitle"
      next-callback="nextCallback"
      back-callback="backCallback"
      wizard-done="deployComplete || deployInProgress"
      sidebar-class="example-wizard-sidebar"
      step-class="example-wizard-step"
      loading-secondary-information="secondaryLoadInformation"
      on-step-changed="stepChanged(step, index)">
        <pf-wizard-step step-title="First Step" next-tooltip="firstStepNextTooltip" prev-tooltip="firstStepPrevTooltip" substeps="true" step-id="details" step-priority="0" show-review="true" show-review-details="true">
          <div ng-include="'detail-page.html'">
          </div>
          <pf-wizard-substep step-title="Details - Extra" next-enabled="true" step-id="details-extra" step-priority="1" show-review="true" show-review-details="true" review-template="review-second-template.html">
            <form class="form-horizontal">
              <pf-form-group pf-label="Lorem" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" required>
                <input id="new-lorem" name="lorem" ng-model="data.lorem" type="text" required/>
              </pf-form-group>
              <pf-form-group pf-label="Ipsum" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
                <input id="new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
              </pf-form-group>
            </form>
          </pf-wizard-substep>
        </pf-wizard-step>
        <div ng-include="'second-step.html'">
        </div>
        <pf-wizard-step step-title="Review" next-tooltip="reviewStepNextTooltip" prev-tooltip="reviewStepPrevTooltip" substeps="true" step-id="review" step-priority="2">
          <div ng-include="'summary.html'"></div>
          <div ng-include="'deployment.html'"></div>
        </pf-wizard-step>
     </pf-wizard>
    </file>
    <file name="detail-page.html">
      <div ng-controller="DetailsGeneralController">
         <pf-wizard-substep step-title="General"
                            next-enabled="detailsGeneralComplete"
                            step-id="details-general"
                            step-priority="0"
                            on-show="onShow"
                            focus-selectors="focusSelectors"
                            review-template="{{reviewTemplate}}"
                            show-review-details="true">
           <form class="form-horizontal">
             <pf-form-group pf-label="Name" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" required>
                <input id="new-name" name="name" ng-model="data.name" type="text" ng-change="updateName()" required/>
             </pf-form-group>
             <pf-form-group pf-label="Description" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
               <input id="new-description" name="description" ng-model="data.description" type="text" />
             </pf-form-group>
           </form>
        </pf-wizard-substep>
      </div>
    </file>
    <file name="review-template.html">
    <div ng-controller="DetailsReviewController">
      <form class="form">
        <div class="wizard-pf-review-item">
          <span class="wizard-pf-review-item-label">Name:</span>
          <span class="wizard-pf-review-item-value">{{data.name}}</span>
        </div>
        <div class="wizard-pf-review-item">
          <span class="wizard-pf-review-item-label">Description:</span>
          <span class="wizard-pf-review-item-value">{{data.description}}</span>
        </div>
      </form>
    </div>
    </file>
    <file name="review-second-template.html">
    <div ng-controller="DetailsReviewController">
      <form class="form">
        <div class="wizard-pf-review-item">
          <span class="wizard-pf-review-item-label">Lorem:</span>
          <span class="wizard-pf-review-item-value">{{data.lorem}}</span>
        </div>
        <div class="wizard-pf-review-item">
          <span class="wizard-pf-review-item-label">Ipsum:</span>
          <span class="wizard-pf-review-item-value">{{data.ipsum}}</span>
        </div>
      </form>
    </div>
    </file>
    <file name="second-step.html">
    <div ng-controller="SecondStepController">
      <pf-wizard-step focus-selectors="focusSelectors" step-title="Second Step" next-tooltip="secondStepNextTooltip" prev-tooltip="secondStepPrevTooltip" substeps="false" step-id="configuration" step-priority="1" show-review="true" review-template="review-second-template.html" >
        <form class="form-horizontal">
          <h3>Wizards should make use of substeps consistently throughout (either using them or not using them).  This is an example only.</h3>
          <pf-form-group pf-label="Lorem" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
            <input id="step-two-new-lorem" name="lorem" ng-model="data.lorem" type="text"/>
          </pf-form-group>
          <pf-form-group pf-label="Ipsum" pf-label-class="col-sm-3 col-md-2" pf-input-class="col-sm-9 col-md-10" >
            <input id="step-two-new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
          </pf-form-group>
        </form>
      </pf-wizard-step>
    </div>
    </file>
    <file name="summary.html">
    <div ng-controller="SummaryController">
      <pf-wizard-substep step-title="Summary" step-id="review-summary" step-priority="0" next-enabled="true" prev-enabled="true" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
        <pf-wizard-review-page shown="pageShown" wizard-data="data"></pf-wizard-review-page>
      </pf-wizard-substep>
    </div>
    </file>
    <file name="deployment.html">
    <div ng-controller="DeploymentController">
      <pf-wizard-substep step-title="Deploy" step-id="review-progress" step-priority="1" next-enabled="true" prev-enabled="false" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
        <div class="wizard-pf-contents" ng-controller="DeploymentController">
          <div class="wizard-pf-process blank-slate-pf" ng-if="!deploymentComplete">
            <div class="spinner spinner-lg blank-slate-pf-icon"></div>
            <h3 class="blank-slate-pf-main-action">Deployment in progress</h3>
            <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus, lorem sociosqu eget nunc amet. </p>
          </div>
          <div class="wizard-pf-complete blank-slate-pf" ng-if="deploymentComplete">
            <div class="wizard-pf-success-icon"><span class="glyphicon glyphicon-ok-circle"></span></div>
            <h3 class="blank-slate-pf-main-action">Deployment was successful</h3>
            <p class="blank-slate-pf-secondary-action">Lorem ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus, lorem sociosqu eget nunc amet. </p>
            <button type="button" class="btn btn-lg btn-primary">View Deployment</button>
          </div>
       </div>
     </pf-wizard-substep>
    </div>
    </file>
    <file name="script.js">
    angular.module('patternfly.wizard').controller('WizardModalController', ['$scope', '$timeout', '$uibModal', '$rootScope',
      function ($scope, $timeout, $uibModal, $rootScope) {
        $scope.openWizardModel = function () {
          var wizardDoneListener,
              modalInstance = $uibModal.open({
                animation: true,
                backdrop: 'static',
                templateUrl: 'wizard-container.html',
                controller: 'WizardController',
                size: 'lg'
              });
  
          var closeWizard = function (e, reason) {
            modalInstance.dismiss(reason);
            wizardDoneListener();
          };
  
          modalInstance.result.then(function () { }, function () { });
  
          wizardDoneListener = $rootScope.$on('wizard.done', closeWizard);
        };
      }
    ]);
    angular.module('patternfly.wizard').controller('WizardController', ['$scope', '$timeout', '$rootScope',
      function ($scope, $timeout, $rootScope) {
  
  
        var initializeWizard = function () {
          $scope.data = {
            name: '',
            description: '',
            lorem: 'default setting',
            ipsum: ''
          };
          $scope.secondaryLoadInformation = 'ipsum dolor sit amet, porta at suspendisse ac, ut wisi vivamus, lorem sociosqu eget nunc amet.';
  
          $scope.wizardReady = false;
          $timeout(function () {
            $scope.wizardReady = true;
          }, 1000);
  
          $scope.nextButtonTitle = "Next >";
        };
  
        var startDeploy = function () {
          $timeout(function() { }, 10000);
          $scope.deployInProgress = true;
        };
  
        $scope.data = {};
  
        $scope.firstStepNextTooltip = "First step next";
        $scope.firstStepPrevTooltip = "First step back";
        $scope.secondStepNextTooltip = "Second step next";
        $scope.secondStepPrevTooltip = "Second step back";
        $scope.reviewStepNextTooltip = "Review step next";
        $scope.reviewStepPrevTooltip = "Review step back";
  
        $scope.nextCallback = function (step) {
          // call startdeploy after deploy button is clicked on review-summary tab
          if (step.stepId === 'review-summary') {
            startDeploy();
          }
          return true;
        };
        $scope.backCallback = function (step) {
          return true;
        };
  
        $scope.stepChanged = function (step, index) {
          if (step.stepId === 'review-summary') {
            $scope.nextButtonTitle = "Deploy";
          } else if (step.stepId === 'review-progress') {
            $scope.nextButtonTitle = "Close";
          } else {
            $scope.nextButtonTitle = "Next >";
          }
        };
  
        $scope.cancelDeploymentWizard = function () {
          $rootScope.$emit('wizard.done', 'cancel');
        };
  
        $scope.finishedWizard = function () {
          $rootScope.$emit('wizard.done', 'done');
          return true;
        };
  
        initializeWizard();
       }
    ]);
  
    angular.module('patternfly.wizard').controller('DetailsGeneralController', ['$rootScope', '$scope',
      function ($rootScope, $scope) {
        'use strict';
  
        $scope.reviewTemplate = "review-template.html";
        $scope.detailsGeneralComplete = false;
        $scope.focusSelectors = ['#new-name'];
        $scope.onShow = function() { };
  
        $scope.updateName = function() {
          $scope.detailsGeneralComplete = angular.isDefined($scope.data.name) && $scope.data.name.length > 0;
        };
      }
    ]);
  
    angular.module('patternfly.wizard').controller('DetailsReviewController', ['$rootScope', '$scope',
      function ($rootScope, $scope) {
        'use strict';
  
        // Find the data!
        var next = $scope;
        while (angular.isUndefined($scope.data)) {
          next = next.$parent;
          if (angular.isUndefined(next)) {
            $scope.data = {};
          } else {
            $scope.data = next.$ctrl.wizardData;
          }
        }
      }
    ]);
  
    angular.module('patternfly.wizard').controller('SecondStepController', ['$rootScope', '$scope',
      function ($rootScope, $scope) {
        'use strict';
  
        $scope.focusSelectors = ['.invalid-classname', '#step-two-new-lorem'];
      }
    ]);
  
    angular.module('patternfly.wizard').controller('SummaryController', ['$rootScope', '$scope', '$timeout',
      function ($rootScope, $scope, $timeout) {
        'use strict';
        $scope.pageShown = false;
  
        $scope.onShow = function () {
          $scope.pageShown = true;
          $timeout(function () {
            $scope.pageShown = false;  // done so the next time the page is shown it updates
          });
        }
      }
    ]);
  
    angular.module('patternfly.wizard').controller('DeploymentController', ['$rootScope', '$scope', '$timeout',
      function ($rootScope, $scope, $timeout) {
        'use strict';
  
        $scope.onShow = function() {
          $scope.deploymentComplete = false;
          $timeout(function() {
            $scope.deploymentComplete = true;
          }, 2500);
        };
      }
    ]);
  </file>
  </example>
  */
  