@@ -1,15 +1,15 @@
< div * ngIf = "isModal && (modalService.modalVisible$ | async)" class = "fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center z-50" >
< div class = "relative w-full max-h-full" >
< div class = "relative bg-white rounded-lg shadow" >
< div class = "flex items-start justify-between p-4 border-b rounded-t" >
< div class = "flex items-start justify-between p-4 border-b rounded-t bg-blue-600 " >
@if(criteria.criteriaType==='businessListings') {
< h3 class = "text-xl font-semibold text-gray-900 " > Business Listing Search< / h3 >
< h3 class = "text-xl font-semibold text-white p-2 rounded " > Business Listing Search< / h3 >
} @else if (criteria.criteriaType==='commercialPropertyListings') {
< h3 class = "text-xl font-semibold text-gray-900" > Property Listing Search< / h3 >
} @else {
< h3 class = "text-xl font-semibold text-gray-900" > Professional Listing Search< / h3 >
}
< button ( click ) = " close ( ) " type = "button" class = "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center" >
< button ( click ) = " closeAndSearch ( ) " type = "button" class = "text-white bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center" >
< svg class = "w-3 h-3" aria-hidden = "true" xmlns = "http://www.w3.org/2000/svg" fill = "none" viewBox = "0 0 14 14" >
< path stroke = "currentColor" stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d = "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" / >
< / svg >
@@ -25,360 +25,194 @@
< div class = "tooltip-arrow" data-popper-arrow > < / div >
< / div >
< / div >
@if(criteria){
< div class = "space-y-6 " >
@if(criteria.criteriaType==='businessListings') {
< div class = "grid grid-cols-1 gap-6" >
< div class = "space-y-4" >
< div >
< label for = "state" class = "block mb-2 text-sm font-medium text-gray-900" > Location - State < / label >
< ng-select class = "custom" [ items ] = " selectOptions ? . states " bindLabel = "name" bindValue = "value" [ ngModel ] = " criteria . state " ( ngModelChange ) = " setState ( $ event ) " name = "state" > < / ng-select >
<!-- Display active filters as tags -->
< div class = "flex flex-wrap gap-2 mb-4" * ngIf = "hasActiveFilters() " >
< span * ngIf = "criteria.state" class = "bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center" >
State: {{ criteria.state }} < button ( click ) = " removeFilter ( ' state ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
< / span >
< span * ngIf = "criteria.city" class = "bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center" >
City: {{ criteria.city.name }} < button ( click ) = " removeFilter ( ' city ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
< / span >
< span * ngIf = "criteria.minPrice || criteria.maxPrice" class = "bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center" >
Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} < button ( click ) = " removeFilter ( ' price ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
< / span >
< span * ngIf = "criteria.minRevenue || criteria.maxRevenue" class = "bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center" >
Revenue: {{ criteria.minRevenue || 'Any' }} - {{ criteria.maxRevenue || 'Any' }} < button ( click ) = " removeFilter ( ' revenue ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
< / span >
< span * ngIf = "criteria.minCashFlow || criteria.maxCashFlow" class = "bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center" >
Cashflow: {{ criteria.minCashFlow || 'Any' }} - {{ criteria.maxCashFlow || 'Any' }} < button ( click ) = " removeFilter ( ' cashflow ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
< / span >
< span * ngIf = "criteria.types.length" class = "bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center" >
Categories: {{ criteria.types.join(', ') }} < button ( click ) = " removeFilter ( ' types ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
< / span >
< span * ngIf = "selectedPropertyType" class = "bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center" >
Property Type: {{ getSelectedPropertyTypeName() }} < button ( click ) = " removeFilter ( ' propertyType ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
< / span >
< span * ngIf = "criteria.minNumberEmployees || criteria.maxNumberEmployees" class = "bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center" >
Employees: {{ criteria.minNumberEmployees || 'Any' }} - {{ criteria.maxNumberEmployees || 'Any' }} < button ( click ) = " removeFilter ( ' employees ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
< / span >
< span * ngIf = "criteria.establishedSince || criteria.establishedUntil" class = "bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center" >
Established: {{ criteria.establishedSince || 'Any' }} - {{ criteria.establishedUntil || 'Any' }} < button ( click ) = " removeFilter ( ' established ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
< / span >
< span * ngIf = "criteria.brokerName" class = "bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center" >
Broker: {{ criteria.brokerName }} < button ( click ) = " removeFilter ( ' brokerName ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
< / span >
< / div >
< div class = "grid grid-cols-1 gap-6" >
< div class = "space-y-4" >
< div >
< label for = "state" class = "block mb-2 text-sm font-medium text-gray-900" > Location - State< / label >
< ng-select class = "custom" [ items ] = " selectOptions ? . states " bindLabel = "name" bindValue = "value" [ ngModel ] = " criteria . state " ( ngModelChange ) = " setState ( $ event ) " name = "state" > < / ng-select >
< / div >
< div >
< app-validated-city label = "Location - City" name = "city" [ ngModel ] = " criteria . city " ( ngModelChange ) = " setCity ( $ event ) " labelClasses = "text-gray-900 font-medium" [ state ] = " criteria . state " > < / app-validated-city >
< / div >
< div * ngIf = "criteria.city" >
< label class = "block mb-2 text-sm font-medium text-gray-900" > Search Type< / label >
< div class = "flex items-center space-x-4" >
< label class = "inline-flex items-center" >
< input type = "radio" class = "form-radio" name = "searchType" [ ( ngModel ) ] = " criteria . searchType " ( ngModelChange ) = " onCriteriaChange ( ) " value = "exact" / >
< span class = "ml-2" > Exact City< / span >
< / label >
< label class = "inline-flex items-center" >
< input type = "radio" class = "form-radio" name = "searchType" [ ( ngModel ) ] = " criteria . searchType " ( ngModelChange ) = " onCriteriaChange ( ) " value = "radius" / >
< span class = "ml-2" > Radius Search< / span >
< / label >
< / div >
< div
< app-validated-city label = "Location - City" name = "city" [ ngModel ] = " criteria . city " ( ngModelChange ) = " setCity ( $ event ) " labelClasses = "text-gray-900 font-me dium " [ state ] = " criteria . state " > < / app-validated-city >
< / div >
< div * ngIf = "criteria.city && criteria.searchType === 'ra dius' " class = "space-y-2" >
< label class = "block mb-2 text-sm font-medium text-gray-900" > Select Radius (in miles)< / label >
< div class = "flex flex-wrap" >
@for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
< button
type = "button"
class = "px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
[ ngClass ] = " criteria . radius = == radius ? ' text-white bg-gray-500 ' : ' text-gray-900 bg-white ' "
( click ) = " criteria . radius = radius"
>
{{ radius }}
< / button >
}
< / div >
< div * ngIf = "criteria.city" >
< label class = "block mb-2 text-sm font-medium text-gray-900" > Search Type< / label >
< div class = "flex items-center space-x-4" >
< label class = "inline- flex items-center" >
< input type = "radio" class = "form-radio" name = "searchType" [ ( ngModel ) ] = " criteria . searchType " ( ngModelChange ) = " onC riteriaChange ( ) " value = "exact" / >
< span class = "ml-2" > Exact City < / span >
< / label >
< label class = "inline-flex items-center" >
< input type = "radio" class = "form-radio" name = "searchType" [ ( ngModel ) ] = " criteria . searchType " ( ngModelChange ) = " onCriteriaChange ( ) " value = "radius" / >
< span class = "ml-2" > Radius Search< / span >
< / label >
< / div >
< / div >
< div >
< label for = "price" class = "block mb-2 text-sm font-medium text-gray-900" > Price< / label >
< div class = "flex items-center space-x-2 " >
< app-validated-price name = "price-from" ( ngModelChange ) = " debouncedSearch ( ) " [ ngModel )] = " c riteria. minPrice " placeholder = "From" inputClasses = "bg-gray-50 text-sm !mt-0 p-2.5" > < / app-validated-price >
< span > -< / span >
< app-validated-price name = "price-to" ( ngModelChange ) = " debouncedSearch ( ) " [ ( ngModel ) ] = " criteria . maxPrice " placeholder = "To" inputClasses = "bg-gray-50 text-sm !mt-0 p-2.5" > < / app-validated-price >
< / div >
< div * ngIf = "criteria.city && criteria.searchType === 'radius'" class = "space-y-2" >
< label class = "block mb-2 text-sm font-medium text-gray-900" > Select Radius (in miles)< / label >
< div class = "flex flex-wrap" >
@for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
< button
type = "button"
class = "px-3 py-2 text-xs font-medium text-center border border-gray-200 hover:bg-gray-500 hover:text-white"
[ ngClass ] = " criteria . radius = == radius ? ' text-white bg-gray-500 ' : ' text-gray-900 bg-white ' "
( click ) = " criteria . radius = radius"
>
{{ radius }}
< / button >
}
< / div >
< / div >
< div >
< label for = "salesRevenue" class = "block mb-2 text-sm font-medium text-gray-900" > Sales Revenue< / label >
< div class = "flex items-center space-x-2" >
< app-validated-price name = "salesRevenue-from" ( ngModelChange ) = " debouncedSearch ( ) " [ ( ngModel ) ] = " criteria . minRevenue " placeholder = "From" inputClasses = "bg-gray-50 text-sm !mt-0 p-2.5" > < / app-validated-price >
< span > -< / span >
< app-validated-price name = "salesRevenue-to" ( ngModelChange ) = " debouncedSearch ( ) " [ ( ngModel ) ] = " criteria . maxRevenue " placeholder = "To" inputClasses = "bg-gray-50 text-sm !mt-0 p-2.5" > < / app-validated-price >
< / div >
< div
< label for = "price" class = "block mb-2 text-sm font-medium text-gray-900" > Price< / label >
< div class = "flex items-center space-x-2" >
< app-validated-price name = "price-from" [ ( ngModel ) ] = " criteria . minPrice " ( ngModelChange ) = " onCriteriaChange ( ) " placeholder = "From" inputClasses = "bg-gray-50 text-sm !mt-0 p-2.5" > < / app-validated-price >
< span > - < / span >
< app-validated-price name = "price-to" [ ( ngModel ) ] = " criteria . maxPrice " ( ngModelChange ) = " onCriteriaChange ( ) " placeholder = "To" inputClasses = "bg-gray-50 text-sm !mt-0 p-2.5" > < / app-validated-price >
< / div >
< / div >
< div >
< label for = "cashflow" class = "block mb-2 text-sm font-medium text-gray-900" > Cashflow< / label >
< div class = "flex items-center space-x-2" >
< app-validated-price name = "cashflow-from" ( ngModelChange ) = " debouncedSearch ( ) " [ ( ngModel ) ] = " criteria . minCashFlow " placeholder = "From" inputClasses = "bg-gray-50 text-sm !mt-0 p-2.5" > < / app-validated-price >
< span > - < / span >
< app-validated-price name = "cashflow-to" ( ngModelChange ) = " debouncedSearch ( ) " [ ( ngModel ) ] = " criteria . maxCashFlow " placeholder = "To" inputClasses = "bg-gray-50 text-sm !mt-0 p-2.5" > < / app-validated-price >
< / div >
< div
< label for = "salesRevenue" class = "block mb-2 text-sm font-medium text-gray-900" > Sales Revenue< / label >
< div class = "flex items-center space-x-2" >
< app-validated-price
name = "salesRevenue-from "
[ ( ngModel ) ] = " criteria . minRevenue
( ngModelChange ) = " onC riteriaChange ( ) "
placeholder = "From "
inputC lasses = "bg-gray-50 text-sm !mt-0 p-2.5"
> < / app-validated-price >
< span > -< / span >
< app-validated-price name = "salesRevenue-to" [ ( ngModel ) ] = " criteria . maxRevenue " ( ngModelChange ) = " onCriteriaChange ( ) " placeholder = "To" inputClasses = "bg-gray-50 text-sm !mt-0 p-2.5" > < / app-validated-price >
< / div >
< / div >
< div >
< label for = "cashflow" class = "block mb-2 text-sm font-medium text-gray-900" > Cashflow< / label >
< div class = "flex items-center space-x-2" >
< app-validated-price name = "cashflow-from" [ ( ngModel ) ] = " criteria . minCashFlow " ( ngModelChange ) = " onCriteriaChange ( ) " placeholder = "From" inputClasses = "bg-gray-50 text-sm !mt-0 p-2.5" > < / app-validated-price >
< span > -< / span >
< app-validated-price name = "cashflow-to" [ ( ngModel ) = " criteria . maxCashFlow " ( ngModelChange ) = " onCriteriaChange ( ) " placeholder = "To" inputClasses = "bg-gray-50 text-sm !mt-0 p-2.5" > < / app-validated-price >
< / div >
< / div >
< div >
< label for = "title" class = "block mb-2 text-sm font-medium text-gray-900" > Title / Description (Free Search)< / label >
< / div >
< div >
< label for = "title" class = "block mb-2 text-sm font-medium text-gray-900" > Title / Description (Free Search)< / label >
< input
type = "text "
id = "title "
[ ( ngModel ) ] " c riteria. title "
( ngModelChange ) = " debouncedSearch ( )
c lass= "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder = "e.g. Restaurant"
/ >
< / div >
< div
< label class = "block mb-2 text-sm font-medium text-gray-900" > Category< / label >
< ng-select
class = "custom"
[ items ] = " selectOptions . typesOfBusiness "
bindLabel = "name"
bindValue = "value"
[ ngModel ] = " criteria . types "
( ngModelChange ) = " onCategoryChange ( $ event ) "
[ multiple ] = " true "
[ closeOnSelect ] = " true "
placeholder = "Select categories"
> < / ng-select >
< / div >
< div >
< label class = "block mb-2 text-sm font-medium text-gray-900" > Type of Property< / label >
< ng-select
class = "custom"
[ items ] = " propertyTypeOptions "
bindLabel = "name"
bindValue = "value"
[ ngModel ] = " selectedPropertyType "
( ngModelChange ) = " onPropertyTypeChange ( $ event ) "
placeholder = "Select property type"
> < / ng-select >
< / div >
< div >
< label for = "numberEmployees" class = "block mb-2 text-sm font-medium text-gray-900" > Number of Employees< / label >
< div class = "flex items-center space-x-2" >
< input
type = "text "
id = "title "
[ ( ngModel ) ] = " criteria . title "
( ngModelChange ) = " onCriteriaChange ( ) "
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder = "e.g. Restaurant "
type = "number "
id = "numberEmployees-from "
[ ( ngModel ) ] = " criteria . minNumberEmployees "
( ngModelChange ) = " debouncedSearch ( ) "
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder = "From "
/ >
< span > -< / span >
< input
type = "number"
id = "numberEmployees-to"
[ ( ngModel ) ] = " criteria . maxNumberEmployees "
( ngModelChange ) = " debouncedSearch ( ) "
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder = "To"
/ >
< / div >
< div
< label class = "block mb-2 text-sm font-medium text-gray-900" > Category< / label >
< div class = "grid grid-cols-2 gap-2" >
@for(tob of selectOptions.typesOfBusiness; track tob) {
< div class = "flex items-center" >
< input
type = "checkbox"
id = "automotive"
[ ngModel ] = " isTypeOfBusinessClicked ( tob ) "
( ngModelChange ) = " categoryClicked ( $ event , tob . value ) "
value = "{{ tob.value }}"
class = "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
/ >
< label for = "automotive" class = "ml-2 text-sm font-medium text-gray-900" > {{ tob.name }}< / label >
< / div >
}
< / div >
< / div >
< div >
< label class = "block mb-2 text-sm font-medium text-gray-900" > Type of Property< / label >
< div class = "space-y-2" >
< div class = "flex items-center" >
< input
[ ( ngModel ) ] = " criteria . realEstateChecked "
( ngModelChange ) = " onCheckboxChange ( ' realEstateChecked ' , $ event ) "
type = "checkbox"
name = "realEstateChecked"
class = "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
/ >
< label for = "realEstateChecked" class = "ml-2 text-sm font-medium text-gray-900" > Real Estate< / label >
< / div >
< div class = "flex items-center" >
< input
[ ( ngModel ) ] = " criteria . leasedLocation "
( ngModelChange ) = " onCheckboxChange ( ' leasedLocation ' , $ event ) "
type = "checkbox"
name = "leasedLocation"
class = "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
/ >
< label for = "leasedLocation" class = "ml-2 text-sm font-medium text-gray-900" > Leased Location< / label >
< / div >
< div class = "flex items-center" >
< input
[ ( ngModel ) ] = " criteria . franchiseResale "
( ngModelChange ) = " onCheckboxChange ( ' franchiseResale ' , $ event ) "
type = "checkbox"
name = "franchiseResale"
class = "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
/ >
< label for = "franchiseResale" class = "ml-2 text-sm font-medium text-gray-900" > Franchise< / label >
< / div >
< / div >
< / div >
< div >
< label for = "numberEmployees" class = "block mb-2 text-sm font-medium text-gray-900" > Number of Employees< / label >
< div class = "flex items-center space-x-2" >
< input
type = "number"
id = "numberEmployees-from"
[ ( ngModel ) ] = " criteria . minNumberEmployees "
( ngModelChange ) = " onCriteriaChange ( ) "
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder = "From"
/ >
< span > -< / span >
< input
type = "number"
id = "numberEmployees-to"
[ ( ngModel ) ] = " criteria . maxNumberEmployees "
( ngModelChange ) = " onCriteriaChange ( ) "
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder = "To"
/ >
< / div >
< / div >
< div >
< label for = "establishedSince" class = "block mb-2 text-sm font-medium text-gray-900" > Established Since< / label >
< div class = "flex items-center space-x-2" >
< input
type = "number"
id = "establishedSince-From"
[ ( ngModel ) ] = " criteria . establishedSince "
( ngModelChange ) = " onCriteriaChange ( ) "
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder = "YYYY"
/ >
< span > -< / span >
< input
type = "number"
id = "establishedSince-To"
[ ( ngModel ) ] = " criteria . establishedUntil "
( ngModelChange ) = " onCriteriaChange ( ) "
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder = "YYYY"
/ >
< / div >
< / div >
< div >
< label for = "brokername" class = "block mb-2 text-sm font-medium text-gray-900" > Broker Name / Company Name< / label >
< / div >
< div >
< label for = "establishedSince" class = "block mb-2 text-sm font-medium text-gray-900" > Established Since< / label >
< div class = "flex items-center space-x-2" >
< input
type = "text "
id = "brokername "
[ ( ngModel ) ] = " criteria . brokerNam e"
( ngModelChange ) = " onCriteriaChange ( ) "
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder = "e.g. Brokers Invest "
type = "number "
id = "establishedSince-From "
[ ( ngModel ) ] = " criteria . establishedSinc e"
( ngModelChange ) = " debouncedSearch ( ) "
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder = "YYYY "
/ >
< span > -< / span >
< input
type = "number"
id = "establishedSince-To"
[ ( ngModel ) ] = " criteria . establishedUntil "
( ngModelChange ) = " debouncedSearch ( ) "
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder = "YYYY"
/ >
< / div >
< / div >
< div >
< label for = "brokername" class = "block mb-2 text-sm font-medium text-gray-900" > Broker Name / Company Name< / label >
< input
type = "text"
id = "brokername"
[ ( ngModel ) ] = " criteria . brokerName "
( ngModelChange ) = " debouncedSearch ( ) "
class = "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder = "e.g. Brokers Invest"
/ >
< / div >
< / div >
<!-- } @if(criteria.criteriaType==='commercialPropertyListings') { -->
<!-- <div class="grid grid - cols - 1 gap - 6">
<div class="space - y - 4">
<div>
<label for="state" class="block mb - 2 text - sm font - medium text - gray - 900">Location - State</label>
<ng - select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng - select>
</div>
<div>
<app - validated - city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text - gray - 900 font - medium" [state]="criteria.state"></app - validated - city>
</div>
<div *ngIf="criteria.city">
<label class="block mb - 2 text - sm font - medium text - gray - 900">Search Type</label>
<div class="flex items - center space - x - 4">
<label class="inline - flex items - center">
<input type="radio" class="form - radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
<span class="ml - 2">Exact City</span>
</label>
<label class="inline - flex items - center">
<input type="radio" class="form - radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
<span class="ml - 2">Radius Search</span>
</label>
</div>
</div>
<div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space - y - 2">
<label class="block mb - 2 text - sm font - medium text - gray - 900">Select Radius (in miles)</label>
<div class="flex flex - wrap">
@for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
<button
type="button"
class="px - 3 py - 2 text - xs font - medium text - center border border - gray - 200 hover:bg - gray - 500 hover:text - white"
[ngClass]="criteria.radius === radius ? 'text - white bg - gray - 500' : 'text - gray - 900 bg - white'"
(click)="criteria.radius = radius"
>
{{ radius }}
</button>
}
</div>
</div>
<div>
<label for="price" class="block mb - 2 text - sm font - medium text - gray - 900">Price</label>
<div class="flex items - center space - x - 2">
<app - validated - price name="price - from" [(ngModel)]="criteria.minPrice" placeholder="From" inputClasses="bg - gray - 50 text - sm !mt - 0 p - 2.5"></app - validated - price>
<span> - </span>
<app - validated - price name="price - to" [(ngModel)]="criteria.maxPrice" placeholder="To" inputClasses="bg - gray - 50 text - sm !mt - 0 p - 2.5"></app - validated - price>
</div>
</div>
<div>
<label for="title" class="block mb - 2 text - sm font - medium text - gray - 900">Title / Description (Free Search)</label>
<input
type="text"
id="title"
[(ngModel)]="criteria.title"
class="bg - gray - 50 border border - gray - 300 text - gray - 900 text - sm rounded - lg focus:ring - blue - 500 focus:border - blue - 500 block w - full p - 2.5"
placeholder="e.g. Restaurant"
/>
</div>
<div>
<label class="block mb - 2 text - sm font - medium text - gray - 900">Category</label>
<div class="grid grid - cols - 2 gap - 2">
@for(tob of selectOptions.typesOfCommercialProperty; track tob) {
<div class="flex items - center">
<input
type="checkbox"
id="automotive"
[ngModel]="isTypeOfBusinessClicked(tob)"
(ngModelChange)="categoryClicked($event, tob.value)"
value="{{ tob.value }}"
class="w - 4 h - 4 text - blue - 600 bg - gray - 100 border - gray - 300 rounded focus:ring - blue - 500"
/>
<label for="automotive" class="ml - 2 text - sm font - medium text - gray - 900">{{ tob.name }}</label>
</div>
}
</div>
</div>
</div>
</div> -->
<!-- } @if(criteria.criteriaType==='brokerListings') { -->
<!-- <div class="grid grid - cols - 1 gap - 6">
<div class="space - y - 4">
<div>
<label for="states" class="block mb - 2 text - sm font - medium text - gray - 900">Locations served - States</label>
<ng - select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state" [multiple]="false"></ng - select>
</div>
<div>
<label for="counties" class="block mb - 2 text - sm font - medium text - gray - 900">Locations served - Counties</label>
<ng - select
[items]="counties$ | async"
bindLabel="name"
class="custom"
[multiple]="true"
[hideSelected]="true"
[trackByFn]="trackByFn"
[minTermLength]="2"
[loading]="countyLoading"
typeToSearchText="Please enter 2 or more characters"
[typeahead]="countyInput$"
[(ngModel)]="criteria.counties"
></ng - select>
</div>
<div>
<app - validated - city
label="Company Location - City"
name="city"
[ngModel]="criteria.city"
(ngModelChange)="setCity($event)"
labelClasses="text - gray - 900 font - medium"
[state]="criteria.state"
></app - validated - city>
</div>
<div *ngIf="criteria.city">
<label class="block mb - 2 text - sm font - medium text - gray - 900">Search Type</label>
<div class="flex items - center space - x - 4">
<label class="inline - flex items - center">
<input type="radio" class="form - radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
<span class="ml - 2">Exact City</span>
</label>
<label class="inline - flex items - center">
<input type="radio" class="form - radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
<span class="ml - 2">Radius Search</span>
</label>
</div>
</div>
<div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space - y - 2">
<label class="block mb - 2 text - sm font - medium text - gray - 900">Select Radius (in miles)</label>
<div class="flex flex - wrap">
@for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
<button
type="button"
class="px - 3 py - 2 text - xs font - medium text - center border border - gray - 200 hover:bg - gray - 500 hover:text - white"
[ngClass]="criteria.radius === radius ? 'text - white bg - gray - 500' : 'text - gray - 900 bg - white'"
(click)="criteria.radius = radius"
>
{{ radius }}
</button>
}
</div>
</div>
<div>
<label for="brokername" class="block mb - 2 text - sm font - medium text - gray - 900">Name of Professional</label>
<input
type="text"
id="brokername"
[(ngModel)]="criteria.brokerName"
class="bg - gray - 50 border border - gray - 300 text - gray - 900 text - sm rounded - lg focus:ring - blue - 500 focus:border - blue - 500 block w - full p - 2.5"
/>
</div>
</div>
</div> -->
}
< / div >
}
< / div >
< div class = "flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b" >
< button type = "button" ( click ) = " modalService . accept ( ) " class = "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center" >
Search ({{ numberOfResults$ | async }})
< / button >
< button
type = "button"
( click ) = " close ( ) "
class = "text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10"
>
Cancel
< / button >
< / div >
< / div >
< / div >
@@ -401,7 +235,7 @@
State: {{ criteria.state }} < button ( click ) = " removeFilter ( ' state ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
< / span >
< span * ngIf = "criteria.city" class = "bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center" >
City: {{ criteria.city }} < button ( click ) = " removeFilter ( ' city ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
City: {{ criteria.city.name }} < button ( click ) = " removeFilter ( ' city ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
< / span >
< span * ngIf = "criteria.minPrice || criteria.maxPrice" class = "bg-gray-200 text-gray-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center" >
Price: {{ criteria.minPrice || 'Any' }} - {{ criteria.maxPrice || 'Any' }} < button ( click ) = " removeFilter ( ' price ' ) " class = "ml-1 text-red-500 hover:text-red-700" > × < / button >
@@ -582,137 +416,5 @@
/ >
< / div >
< / div >
<!-- } @if(criteria.criteriaType==='commercialPropertyListings') { -->
<!-- <div class="space - y - 4">
<div>
<label for="state" class="block mb - 2 text - sm font - medium text - gray - 900">Location - State</label>
<ng - select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng - select>
</div>
<div>
<app - validated - city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text - gray - 900 font - medium" [state]="criteria.state"></app - validated - city>
</div>
<div *ngIf="criteria.city">
<label class="block mb - 2 text - sm font - medium text - gray - 900">Search Type</label>
<div class="flex items - center space - x - 4">
<label class="inline - flex items - center">
<input type="radio" class="form - radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
<span class="ml - 2">Exact City</span>
</label>
<label class="inline - flex items - center">
<input type="radio" class="form - radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
<span class="ml - 2">Radius Search</span>
</label>
</div>
</div>
<div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space - y - 2">
<label class="block mb - 2 text - sm font - medium text - gray - 900">Select Radius (in miles)</label>
<div class="flex flex - wrap">
@for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
<button
type="button"
class="px - 3 py - 2 text - xs font - medium text - center border border - gray - 200 hover:bg - gray - 500 hover:text - white"
[ngClass]="criteria.radius === radius ? 'text - white bg - gray - 500' : 'text - gray - 900 bg - white'"
(click)="criteria.radius = radius"
>
{{ radius }}
</button>
}
</div>
</div>
<div>
<label for="price" class="block mb - 2 text - sm font - medium text - gray - 900">Price</label>
<div class="flex items - center space - x - 2">
<app - validated - price name="price - from" [(ngModel)]="criteria.minPrice" placeholder="From" inputClasses="bg - gray - 50 text - sm !mt - 0 p - 2.5"></app - validated - price>
<span> - </span>
<app - validated - price name="price - to" [(ngModel)]="criteria.maxPrice" placeholder="To" inputClasses="bg - gray - 50 text - sm !mt - 0 p - 2.5"></app - validated - price>
</div>
</div>
<div>
<label for="title" class="block mb - 2 text - sm font - medium text - gray - 900">Title / Description (Free Search)</label>
<input
type="text"
id="title"
[(ngModel)]="criteria.title"
class="bg - gray - 50 border border - gray - 300 text - gray - 900 text - sm rounded - lg focus:ring - blue - 500 focus:border - blue - 500 block w - full p - 2.5"
placeholder="e.g. Restaurant"
/>
</div>
<div>
<label class="block mb - 2 text - sm font - medium text - gray - 900">Category</label>
<div class="grid grid - cols - 2 gap - 2">
@for(tob of selectOptions.typesOfCommercialProperty; track tob) {
<div class="flex items - center">
<input
type="checkbox"
id="automotive"
[ngModel]="isTypeOfBusinessClicked(tob)"
(ngModelChange)="categoryClicked($event, tob.value)"
value="{{ tob.value }}"
class="w - 4 h - 4 text - blue - 600 bg - gray - 100 border - gray - 300 rounded focus:ring - blue - 500"
/>
<label for="automotive" class="ml - 2 text - sm font - medium text - gray - 900">{{ tob.name }}</label>
</div>
}
</div>
</div>
</div> -->
<!-- } @if(criteria.criteriaType==='brokerListings') { -->
<!-- <div class="space - y - 4">
<div>
<label for="states" class="block mb - 2 text - sm font - medium text - gray - 900">Locations served - States</label>
<ng - select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state" [multiple]="false"></ng - select>
</div>
<div>
<label for="counties" class="block mb - 2 text - sm font - medium text - gray - 900">Locations served - Counties</label>
<ng - select
[items]="counties$ | async"
bindLabel="name"
class="custom"
[multiple]="true"
[hideSelected]="true"
[trackByFn]="trackByFn"
[minTermLength]="2"
[loading]="countyLoading"
typeToSearchText="Please enter 2 or more characters"
[typeahead]="countyInput$"
[(ngModel)]="criteria.counties"
></ng - select>
</div>
<div>
<app - validated - city label="Company Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text - gray - 900 font - medium" [state]="criteria.state"></app - validated - city>
</div>
<div *ngIf="criteria.city">
<label class="block mb - 2 text - sm font - medium text - gray - 900">Search Type</label>
<div class="flex items - center space - x - 4">
<label class="inline - flex items - center">
<input type="radio" class="form - radio" name="searchType" [(ngModel)]="criteria.searchType" value="exact" />
<span class="ml - 2">Exact City</span>
</label>
<label class="inline - flex items - center">
<input type="radio" class="form - radio" name="searchType" [(ngModel)]="criteria.searchType" value="radius" />
<span class="ml - 2">Radius Search</span>
</label>
</div>
</div>
<div *ngIf="criteria.city && criteria.searchType === 'radius'" class="space - y - 2">
<label class="block mb - 2 text - sm font - medium text - gray - 900">Select Radius (in miles)</label>
<div class="flex flex - wrap">
@for (radius of [5, 20, 50, 100, 200, 300, 400, 500]; track radius) {
<button
type="button"
class="px - 3 py - 2 text - xs font - medium text - center border border - gray - 200 hover:bg - gray - 500 hover:text - white"
[ngClass]="criteria.radius === radius ? 'text - white bg - gray - 500' : 'text - gray - 900 bg - white'"
(click)="criteria.radius = radius"
>
{{ radius }}
</button>
}
</div>
</div>
<div>
<label for="brokername" class="block mb - 2 text - sm font - medium text - gray - 900">Name of Professional</label>
<input type="text" id="brokername" [(ngModel)]="criteria.brokerName" class="bg - gray - 50 border border - gray - 300 text - gray - 900 text - sm rounded - lg focus:ring - blue - 500 focus:border - blue - 500 block w - full p - 2.5" />
</div>
</div> -->
}
< / div >
