import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core";
import { GoogleMap, GoogleMapsModule } from "@angular/google-maps";

@Component({
  selector: "app-google-map",
  imports: [GoogleMapsModule],
  templateUrl: "./google-map.html",
  styleUrls: ["./google-map.scss"],
})
export class GoogleMaps implements OnInit, AfterViewInit {
  public markers: IMapMarker[];
  public markers1: IMapMarker[];
  public zoom: number;

  constructor() {
    this.markers = [];
    this.zoom = 2;
  }

  ngOnInit() {
    this.markers1.push({
      position: {
        lat: 12.97,
        lng: 77.59,
      },
      label: {
        color: "red",
        text: "Arial",
      },
      Option: {
        draggable: true,
        animation: google.maps.Animation.DROP,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        fullscreenControl: false,
      },
    });

    this.markers.push({
      position: {
        lat: 35.717,
        lng: 139.731,
      },
      label: {
        color: "black",
        text: "Madrid",
      },
      Option: {
        draggable: true,
        animation: google.maps.Animation.DROP,
      },
    });

    this.markers.push({
      position: {
        lat: 48.8615515,
        lng: 2.3112233,
      },
      label: {
        color: "black",
        text: "Paris",
      },
    });
  }

  //Street View
  @ViewChild(GoogleMap) map!: GoogleMap;

  ngAfterViewInit() {
    const streetView = this.map.getStreetView();
    streetView.setOptions({
      position: { lat: 38.9938386, lng: -77.2515373 },
      pov: { heading: 70, pitch: -10 },
    });
    streetView.setVisible(true);
    const bounds = this.getBounds(this.markers);
    this.map.googleMap?.fitBounds(bounds);
  }

  getBounds(markers: IMapMarker[]): google.maps.LatLngBoundsLiteral {
    if (!markers.length) {
      // Fallback bounds or throw error
      return {
        north: 0,
        south: 0,
        east: 0,
        west: 0,
      };
    }

    let north = markers[0].position.lat;
    let south = markers[0].position.lat;
    let east = markers[0].position.lng;
    let west = markers[0].position.lng;

    for (const marker of markers) {
      north = Math.max(north, marker.position.lat);
      south = Math.min(south, marker.position.lat);
      east = Math.max(east, marker.position.lng);
      west = Math.min(west, marker.position.lng);
    }

    return { north, south, east, west };
  }
}
                                



                            

                              //import file in angular.on 

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import { HttpClient } from "@angular/common/http";
import { LeafletModule } from '@bluehalo/ngx-leaflet';
import { CommonModule } from '@angular/common';
import { GeoJsonObject } from 'geojson';

@Component({
  selector: 'app-leaflet-map',
  imports: [CommonModule, LeafletModule],
  templateUrl: './leaflet-map.html',
  styleUrls: ['./leaflet-map.scss']
})
export class LeafletMap implements OnInit {

  constructor(private http: HttpClient) { }

  //First map options
  options1 = {
    layers: [
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    ],
    zoom: 5,
    center: L.latLng(46.879966, -121.726909)
  };

  layersControl = {
    baseLayers: {
      'Open Street Map': L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' }),
      'Open Cycle Map': L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    },
    overlays: {
      'Big Circle': L.circle([46.95, -122], { radius: 5000 }),
      'Big Square': L.polygon([[46.8, -121.55], [46.9, -121.55], [46.9, -121.7], [46.8, -121.7]])
    }
  }

}

                              //import file in global scss 

@import "leaflet/dist/leaflet.css";

                            

                              

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { AngularEditorModule } from '@kolkov/angular-editor';
import { FormsModule } from '@angular/forms';
import { Editor, NgxEditorModule } from 'ngx-editor';

@Component({
  selector: 'app-editor'
  imports: [CommonModule, AngularEditorModule, FormsModule, NgxEditorModule],
  templateUrl: './editor.html',
  styleUrls: ['./editor.scss']
})

export class AngularEditorConfig implements OnInit {

  public editor: Editor;
  public html = '';

  constructor() { }

  ngOnInit(): void {
    this.editor = new Editor();
  }

  // make sure to destory the editor
  ngOnDestroy(): void {
    this.editor.destroy();
  }

}

                              
import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { AngularEditorConfig, AngularEditorModule } from '@kolkov/angular-editor';
import { FormsModule } from '@angular/forms';
import { Editor, NgxEditorModule } from 'ngx-editor';

@Component({
  selector: 'app-editor',
  imports: [CommonModule, AngularEditorModule, FormsModule, NgxEditorModule],
  templateUrl: './editor.html',
  styleUrls: ['./editor.scss']
})

export class Editor implements OnInit {

  public htmlContent = '';
  public editor: Editor;

  constructor() { }

  editorConfig: AngularEditorConfig = {
    editable: true,
      spellcheck: true,
      height: 'auto',
      minHeight: '0',
      maxHeight: 'auto',
      width: 'auto',
      minWidth: '0',
      translate: 'yes',
      enableToolbar: true,
      showToolbar: true,
      placeholder: 'Enter text here...',
      defaultParagraphSeparator: '',
      defaultFontName: '',
      defaultFontSize: '',
      fonts: [
        {class: 'arial', name: 'Arial'},
        {class: 'times-new-roman', name: 'Times New Roman'},
        {class: 'calibri', name: 'Calibri'},
        {class: 'comic-sans-ms', name: 'Comic Sans MS'}
      ],
      customClasses: [
      {
        name: 'quote',
        class: 'quote',
      },
      {
        name: 'redText',
        class: 'redText'
      },
      {
        name: 'titleText',
        class: 'titleText',
        tag: 'h1',
      },
    ],
  }
}

                            
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import * as chartData from '../../../shared/data/chart/chartist';
import { ChartistModule } from 'ng-chartist';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-chartist',
  imports: [CommonModule, ChartistModule],
  templateUrl: './chartist.html',
  styleUrls: ['./chartist.scss'],
  encapsulation: ViewEncapsulation.None
})

export class Chartist {

  constructor() { }

  public chart1 = chartData.chart1;

}

  
                            

                                  //data 
export var chart1: Chart = {
  type: "Line",
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
    series: [
      [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
      [4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
      [5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
      [3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3],
    ],
  },
  options: {
    low: 0,
    showArea: false,
    fullWidth: true,
    height: 450,
  },
 
};
    
    

                                  
import { Component, ViewEncapsulation } from '@angular/core';
import * as chartData from '../../../shared/data/chart/chartjs';
import { BaseChartDirective } from 'ng2-charts';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-chartjs',
  standalone: true,
  imports: [CommonModule, BaseChartDirective],
  templateUrl: './chartjs.html',
  styleUrls: ['./chartjs.scss'],
  encapsulation:ViewEncapsulation.None
})
export class chartjs3 {

  constructor() { }

  // barChart
  public barChartOptions = chartData.barChartOptions;
  public barChartLabels = chartData.barChartLabels;
  public barChartType = chartData.barChartType;
  public barChartLegend = chartData.barChartLegend;
  public barChartData = chartData.barChartData;
  public barChartColors = chartData.barChartColors; 
}
    
    

                                  
 // barChart
export var barChartOptions: barChartOption = {
  scaleShowVerticalLines: false,
  responsive: true
};
export var barChartLabels: string[] = ["January", "February", "March", "April", "May", "June", "July"];
export var barChartType :string = 'bar';
export var barChartLegend = false;
export var barChartData: ChartistSeries[] = [
  { data: [35, 59, 80, 81, 56, 55, 40], label: 'Series A' },
  { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
];
export var barChartColors: BarChartColor[] = [
  {
    backgroundColor: '#4466f2',
    borderColor: "rgba(30, 166, 236, 0.8)",
    borderWidth: 1,
  },
  {
    backgroundColor: '#1ea6ec',
    borderColor: "rgba(68, 102, 242, 0.8)",
    borderWidth: 1,
  },
];
  
                            

                                  
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideCharts, withDefaultRegisterables, } from 'ng2-charts';

import { provideToastr } from 'ngx-toastr';

import { HttpClient, provideHttpClient } from '@angular/common/http';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(),
    provideToastr(),
    provideHttpClient(),
    provideCharts(withDefaultRegisterables()),
    provideRouter(routes),
  ]
};

  
                            

                                  
import { Component } from '@angular/core';
import * as chartData from '../../../shared/data/chart/google-chart';
import { CommonModule } from '@angular/common';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';

@Component({
  selector: 'app-google',
  imports: [CommonModule,Ng2GoogleChartsModule],
  templateUrl: './google.html',
  styleUrls: ['./google.scss']
})

export class Google {

  // Pie Chart
  public pieChart1 = chartData.pieChart1;
  public pieChart2 = chartData.pieChart2;
  public pieChart3 = chartData.pieChart3;
  public pieChart4 = chartData.pieChart4;
}
  
                            

                                  
export var pieChart1 = {
  chartType: 'PieChart',
  dataTable: [
    ['Task', 'Hours per Day'],
    ['Work', 5],
    ['Eat', 10],
    ['Commute', 15],
    ['Watch TV', 20],
    ['Sleep', 25]
  ],
  options: {
    title: 'My Daily Activities',
    width: '100%',
    height: 400,
    colors: ["#4466f2", "#1ea6ec", "#22af47", "#007bff", "#FF5370"],
    backgroundColor:'transparent'
  },
};
  
                            

                                    
import { Component, OnInit } from '@angular/core';
import { barChartSingle, pieChart, multiData, single } from '../../../shared/data/chart/ngx-chart';
import * as graphoptions from '../../../shared/data/chart/config';
import { CommonModule } from '@angular/common';
import { NgxChartsModule } from '@swimlane/ngx-charts';

@Component({
  selector: 'app-ngx-chart',
  imports: [CommonModule,NgxChartsModule],
  templateUrl: './ngx-chart.html',
  styleUrls: ['./ngx-chart.scss']
})

export class NgxChart implements OnInit {

  ngOnInit() { }

  // Bar-chart options
  public barChartShowYAxis = graphoptions.barChartShowYAxis;
  public barChartShowXAxis = graphoptions.barChartShowXAxis;
  public barChartGradient = graphoptions.barChartGradient;
  public barChartShowLegend = graphoptions.barChartShowLegend;
  public barChartShowXAxisLabel = graphoptions.barChartShowXAxisLabel;
  public barChartXAxisLabel = graphoptions.barChartXAxisLabel;
  public barChartShowYAxisLabel = graphoptions.barChartShowYAxisLabel;
  public barChartYAxisLabel = graphoptions.barChartYAxisLabel;
  public barChartColorScheme = graphoptions.barChartColorScheme;
  public barChartshowGridLines = graphoptions.barChartshowGridLines;
}
  
                            

                                  
export var barChartShowXAxis = true;
export var barChartShowYAxis = true;
export var barChartGradient = true;
export var barChartShowLegend = false;
export var barChartShowXAxisLabel = true;
export var barChartXAxisLabel = 'Country';
export var barChartShowYAxisLabel = true;
export var barChartYAxisLabel = 'Population';
export var roundEdges: boolean = true;
export var barChartshowGridLines = false;
export var barChartColorScheme :any = {
    domain: ["#007bff", "#ff9f40", "#ff5370", "#1ea6ec"]
};

  
                            

    import { AsyncPipe, DecimalPipe } from '@angular/common';
import { Component, QueryList, ViewChildren } from '@angular/core';
import { Observable } from 'rxjs';

import { Country } from './country';
import { CountryService } from './country.service';
import { NgbdSortableHeader, SortEvent } from './sortable.directive';
import { FormsModule } from '@angular/forms';
import { NgbHighlight, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
	selector: 'ngbd-table-complete',
	imports: [DecimalPipe, FormsModule, AsyncPipe, NgbHighlight, NgbdSortableHeader, NgbPaginationModule],
	templateUrl: './table-complete.html',
	providers: [CountryService, DecimalPipe],
})
export class NgbdTableComplete {
	countries$: Observable;
	total$: Observable;

	@ViewChildren(NgbdSortableHeader) headers: QueryList;

	constructor(public service: CountryService) {
		this.countries$ = service.countries$;
		this.total$ = service.total$;
	}

	onSort({ column, direction }: SortEvent) {
		// resetting other headers
		this.headers.forEach((header) => {
			if (header.sortable !== column) {
				header.direction = '';
			}
		});

		this.service.sortColumn = column;
		this.service.sortDirection = direction;
	}
} 

    
import { Injectable, PipeTransform } from '@angular/core';

import { BehaviorSubject, Observable, of, Subject } from 'rxjs';

import { Country } from './country';
import { COUNTRIES } from './countries';
import { DecimalPipe } from '@angular/common';
import { debounceTime, delay, switchMap, tap } from 'rxjs/operators';
import { SortColumn, SortDirection } from './sortable.directive';

interface SearchResult {
	countries: Country[];
	total: number;
}

interface State {
	page: number;
	pageSize: number;
	searchTerm: string;
	sortColumn: SortColumn;
	sortDirection: SortDirection;
}

const compare = (v1: string | number, v2: string | number) => (v1 < v2 ? -1 : v1 > v2 ? 1 : 0);

function sort(countries: Country[], column: SortColumn, direction: string): Country[] {
	if (direction === '' || column === '') {
		return countries;
	} else {
		return [...countries].sort((a, b) => {
			const res = compare(a[column], b[column]);
			return direction === 'asc' ? res : -res;
		});
	}
}

function matches(country: Country, term: string, pipe: PipeTransform) {
	return (
		country.name.toLowerCase().includes(term.toLowerCase()) ||
		pipe.transform(country.area).includes(term) ||
		pipe.transform(country.population).includes(term)
	);
}

@Injectable({ providedIn: 'root' })
export class CountryService {
	private _loading$ = new BehaviorSubject(true);
	private _search$ = new Subject();
	private _countries$ = new BehaviorSubject([]);
	private _total$ = new BehaviorSubject(0);

	private _state: State = {
		page: 1,
		pageSize: 4,
		searchTerm: '',
		sortColumn: '',
		sortDirection: '',
	};

	constructor(private pipe: DecimalPipe) {
		this._search$
			.pipe(
				tap(() => this._loading$.next(true)),
				debounceTime(200),
				switchMap(() => this._search()),
				delay(200),
				tap(() => this._loading$.next(false)),
			)
			.subscribe((result) => {
				this._countries$.next(result.countries);
				this._total$.next(result.total);
			});

		this._search$.next();
	}

	get countries$() {
		return this._countries$.asObservable();
	}
	get total$() {
		return this._total$.asObservable();
	}
	get loading$() {
		return this._loading$.asObservable();
	}
	get page() {
		return this._state.page;
	}
	get pageSize() {
		return this._state.pageSize;
	}
	get searchTerm() {
		return this._state.searchTerm;
	}

	set page(page: number) {
		this._set({ page });
	}
	set pageSize(pageSize: number) {
		this._set({ pageSize });
	}
	set searchTerm(searchTerm: string) {
		this._set({ searchTerm });
	}
	set sortColumn(sortColumn: SortColumn) {
		this._set({ sortColumn });
	}
	set sortDirection(sortDirection: SortDirection) {
		this._set({ sortDirection });
	}

	private _set(patch: Partial) {
		Object.assign(this._state, patch);
		this._search$.next();
	}

	private _search(): Observable {
		const { sortColumn, sortDirection, pageSize, page, searchTerm } = this._state;

		// 1. sort
		let countries = sort(COUNTRIES, sortColumn, sortDirection);

		// 2. filter
		countries = countries.filter((country) => matches(country, searchTerm, this.pipe));
		const total = countries.length;

		// 3. paginate
		countries = countries.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
		return of({ countries, total });
	}
}
                                      

    
import { Country } from './country';

export const COUNTRIES: Country[] = [
	{
		id: 1,
		name: 'Russia',
		flag: 'f/f3/Flag_of_Russia.svg',
		area: 17075200,
		population: 146989754,
	},
	{
		id: 2,
		name: 'France',
		flag: 'c/c3/Flag_of_France.svg',
		area: 640679,
		population: 64979548,
	},
	{
		id: 3,
		name: 'Germany',
		flag: 'b/ba/Flag_of_Germany.svg',
		area: 357114,
		population: 82114224,
	},
	{
		id: 4,
		name: 'Portugal',
		flag: '5/5c/Flag_of_Portugal.svg',
		area: 92090,
		population: 10329506,
	},
	{
		id: 5,
		name: 'Canada',
		flag: 'c/cf/Flag_of_Canada.svg',
		area: 9976140,
		population: 36624199,
	},
	{
		id: 6,
		name: 'Vietnam',
		flag: '2/21/Flag_of_Vietnam.svg',
		area: 331212,
		population: 95540800,
	},
	{
		id: 7,
		name: 'Brazil',
		flag: '0/05/Flag_of_Brazil.svg',
		area: 8515767,
		population: 209288278,
	},
	{
		id: 8,
		name: 'Mexico',
		flag: 'f/fc/Flag_of_Mexico.svg',
		area: 1964375,
		population: 129163276,
	},
	{
		id: 9,
		name: 'United States',
		flag: 'a/a4/Flag_of_the_United_States.svg',
		area: 9629091,
		population: 324459463,
	},
	{
		id: 10,
		name: 'India',
		flag: '4/41/Flag_of_India.svg',
		area: 3287263,
		population: 1324171354,
	},
	{
		id: 11,
		name: 'Indonesia',
		flag: '9/9f/Flag_of_Indonesia.svg',
		area: 1910931,
		population: 263991379,
	},
	{
		id: 12,
		name: 'Tuvalu',
		flag: '3/38/Flag_of_Tuvalu.svg',
		area: 26,
		population: 11097,
	},
	{
		id: 13,
		name: 'China',
		flag: 'f/fa/Flag_of_the_People%27s_Republic_of_China.svg',
		area: 9596960,
		population: 1409517397,
	},
];
                                      

    
export interface Country {
	id: number;
	name: string;
	flag: string;
	area: number;
	population: number;
}
                                      

    
import { Directive, EventEmitter, Input, Output } from '@angular/core';
import { Country } from './country';

export type SortColumn = keyof Country | '';
export type SortDirection = 'asc' | 'desc' | '';
const rotate: { [key: string]: SortDirection } = { asc: 'desc', desc: '', '': 'asc' };

export interface SortEvent {
	column: SortColumn;
	direction: SortDirection;
}

@Directive({
	selector: 'th[sortable]',
	standalone: true,
	host: {
		'[class.asc]': 'direction === "asc"',
		'[class.desc]': 'direction === "desc"',
		'(click)': 'rotate()',
	},
})
export class NgbdSortableHeader {
	@Input() sortable: SortColumn = '';
	@Input() direction: SortDirection = '';
	@Output() sort = new EventEmitter();

	rotate() {
		this.direction = rotate[this.direction];
		this.sort.emit({ column: this.sortable, direction: this.direction });
	}
}