fix scss

apps/playground/src/app/app.config.ts

@@ -31,6 +31,8 @@ const TRANSLATIONS: TranslationObject = {
     max: 'Máx',
     save: 'Guardar',
     reset: 'Borrar',
+    search: 'Buscar…',
+    noResults: 'Sin resultados',
     validator: {
       requiredField: 'Este campo es obligatorio',
       onlyNumbers: 'Sólo se admiten números',

apps/playground/src/app/pages/catalog/catalog.page.html

@@ -81,6 +81,28 @@
           <pi-label>Fecha de nacimiento</pi-label>
         </pi-date-field>
 
+        <pi-select-field [formField]="f.language" [options]="languages">
+          <pi-label>Idioma</pi-label>
+        </pi-select-field>
+
+        <pi-searchable-select-field
+          [formField]="f.country2"
+          [options]="countryOptions"
+        >
+          <pi-label>País</pi-label>
+        </pi-searchable-select-field>
+
+        <pi-searchable-multi-select-field
+          [formField]="f.visited"
+          [options]="countryOptions"
+        >
+          <pi-label>Países visitados</pi-label>
+        </pi-searchable-multi-select-field>
+
+        <pi-multi-select-field [formField]="f.skills" [options]="skillOptions">
+          <pi-label>Conocimientos</pi-label>
+        </pi-multi-select-field>
+
         <pi-radio-group
           [formField]="f.shipping"
           [options]="shippingOptions"

apps/playground/src/app/pages/catalog/catalog.page.ts

@@ -91,6 +91,11 @@ import {
   PiSelectCarouselComponent,
   PiSelectComponent,
   PiSelectMultipleComponent,
+  PiSearchableMultiSelectFieldComponent,
+  PiSearchableSelectFieldComponent,
+  PiSelectFieldComponent,
+  PiSelectFieldOption,
+  PiMultiSelectFieldComponent,
   PiSelectOptionComponent,
   PiSelectPeriodComponent,
   PiSlideToggleComponent,
@@ -148,6 +153,10 @@ interface DemoModel {
   plan: SelectOptionValue | null;
   terms: boolean;
   shipping: string | null;
+  language: string | null;
+  country2: string | null;
+  visited: string[];
+  skills: string[];
   birthDate: Date | null;
   attachments: File[];
 }
@@ -174,7 +183,7 @@ interface DemoModel {
     PiSmallButtonDirective,
     PiW100ButtonDirective,
     PiRadioButtonComponent,
-  PiSwitchButtonComponent,
+    PiSwitchButtonComponent,
     PiToggleButtonComponent,
     // Contenido
     PiIconComponent,
@@ -240,6 +249,10 @@ interface DemoModel {
     PiSelectPeriodComponent,
     PiSelectCarouselComponent,
     PiSelectOptionComponent,
+    PiSelectFieldComponent,
+    PiMultiSelectFieldComponent,
+    PiSearchableSelectFieldComponent,
+    PiSearchableMultiSelectFieldComponent,
     // Datos
     PiDataGridComponent,
     PiCellDirective,
@@ -285,6 +298,10 @@ export class CatalogPage {
     plan: null,
     terms: false,
     shipping: null,
+    language: null,
+    country2: null,
+    visited: [],
+    skills: [],
     birthDate: null,
     attachments: [],
   });
@@ -312,6 +329,71 @@ export class CatalogPage {
     { id: 4, name: 'Ventas' },
   ];
 
+  protected readonly languages: PiSelectFieldOption<string>[] = [
+    { value: 'es', label: 'Español' },
+    { value: 'en', label: 'Inglés' },
+    { value: 'fr', label: 'Francés' },
+    { value: 'de', label: 'Alemán', disabled: true },
+  ];
+
+  /** Lista larga a propósito: es donde el buscador aporta algo. */
+  protected readonly countryOptions: PiSelectFieldOption<string>[] = [
+    'Alemania',
+    'Andorra',
+    'Argentina',
+    'Australia',
+    'Austria',
+    'Bélgica',
+    'Bolivia',
+    'Brasil',
+    'Canadá',
+    'Chile',
+    'China',
+    'Colombia',
+    'Corea del Sur',
+    'Costa Rica',
+    'Cuba',
+    'Dinamarca',
+    'Ecuador',
+    'Egipto',
+    'España',
+    'Estados Unidos',
+    'Finlandia',
+    'Francia',
+    'Grecia',
+    'Guatemala',
+    'Honduras',
+    'Hungría',
+    'India',
+    'Irlanda',
+    'Islandia',
+    'Italia',
+    'Japón',
+    'Marruecos',
+    'México',
+    'Noruega',
+    'Países Bajos',
+    'Panamá',
+    'Paraguay',
+    'Perú',
+    'Polonia',
+    'Portugal',
+    'Reino Unido',
+    'República Dominicana',
+    'Rumanía',
+    'Suecia',
+    'Suiza',
+    'Uruguay',
+    'Venezuela',
+  ].map((name) => ({ value: name.toLowerCase(), label: name }));
+
+  protected readonly skillOptions: PiSelectFieldOption<string>[] = [
+    { value: 'angular', label: 'Angular' },
+    { value: 'rxjs', label: 'RxJS' },
+    { value: 'scss', label: 'SCSS' },
+    { value: 'a11y', label: 'Accesibilidad' },
+  ];
+
   protected readonly plans = [
     { id: 1, name: 'Básico', description: '9 €/mes' },
     { id: 2, name: 'Pro', description: '29 €/mes' },