<div class="t-content c-form">
    <div style="display: flex; align-items: stretch; height: 2em;"
         ng-controller="erasableInputExampleController">
        <div class="c-erasableInput">
            <input
                    ng-model="searchText"
                    placeholder=""
                    ng-model-options="{ debounce: 500 }"
                    ng-change="searchChanged(searchText)"
            />
            <inv-icon
                    class="c-erasableInput-icon"
                    ng-show="searchText.length"
                    glyph="'times-circle'"
                    ng-click="searchChanged('')">
            </inv-icon>
        </div>
    </div>
</div>

<div class="t-content">
    <div class="c-form">
        <input erasable-input
               type="text"
               placeholder="Search"
               ng-model="query"
               autocorrect="off">
    </div>
</div>

<div class="t-content" ng-controller="expirationDateInputExampleController as $ctrl">
    <p>Displaying 4 digits in the Expiration Year field.</p>
    <form class="c-form c-generalForm" name="$ctrl.form" autocomplete="off">
        <div class="c-creditCardExpiration">
            <expiration-date-input ng-model="$ctrl.expiration"
               name="ccExpiration"
               use4-digit-year="true"
               month-placeholder-text="'MM'"
               year-placeholder-text="'YYYY'"></expiration-date-input>
        </div>
    </form>
    <pre ng-bind="$ctrl.form.ccExpiration | json"></pre>
</div>

<div class="t-content" ng-controller="expirationDateInputExampleController as $ctrl">
    <p>Displaying 2 digits in the Expiration Year field.</p>
    <form class="c-form c-generalForm" name="$ctrl.form" autocomplete="off">
        <div class="c-creditCardExpiration">
            <expiration-date-input ng-model="$ctrl.expiration"
               name="ccExpiration"
               use4-digit-year="false"
               month-placeholder-text="'MM'"
               year-placeholder-text="'YY'"></expiration-date-input>
        </div>
    </form>
    <pre ng-bind="$ctrl.form.ccExpiration | json"></pre>
</div>

<div class="t-content c-popoutForm c-form" style="width: 360px;">
    <multiple-text-input values="[]"
                         add-new-label="'Add New'"
                         input-placeholder="'Filter column by ...'"
                         instruction="'Use exact terms'"></multiple-text-input>
</div>

<div class="t-content c-popoutForm c-form" style="width: 360px;">
    <multiple-text-input-form values="[]"
                              input-placeholder="'Filter column by ...'"
                              instruction="'Use exact terms'"></multiple-text-input-form>
</div>

<div class="t-content" ng-controller="numericComparisonInputExampleController as controller">
    <numeric-comparison-input class="g-numericComparisonExample"
                              descriptor="controller.descriptor"
                              available-operators="controller.availableOperators"
                              operator="controller.operator"
                              operand="controller.operand"
                              secondary-operand="controller.secondaryOperand"
                              on-changed="controller.onChanged_handler">
    </numeric-comparison-input>
</div>

<div class="t-content" ng-controller="searchInputExampleController as $ctrl">
    <inv-search-input
        placeholder="$ctrl.SearchInput.placeholder"
        on-search-cleared="$ctrl.onSearchCleared"
        on-search-submitted="$ctrl.onSearchSubmitted"
        search-term="$ctrl.SearchInput.searchTerm"
    ></inv-search-input>
</div>