From 345df648d8aaa144c1ecd36d314bdf4ae49d9a1c Mon Sep 17 00:00:00 2001
From: Mariano Andres Botta <marianoabotta@gmail.com>
Date: Thu, 10 Jun 2021 11:57:38 -0300
Subject: [PATCH 1/2] feat(plex-select): permite crear items on demand

---
 src/demo/app/select/select.html    |  2 +-
 src/lib/select/select.component.ts | 26 +++++++++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/demo/app/select/select.html b/src/demo/app/select/select.html
index 48444e6a9..01daedf93 100644
--- a/src/demo/app/select/select.html
+++ b/src/demo/app/select/select.html
@@ -12,7 +12,7 @@
                     <plex-bool type="slide" label="Select requerido" name="req" [(ngModel)]="modelo2.required">
                     </plex-bool>
                     <plex-select [(ngModel)]="modelo2.select" name="select1" (getData)="loadData($event)"
-                                 label="Select estático" [required]="modelo2.required">
+                                 label="Select estático" [required]="modelo2.required" [allowOther]="true">
                     </plex-select>
                     <plex-select [(ngModel)]="modelo2.selectMultiple" [multiple]="true" name="selectmultiple"
                                  (getData)="loadData($event)" label="Múltiple con llamada a la API"
diff --git a/src/lib/select/select.component.ts b/src/lib/select/select.component.ts
index a02f87a8b..a0252a904 100644
--- a/src/lib/select/select.component.ts
+++ b/src/lib/select/select.component.ts
@@ -44,6 +44,7 @@ export class PlexSelectComponent implements AfterViewInit, ControlValueAccessor
     @Input() labelField: string; // Puede ser un solo campo o una expresión tipo ('string' + campo + 'string' + campo + ...)
     @Input() groupField: string;
     @Input() closeAfterSelect = false;
+    @Input() allowOther = false;
 
     @Input()
     set data(value: any[]) {
@@ -249,16 +250,34 @@ export class PlexSelectComponent implements AfterViewInit, ControlValueAccessor
             openOnFocus: this.hasStaticData,
             closeAfterSelect: this.closeAfterSelect,
             preload: !this.hasStaticData,
+            createOnBlur: false,
+            persist: false,
+            create: this.allowOther && ((input) => {
+                const n = {
+                    [this.idField]: input,
+                    [this.labelField]: input,
+                    other: true
+                };
+                this.data.push(n);
+                return n;
+            }),
             // dropdownParent: 'body',
             render: {
-                option: (item, escape) => '<div class=\'option\'>' + escape(this.renderOption(item, this.labelField)) + '</div>',
+                option: (item, escape) => `<div class="option"> ${escape(this.renderOption(item, this.labelField))} </div>`,
                 item: (item, escape) => {
                     if (this.multiple) {
-                        return '<div class=\'item\'>' + escape(this.renderOption(item, this.labelField)) + '</div>';
+                        return `<div class="item"> ${escape(this.renderOption(item, this.labelField))}</div>`;
                     } else {
-                        return '<div class=\'item\'>' + escape(this.renderOption(item, this.labelField)) + '</div>';
+                        return `<div class="item"> ${escape(this.renderOption(item, this.labelField))}</div>`;
                     }
                 },
+                option_create: (item, escape) => {
+                    if (this.selectize.currentResults.items.length) {
+                        return null;
+                    }
+                    return `<div class="create"> Agregar <strong> ${escape(item.input)} <strong> </div>`;
+
+                }
             },
             load: this.hasStaticData ? null : (query: string, callback: any) => {
                 // Esta función se ejecuta si preload = true o cuando el usuario escribe en el combo
@@ -272,6 +291,7 @@ export class PlexSelectComponent implements AfterViewInit, ControlValueAccessor
                 });
             },
             onChange: (value) => {
+
                 // Busca en la lista de items un valor que coincida con la clave
                 if (this.multiple) {
                     let result = [];

From 511dbe5d299e2f09549ece2cba79be964b42ec67 Mon Sep 17 00:00:00 2001
From: Julio Santarelli <santarellijulio@gmail.com>
Date: Wed, 23 Jun 2021 12:35:39 -0300
Subject: [PATCH 2/2] =?UTF-8?q?feat(plex-select):=20agrega=20estilos=20+?=
 =?UTF-8?q?=20sem=C3=A1ntica?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/css/plex-select.scss       | 16 ++++++++--------
 src/lib/select/select.component.ts |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/lib/css/plex-select.scss b/src/lib/css/plex-select.scss
index f11c1af5f..345565c00 100644
--- a/src/lib/css/plex-select.scss
+++ b/src/lib/css/plex-select.scss
@@ -1,3 +1,4 @@
+@import './variables.scss';
 // Importados desde https://github.com/herschel666/selectize-scss
 
 // SELECTIZE.SCSS
@@ -267,15 +268,14 @@ $selectize-caret-margin-rtl: 0 4px 0 -2px !default;
   .active {
     background-color: $selectize-color-dropdown-item-active;
     color: $selectize-color-dropdown-item-active-text;
-
-    &.create {
-      color: $selectize-color-dropdown-item-create-active-text;
     }
-  }
-
-  .create {
-    color: $selectize-color-dropdown-item-create-text;
-  }
+    p {
+        margin-bottom: 0;
+        
+        &.create {
+        color: $blue;
+        }
+    }
 }
 
 .selectize-dropdown-content {
diff --git a/src/lib/select/select.component.ts b/src/lib/select/select.component.ts
index a0252a904..868f138bd 100644
--- a/src/lib/select/select.component.ts
+++ b/src/lib/select/select.component.ts
@@ -275,7 +275,7 @@ export class PlexSelectComponent implements AfterViewInit, ControlValueAccessor
                     if (this.selectize.currentResults.items.length) {
                         return null;
                     }
-                    return `<div class="create"> Agregar <strong> ${escape(item.input)} <strong> </div>`;
+                    return `<p class="create">No figura en el listado, deseo agregar <strong> ${escape(item.input)} </strong> de todos modos.</p>`;
 
                 }
             },