@dropi/ui-components 1.0.0

package/src/components-source/dropi-chips/dropi-chips.component.stories.ts

@@ -0,0 +1,275 @@
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import '@dotlottie/player-component';
+import { action } from '@storybook/addon-actions';
+import { DropiChipsComponent } from './dropi-chips.component';
+
+/**
+ * # Chips Component
+ *
+ * A compact component for displaying selected items, filters, or categories.
+ * Chips can be interactive (removable) or display-only based on the style.
+ *
+ * ## Features
+ * - **Styles**: filters (removable), fill (solid), outline
+ * - **Types**: text, image-based chips
+ * - **Icons**: Optional icon display
+ * - **Content projection**: Display custom content inside the chip
+ *
+ * ## Usage
+ * ```html
+ * <app-dropi-chips
+ *   style="filtrers"
+ *   type="text"
+ *   [showIcon]="true"
+ *   icon="Close">
+ *   Filter: Active
+ * </app-dropi-chips>
+ * ```
+ */
+const meta: Meta<DropiChipsComponent> = {
+  title: 'UI Dropi/Chips',
+  component: DropiChipsComponent,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+A compact component for displaying selected items, filters, or categories.
+Chips can be interactive (removable) or display-only based on the style.
+
+### Key Features
+- **Styles**: filters (removable), fill (solid), outline
+- **Types**: text, image-based chips
+- **Icons**: Optional icon display
+- **Content projection**: Display custom content inside the chip
+        `,
+      },
+    },
+  },
+  decorators: [
+    moduleMetadata({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }),
+  ],
+  argTypes: {
+    style: {
+      control: 'text',
+      description: 'Visual style of the chip (filters, fill, outline)',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    type: {
+      control: 'text',
+      description: 'Type of content displayed (text, img)',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    urlImg: {
+      control: 'text',
+      description: 'URL of the image when type is "img"',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'Whether to show an icon inside the chip',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    icon: {
+      control: 'text',
+      description: 'Name of the icon to display',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<DropiChipsComponent>;
+
+/** Filter-style chip - removable */
+export const Filters: Story = {
+  args: {
+    style: 'filtrers',
+    type: 'text',
+    urlImg: '',
+    showIcon: false,
+    icon: '',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=387-1740&m=dev',
+    },
+    docs: {
+      description: {
+        story: 'Filter-style chip that can be removed. Ideal for active filters in search results.',
+      },
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+        <app-dropi-chips
+          [type]="type"
+          [urlImg]="urlImg"
+          [showIcon]="showIcon"
+           [icon]="icon"
+          [style]="style">
+          This is my chip
+        </app-dropi-chips>
+      `,
+  }),
+};
+
+/** Fill-style chip - solid background */
+export const Fill: Story = {
+  args: {
+    style: 'fill',
+    type: 'text',
+    urlImg: '',
+    showIcon: false,
+    icon: '',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=387-1056&m=dev',
+    },
+    docs: {
+      description: {
+        story:
+          'Solid fill chip with prominent visual appearance. Use for selected items or categories.',
+      },
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+        <app-dropi-chips
+          [type]="type"
+          [urlImg]="urlImg"
+          [showIcon]="showIcon"
+        [icon]="icon"
+          [style]="style">
+          This is my chip
+        </app-dropi-chips>
+      `,
+  }),
+};
+
+/** Chip with icon */
+export const WithIcon: Story = {
+  args: {
+    style: 'fill',
+    type: 'icon',
+    urlImg: '',
+    showIcon: false,
+    icon: 'File',
+  },
+
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=387-1036&m=dev',
+    },
+    docs: {
+      description: {
+        story: 'Chip displaying an icon. Useful for file types, categories, or status indicators.',
+      },
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+        <app-dropi-chips
+          [type]="type"
+          [urlImg]="urlImg"
+          [showIcon]="showIcon"
+          [style]="style"
+          [icon]="icon"
+
+          >
+          Este es mi chip
+        </app-dropi-chips>
+      `,
+  }),
+};
+
+export const whitAvatar: Story = {
+  args: {
+    style: 'filtrers',
+    type: 'avatar',
+    urlImg: 'assets/img/LOGO-250-PX.png',
+    showIcon: false,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=387-1022&m=dev',
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+        <app-dropi-chips
+          [type]="type"
+          [urlImg]="urlImg"
+          [showIcon]="showIcon"
+          [style]="style"
+          [icon]="icon"
+
+          >
+          Este es mi chip
+        </app-dropi-chips>
+      `,
+  }),
+};
+export const showIconClose: Story = {
+  args: {
+    style: 'fill',
+    type: 'text',
+    urlImg: '',
+    showIcon: true,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/ONiVQJJ2qrJ6tmJnpNrrKE/-WEB--components?node-id=387-1050&m=dev',
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+        <app-dropi-chips
+          [type]="type"
+          [urlImg]="urlImg"
+          [showIcon]="showIcon"
+          [style]="style"
+          [icon]="icon"
+
+          >
+          Este es mi chip
+        </app-dropi-chips>
+      `,
+  }),
+};

package/src/components-source/dropi-chips/dropi-chips.component.ts

@@ -0,0 +1,100 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { IconComponent } from '../icon/icon.component';
+import { trigger, transition, style, animate } from '@angular/animations';
+
+@Component({
+  selector: 'app-dropi-chips',
+  templateUrl: './dropi-chips.component.html',
+  styleUrls: ['./dropi-chips.component.scss'],
+  standalone: true,
+  imports: [CommonModule, IconComponent],
+  animations: [
+    trigger('fade', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'scale(0.8)' }),
+        animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })),
+      ]),
+      transition(':leave', [
+        animate('150ms ease-in', style({ opacity: 0, transform: 'scale(0.8)' })),
+      ]),
+    ]),
+  ],
+})
+export class DropiChipsComponent implements OnInit {
+  @Input() style: 'filtrers' | 'fill' = 'fill';
+  @Input() type: 'icon' | 'text' | 'avatar' = 'icon';
+  @Input() urlImg: string;
+  @Input() showIcon: boolean = false;
+  @Input() icon: string = '';
+  isVisible = true;
+
+  fontColor = 'Gray-Gray-600';
+
+  stylesChips = {
+    flitrers: {
+      bgc: 'var(--Gray-Gray-50)',
+      br: 'var(--Border-2)',
+      bs: 'solid',
+      bw: '1px',
+      bc: 'var(--Gray-Gray-200)',
+      cl: 'var(--Gray-Gray-600)',
+    },
+    fill: {
+      bgc: 'var(--Primary-Primary-50)',
+      br: 'var(--Border-2)',
+      bs: 'none',
+      bw: '1px',
+      bc: 'var(--Primary-Primary-200)',
+      cl: 'var(--Primary-Primary-500)',
+    },
+  };
+
+  styleToApply: {
+    'background-color': any;
+    'border-radius': any;
+    'border-style': any;
+    'border-width': any;
+    'border-color': any;
+    color: any;
+  };
+
+  constructor() {}
+
+  ngOnInit() {
+    if (!this.urlImg || this.urlImg == '') {
+      this.urlImg = 'assets/images/.Radio icon.png';
+    }
+    this.selectStyle();
+  }
+
+  selectStyle() {
+    if (this.stylesChips.hasOwnProperty(this.style)) {
+      const selectedStyle = this.stylesChips[this.style];
+
+      this.styleToApply = {
+        'background-color': selectedStyle.bgc,
+        'border-radius': selectedStyle.br,
+        'border-style': selectedStyle.bs,
+        'border-width': selectedStyle.bw,
+        'border-color': selectedStyle.bc,
+        color: selectedStyle.cl,
+      };
+
+      if (this.type == 'icon') {
+        this.styleToApply['padding'] = '0 8px';
+      }
+
+      this.setFontColor();
+    }
+  }
+
+  setFontColor() {
+    this.fontColor = this.styleToApply['color'];
+    this.fontColor = this.fontColor.substring(6, this.fontColor.length - 1);
+  }
+
+  closeChips() {
+    this.isVisible = false;
+  }
+}

package/src/components-source/dropi-country-selector/countries.data.ts

@@ -0,0 +1,239 @@
+import { iCountryList } from '@app/utilities/interfaces/ui/country-selector.interface';
+
+export const COUNTRIES: iCountryList[] = [
+  { name: 'Afghanistan', code: 'AF', codePhone: '93' },
+  { name: 'Åland Islands', code: 'AX', codePhone: '358' },
+  { name: 'Albania', code: 'AL', codePhone: '355' },
+  { name: 'Algeria', code: 'DZ', codePhone: '213' },
+  { name: 'American Samoa', code: 'AS', codePhone: '1684' },
+  { name: 'AndorrA', code: 'AD', codePhone: '376' },
+  { name: 'Angola', code: 'AO', codePhone: '244' },
+  { name: 'Anguilla', code: 'AI', codePhone: '1264' },
+  { name: 'Antarctica', code: 'AQ', codePhone: '672' },
+  { name: 'Antigua and Barbuda', code: 'AG', codePhone: '1268' },
+  { name: 'Argentina', code: 'AR', codePhone: '54' },
+  { name: 'Armenia', code: 'AM', codePhone: '374' },
+  { name: 'Aruba', code: 'AW', codePhone: '297' },
+  { name: 'Australia', code: 'AU', codePhone: '61' },
+  { name: 'Austria', code: 'AT', codePhone: '43' },
+  { name: 'Azerbaijan', code: 'AZ', codePhone: '994' },
+  { name: 'Bahamas', code: 'BS', codePhone: '1242' },
+  { name: 'Bahrain', code: 'BH', codePhone: '973' },
+  { name: 'Bangladesh', code: 'BD', codePhone: '880' },
+  { name: 'Barbados', code: 'BB', codePhone: '1246' },
+  { name: 'Belarus', code: 'BY', codePhone: '375' },
+  { name: 'Belgium', code: 'BE', codePhone: '32' },
+  { name: 'Belize', code: 'BZ', codePhone: '501' },
+  { name: 'Benin', code: 'BJ', codePhone: '229' },
+  { name: 'Bermuda', code: 'BM', codePhone: '1441' },
+  { name: 'Bhutan', code: 'BT', codePhone: '975' },
+  { name: 'Bolivia', code: 'BO', codePhone: '591' },
+  { name: 'Bosnia and Herzegovina', code: 'BA', codePhone: '387' },
+  { name: 'Botswana', code: 'BW', codePhone: '267' },
+  { name: 'Brazil', code: 'BR', codePhone: '55' },
+  { name: 'Brunei Darussalam', code: 'BN', codePhone: '673' },
+  { name: 'Bulgaria', code: 'BG', codePhone: '359' },
+  { name: 'Burkina Faso', code: 'BF', codePhone: '226' },
+  { name: 'Burundi', code: 'BI', codePhone: '257' },
+  { name: 'Cambodia', code: 'KH', codePhone: '855' },
+  { name: 'Cameroon', code: 'CM', codePhone: '237' },
+  { name: 'Canada', code: 'CA', codePhone: '1' },
+  { name: 'Cape Verde', code: 'CV', codePhone: '238' },
+  { name: 'Cayman Islands', code: 'KY', codePhone: '1345' },
+  { name: 'Central African Republic', code: 'CF', codePhone: '236' },
+  { name: 'Chad', code: 'TD', codePhone: '235' },
+  { name: 'Chile', code: 'CL', codePhone: '56' },
+  { name: 'China', code: 'CN', codePhone: '86' },
+  { name: 'Christmas Island', code: 'CX', codePhone: '61' },
+  { name: 'Cocos (Keeling) Islands', code: 'CC', codePhone: '61' },
+  { name: 'Colombia', code: 'CO', codePhone: '57' },
+  { name: 'Comoros', code: 'KM', codePhone: '269' },
+  { name: 'Congo', code: 'CG', codePhone: '242' },
+  { name: 'Congo, The Democratic Republic of the', code: 'CD', codePhone: '243' },
+  { name: 'Cook Islands', code: 'CK', codePhone: '682' },
+  { name: 'Costa Rica', code: 'CR', codePhone: '506' },
+  { name: "Cote D'Ivoire", code: 'CI', codePhone: '225' },
+  { name: 'Croatia', code: 'HR', codePhone: '385' },
+  { name: 'Cuba', code: 'CU', codePhone: '53' },
+  { name: 'Cyprus', code: 'CY', codePhone: '357' },
+  { name: 'Czech Republic', code: 'CZ', codePhone: '420' },
+  { name: 'Denmark', code: 'DK', codePhone: '45' },
+  { name: 'Djibouti', code: 'DJ', codePhone: '253' },
+  { name: 'Dominica', code: 'DM', codePhone: '1767' },
+  { name: 'Dominican Republic', code: 'DO', codePhone: '1' },
+  { name: 'Ecuador', code: 'EC', codePhone: '593' },
+  { name: 'Egypt', code: 'EG', codePhone: '20' },
+  { name: 'El Salvador', code: 'SV', codePhone: '503' },
+  { name: 'Equatorial Guinea', code: 'GQ', codePhone: '240' },
+  { name: 'Eritrea', code: 'ER', codePhone: '291' },
+  { name: 'Estonia', code: 'EE', codePhone: '372' },
+  { name: 'Ethiopia', code: 'ET', codePhone: '251' },
+  { name: 'Falkland Islands (Malvinas)', code: 'FK', codePhone: '500' },
+  { name: 'Faroe Islands', code: 'FO', codePhone: '298' },
+  { name: 'Fiji', code: 'FJ', codePhone: '679' },
+  { name: 'Finland', code: 'FI', codePhone: '358' },
+  { name: 'France', code: 'FR', codePhone: '33' },
+  { name: 'French Guiana', code: 'GF', codePhone: '594' },
+  { name: 'French Polynesia', code: 'PF', codePhone: '689' },
+  { name: 'French Southern Territories', code: 'TF', codePhone: '262' },
+  { name: 'Gabon', code: 'GA', codePhone: '241' },
+  { name: 'Gambia', code: 'GM', codePhone: '220' },
+  { name: 'Georgia', code: 'GE', codePhone: '995' },
+  { name: 'Germany', code: 'DE', codePhone: '49' },
+  { name: 'Ghana', code: 'GH', codePhone: '233' },
+  { name: 'Gibraltar', code: 'GI', codePhone: '350' },
+  { name: 'Greece', code: 'GR', codePhone: '30' },
+  { name: 'Greenland', code: 'GL', codePhone: '299' },
+  { name: 'Grenada', code: 'GD', codePhone: '1473' },
+  { name: 'Guam', code: 'GU', codePhone: '1671' },
+  { name: 'Guatemala', code: 'GT', codePhone: '502' },
+  { name: 'Guernsey', code: 'GG', codePhone: '44' },
+  { name: 'Guinea', code: 'GN', codePhone: '224' },
+  { name: 'Guinea-Bissau', code: 'GW', codePhone: '245' },
+  { name: 'Guyana', code: 'GY', codePhone: '592' },
+  { name: 'Haiti', code: 'HT', codePhone: '509' },
+  { name: 'Holy See (Vatican City State)', code: 'VA', codePhone: '379' },
+  { name: 'Honduras', code: 'HN', codePhone: '504' },
+  { name: 'Hong Kong', code: 'HK', codePhone: '852' },
+  { name: 'Hungary', code: 'HU', codePhone: '36' },
+  { name: 'Iceland', code: 'IS', codePhone: '354' },
+  { name: 'India', code: 'IN', codePhone: '91' },
+  { name: 'Indonesia', code: 'ID', codePhone: '62' },
+  { name: 'Iran, Islamic Republic Of', code: 'IR', codePhone: '98' },
+  { name: 'Iraq', code: 'IQ', codePhone: '964' },
+  { name: 'Ireland', code: 'IE', codePhone: '353' },
+  { name: 'Isle of Man', code: 'IM', codePhone: '44' },
+  { name: 'Israel', code: 'IL', codePhone: '972' },
+  { name: 'Italy', code: 'IT', codePhone: '39' },
+  { name: 'Jamaica', code: 'JM', codePhone: '1876' },
+  { name: 'Japan', code: 'JP', codePhone: '81' },
+  { name: 'Jersey', code: 'JE', codePhone: '44' },
+  { name: 'Jordan', code: 'JO', codePhone: '962' },
+  { name: 'Kazakhstan', code: 'KZ', codePhone: '7' },
+  { name: 'Kenya', code: 'KE', codePhone: '254' },
+  { name: 'Kiribati', code: 'KI', codePhone: '686' },
+  { name: "Korea, Democratic People'S Republic of", code: 'KP', codePhone: '850' },
+  { name: 'Korea, Republic of', code: 'KR', codePhone: '82' },
+  { name: 'Kuwait', code: 'KW', codePhone: '965' },
+  { name: 'Kyrgyzstan', code: 'KG', codePhone: '996' },
+  { name: "Lao People'S Democratic Republic", code: 'LA', codePhone: '856' },
+  { name: 'Latvia', code: 'LV', codePhone: '371' },
+  { name: 'Lebanon', code: 'LB', codePhone: '961' },
+  { name: 'Lesotho', code: 'LS', codePhone: '266' },
+  { name: 'Liberia', code: 'LR', codePhone: '231' },
+  { name: 'Libyan Arab Jamahiriya', code: 'LY', codePhone: '218' },
+  { name: 'Liechtenstein', code: 'LI', codePhone: '423' },
+  { name: 'Lithuania', code: 'LT', codePhone: '370' },
+  { name: 'Luxembourg', code: 'LU', codePhone: '352' },
+  { name: 'Macao', code: 'MO', codePhone: '853' },
+  { name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK', codePhone: '389' },
+  { name: 'Madagascar', code: 'MG', codePhone: '261' },
+  { name: 'Malawi', code: 'MW', codePhone: '265' },
+  { name: 'Malaysia', code: 'MY', codePhone: '60' },
+  { name: 'Maldives', code: 'MV', codePhone: '960' },
+  { name: 'Mali', code: 'ML', codePhone: '223' },
+  { name: 'Malta', code: 'MT', codePhone: '356' },
+  { name: 'Marshall Islands', code: 'MH', codePhone: '692' },
+  { name: 'Martinique', code: 'MQ', codePhone: '596' },
+  { name: 'Mauritania', code: 'MR', codePhone: '222' },
+  { name: 'Mauritius', code: 'MU', codePhone: '230' },
+  { name: 'Mayotte', code: 'YT', codePhone: '262' },
+  { name: 'Mexico', code: 'MX', codePhone: '52' },
+  { name: 'Micronesia, Federated States of', code: 'FM', codePhone: '691' },
+  { name: 'Moldova, Republic of', code: 'MD', codePhone: '373' },
+  { name: 'Monaco', code: 'MC', codePhone: '377' },
+  { name: 'Mongolia', code: 'MN', codePhone: '976' },
+  { name: 'Montserrat', code: 'MS', codePhone: '1664' },
+  { name: 'Morocco', code: 'MA', codePhone: '212' },
+  { name: 'Mozambique', code: 'MZ', codePhone: '258' },
+  { name: 'Myanmar', code: 'MM', codePhone: '95' },
+  { name: 'Namibia', code: 'NA', codePhone: '264' },
+  { name: 'Nauru', code: 'NR', codePhone: '674' },
+  { name: 'Nepal', code: 'NP', codePhone: '977' },
+  { name: 'Netherlands', code: 'NL', codePhone: '31' },
+  { name: 'Netherlands Antilles', code: 'AN', codePhone: '599' },
+  { name: 'New Caledonia', code: 'NC', codePhone: '687' },
+  { name: 'New Zealand', code: 'NZ', codePhone: '64' },
+  { name: 'Nicaragua', code: 'NI', codePhone: '505' },
+  { name: 'Niger', code: 'NE', codePhone: '227' },
+  { name: 'Nigeria', code: 'NG', codePhone: '234' },
+  { name: 'Niue', code: 'NU', codePhone: '683' },
+  { name: 'Norfolk Island', code: 'NF', codePhone: '672' },
+  { name: 'Northern Mariana Islands', code: 'MP', codePhone: '1670' },
+  { name: 'Norway', code: 'NO', codePhone: '47' },
+  { name: 'Oman', code: 'OM', codePhone: '968' },
+  { name: 'Pakistan', code: 'PK', codePhone: '92' },
+  { name: 'Palau', code: 'PW', codePhone: '680' },
+  { name: 'Palestinian Territory, Occupied', code: 'PS', codePhone: '970' },
+  { name: 'Panama', code: 'PA', codePhone: '507' },
+  { name: 'Papua New Guinea', code: 'PG', codePhone: '675' },
+  { name: 'Paraguay', code: 'PY', codePhone: '595' },
+  { name: 'Peru', code: 'PE', codePhone: '51' },
+  { name: 'Philippines', code: 'PH', codePhone: '63' },
+  { name: 'Pitcairn', code: 'PN', codePhone: '64' },
+  { name: 'Poland', code: 'PL', codePhone: '48' },
+  { name: 'Portugal', code: 'PT', codePhone: '351' },
+  { name: 'Puerto Rico', code: 'PR', codePhone: '1' },
+  { name: 'Qatar', code: 'QA', codePhone: '974' },
+  { name: 'Reunion', code: 'RE', codePhone: '262' },
+  { name: 'Romania', code: 'RO', codePhone: '40' },
+  { name: 'Russian Federation', code: 'RU', codePhone: '7' },
+  { name: 'RWANDA', code: 'RW', codePhone: '250' },
+  { name: 'Saint Helena', code: 'SH', codePhone: '290' },
+  { name: 'Saint Kitts and Nevis', code: 'KN', codePhone: '1869' },
+  { name: 'Saint Lucia', code: 'LC', codePhone: '1758' },
+  { name: 'Saint Vincent and the Grenadines', code: 'VC', codePhone: '1784' },
+  { name: 'Samoa', code: 'WS', codePhone: '685' },
+  { name: 'San Marino', code: 'SM', codePhone: '378' },
+  { name: 'Sao Tome and Principe', code: 'ST', codePhone: '239' },
+  { name: 'Saudi Arabia', code: 'SA', codePhone: '966' },
+  { name: 'Senegal', code: 'SN', codePhone: '221' },
+  { name: 'Seychelles', code: 'SC', codePhone: '248' },
+  { name: 'Sierra Leone', code: 'SL', codePhone: '232' },
+  { name: 'Singapore', code: 'SG', codePhone: '65' },
+  { name: 'Slovakia', code: 'SK', codePhone: '421' },
+  { name: 'Slovenia', code: 'SI', codePhone: '386' },
+  { name: 'Solomon Islands', code: 'SB', codePhone: '677' },
+  { name: 'Somalia', code: 'SO', codePhone: '252' },
+  { name: 'South Africa', code: 'ZA', codePhone: '27' },
+  { name: 'South Georgia and the South Sandwich Islands', code: 'GS', codePhone: '500' },
+  { name: 'Spain', code: 'ES', codePhone: '34' },
+  { name: 'Sri Lanka', code: 'LK', codePhone: '94' },
+  { name: 'Sudan', code: 'SD', codePhone: '249' },
+  { name: 'Suriname', code: 'SR', codePhone: '597' },
+  { name: 'Swaziland', code: 'SZ', codePhone: '268' },
+  { name: 'Sweden', code: 'SE', codePhone: '46' },
+  { name: 'Switzerland', code: 'CH', codePhone: '41' },
+  { name: 'Syrian Arab Republic', code: 'SY', codePhone: '963' },
+  { name: 'Taiwan, Province of China', code: 'TW', codePhone: '886' },
+  { name: 'Tajikistan', code: 'TJ', codePhone: '992' },
+  { name: 'Tanzania, United Republic of', code: 'TZ', codePhone: '255' },
+  { name: 'Thailand', code: 'TH', codePhone: '66' },
+  { name: 'Timor-Leste', code: 'TL', codePhone: '670' },
+  { name: 'Togo', code: 'TG', codePhone: '228' },
+  { name: 'Tokelau', code: 'TK', codePhone: '690' },
+  { name: 'Tonga', code: 'TO', codePhone: '676' },
+  { name: 'Trinidad and Tobago', code: 'TT', codePhone: '1868' },
+  { name: 'Tunisia', code: 'TN', codePhone: '216' },
+  { name: 'Turkey', code: 'TR', codePhone: '90' },
+  { name: 'Turkmenistan', code: 'TM', codePhone: '993' },
+  { name: 'Turks and Caicos Islands', code: 'TC', codePhone: '1649' },
+  { name: 'Tuvalu', code: 'TV', codePhone: '688' },
+  { name: 'Uganda', code: 'UG', codePhone: '256' },
+  { name: 'Ukraine', code: 'UA', codePhone: '380' },
+  { name: 'United Arab Emirates', code: 'AE', codePhone: '971' },
+  { name: 'United Kingdom', code: 'GB', codePhone: '44' },
+  { name: 'United States', code: 'US', codePhone: '1' },
+  { name: 'Uruguay', code: 'UY', codePhone: '598' },
+  { name: 'Uzbekistan', code: 'UZ', codePhone: '998' },
+  { name: 'Vanuatu', code: 'VU', codePhone: '678' },
+  { name: 'Venezuela', code: 'VE', codePhone: '58' },
+  { name: 'Viet Nam', code: 'VN', codePhone: '84' },
+  { name: 'Virgin Islands, British', code: 'VG', codePhone: '1284' },
+  { name: 'Virgin Islands, U.S.', code: 'VI', codePhone: '1340' },
+  { name: 'Wallis and Futuna', code: 'WF', codePhone: '681' },
+  { name: 'Western Sahara', code: 'EH', codePhone: '212' },
+  { name: 'Yemen', code: 'YE', codePhone: '967' },
+  { name: 'Zambia', code: 'ZM', codePhone: '260' },
+  { name: 'Zimbabwe', code: 'ZW', codePhone: '263' },
+];

package/src/components-source/dropi-country-selector/dropi-country-selector.component.html

@@ -0,0 +1,59 @@
+<div class="custom-select">
+  <label *ngIf="selectProperties?.label">
+    {{ selectProperties.label | translate }}
+    <span *ngIf="selectProperties?.showObligatory">*</span>
+  </label>
+  <button
+    type="button"
+    class="select-button"
+    [disabled]="disabled"
+    [ngClass]="{
+      'select-completed': !!selectedOption,
+      'select-invalid': hasError
+    }"
+    (click)="showOptions()"
+  >
+    <div>
+      <ng-container *ngIf="selectedOption; else placeholder">
+        <img
+          style="border-radius: 16px"
+          [src]="'https://flagsapi.com/' + selectedOption.code + '/shiny/24.png'"
+        />
+        {{ selectedOption.name }}
+      </ng-container>
+
+      <ng-template #placeholder>
+        {{ selectProperties.placeholder }}
+      </ng-template>
+    </div>
+
+    <app-icon
+      [name]="isExpanded ? 'Dropdown-up' : 'Dropdown-down'"
+      width="20px"
+      height="20px"
+      color="Gray-Gray-500"
+    ></app-icon>
+  </button>
+
+  <ul class="select-dropdown" [ngClass]="isExpanded ? 'expanded-select' : 'collapsed-select'">
+    <li>
+      <input
+        #searchInput
+        type="text"
+        [(ngModel)]="searchTerm"
+        (input)="filterCountries()"
+        class="country-search"
+        placeholder="{{ 'Search country' | translate }}"
+      />
+    </li>
+    <li *ngFor="let country of filteredCountries">
+      <button class="option" (click)="selectOption(country)" type="button">
+        <img
+          style="border-radius: 16px"
+          [src]="'https://flagsapi.com/' + country.code + '/shiny/24.png'"
+        />
+        {{ country.name }}
+      </button>
+    </li>
+  </ul>
+</div>