pmds-hub 20.1.0

package/libs/pmds-common/src/lib/utils/pmds-util-history-routing/pmds-util-history-routing.service.stories.ts

@@ -0,0 +1,188 @@
+////////Angular imports
+import {
+	APP_INITIALIZER,
+	AfterViewInit,
+	Component,
+	inject,
+} from '@angular/core';
+import {
+	RouterLink,
+	RouterLinkActive,
+	RouterOutlet,
+	provideRouter,
+} from '@angular/router';
+import { AsyncPipe, NgFor, NgIf } from '@angular/common';
+////////Third party libraries
+import {
+	applicationConfig,
+	moduleMetadata,
+	StoryObj,
+} from '@storybook/angular';
+////////PNXT libraries
+import { PmdsCdkButtonComponent } from '@pmhub/pmds-cdk';
+////////Component imports
+import { PmdsUtilHistoryRouting } from './pmds-util-history-routing.service';
+
+@Component({
+	selector: 'pmds-util-history-routing-1-story',
+	standalone: true,
+	template: `<div>Router 1</div>`,
+})
+class PmdsUtilRoutingStory1Component {}
+@Component({
+	selector: 'pmds-util-history-routing-2-story',
+	standalone: true,
+	template: `<div>Router 2</div>`,
+})
+class PmdsUtilRoutingStory2Component {}
+@Component({
+	selector: 'pmds-util-history-routing-story',
+	standalone: true,
+	imports: [AsyncPipe, PmdsCdkButtonComponent],
+	template: `
+		<section class="flex justify-between">
+			<div class="py-2 italic">
+				Breadcrumbs:
+				<span> 1 > </span>
+				@for (item of pmdsUtilHistoryRouting.history; track item) {
+				<span>
+					@if ($index > 0) {
+					{{ item }} > }
+				</span>
+				}
+			</div>
+			@if (pmdsUtilHistoryRouting.history.length > 1) {
+			<div>
+				<pmds-cdk-button
+					(buttonClick)="pmdsUtilHistoryRouting.navigatePrevious()"
+					label="Go back"
+				/>
+			</div>
+			}
+		</section>
+	`,
+})
+class PmdsUtilRoutingStoryComponent implements AfterViewInit {
+	public pmdsUtilHistoryRouting = inject(PmdsUtilHistoryRouting);
+	ngAfterViewInit(): void {
+		this.pmdsUtilHistoryRouting.history = [];
+	}
+}
+
+export default {
+	title: 'Common/Utils/History routing',
+	tags: ['autodocs'],
+	decorators: [
+		moduleMetadata({
+			imports: [
+				RouterLink,
+				RouterOutlet,
+				RouterLinkActive,
+				PmdsUtilRoutingStoryComponent,
+				PmdsUtilRoutingStory1Component,
+				PmdsUtilRoutingStory2Component,
+				PmdsCdkButtonComponent,
+			],
+		}),
+		applicationConfig({
+			providers: [
+				{
+					provide: APP_INITIALIZER,
+					deps: [PmdsUtilHistoryRouting],
+					useFactory: (routerHistorySrv: PmdsUtilHistoryRouting) =>
+						routerHistorySrv.initHistory,
+					multi: true,
+				},
+				provideRouter([
+					{
+						path: '1',
+						component: PmdsUtilRoutingStory1Component,
+					},
+					{
+						path: '2',
+						component: PmdsUtilRoutingStory2Component,
+					},
+					{
+						path: '**',
+						redirectTo: '1',
+					},
+				]),
+			],
+		}),
+	],
+	parameters: {
+		docs: {
+			subtitle: 'PmdsUtilHistoryRouting',
+			description: {
+				component: `
+Use this util to return to previous route or get all route history
+
+**IMPORTANT** in your initial module is necessary import **APP_INITIALIZER** and **initHistory**
+
+Import **PmdsUtilHistoryRouting** from **@pmhub/pmds-common** amd the APP_INITIALIZER from @angular/core
+
+~~~
+import {
+  PmdsUtilHistoryRouting
+} from '@pmhub/pmds-common';
+~~~
+
+Add it in providers array
+
+~~~
+providers: [
+  {
+    provide: APP_INITIALIZER,
+    deps: [PmdsUtilHistoryRouting],
+    useFactory: (routerHistorySrv: PmdsUtilHistoryRouting) =>
+    routerHistorySrv.initHistory,
+    multi: true
+  }
+]
+~~~
+
+For use it your component import **PmdsUtilHistoryRouting** from **@pmhub/pmds-common**
+
+~~~
+import {
+  PmdsUtilHistoryRouting
+} from '@pmhub/pmds-common';
+~~~
+
+Inject the service
+
+~~~
+
+private pmdsUtilHistoryRouting = inject(PmdsUtilHistoryRouting);
+~~~
+
+Use it:
+
+~~~
+this.pmdsUtilHistoryRouting.history // For get the route history
+
+this.pmdsUtilHistoryRouting.navigatePrevious() // For navigate to previous route
+~~~
+        `,
+			},
+		},
+	},
+};
+
+export const Docs: StoryObj<object> = {
+	parameters: {
+		controls: { hideNoControlsWarning: true },
+	},
+	render: () => ({
+		template: `
+        <pmds-util-history-routing-story></pmds-util-history-routing-story>
+        <section class="w-full bg-slate-900 flex">
+            <div class="p-4 bg-slate-300 cursor-pointer" [routerLink]="['1']" [routerLinkActive]="['bg-slate-400']">Router 1</div>
+            <div class="p-4 bg-slate-300 cursor-pointer" [routerLink]="['2']" [routerLinkActive]="['bg-slate-400']">Router 2</div>
+        </section>
+        <section class="w-full p-4 flex items-center justify-center text-white bg-emerald-600">
+            <router-outlet></router-outlet>
+        </section>
+    `,
+	}),
+};

package/libs/pmds-common/src/lib/utils/pmds-util-history-routing/pmds-util-history-routing.service.ts

@@ -0,0 +1,37 @@
+////////Angular imports
+import { Injectable } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+////////Third party libraries
+import { filter } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PmdsUtilHistoryRouting {
+  history: string[] = [];
+  private isNavigatePrevious = false;
+  constructor(private router: Router) {
+    router.events
+      .pipe(filter((event: any) => event instanceof NavigationEnd))
+      .subscribe((res) => {
+        if (!this.isNavigatePrevious) {
+          this.history = [...this.history, res.url.replace('/', '')];
+        } else {
+          this.isNavigatePrevious = false;
+        }
+      });
+  }
+
+  initHistory() {
+    return new Promise((resolve) => resolve(true));
+  }
+
+  navigatePrevious() {
+    if (this.history.length) {
+      const url = `${this.history[this.history.length - 2]}`;
+      this.isNavigatePrevious = true;
+      this.history.pop();
+      this.router.navigate([url]);
+    }
+  }
+}

package/libs/pmds-common/src/lib/utils/pmds-util-img-flags/index.ts

@@ -0,0 +1 @@
+export * from './pmds-util-img-flags.util';

package/libs/pmds-common/src/lib/utils/pmds-util-img-flags/pmds-util-img-flags.util.stories.ts

@@ -0,0 +1,369 @@
+////////Angular imports
+import { FormGroupDirective, FormsModule } from '@angular/forms';
+import { NgFor } from '@angular/common';
+////////Third party libraries
+import { moduleMetadata } from '@storybook/angular';
+////////PPMDS libraries
+
+import { PmdsCdkRadioButtonsComponent } from '@pmhub/pmds-cdk';
+import { PmdsCdkCopyClipboardComponent } from '@pmhub/pmds-cdk';
+
+export default {
+	title: 'Foundations/Flags',
+	tags: ['autodocs'],
+	decorators: [
+		moduleMetadata({
+			imports: [
+				NgFor,
+
+				PmdsCdkRadioButtonsComponent,
+				PmdsCdkCopyClipboardComponent,
+			],
+			providers: [FormGroupDirective, FormsModule],
+		}),
+	],
+	parameters: {
+		docs: {
+			subtitle: 'How to use our flags',
+			description: {
+				component: `
+1 - Add in your **angular.json** in [your-project].architect.build.options.assets this code:
+
+~~~
+{
+  "glob": "**/*",
+  "input": "node_modules/@pmhub/pmds-common/src/assets",
+  "output": "assets"
+}
+~~~
+
+2 - In your component.ts, create the **resourcesPath** and in **initializeApp** method set it form  enviroment attribute **ENVIRONMENT_REQUEST_CONFIG.configDomain**:
+
+~~~
+...
+resourcesPath!: string;
+...
+
+private initializeApp(env: any) {
+    const { ENVIRONMENT_REQUEST_CONFIG } = env;
+    this.resourcesPath = ENVIRONMENT_REQUEST_CONFIG.configDomain;
+}
+~~~
+
+3 - For use it only add the path from the list in your src (set your asset folder)
+<code><section class="flex items-center">'[src]="resourcesPath + 'ngAssets[APP_NAME]/img/flags/EU.svg'"'&nbsp;&nbsp;<img src="assets/img/flags/EU.svg" width="24px"></section></code>
+				`,
+			},
+		},
+	},
+};
+
+export const Docs = {
+	render: () => ({
+		props: {
+			listFlags: (text: string) =>
+				text
+					? listFlags.filter(
+							(flag) =>
+								flag.country
+									.toLowerCase()
+									.includes(text.toLowerCase()) ||
+								flag.flag
+									.toLowerCase()
+									.includes(text.toLowerCase())
+					  )
+					: listFlags,
+			copy: (flag: string) => {
+				return `resourcesPath + 'ngAssets[APP_NAME]/img/flags/${flag}.svg'`.trim();
+			},
+		},
+		template: `
+<section class="pb-4 flex flex-col mobile:relative text-color-text-primary">
+	<input
+		class="w-full p-3 border border-color-border-default rounded-md text-color-text-primary bg-color-background-default focus:border-color-border-focus outline-none transition-colors"
+      	[placeholder]="'Search flags'"
+	  	(input)="search = $any($event).target.value"
+    />
+</section>
+<section class="grid grid-cols-3 mobile:grid-cols-2 text-color-text-primary">
+@for (flag of listFlags(search); track flag.flag) {  
+<section class="flex items-center py-2">
+	<div class="mr-4 hover:underline">
+		<img [src]="'assets/img/flags/' + flag.flag + '.svg'" width="24px">
+	</div>
+	<div>
+		{{ flag.country }}
+	</div>
+	<pmds-cdk-copy-clipboard [textToCopy]="copy(flag.flag)"/>
+</section>
+}
+</section>
+@if (listFlags(search).length === 0) { 
+<section class="w-full flex justify-center items-center text-color-text-primary">
+	No results <span class="pmicons-close-bold text-3xl"></span>
+</section>
+}
+		`,
+	}),
+};
+
+const listFlags = [
+	{ flag: 'AD', country: 'Andorra' },
+	{ flag: 'AE', country: 'United Arab Emirates' },
+	{ flag: 'AF', country: 'Afghanistan' },
+	{ flag: 'AG', country: 'Antigua and Barbuda' },
+	{ flag: 'AI', country: 'Anguilla' },
+	{ flag: 'AL', country: 'Albania' },
+	{ flag: 'AM', country: 'Armenia' },
+	{ flag: 'AN', country: 'Nederlandse Antillen' },
+	{ flag: 'AO', country: 'Angola' },
+	{ flag: 'AQ', country: 'Antarctica' },
+	{ flag: 'AR', country: 'Argentina' },
+	{ flag: 'AS', country: 'American Samoa' },
+	{ flag: 'AT', country: 'Austria' },
+	{ flag: 'AU', country: 'Australia' },
+	{ flag: 'AW', country: 'Aruba' },
+	{ flag: 'AX', country: 'Aland Islands' },
+	{ flag: 'AZ', country: 'Azerbaijan' },
+	{ flag: 'BA', country: 'Bosnia and Herzegovina' },
+	{ flag: 'BB', country: 'Barbados' },
+	{ flag: 'BD', country: 'Bangladesh' },
+	{ flag: 'BE', country: 'Belgium' },
+	{ flag: 'BF', country: 'Burkina Faso' },
+	{ flag: 'BG', country: 'Bulgaria' },
+	{ flag: 'BH', country: 'Bahrain' },
+	{ flag: 'BI', country: 'Burundi' },
+	{ flag: 'BJ', country: 'Benin' },
+	{ flag: 'BL', country: 'Saint Barthélemy' },
+	{ flag: 'BM', country: 'Bermuda' },
+	{ flag: 'BN', country: 'Brunei' },
+	{ flag: 'BO', country: 'Bolivia' },
+	{ flag: 'BQ', country: 'British Antarctic Territory' },
+	{ flag: 'BR', country: 'Brazil' },
+	{ flag: 'BS', country: 'Bahamas' },
+	{ flag: 'BT', country: 'Bhutan' },
+	{ flag: 'BV', country: 'Bouvet Island' },
+	{ flag: 'BW', country: 'Botswana' },
+	{ flag: 'BY', country: 'Belarus' },
+	{ flag: 'BZ', country: 'Belize' },
+	{ flag: 'CA', country: 'Canada' },
+	{ flag: 'CC', country: 'Cocos [Keeling] Islands' },
+	{ flag: 'CD', country: 'Congo - Kinshasa' },
+	{ flag: 'CF', country: 'Central African Republic' },
+	{ flag: 'CG', country: 'Congo - Brazzaville' },
+	{ flag: 'CH', country: 'Switzerland' },
+	{ flag: 'CI', country: 'Côte d,Ivoire' },
+	{ flag: 'CK', country: 'Cook Islands' },
+	{ flag: 'CL', country: 'Chile' },
+	{ flag: 'CM', country: 'Cameroon' },
+	{ flag: 'CN', country: 'China' },
+	{ flag: 'CO', country: 'Colombia' },
+	{ flag: 'CR', country: 'Costa Rica' },
+	{ flag: 'CS', country: 'Serbia and Montenegro' },
+	{ flag: 'CU', country: 'Cuba' },
+	{ flag: 'CV', country: 'Cape Verde' },
+	{ flag: 'CW', country: 'Curaçao' },
+	{ flag: 'CX', country: 'Christmas Island' },
+	{ flag: 'CY', country: 'Cyprus' },
+	{ flag: 'CZ', country: 'Czech Republic' },
+	{ flag: 'DE', country: 'Germany' },
+	{ flag: 'DJ', country: 'Djibouti' },
+	{ flag: 'DK', country: 'Denmark' },
+	{ flag: 'DM', country: 'Dominica' },
+	{ flag: 'DO', country: 'Dominican Republic' },
+	{ flag: 'DZ', country: 'Algeria' },
+	{ flag: 'Default', country: 'Default' },
+	{ flag: 'EC', country: 'Ecuador' },
+	{ flag: 'EE', country: 'Estonia' },
+	{ flag: 'EG', country: 'Egypt' },
+	{ flag: 'EH', country: 'Western Sahara' },
+	{ flag: 'ER', country: 'Eritrea' },
+	{ flag: 'ES', country: 'Spain' },
+	{ flag: 'ET', country: 'Ethiopia' },
+	{ flag: 'EU', country: 'Europe' },
+	{ flag: 'FI', country: 'Finland' },
+	{ flag: 'FJ', country: 'Fiji' },
+	{ flag: 'FK', country: 'Falkland Islands' },
+	{ flag: 'FM', country: 'Micronesia' },
+	{ flag: 'FO', country: 'Faroe Islands' },
+	{ flag: 'FR', country: 'France' },
+	{ flag: 'GA', country: 'Gabon' },
+	{ flag: 'GB', country: 'United Kingdom' },
+	{ flag: 'GD', country: 'Grenada' },
+	{ flag: 'GE', country: 'Georgia' },
+	{ flag: 'GF', country: 'French Guiana' },
+	{ flag: 'GG', country: 'Guernsey' },
+	{ flag: 'GH', country: 'Ghana' },
+	{ flag: 'GI', country: 'Gibraltar' },
+	{ flag: 'GL', country: 'Greenland' },
+	{ flag: 'GM', country: 'Gambia' },
+	{ flag: 'GN', country: 'Guinea' },
+	{ flag: 'GP', country: 'Guadeloupe' },
+	{ flag: 'GQ', country: 'Equatorial Guinea' },
+	{ flag: 'GR', country: 'Greece' },
+	{ flag: 'GS', country: 'South Georgia and the South Sandwich Islands' },
+	{ flag: 'GT', country: 'Guatemala' },
+	{ flag: 'GU', country: 'Guam' },
+	{ flag: 'GW', country: 'Guinea-Bissau' },
+	{ flag: 'GY', country: 'Guyana' },
+	{ flag: 'HK', country: 'Hong Kong SAR China' },
+	{ flag: 'HM', country: 'Heard Island and McDonald Islands' },
+	{ flag: 'HN', country: 'Honduras' },
+	{ flag: 'HR', country: 'Croatia' },
+	{ flag: 'HT', country: 'Haiti' },
+	{ flag: 'HU', country: 'Hungary' },
+	{ flag: 'ID', country: 'Indonesia' },
+	{ flag: 'IE', country: 'Ireland' },
+	{ flag: 'IL', country: 'Israel' },
+	{ flag: 'IM', country: 'Isle of Man' },
+	{ flag: 'IN', country: 'India' },
+	{ flag: 'IO', country: 'British Indian Ocean Territory' },
+	{ flag: 'IQ', country: 'Iraq' },
+	{ flag: 'IR', country: 'Iran' },
+	{ flag: 'IS', country: 'Iceland' },
+	{ flag: 'IT', country: 'Italy' },
+	{ flag: 'JE', country: 'Jersey' },
+	{ flag: 'JM', country: 'Jamaica' },
+	{ flag: 'JO', country: 'Jordan' },
+	{ flag: 'JP', country: 'Japan' },
+	{ flag: 'KE', country: 'Kenya' },
+	{ flag: 'KG', country: 'Kyrgyzstan' },
+	{ flag: 'KH', country: 'Cambodia' },
+	{ flag: 'KI', country: 'Kiribati' },
+	{ flag: 'KM', country: 'Comoros' },
+	{ flag: 'KN', country: 'Saint Kitts and Nevis' },
+	{ flag: 'KP', country: 'North Korea' },
+	{ flag: 'KR', country: 'South Korea' },
+	{ flag: 'KW', country: 'Kuwait' },
+	{ flag: 'KY', country: 'Cayman Islands' },
+	{ flag: 'KZ', country: 'Kazakhstan' },
+	{ flag: 'LA', country: 'Laos' },
+	{ flag: 'LB', country: 'Lebanon' },
+	{ flag: 'LC', country: 'Saint Lucia' },
+	{ flag: 'LI', country: 'Liechtenstein' },
+	{ flag: 'LK', country: 'Sri Lanka' },
+	{ flag: 'LR', country: 'Liberia' },
+	{ flag: 'LS', country: 'Lesotho' },
+	{ flag: 'LT', country: 'Lithuania' },
+	{ flag: 'LU', country: 'Luxembourg' },
+	{ flag: 'LV', country: 'Latvia' },
+	{ flag: 'LY', country: 'Libya' },
+	{ flag: 'MA', country: 'Morocco' },
+	{ flag: 'MC', country: 'Monaco' },
+	{ flag: 'MD', country: 'Moldova' },
+	{ flag: 'ME', country: 'Montenegro' },
+	{ flag: 'MF', country: 'Saint Martin' },
+	{ flag: 'MG', country: 'Madagascar' },
+	{ flag: 'MH', country: 'Marshall Islands' },
+	{ flag: 'MK', country: 'Macedonia' },
+	{ flag: 'ML', country: 'Mali' },
+	{ flag: 'MM', country: 'Myanmar [Burma]' },
+	{ flag: 'MN', country: 'Mongolia' },
+	{ flag: 'MO', country: 'Macau SAR China' },
+	{ flag: 'MP', country: 'Northern Mariana Islands' },
+	{ flag: 'MQ', country: 'Martinique' },
+	{ flag: 'MR', country: 'Mauritania' },
+	{ flag: 'MS', country: 'Montserrat' },
+	{ flag: 'MT', country: 'Malta' },
+	{ flag: 'MU', country: 'Mauritius' },
+	{ flag: 'MV', country: 'Maldives' },
+	{ flag: 'MW', country: 'Malawi' },
+	{ flag: 'MX', country: 'Mexico' },
+	{ flag: 'MY', country: 'Malaysia' },
+	{ flag: 'MZ', country: 'Mozambique' },
+	{ flag: 'NA', country: 'Namibia' },
+	{ flag: 'NC', country: 'New Caledonia' },
+	{ flag: 'NE', country: 'Niger' },
+	{ flag: 'NF', country: 'Norfolk Island' },
+	{ flag: 'NG', country: 'Nigeria' },
+	{ flag: 'NI', country: 'Nicaragua' },
+	{ flag: 'NL', country: 'Netherlands' },
+	{ flag: 'NO', country: 'Norway' },
+	{ flag: 'NP', country: 'Nepal' },
+	{ flag: 'NR', country: 'Nauru' },
+	{ flag: 'NU', country: 'Niue' },
+	{ flag: 'NZ', country: 'New Zealand' },
+	{ flag: 'OM', country: 'Oman' },
+	{ flag: 'PA', country: 'Panama' },
+	{ flag: 'PE', country: 'Peru' },
+	{ flag: 'PF', country: 'French Polynesia' },
+	{ flag: 'PG', country: 'Papua New Guinea' },
+	{ flag: 'PH', country: 'Philippines' },
+	{ flag: 'PK', country: 'Pakistan' },
+	{ flag: 'PL', country: 'Poland' },
+	{ flag: 'PM', country: 'Saint Pierre and Miquelon' },
+	{ flag: 'PN', country: 'Pitcairn Islands' },
+	{ flag: 'PR', country: 'Puerto Rico' },
+	{ flag: 'PS', country: 'Palestinian Territories' },
+	{ flag: 'PT', country: 'Portugal' },
+	{ flag: 'PW', country: 'Palau' },
+	{ flag: 'PY', country: 'Paraguay' },
+	{ flag: 'QA', country: 'Qatar' },
+	{ flag: 'RE', country: 'Réunion' },
+	{ flag: 'RO', country: 'Romania' },
+	{ flag: 'RS', country: 'Serbia' },
+	{ flag: 'RU', country: 'Russia' },
+	{ flag: 'RW', country: 'Rwanda' },
+	{ flag: 'SA', country: 'Saudi Arabia' },
+	{ flag: 'SB', country: 'Solomon Islands' },
+	{ flag: 'SC', country: 'Seychelles' },
+	{ flag: 'SD', country: 'Sudan' },
+	{ flag: 'SE', country: 'Sweden' },
+	{ flag: 'SG', country: 'Singapore' },
+	{ flag: 'SH', country: 'Saint Helena' },
+	{ flag: 'SI', country: 'Slovenia' },
+	{ flag: 'SJ', country: 'Svalbard and Jan Mayen' },
+	{ flag: 'SK', country: 'Slovakia' },
+	{ flag: 'SL', country: 'Sierra Leone' },
+	{ flag: 'SM', country: 'San Marino' },
+	{ flag: 'SN', country: 'Senegal' },
+	{ flag: 'SO', country: 'Somalia' },
+	{ flag: 'SR', country: 'Suriname' },
+	{ flag: 'SS', country: 'South Sudan' },
+	{ flag: 'ST', country: 'São Tomé and Príncipe' },
+	{ flag: 'SV', country: 'El Salvador' },
+	{ flag: 'SX', country: 'Sint Maarten' },
+	{ flag: 'SY', country: 'Syria' },
+	{ flag: 'SZ', country: 'Swaziland' },
+	{ flag: 'TC', country: 'Turks and Caicos Islands' },
+	{ flag: 'TD', country: 'Chad' },
+	{ flag: 'TF', country: 'French Southern Territories' },
+	{ flag: 'TG', country: 'Togo' },
+	{ flag: 'TH', country: 'Thailand' },
+	{ flag: 'TJ', country: 'Tajikistan' },
+	{ flag: 'TK', country: 'Tokelau' },
+	{ flag: 'TL', country: 'Timor-Leste' },
+	{ flag: 'TM', country: 'Turkmenistan' },
+	{ flag: 'TN', country: 'Tunisia' },
+	{ flag: 'TO', country: 'Tonga' },
+	{ flag: 'TR', country: 'Turkey' },
+	{ flag: 'TT', country: 'Trinidad and Tobago' },
+	{ flag: 'TV', country: 'Tuvalu' },
+	{ flag: 'TW', country: 'Taiwan' },
+	{ flag: 'TZ', country: 'Tanzania' },
+	{ flag: 'UA', country: 'Ukraine' },
+	{ flag: 'UG', country: 'Uganda' },
+	{ flag: 'UM', country: 'U.S. Minor Outlying Islands' },
+	{ flag: 'US', country: 'United States' },
+	{ flag: 'UY', country: 'Uruguay' },
+	{ flag: 'UZ', country: 'Uzbekistan' },
+	{ flag: 'VA', country: 'Vatican City' },
+	{ flag: 'VC', country: 'Saint Vincent and the Grenadines' },
+	{ flag: 'VE', country: 'Venezuela' },
+	{ flag: 'VG', country: 'British Virgin Islands' },
+	{ flag: 'VI', country: 'U.S. Virgin Islands' },
+	{ flag: 'VN', country: 'Vietnam' },
+	{ flag: 'VU', country: 'Vanuatu' },
+	{ flag: 'WF', country: 'Wallis and Futuna' },
+	{ flag: 'WS', country: 'Samoa' },
+	{ flag: 'XA', country: 'American Samoa' },
+	{ flag: 'XK', country: 'Kosovo' },
+	{ flag: 'XO', country: 'Autralia' },
+	{ flag: 'XZ', country: 'New Zealand' },
+	{ flag: 'YE', country: 'Yemen' },
+	{ flag: 'YT', country: 'Mayotte' },
+	{ flag: 'ZA', country: 'South Africa' },
+	{ flag: 'ZM', country: 'Zambia' },
+	{ flag: 'ZR', country: 'Congo' },
+	{ flag: 'ZW', country: 'Zimbabwe' },
+];

package/libs/pmds-common/src/lib/utils/pmds-util-img-flags/pmds-util-img-flags.util.ts

@@ -0,0 +1 @@
+export class PmdsUtilImgFlags {}

package/libs/pmds-common/src/lib/utils/pmds-util-img-flags/src/assets/img/flags/AD.svg

@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path style="fill:#FFDA44;" d="M144.696,486.598C178.352,502.872,216.109,512,256,512s77.648-9.128,111.304-25.402L389.565,256
+	L367.304,25.402C333.648,9.128,295.891,0,256,0s-77.648,9.128-111.304,25.402L122.435,256L144.696,486.598z"/>
+<path style="fill:#D80027;" d="M367.304,486.589C452.935,445.183,512,357.493,512,256S452.935,66.817,367.304,25.411V486.589z"/>
+<path style="fill:#0052B4;" d="M144.696,486.589V25.411C59.065,66.817,0,154.506,0,256S59.065,445.183,144.696,486.589z"/>
+<g>
+	<path style="fill:#D80027;" d="M256,345.043c0-40.851,0-89.043,0-89.043h66.783v33.391c0,5.801-11.13,27.057-38.603,44.522
+		C273.775,340.529,263.004,342.657,256,345.043z"/>
+	<rect x="189.217" y="189.217" style="fill:#D80027;" width="66.783" height="66.783"/>
+</g>
+<path style="fill:#FF9811;" d="M289.391,166.957c0-12.295-9.967-22.261-22.261-22.261c-4.06,0-7.854,1.104-11.13,3.002
+	c-3.277-1.898-7.07-3.002-11.13-3.002c-12.294,0-22.261,9.966-22.261,22.261h-55.652V278.26c0,41.436,32.906,65.399,58.711,77.821
+	c-1.931,3.298-3.059,7.125-3.059,11.224c0,12.295,9.967,22.261,22.261,22.261c4.06,0,7.854-1.104,11.13-3.002
+	c3.277,1.898,7.07,3.002,11.13,3.002c12.294,0,22.261-9.966,22.261-22.261c0-4.099-1.128-7.926-3.06-11.224
+	c25.805-12.422,58.712-36.384,58.712-77.821V166.957H289.391z M311.652,278.26c0,5.801,0,23.452-27.472,40.918
+	c-10.406,6.616-21.176,10.906-28.18,13.291c-7.004-2.385-17.774-6.675-28.18-13.291c-27.472-17.466-27.472-35.117-27.472-40.918
+	v-77.912h111.304V278.26z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>