<!-- flag icon css -->
@import "./flag-icon";

<!-- html files -->
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header pb-0">
                    <h4 class="m-b-0">Flag Icons</h4>
                </div>
                <div class="card-body">
                    <div class="row icon-lists flag-icons">
                        @for(i of icon; track i){
                        <div class="col-12 col-sm-6 col-xl-4"
                            (click)="toggleWithInfo(i.abbrivation)">
                            <div class="d-flex"><i class="flag-icon flag-icon-{{i.abbrivation}}"></i>
                                <div class="flex-grow-1 align-self-center">
                                    <h5>{{i.abbrivation|uppercase}}</h5>
                                    <h6 class="mt-0">{{i.name}}</h6>
                                </div>
                            </div>
                        </div>
                    }
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@if(detail){
<div class="icon-hover-bottom p-fixed">
    <div class="container-fluid">
        <div class="row">
            <div class="icon-popup">
                <div class="close-icon"><i class="icofont icofont-close" (click)="detail=false"></i></div>
                <div class="icon-first"><i class="flag-icon flag-icon-{{flag}} fa-2x"></i></div>
                <div class="icon-class">
                    <label class="icon-title">Class</label><span id="fclass1">flag-icon flag-icon-{{flag}}</span>
                </div>
                <div class="icon-last icon-last">
                    <label class="icon-title">Markup </label>
                    <div class="form-inline">
                        <div class="form-group">
                            <input class="inp-val form-control m-r-10" type="text" value="{{val}}" readonly="readonly">
                            <button class="btn btn-primary notification" (click)="copyText(flag)">Copy text</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
}

<!-- ts files -->
import { Component } from '@angular/core';
import { icon } from '../../../shared/data/icons/flags';
import { UpperCasePipe } from '@angular/common';

@Component({
    selector: 'app-flag-icons',
    templateUrl: './flag-icons.html',
    styleUrls: ['./flag-icons.scss'],
    imports: [UpperCasePipe]
})
export class FlagIcons {

  public detail: boolean = false;
  public flag: string;
  public val: string;
  public icon = icon;

  toggleWithInfo(icon: string) {
    this.detail = true;
    this.flag = icon;
    this.val = '';
  }
  copyText(val: string) {
    let selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = '';
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);

  }
}

<!-- data files -->
export const icon = [
 { abbrivation: 'in', name: 'India Flag' },
 { abbrivation: 'ad', name: 'Andorra Flag' },
 { abbrivation:'ae', name: 'United Arab Emirates Flag' },
 { abbrivation: 'af', name: 'Afghanistan Flag' },
]

<!-- font awesome css -->
@import "./fontawesome.scss";

<!-- html files -->
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            @for(iconTitle of allIconData; track iconTitle){
            <div class="card">
                <div class="card-header pb-0">
                    <h4 class="m-b-0">{{iconTitle.title}}</h4>
                </div>
                <div class="card-body">
                    <div class="row icon-lists">
                        @for(i of iconTitle.icons; track i){
                        <div class="col-sm-6 col-md-4 col-xl-3" (click)="toggleWithInfo(i)"><i class="fa fa-{{i}}"></i>
                            fa {{i}}</div>
                        }
                    </div>
                </div>
            </div>
            }
        </div>
    </div>
</div>
@if(detail){
<div class="icon-hover-bottom p-fixed">
    <div class="container-fluid">
        <div class="row">
            <div class="icon-popup">
                <div class="close-icon"><i class="icofont icofont-close" (click)="detail=false"></i></div>
                <div class="icon-first"><i class="fa fa-{{icon}} fa-2x"></i></div>
                <div class="icon-class">
                    <label class="icon-title">Class</label><span id="fclass1">fa fa-{{icon}}</span>
                </div>
                <div class="icon-last icon-last">
                    <label class="icon-title">Markup </label>
                    <div class="form-inline">
                        <div class="form-group">
                            <input class="inp-val form-control m-r-10" type="text" value="{{val}}" readonly="readonly">
                            <button class="btn btn-primary notification" (click)="copyText(icon)">Copy text</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
}

<!-- ts files -->
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/icons/thimify';

@Component({
    selector: 'app-font-awesome',
    templateUrl: './font-awesome.html',
    styleUrls: ['./font-awesome.scss'],
})
export class FontAwesome {

  public detail: boolean = false;
  public icon: string;
  public val: string;

  public allIconData = allIcon.fontAwesome

  toggleWithInfo(icon: string) {
    this.detail = true;
    this.icon = icon;
    this.val = '';
  }

  copyText(val: string) {
    let selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = '';
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);

  }

}

<!-- ts files -->
export class allIcon {
   static fontawesome = [
     {
         title: 'Icon 20',
         icons: ["bluetooth", "bluetooth-b", "codiepie", "credit-card-alt"]
     }
   ]
}

<!-- ico icon css -->
@import "./icofont.scss";

<!-- html file -->
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            @for(iconTitle of allIconData; track iconTitle){
            <div class="card">
                <div class="card-header pb-0">
                    <h4 class="m-b-0">{{iconTitle.title}}</h4>
                </div>
                <div class="card-body">
                    <div class="row icon-lists">
                        @for(icon of iconTitle.icons; track icon){
                        <div class="col-sm-6 col-md-6 col-lg-4"
                            (click)="toggleWithInfo(icon)">
                            <i class="icofont icofont-{{icon}}"></i>
                            {{icon}}
                        </div>
                        }
                    </div>
                </div>
            </div>
        }
        </div>
    </div>
</div>
@if(detail){
<div class="icon-hover-bottom p-fixed">
    <div class="container-fluid">
        <div class="row">
            <div class="icon-popup">
                <div class="close-icon"><i class="icofont icofont-close" (click)="detail=false"></i></div>
                <div class="icon-first"><i class="icofont icofont-{{icon}} fa-2x"></i></div>
                <div class="icon-class">
                    <label class="icon-title">Class</label><span id="fclass1">icofont icofont-{{icon}}</span>
                </div>
                <div class="icon-last icon-last">
                    <label class="icon-title">Markup </label>
                    <div class="form-inline">
                        <div class="form-group">
                            <input class="inp-val form-control m-r-10" type="text" value="{{val}}" readonly="readonly">
                            <button class="btn btn-primary notification" (click)="copyText(icon)">Copy text</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
}

<!-- ts file -->
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/icons/thimify';

@Component({
    selector: 'app-ico-icon',
    templateUrl: './ico-icon.html',
    styleUrls: ['./ico-icon.scss'],
})
export class IcoIcon {

  public detail: boolean = false;
  public icon: string;
  public val: string;
  public allIconData = allIcon.ico

  toggleWithInfo(icon: string) {
    this.detail = true;
    this.icon = icon;
    this.val = '';
  }

  // copy text
  copyText(val: string) {
    let selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = '';
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }

}

<!-- data file -->
export class allIcon {
    static ico = [
    {
      title: 'Abstract',
      icons: ["angry-monster", "bathtub", "bird-wings", "bow"]
    }
  }

<!-- themify icon css -->
@import"./themify.scss";

<!-- some icon display for demo -->
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            @for(iconTitle of allIconData; track iconTitle){
            <div class="card">
                <div class="card-header pb-0">
                    <h4 class="m-b-0">{{iconTitle.title}}</h4>
                </div>
                <div class="card-body">
                    <div class="row icon-lists">
                        @for(p of iconTitle.icons; track p){
                        <div class="col-sm-6 col-md-6 col-lg-4"
                            (click)="toggleWithInfo(p)"><i class="{{p}}"></i>{{p}}
                        </div>
                    }
                    </div>
                </div>
            </div>
        }
        </div>
    </div>
</div>
@if(detail){
<div class="icon-hover-bottom p-fixed">
    <div class="container-fluid">
        <div class="row">
            <div class="icon-popup">
                <div class="close-icon"><i class="icofont icofont-close" (click)="detail=false"></i></div>
                <div class="icon-first"><i class="{{icon}} fa-2x"></i></div>
                <div class="icon-class">
                    <label class="icon-title">Class</label><span id="fclass1">{{icon}}</span>
                </div>
                <div class="icon-last icon-last">
                    <label class="icon-title">Markup </label>
                    <div class="form-inline">
                        <div class="form-group">
                            <input class="inp-val form-control m-r-10" type="text" value="{{val}}" readonly="readonly">
                            <button class="btn btn-primary notification" (click)="copyText(icon)">Copy text</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
}

<!-- some icon display for demo -->
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/icons/thimify';

@Component({
    selector: 'app-themify-icon',
    templateUrl: './themify-icon.html',
    styleUrls: ['./themify-icon.scss'],
})
export class ThemifyIcon {

  public detail: boolean = false;
  public icon: string;
  public val: string;
  public allIconData = allIcon.themify

  toggleWithInfo(icon: string) {
    this.detail = true;
    this.icon = icon;
    this.val = '';
  }

  copyText(val: string) {
    let selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = '';
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);

  }

}

<!-- data file -->
export class allIcon {

static themify = [
  {
    title: 'Arrows & Direction Icons',
    icons: ["icon-arrow-up", "icon-arrow-right", "icon-arrow-left", "icon-arrow-down"]
  }
}

<!-- feather icon scss -->
@import "./feather-icon.scss";

<!-- html file -->
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            @for(iconTitle of allIconData; track iconTitle){
            <div class="card">
                <div class="card-header pb-0">
                    <h4 class="m-b-0">{{iconTitle.title}}</h4>
                </div>
                <div class="card-body">
                    <div class="row icon-lists feather-icons">
                        @for( p of iconTitle.icons; track p){
                        <div class="col-12 col-sm-6 col-xl-4" (click)="toggleWithInfo(p)">
                            <div class="d-flex">
                                <app-feather-icons [icon]="p"></app-feather-icons>
                                <div class="flex-grow-1 align-self-center">
                                    <h6 class="mt-0">{{p}}</h6>
                                </div>
                            </div>
                        </div>
                    }
                    </div>
                </div>
            </div>
        }
        </div>
    </div>
</div>
<i class="feather-alert-triangle"></i>
@if(detail){
<div class="icon-hover-bottom p-fixed">
    <div class="container-fluid">
        <div class="row">
            <div class="icon-popup">
                <div class="close-icon"><i class="icofont icofont-close" (click)="detail=false"></i></div>
                <div class="icon-first">
                    <app-feather-icons [icon]="icon" class="feather-{{icon}}"></app-feather-icons>
                </div>
                <div class="icon-class">
                    <label class="icon-title">Class</label><span id="fclass1">{{icon}}</span>
                </div>
                <div class="icon-last icon-last">
                    <label class="icon-title">Markup </label>
                    <div class="form-inline">
                        <div class="form-group">
                            <input class="inp-val form-control m-r-10" type="text" value="{{val}}" readonly="readonly">
                            <button class="btn btn-primary notification" (click)="copyText(icon)">Copy
                                text</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
}

<!-- ts file -->
import { Component } from '@angular/core';
import { allIcon } from '../../../shared/data/icons/thimify';
import { FeatherIcons } from '../../../shared/component/feather-icons/feather-icons';

@Component({
    selector: 'app-feather-icon',
    templateUrl: './feather-icon.html',
    styleUrls: ['./feather-icon.scss'],
    imports: [FeatherIcons]
})
export class FeatherIcon {

  public detail: boolean = false;
  public flag: string;
  public val: string;
  public icon: string;
  public allIconData = allIcon.feather

  toggleWithInfo(icon: string) {
    this.detail = true;
    this.icon = icon;
    this.val = '';
  }
  
  copyText(val: string) {
    let selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = '>';
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);

  }

}

<!-- data file -->
export class allIcon {

static feather = [
 {
     title: 'Feather Icons',
     icons: ["activity", "airplay", "alert-circle", "alert-octagon"]
    }
  ]
}