feat(plex-select): permite crear items on demand

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"

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 {

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 `<p class="create">No figura en el listado, deseo agregar <strong> ${escape(item.input)} </strong> de todos modos.</p>`;
+
+                }
             },
             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 = [];