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

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

<div id="{{elementId}}" class="property-details property-details-default" data-ng-cloak><div data-ng-if="model.pending" data-layout="row" data-layout-padding data-layout-margin data-layout-align="space-around center" data-layout-wrap><md-progress-circular md-mode="indeterminate"></md-progress-circular></div><div data-ng-if="model.completed && !model.pending && !model.data.ListingId && !model.data.ListingKey" class="no-results" data-layout="row" data-layout-padding data-layout-margin data-layout-align="space-around center" data-layout-wrap>This listing is no longer available</div><div data-ng-if="model.completed && (model.data.ListingId || model.data.ListingKey)" vocab="https://schema.org/" typeof="RealEstateListing Offer Accommodation"><div class="details-header static-element" property="address"><h1 class="address"><span data-ng-bind="::model.data.InternetAddressDisplayYN === false ? 'Address Not Disclosed' : getStreetAddress()" aria-label="Street Address"></span></h1><h4><span data-ng-bind="::model.data.City" aria-label="City"></span></h4></div><div class="gallery-video-container static-element" data-ng-if="model.data.Images && model.data.Images.length > 0"><stratus-swiper-carousel data-init-now="model.completed" data-slides="images" aria-label="Slideshow of Images"></stratus-swiper-carousel></div><div class="gallery-fallback" data-ng-if="!model.data.Images || (model.data.Images && model.data.Images.length < 1)"><img data-ng-src="{{::localDir}}images/no-image.jpg" aria-label="No Images Available" alt="No Images Available"></div><div class="about-container details-container static-element"><div class="clearfix"><section class="details-left" role="region" aria-label="Detail Highlights"><h2>About</h2><ul class="details-specs primary_font" aria-label="Detail Highlights"><li><span data-ng-bind="::Idx.getFullStatus(model.data, preferredStatus)" role="text"></span></li><li data-ng-if="::model.data.BedroomsTotal && model.data.BedroomsTotal > 0" role="text"><span data-ng-bind="::model.data.BedroomsTotal" property="numberOfBedrooms"></span> Beds</li><li data-ng-if="::(model.data.BathroomsFull && model.data.BathroomsFull > 0) || (model.data.BathroomsTotalInteger && model.data.BathroomsTotalInteger > 0)" role="text"><span data-ng-bind="::model.data.BathroomsFull || model.data.BathroomsTotalInteger" property="numberOfFullBathrooms"></span> Baths</li><li data-ng-if="::model.data.BathroomsHalf && model.data.BathroomsHalf > 0" role="text"><span data-ng-bind="::model.data.BathroomsHalf"></span> Half Baths</li><li data-ng-if="::model.data.BathroomsOneQuarter && model.data.BathroomsOneQuarter > 0" role="text"><span data-ng-bind="::model.data.BathroomsOneQuarter"></span> Quarter Baths</li><li data-ng-if="::model.data.BathroomsThreeQuarter && model.data.BathroomsThreeQuarter > 0" role="text"><span data-ng-bind="::model.data.BathroomsThreeQuarter"></span> Three Quarter Baths</li><li data-ng-if="::model.data.BathroomsPartial && model.data.BathroomsPartial > 0" role="text"><span data-ng-bind="::model.data.BathroomsPartial" property="numberOfPartialBathrooms"></span> Partial Baths</li><li data-ng-if="::model.data.CloseDate && Idx.getFriendlyStatus(model.data) == 'Closed'" role="text"><span data-ng-bind="::Idx.getFriendlyStatus(model.data, preferredStatus)"></span> on <time data-ng-bind="::model.data.CloseDate | moment:{unix:false,format:'MMM Do YYYY'}" datetime="{{::model.data.CloseDate}}"></time></li><li data-ng-if="::model.data.OnMarketDate" role="text">Listed on <time data-ng-bind="::model.data.OnMarketDate | moment:{unix:false,format:'MMM Do YYYY'}" datetime="{{::model.data.OnMarketDate}}" property="datePosted"></time></li><li data-ng-if="::model.data.CloseDate && model.data.ClosePrice && model.data.ListPrice" role="text">Listed at <span data-ng-bind="'$' + (model.data.ListPrice | number)"></span></li><li data-ng-if="::model.data.OnMarketDate && Idx.getFriendlyStatus(model.data) === 'Closed' && model.data.CloseDate" role="text">Days on Market: <span data-ng-bind="::model.data.OnMarketDate | moment:{unix:false,diff:model.data.CloseDate,duration:'days'}"></span></li><li data-ng-if="::model.data.OnMarketDate && Idx.getFriendlyStatus(model.data) !== 'Closed'" role="text">Days on Market: <span data-ng-bind="::model.data.OnMarketDate | moment:{unix:false,diff:true,duration:'days'}"></span></li><li data-ng-if="::model.data.DaysOnMarket && !model.data.OnMarketDate" role="text">Days on Market: <span data-ng-bind="::model.data.DaysOnMarket | number"></span></li><li data-ng-if="::model.data.ArchitecturalStyle" role="text">Style: <span data-ng-repeat="item in ::model.data.ArchitecturalStyle" class="repeatedArray"><span data-ng-bind="::item"></span><span class="hideLastChild">,&nbsp;</span></span></li><li data-ng-if="::model.data.YearBuilt" aria-label="Year Built" role="text">Built in <span data-ng-bind="::model.data.YearBuilt" property="yearBuilt"></span></li><li data-ng-if="::model.data.LivingArea && model.data.LivingArea > 0" role="text">Living Area: <span data-ng-bind="::model.data.LivingArea | number"></span> <span data-ng-if="::model.data.LivingAreaUnits"><span data-ng-bind="::model.data.LivingAreaUnits"></span> </span><span data-ng-if="::!model.data.LivingAreaUnits">Square Feet</span></li><li data-ng-if="::model.data.LeasableArea && model.data.LeasableArea > 0" role="text">Leasable: <span data-ng-bind="::model.data.LeasableArea | number"></span> <span data-ng-if="::model.data.LeasableAreaUnits"><span data-ng-bind="::model.data.LeasableAreaUnits"></span> </span><span data-ng-if="::!model.data.LeasableAreaUnits">Square Feet</span></li><li data-ng-if="::model.data.BuildingAreaTotal && model.data.BuildingAreaTotal > 0" role="text">Building: <span data-ng-bind="::model.data.BuildingAreaTotal | number"></span> <span data-ng-if="::model.data.BuildingAreaUnits"><span data-ng-bind="::model.data.BuildingAreaUnits"></span> </span><span data-ng-if="::!model.data.BuildingAreaUnits">Square Feet</span></li><li data-ng-if="::model.data.LotSizeArea && model.data.LotSizeArea > 0" role="text">Lot: <span data-ng-bind="::model.data.LotSizeArea | number"></span> <span data-ng-if="::model.data.LotSizeUnits"><span data-ng-bind="::model.data.LotSizeUnits"></span> </span><span data-ng-if="::!model.data.LotSizeUnits">Square Feet</span></li><li data-ng-if="!model.data.LotSizeArea && model.data.LotSizeAcres && model.data.LotSizeAcres > 0" role="text">Lot: <span data-ng-bind="::model.data.LotSizeAcres"></span> Acres</li><li data-ng-if="!model.data.LotSizeArea && model.data.LotSizeSquareFeet && model.data.LotSizeSquareFeet > 0" role="text">Lot: <span data-ng-bind="::model.data.LotSizeSquareFeet | number"></span> SqFt</li><li data-ng-if="::model.data.PoolPrivateYN">With Pool</li><li data-ng-if="::model.data.Stories && model.data.Stories > 0" role="text">Stories: <span data-ng-bind="::model.data.Stories"></span></li><li data-ng-if="::model.data.PropertyType"><span data-ng-bind="::model.data.PropertyType" property="accommodationCategory"></span></li><li data-ng-if="::model.data.PropertySubType && model.data.PropertySubType != model.data.PropertyType" role="text"><span data-ng-bind="::model.data.PropertySubType"></span></li><li data-ng-if="::!model.data.PropertyType && !model.data.PropertySubType" role="text"><span data-ng-bind="::model.data._Class"></span></li><li class="mls-service" data-ng-if="::model.data.ListingId || model.data.ListingKey" role="text"><span data-ng-if="::getMLSLogo('tiny')" class="mls-logo"><img data-ng-src="{{::getMLSLogo('tiny')}}" alt="MLS Logo"></span><span data-ng-bind="getMLSName()" data-ng-if="::!getMLSLogo('tiny')" property="maintainer" class="mls-name"></span># <span data-ng-bind="::model.data.ListingId || model.data.ListingKey" property="identifier" class="mls-number"></span></li></ul></section><div class="details-right"><section class="listing-credit-container dotted-spaced-underline" data-ng-if="::Idx.sharedValues.contact.name || getListAgentName()" role="region" aria-label="Listing Credits" data-layout="row" data-layout-xs="column" data-layout-align="space-around stretch"><div class="presenting-agent-container" data-ng-if="::Idx.sharedValues.contact.name" data-flex data-layout="column" aria-label="Advertising Broker"><h4 class="listing-credit-title">Presented By</h4><p class="listing-credit-contact" data-ng-bind="::Idx.sharedValues.contact.name"></p><p class="listing-credit-contact" data-ng-if="::Idx.sharedValues.contact.emails && Idx.sharedValues.contact.emails.Main" aria-label="Advertising Broker Contact"><a data-ng-href="mailto:{{::Idx.sharedValues.contact.emails.Main}}" target="_blank" data-ng-bind="::Idx.sharedValues.contact.emails.Main"></a></p><p class="listing-credit-contact" data-ng-if="::(Idx.sharedValues.contact.phones && Idx.sharedValues.contact.phones.Main) && !(Idx.sharedValues.contact.emails && Idx.sharedValues.contact.emails.Main)" aria-label="Advertising Broker Contact"><a data-ng-href="tel:{{::Idx.sharedValues.contact.phones.Main}}" data-ng-bind="::Idx.sharedValues.contact.phones.Main"></a></p></div><div class="listing-credit-divider" data-ng-if="getListAgentName() && Idx.sharedValues.contact.name" data-flex="10" data-hide-xs></div><div class="listing-agent-container" data-ng-if="getListAgentName()" data-flex data-layout="column" aria-label="Listing Broker" property="seller" typeof="Person"><h4 class="listing-credit-title">Listing Agent</h4><p class="listing-credit-contact"><span data-ng-bind="::getListAgentName()" property="name"></span> | <span data-ng-bind="::model.data.ListOfficeName" property="affiliation"></span></p><p class="listing-credit-contact" data-ng-if="model.data.ListAgentEmail" aria-label="Listing Broker Contact"></p><meta property="email" content="{{::model.data.ListAgentEmail}}"><a data-ng-href="mailto:{{::model.data.ListAgentEmail}}" target="_blank" data-ng-bind="::model.data.ListAgentEmail"></a><p></p><p class="listing-credit-contact" data-ng-if="getListAgentPhone() && !model.data.ListAgentEmail" aria-label="Listing Broker Contact"></p><meta property="telephone" content="{{::getListAgentPhone()}}"><a data-ng-href="tel:{{::getListAgentPhone()}}" data-ng-bind="::getListAgentPhone()"></a><p></p><meta data-ng-if="::model.data.ListAgentStateLicense" property="identifier" content="{{::model.data.ListAgentStateLicense}}"></div></section><div class="list-price font-secondary" data-ng-if="::model.data.ClosePrice || model.data.ListPrice" role="text"><span class="list-price-label" data-ng-bind="Idx.getFriendlyPriceLabel(model.data)"></span> <span class="list-price" data-ng-bind="'$' + (model.data.ClosePrice || model.data.ListPrice | number)" aria-label="Property Price"></span></div><div class="font-body description" data-ng-if="::model.data.PublicRemarks && !hideVariables.includes('PublicRemarks')" data-ng-bind-html="::getPublicRemarksHTML()" aria-label="Description" property="description"></div><div class="response-container"><a data-ng-if="::model.data.VirtualTourURLUnbranded && !hideVariables.includes('VirtualTourURLUnbranded')" data-ng-href="{{::model.data.VirtualTourURLUnbranded}}" class="vtour btn btn-alt" target="_blank" aria-label="Virtual Tour Link">Virtual Tour </a><a data-ng-if="::!(model.data.VirtualTourURLUnbranded && !hideVariables.includes('VirtualTourURLUnbranded')) && model.data.VirtualTourURLBranded && !hideVariables.includes('VirtualTourURLBranded')" data-ng-href="{{::model.data.VirtualTourURLBranded}}" class="vtour btn btn-alt" target="_blank" aria-label="Virtual Tour Link">Virtual Tour</a></div></div></div></div><section class="open-house-container details-container template-background-color-pop static-element" data-ng-if="model.data.OpenHouses && model.data.OpenHouses.length" role="region" aria-label="Open Houses"><div class="open-house"><div class="clearfix"><div class="details-left"><h2>Open</h2><p class="remarks primary_font">Please join us for an open showing of this property on the following dates:</p></div><div class="details-right" role="list" aria-label="Open Houses"><div class="open-house-item" data-ng-repeat="openHouse in model.data.OpenHouses" id="{{'open_house_' + openHouse.OpenHouseKey}}" role="listitem" aria-label="{{::(openHouse.OpenHouseStartTime | moment:{unix:false,format:'dddd MMM Do, h:mm a'})}}"><div class="month primary_font" data-ng-bind="::openHouse.OpenHouseStartTime | moment:{unix:false,format:'MMMM'}"></div><div data-layout-gt-xs="row" data-layout-align-gt-xs="space-between center"><div class="primary_font" data-layout="row" data-layout-align="space-between center"><div class="day" data-ng-bind="::openHouse.OpenHouseStartTime | moment:{unix:false,format:'D'}"></div><div class="day-weekday-time-agent"><time data-ng-bind="::openHouse.OpenHouseStartTime | moment:{unix:false,format:'dddd MMM Do, h:mm a'}" datetime="{{::openHouse.OpenHouseStartTime}}"></time> <span data-ng-if="::openHouse.OpenHouseEndTime">— <time data-ng-bind="::openHouse.OpenHouseEndTime | moment:{unix:false,format:'h:mm a'}" datetime="{{::openHouse.OpenHouseEndTime}}"></time> </span><span data-ng-if="::openHouse.OpenHouseStatus && openHouse.OpenHouseStatus !== 'Active'" role="text">(<span data-ng-bind="::openHouse.OpenHouseStatus"></span>)</span><br><span data-ng-if="::openHouse._unmapped.VirtualOpenHouseURL"><a data-ng-href="{{::openHouse._unmapped.VirtualOpenHouseURL}}" target="_blank" data-ng-bind="::(openHouse._unmapped.VirtualOpenHouseURLLinkText || 'Virtual Open House')" aria-label="Open House Virtual Tour Link"></a> </span><span data-ng-if="::openHouse.ShowingAgentFirstName" role="text">with <span data-ng-bind="::openHouse.ShowingAgentFirstName"></span> <span data-ng-bind="::openHouse.ShowingAgentLastName"></span></span></div></div></div></div></div></div></div></section><div class="secondary-image-container"><a class="btn btn-alt btn-contact" data-ng-show="::contactUrl || Idx.sharedValues.contactUrl" target="_blank" data-ng-href="{{::contactUrl || Idx.sharedValues.contactUrl}}{{(Idx.sharedValues.contactCommentVariable ? '?' + Idx.sharedValues.contactCommentVariable + '=' + getFullAddress(true) : '')}}" aria-label="Website Contact">Contact</a><div class="image-dimmer" aria-hidden="true"></div><div class="image-wrapper" data-ng-if="model.data.Images && model.data.Images[0]" data-stratus-src-version="{{::(model.data.Images[0].Lazy == 'stratus-src' ? 'best' : 'false')}}" data-stratus-src="{{::model.data.Images[0].MediaURL}}" data-init-now="model.completed" aria-label="Background Image of Listing"><img data-ng-if="model.data.Images && model.data.Images.length > 0" data-ng-src="{{::localDir}}images/stratus-property-shapeholder.png" alt="Image Shapeholder" aria-hidden="true"> <img data-ng-if="!model.data.Images" data-ng-src="{{::localDir}}images/no-image-simple.jpg" alt="No Image Available"></div></div><div class="map-location details-container static-element" data-ng-if="::getGoogleMapEmbed()" role="presentation" aria-label="Google Maps Display"><h2 class="dotted-spaced-underline">Location</h2><iframe data-ng-src="{{::getGoogleMapEmbed()}}" class="google-map-embed"></iframe></div><section class="additional-details details-container static-element" role="region" aria-label="Additional Details"><h2 class="dotted-spaced-underline">More</h2><div><div class="detail-sections"><stratus-idx-property-details-sub-section data-ng-model="model" data-ng-repeat="detail in ::minorDetails" section-name="{{::detail.section}}" items="{{::detail.items | json}}"></stratus-idx-property-details-sub-section><div class="property-details-sub-section" data-ng-if="::getListAgentName() || getCoListAgentName() || getBuyerAgentName() || getCoBuyerAgentName() || model.data.ListAgentStateLicense || model.data.CoListAgentStateLicense || model.data.BuyerAgentStateLicense || model.data.CoBuyerAgentStateLicense"><div class="sub-detail-section" role="region" aria-label="Source Agents"><strong class="section-name">Agent</strong><div class="sub-detail" data-ng-if="getListAgentName() || model.data.ListAgentStateLicense" role="text"><span class="item-label">Listing Agent: </span><span data-ng-bind="::getListAgentName()" aria-label="List Agent Name"></span><span data-ng-if="::model.data.ListAgentStateLicense"> (DRE# <span data-ng-bind="::model.data.ListAgentStateLicense" aria-label="List Agent State License"></span>)</span><span data-ng-if="::model.data.ListAgentKey && !model.data.ListAgentStateLicense"> (Agent # <span data-ng-bind="::model.data.ListAgentKey" aria-label="List Agent MLS Key"></span>)</span><span data-ng-if="::model.data.ListOfficeName">, <span data-ng-bind="::model.data.ListOfficeName" aria-label="List Office Name"></span></span></div><div class="sub-detail" data-ng-if="getCoListAgentName() || model.data.CoListAgentStateLicense" role="text"><span class="item-label">Co-Listing Agent: </span><span data-ng-bind="::getCoListAgentName()" aria-label="CoList Agent Name"></span><span data-ng-if="::model.data.CoListAgentStateLicense"> (DRE# <span data-ng-bind="::model.data.CoListAgentStateLicense" aria-label="CoList Agent State License"></span>)</span><span data-ng-if="::model.data.CoListAgentKey && !model.data.CoListAgentStateLicense"> (Agent # <span data-ng-bind="::model.data.CoListAgentKey" aria-label="CoList Agent MLS Key"></span>)</span><span data-ng-if="::model.data.CoListOfficeName">, <span data-ng-bind="::model.data.CoListOfficeName" aria-label="CoList Office Name"></span></span></div><div class="sub-detail" data-ng-if="getBuyerAgentName() || model.data.BuyerAgentStateLicense" role="text"><span class="item-label">Buyer Agent: </span><span data-ng-bind="::getBuyerAgentName()" aria-label="Buyer Agent Name"></span><span data-ng-if="::model.data.BuyerAgentStateLicense"> (DRE# <span data-ng-bind="::model.data.BuyerAgentStateLicense" aria-label="Buyer Agent State License"></span>)</span><span data-ng-if="::model.data.BuyerAgentKey && !model.data.BuyerAgentStateLicense"> (Agent # <span data-ng-bind="::model.data.BuyerAgentKey" aria-label="Buyer Agent MLS Key"></span>)</span><span data-ng-if="::model.data.BuyerOfficeName">, <span data-ng-bind="::model.data.BuyerOfficeName" aria-label="Buyer Office Name"></span></span></div><div class="sub-detail" data-ng-if="getCoBuyerAgentName() || model.data.CoBuyerAgentStateLicense" role="text"><span class="item-label">Co-Buyer Agent: </span><span data-ng-bind="::getCoBuyerAgentName()" aria-label="CoBuyer Agent Name"></span><span data-ng-if="::model.data.CoBuyerAgentStateLicense"> (DRE# <span data-ng-bind="::model.data.CoBuyerAgentStateLicense" aria-label="CoBuyer Agent State License"></span>)</span><span data-ng-if="::model.data.CoBuyerAgentKey && !model.data.CoBuyerAgentStateLicense"> (Agent # <span data-ng-bind="::model.data.CoBuyerAgentKey" aria-label="CoBuyer Agent MLS Key"></span>)</span><span data-ng-if="::model.data.CoBuyerOfficeName">, <span data-ng-bind="::model.data.CoBuyerOfficeName" aria-label="CoBuyer Office Name"></span></span></div></div></div></div></div></section><section class="contact-container details-container static-element" data-ng-show="::contact || Idx.sharedValues.contact" role="region" aria-label="Website Contact"><h2>Contact</h2><h4 class="site-name" data-ng-show="::contact.name || (Idx.sharedValues.contact && Idx.sharedValues.contact.name)" data-ng-bind="::contact.name || Idx.sharedValues.contact.name"></h4><p class="phone" data-ng-show="(contact.phones && contact.phones.Main) || (Idx.sharedValues.contact.phones && Idx.sharedValues.contact.phones.Main)"><a data-ng-href="tel:{{::contact.phones.Main || Idx.sharedValues.contact.phones.Main}}" data-ng-bind="::contact.phones.Main || Idx.sharedValues.contact.phones.Main"></a></p><p class="email" data-ng-show="(contact.emails && contact.emails.Main) || (Idx.sharedValues.contact.emails && Idx.sharedValues.contact.emails.Main)"><a data-ng-href="mailto:{{::contact.emails.Main || Idx.sharedValues.contact.emails.Main}}" data-ng-bind="::contact.emails.Main || Idx.sharedValues.contact.emails.Main" target="_blank" aria-label="Website Email Contact"></a></p></section><div class="disclaimer-container details-container static-element"><stratus-idx-disclaimer data-service="{{::options.service}}" data-modification-timestamp="::model.data.ModificationTimestamp" data-ng-class="{'border-top': (contact || Idx.sharedValues.contact)}"></stratus-idx-disclaimer></div></div><div data-ng-if="model.data.length == 0 || model.error" class="error details-container">Sorry, the property you requested could not be found. Perhaps there was an error and trying again will solve the problem.</div></div>