Service Portal: add a carousel widget with fixed height and embedded homepage search

based on a copy of the ootb carousel widget

HTML:

<div class="pull-in">

  <uib-carousel interval="options.interval">

    <uib-slide ng-repeat="slide in ::data.slides" active="slide.active">

      <div class="container">

        <a href="{{::slide.url}}" title="Open carousel item">

          <img ng-src="{{::slide.background}}" style="margin:auto; width:100%;" role="presentation">

        </a>

      </div>

    </uib-slide>

     <!--homepage search-->

 <!--<div id="homepage-search" class="hidden-xs wrapper-xl">  

  <div class="wrapper-xl"> -->       

  <div id="homepage-search" class="hidden-xs wrapper-xl">  

  

    <h2 class="text-center text-4x m-b-lg sp-tagline-color" ng-bind="options.title"></h2>             

    <div ng-if="options.short_description" class="text-center h4 m-b-lg sp-tagline-color" ng-bind="options.short_description">

   </div>              

   <sp-widget widget="data.typeAheadSearch" />  

  

</div>

  <!-- homepage search end -->

  </uib-carousel>

  

  <!--<div>

    <widget id="typeahead-search"></widget>

  </div>-->

  

CSS:

div.container {

 max-height: 200px;

}

OPTION SCHEMA:

[{"name":"typeahead_search","default_value":"{title: 'How can we help?', size: 'lg', color: 'default'}","section":"Presentation","label":"Typeahead Search","type":"string"}]

SERVER SCRIPT:

data.slides = $sp.getRelatedList('sp_carousel_slide','carousel');

data.typeAheadSearch = $sp.getWidget('typeahead-search', options.typeahead_search);