@stratusjs/idx/src/property/search.component.min.html

AngularJS idx/property Service and Components bundle to be used as an add on to StratusJS

<div id="{{elementId}}" class="property-search property-search-default idx-search-component search-full" role="search" aria-label="Property" data-ng-cloak><h2 data-ng-show="widgetName" data-ng-bind="widgetName"></h2><div class="search-row search-basic clearfix"><div class="search-input search-location" data-ng-class="{'location-input-active': !isPresetLocationSet()}"><md-icon class="search-icon" data-ng-click="search()" data-ng-if="!isPresetLocationSet()" md-svg-src="{{ localDir + 'images/icons/actionButtons/search.svg' }}"></md-icon><md-input-container class="location-input md-block minimal" data-ng-if="!isPresetLocationSet()"><label>City, Neighborhood, Zip</label> <input class="input-eLocation" data-ng-if="!options.query.where.Location" data-ng-model="options.query.where.eLocation" data-ng-blur="options.query.where.eLocation.length && search()" type="text" size="22" maxlength="250" data-ng-keyup="$event.keyCode == 13 && search()" autocomplete="off"> <input class="input-Location" data-ng-if="options.query.where.Location" data-ng-model="options.query.where.Location" data-ng-blur="search()" type="text" size="22" maxlength="250" data-ng-keyup="$event.keyCode == 13 && search()" autocomplete="off"></md-input-container><div class="preset-location" data-ng-if="isPresetLocationSet()"><span class="location-list-truncated span-comma-delimited" data-ng-bind-html="presetLocationHTML"></span> <span class="preset-locations-count location-popup-on-hover" data-ng-show="presetLocationsRemainingCountText" data-ng-bind="presetLocationsRemainingCountText"></span> <span class="preset-other-filters-count" data-ng-show="!presetLocationsRemainingCountText && presetOtherFiltersCountText" data-ng-bind="presetOtherFiltersCountText"></span><div class="location-popup-list"><div class="span-comma-delimited" data-ng-bind-html="presetLocationHTML"></div><div class="preset-other-filters-count" data-ng-show="presetOtherFiltersCountText" data-ng-bind="presetOtherFiltersCountText"></div></div></div><a class="custom-clear" data-ng-if="(options.query.where.eLocation.length || options.query.where.Location.length || isPresetLocationSet())" data-ng-click="resetLocationQuery(); focusElement('.location-input .input-eLocation')"><md-icon md-svg-src="{{ localDir + 'images/icons/actionButtons/clear.svg' }}"></md-icon></a></div><div class="search-input search-buy-rent" data-ng-if="searchType == 'advanced'"><div class="toggle-switch" aria-label="Listings to Buy or Rent" data-layout="row" data-layout-align="center center"><div class="option-choice buy" data-ng-class="{inactive: options.forRent}" data-flex>Buy</div><md-switch data-ng-model="options.forRent" data-ng-change="selectDefaultListingType(); search()" aria-label="Buy or Rent"></md-switch><div class="option-choice rent" data-ng-class="{inactive: !options.forRent}" data-flex>Rent</div></div></div><div class="search-input search-price" data-ng-if="searchType != 'simple'"><a class="open-price-link" data-ng-click="openPrice=!openPrice"><span data-ng-show="options.query.where.ListPriceMin == null && options.query.where.ListPriceMax == null">Any Price</span> <span data-ng-show="options.query.where.ListPriceMin != null || options.query.where.ListPriceMax != null"><span data-ng-show="options.query.where.ListPriceMin != null"><span data-ng-bind="options.query.where.ListPriceMin | numeral:{format:'$0[.]0a'} | uppercase"></span></span> <span data-ng-show="options.query.where.ListPriceMin == null">No Min</span> &nbsp;&ndash;&nbsp; <span data-ng-show="options.query.where.ListPriceMax != null"><span data-ng-bind="options.query.where.ListPriceMax | numeral:{format:'$0[.]0a'} | uppercase"></span></span> <span data-ng-show="options.query.where.ListPriceMax == null">No Max</span></span><md-icon md-svg-src="{{ localDir + 'images/dropDownFat.svg' }}"></md-icon></a><div class="price-dropdown" data-ng-class="{'open-price' : openPrice == true}"><span>$</span><md-input-container class="md-block minimal"><label>Min Price</label> <input type="text" maxlength="13" size="13" autocomplete="off" stratus-string-to-number="comma" data-ng-model="options.query.where.ListPriceMin" data-ng-blur="!options.query.where.ListPriceMin ? options.query.where.ListPriceMin = null : true ; search()" data-ng-keyup="$event.keyCode == 13 && $event.target.blur()"></md-input-container><span>$</span><md-input-container class="md-block minimal"><label>Max Price</label> <input type="text" maxlength="13" size="13" autocomplete="off" stratus-string-to-number="comma" data-ng-model="options.query.where.ListPriceMax" data-ng-blur="!options.query.where.ListPriceMax ? options.query.where.ListPriceMax = null : true ; search()" data-ng-keyup="$event.keyCode == 13 && $event.target.blur()"></md-input-container></div><div class="click-out" data-ng-show="openPrice == true" data-ng-click="openPrice = false"></div></div><div class="search-input search-beds" data-ng-if="searchType != 'simple'"><md-input-container class="md-block minimal"><label>0+ Beds</label><md-select data-ng-model="options.query.where.Bedrooms" data-ng-change="search()"><md-option>0+ Beds</md-option><md-option data-ng-repeat="option in options.selection.Bedrooms" data-ng-value="option.value">{{option.name}} Beds</md-option></md-select></md-input-container></div><div class="search-input search-baths" data-ng-if="searchType != 'simple'"><md-input-container class="md-block minimal"><label>0+ Baths</label><md-select data-ng-model="options.query.where.Bathrooms" data-ng-change="search()"><md-option>0+ Baths</md-option><md-option data-ng-repeat="option in options.selection.Bathrooms" data-ng-value="option.value">{{option.name}} Baths</md-option></md-select></md-input-container></div><div class="search-more-filters" data-ng-if="listInitialized && searchType == 'advanced'"><a class="open-filters-link" data-ng-click="$parent.advancedFiltersStatus = !$parent.advancedFiltersStatus"><md-icon md-svg-src="{{ localDir + 'images/icons/actionButtons/filters.svg' }}"></md-icon><span class="btn-text"><span data-ng-show="!$parent.advancedFiltersStatus">More </span><span data-ng-show="$parent.advancedFiltersStatus">Less </span><span class="optional-btn-text">Filters</span></span></a></div><div class="search-more-filters" data-ng-if="listInitialized && searchType != 'advanced' && advancedSearchUrl"><a class="open-filters-link" data-ng-href="{{ advancedSearchUrl }}"><md-icon md-svg-src="{{ localDir + 'images/icons/actionButtons/filters.svg' }}"></md-icon><span class="btn-text"><span data-ng-bind="advancedSearchLinkName"></span></span></a></div><div class="search-more-filters" data-ng-if="!listInitialized"><a class="open-filters-link" data-ng-click="search(true)"><md-icon md-svg-src="{{ localDir + 'images/icons/actionButtons/filters.svg' }}"></md-icon><span class="btn-text"><span data-ng-bind="advancedSearchLinkName"></span></span></a></div></div><div id="stratus-idx-property-search-menu" class="property-search property-search-default" data-ng-class="{'open-filters' : $parent.advancedFiltersStatus}" data-ng-if="searchType == 'advanced'"><div class="more-filters" data-stratus-full-height="{{ displayFilterFullHeight }}" data-full-height-minus-elements='[".demo-switcher-bar", ".header-common-parent", ".search-filter-top", ".sf-toolbarreset"]'><button type="button" class="btn-close" data-ng-click="$parent.advancedFiltersStatus = !$parent.advancedFiltersStatus"><span class="sr-only">Close Dialog</span><md-icon md-svg-src="{{ localDir + 'images/icons/actionButtons/close.svg' }}" aria-hidden="true"></md-icon></button><div class="toggle-switch buy-rent" aria-label="Listings to Buy or Rent"><div class="option-choice buy" data-ng-class="{inactive: options.forRent}">Buy</div><md-switch data-ng-model="options.forRent" data-ng-change="selectDefaultListingType()" aria-label="Buy or Rent"></md-switch><div class="option-choice rent" data-ng-class="{inactive: !options.forRent}">Rent</div></div><div class="price"><span>$</span><md-input-container class="md-block minimal"><label>Min Price</label> <input stratus-string-to-number="comma" data-ng-model="options.query.where.ListPriceMin" data-ng-blur="search()" type="text" maxlength="12" size="12" autocomplete="off"></md-input-container><span>$</span><md-input-container class="md-block minimal"><label>Max Price</label> <input stratus-string-to-number="comma" data-ng-model="options.query.where.ListPriceMax" data-ng-blur="search()" type="text" maxlength="12" size="12" autocomplete="off"></md-input-container></div><div class="beds-baths"><md-input-container class="md-block minimal"><label>0+ Beds</label><md-select data-ng-model="options.query.where.Bedrooms" data-ng-change="search()"><md-option>0+ Beds</md-option><md-option data-ng-repeat="option in options.selection.Bedrooms" data-ng-value="option.value">{{option.name}} Beds</md-option></md-select></md-input-container><md-input-container class="md-block minimal"><label>0+ Baths</label><md-select data-ng-model="options.query.where.Bathrooms" data-ng-change="search()"><md-option>0+ Baths</md-option><md-option data-ng-repeat="option in options.selection.Bathrooms" data-ng-value="option.value">{{option.name}} Baths</md-option></md-select></md-input-container></div><div class="property-zoning" aria-label="Listing Zoning"><div class="custom-toggle" data-ng-class="[{'active-left': options.selection.ListingType.group.Residential},
                     {'active-right': options.selection.ListingType.group.Commercial}]"><md-button class="font-primary" data-ng-class="{'active': options.selection.ListingType.group.Residential}" data-ng-click="selectDefaultListingType('Residential')" aria-label="Residential" data-md-prevent-menu-close>Residential</md-button><md-button class="font-primary" data-ng-class="{'active': options.selection.ListingType.group.Commercial}" data-ng-click="selectDefaultListingType('Commercial')" aria-label="Commercial" data-md-prevent-menu-close>Commercial</md-button></div></div><div class="listing-types" aria-label="Listing Types"><md-checkbox data-ng-repeat="listType in ::options.selection.ListingType.All" data-ng-click="toggleArrayElement(listType.value, options.query.where.ListingType); search()" data-ng-show="options.forRent === listType.lease && options.selection.ListingType.group[listType.group]" data-ng-checked="_.includes(options.query.where.ListingType, listType.value)" data-md-prevent-menu-close aria-label="{{::listType.name}}"><span data-ng-bind="::listType.name"></span></md-checkbox></div><div class="listing-status" aria-label="Listing Status"><h4>Status</h4><md-checkbox data-ng-checked="_.includes(options.query.where.Status, 'Active')" data-ng-click="toggleArrayElement('Active', options.query.where.Status); search()" data-md-prevent-menu-close aria-label="For Sale">For Sale</md-checkbox><md-checkbox data-ng-checked="_.includes(options.query.where.Status, 'Closed')" data-ng-click="toggleArrayElement('Closed', options.query.where.Status); search()" data-md-prevent-menu-close aria-label="Sold">Sold</md-checkbox><md-checkbox class="show-under-contract" data-ng-show="!options.forRent && (_.includes(options.query.where.Status, 'Active') || _.includes(options.query.where.Status, 'Contract'))" data-ng-checked="_.includes(options.query.where.Status, 'Contract')" data-ng-click="toggleArrayElement('Contract', options.query.where.Status); search()" aria-label="Under Contract" data-md-prevent-menu-close>Under Contract</md-checkbox></div><div class="extras" data-ng-show="options.query.where.OpenHouseOnly || isPresetLocationSet() || options.query.where.eLocation.length || options.query.where.Location.length || options.query.where.AgentLicense.length || options.query.where.OfficeNumber.length"><h4>Extras</h4><md-checkbox class="show-open-houses" data-ng-model="options.query.where.OpenHouseOnly" data-ng-change="search()" aria-label="Open Houses Only" data-md-prevent-menu-close>Open Houses Only</md-checkbox></div><div data-ng-if="options.officeGroups.length || options.query.where.AgentLicense.length || options.query.where.ListingId.length"><h4>Preset Filters</h4><div class="search-input" data-ng-if="options.officeGroups.length"><md-chips class="office-groups font-secondary" aria-label="Office" data-ng-model="options.officeGroups" data-md-enable-chip-edit="false" readonly="true" data-md-removable="true" data-delete-button-label="Remove Office" data-delete-hint="Press delete to remove Office" data-md-on-remove="validateOfficeGroups(true)"><md-chip-template><span>{{$chip.name}}</span></md-chip-template></md-chips></div><div class="search-input" data-ng-if="options.query.where.AgentLicense.length"><h5>Agent License</h5><md-chips class="agent-license-groups font-secondary" aria-label="Agent Licenses" data-ng-model="options.query.where.AgentLicense" data-md-enable-chip-edit="false" data-md-removable="true" data-delete-button-label="Remove License" data-delete-hint="Press delete to remove License" data-md-on-add="search()" data-md-on-remove="search()"><md-chip-template><span>{{$chip}}</span></md-chip-template></md-chips></div><div class="search-input" data-ng-if="options.query.where.ListingId.length"><h5>Listing Id</h5><md-chips class="listing-id-groups font-secondary" aria-label="Listing Ids" data-ng-model="options.query.where.ListingId" data-md-enable-chip-edit="false" data-md-removable="true" data-delete-button-label="Remove ListingId" data-delete-hint="Press delete to remove ListingId" data-md-on-add="search()" data-md-on-remove="search()"><md-chip-template><span>{{$chip}}</span></md-chip-template></md-chips></div></div></div><div class="click-out" data-ng-show="$parent.advancedFiltersStatus" data-ng-click="$parent.advancedFiltersStatus = false"></div></div></div>