@eff-custom-plugins/location-radius NPM

Location Radius

LocationRadius is a reusable component using Angular v8.2.0

Installation

NPM

npm i @eff-custom-plugins/location-radius

Usage

HTML

<app-location    [locationList]="[{  key: "AM",
                                     name: "Армения",
                                     type: "country",
                                     country_code: "AM",
                                     country_name: "Армения",
                                     supports_region: true,
                                     supports_city: true }]"
                 [radiusRangeConfig]="{ min:0, max:25,
                                        radiusSizeType: 'mi',
                                        defaultValue: 'Current city only',
                                        selectRadiusTitle: 'Cities within radius'}"
                 (selectedLocation)="onSelectedLocation($event)"
                 (searchedLocation)="onSearchedLocation($event)"></app-location>

Attributes

Attributes	Description
@Input() locationList: ILocationList[]	This Location data list
@Input() radiusRangeConfig: ILocationRadiusValueConfig	This Location radius validation config not required defaults {default: {radius: {min: 10, max: 50, unit: 'mi'}, {min: 16, max: 80, unit: 'km'}}, custom: {MX: {radius: {min: 10, max: 50, unit: 'mi'}, {min: 16, max: 80, unit: 'km'}}}}
@Input() availableCountryCodes: string[]	Items belonging to `availableCountryCodes` only can be selected
@Input() expendedListing: boolean	If 'true' locations will combine by groups. If 'false' it will appear all together ('true' by default)
@Input() disabled: boolean	disable all actions ('true' by default)
@Output() selectedLocationEvent:EventEmitter<ILocationList[]>()	This event emits all selected Location Items
@Output() searchedLocation:EventEmitter<string.>()	This event emits searched text
@Output() unavailableOptionEvent:EventEmitter<ILocationList.>()	Trigger event in case if selected item doesn't match to `availableCountryCodes` requirement

Example and Sample Code

1) Import 'LocationRadiusModule' in your app module

import { LocationRadiusModule } from "@eff-custom-plugins/location-radius";

@NgModule({
  imports:[
    ..
    LocationRadiusModule
    ..
  ]
})

1) Add bootstrap and main styles to your app

npm i bootstrap

"styles": [
  ..
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@eff-custom-plugins/location-radius/lib/assets/main.scss",
  ..
],

3) Add 'location-radius' in your component html

<location-radius [locationList]="[{  key: "AM",
                                     name: "Армения",
                                     type: "country",
                                     country_code: "AM",
                                     country_name: "Армения",
                                     supports_region: true,
                                     supports_city: true }]"
                 [radiusRangeConfig]="{ min:0, max:25,
                                        radiusSizeType: 'mi',
                                        defaultValue: 'Current city only',
                                        selectRadiusTitle: 'Cities within radius'}"
                 (selectedLocation)="onSelectedLocation($event)"
                 (searchedLocation)="onSearchedLocation($event)"></location-radius>

tslib

@infinitebrahmanuniverse/nolb-_ef @everything-registry/sub-chunk-279

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago