smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
254 lines (246 loc) • 13.4 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.map';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
class MapComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-map');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Before you begin using the Maps component, ensure that your Google Cloud project has an active billing account and that the Maps JavaScript API is enabled. For step-by-step instructions, visit: https://developers.google.com/maps/gmp-get-started.You will also need to create an API key, which serves as a unique identifier for your project. The API key is required to authenticate requests to the Maps JavaScript API and to track usage for billing purposes. Make sure that your project has at least one valid API key associated with it before proceeding. */
get apiKey() {
return this.nativeElement ? this.nativeElement.apiKey : undefined;
}
set apiKey(value) {
this.nativeElement ? this.nativeElement.apiKey = value : undefined;
}
/** @description The "query" parameter specifies the geographic location that should be centered and displayed on the map. Users can provide a variety of location types as the value, including the name of a continent, country, city, or a detailed address. The map will adjust its view to focus on the specified location based on the input provided in this parameter. */
get query() {
return this.nativeElement ? this.nativeElement.query : undefined;
}
set query(value) {
this.nativeElement ? this.nativeElement.query = value : undefined;
}
/** @description The 'mode' property specifies the operational mode of the map, determining how users can interact with it (e.g., view-only, edit, or select locations). Adjusting this property changes the map’s behavior to suit different use cases or user permissions. */
get mode() {
return this.nativeElement ? this.nativeElement.mode : undefined;
}
set mode(value) {
this.nativeElement ? this.nativeElement.mode = value : undefined;
}
/** @description The 'map-type' property allows users to select from a predefined set of map display options. These options include different types of maps, such as 'place' for location-based views, 'view' for general map visualization, and 'streetview' for panoramic street-level imagery. This property enables flexible map rendering based on the user's selected display mode. */
get mapType() {
return this.nativeElement ? this.nativeElement.mapType : undefined;
}
set mapType(value) {
this.nativeElement ? this.nativeElement.mapType = value : undefined;
}
/** @description This property is applicable only when the map type is set to "streetview." It specifies the horizontal orientation, or heading, of the Street View panorama, determining the direction in which the viewer initially faces within the panorama. The value is typically expressed in degrees, where 0 represents north, 90 represents east, 180 represents south, and 270 represents west. */
get heading() {
return this.nativeElement ? this.nativeElement.heading : undefined;
}
set heading(value) {
this.nativeElement ? this.nativeElement.heading = value : undefined;
}
/** @description The 'pitch' property specifies the vertical viewing angle of the map, allowing you to adjust the perspective upwards ('up') or downwards ('down'). By default, Google Maps displays the map with a horizontal (0°) pitch, meaning there is no vertical tilt. Adjusting the 'pitch' lets you tilt the map to provide an angled, more three-dimensional view. */
get pitch() {
return this.nativeElement ? this.nativeElement.pitch : undefined;
}
set pitch(value) {
this.nativeElement ? this.nativeElement.pitch = value : undefined;
}
/** @description The camera's zoom level controls how much of the map is visible and how detailed that view is. Increasing the zoom level allows users to see more detail—such as individual streets and buildings—while decreasing the zoom level zooms out to display a larger area, like entire continents or the whole world, with less detail. Approximate examples of what’s visible at various zoom levels are:- '1:' Whole World- '5:' Continents and Major Landmasses- '10:' Cities and Surrounding Areas- '15:' City Streets- '20:' Individual BuildingsAdjusting the zoom level allows users to focus on specific areas or get a broad overview, depending on their needs. */
get zoom() {
return this.nativeElement ? this.nativeElement.zoom : undefined;
}
set zoom(value) {
this.nativeElement ? this.nativeElement.zoom = value : undefined;
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
if (Smart)
Smart.Render();
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
}
ngOnDestroy() { }
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
}
MapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MapComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
MapComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: MapComponent, selector: "smart-map, [smart-map]", inputs: { apiKey: "apiKey", query: "query", mode: "mode", mapType: "mapType", heading: "heading", pitch: "pitch", zoom: "zoom" }, exportAs: ["smart-map"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MapComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-map', selector: 'smart-map, [smart-map]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { apiKey: [{
type: Input
}], query: [{
type: Input
}], mode: [{
type: Input
}], mapType: [{
type: Input
}], heading: [{
type: Input
}], pitch: [{
type: Input
}], zoom: [{
type: Input
}] } });
class MapModule {
}
MapModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MapModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
MapModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MapModule, declarations: [MapComponent], exports: [MapComponent] });
MapModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MapModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MapModule, decorators: [{
type: NgModule,
args: [{
declarations: [MapComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [MapComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { MapComponent, MapModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-map.mjs.map