@ship-ui/core 0.13.17 → 0.13.19

package/fesm2022/ship-ui-core.mjs

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, Renderer2, ChangeDetectionStrategy, Component, input, computed, viewChild, effect, HostListener, NgModule, signal, Injectable, InjectionToken, model, output, ApplicationRef, createComponent, isSignal, OutputEmitterRef, contentChildren, afterNextRender, assertInInjectionContext, Injector, DestroyRef, HostBinding, contentChild, TemplateRef, runInInjectionContext, Directive, ChangeDetectorRef, viewChildren, ViewContainerRef, EnvironmentInjector } from '@angular/core';
 import { DatePipe, NgTemplateOutlet } from '@angular/common';
 import { SIGNAL } from '@angular/core/primitives/signals';
+import { ShipDividerComponent as ShipDividerComponent$1 } from 'ship-ui';
 
 const iconTypes = ['bold', 'thin', 'light', 'fill'];
 class ShipIconComponent {
@@ -3015,6 +3016,9 @@ class ShipSelectComponent {
         this.value = input();
         this.label = input();
         this.asFreeText = input(false);
+        this.optionTitle = input(null);
+        this.freeTextTitle = input(null);
+        this.freeTextPlaceholder = input('Type to create a new option');
         this.validateFreeText = input();
         this.placeholder = input();
         this.readonly = model(false);
@@ -3033,6 +3037,7 @@ class ShipSelectComponent {
         this.options = model([]);
         this.selectedOptions = model([]);
         this.cleared = output();
+        this.onAddNewFreeTextOption = output();
         this.computedFreeTextOption = computed(() => {
             const inputValue = this.inputValue();
             const valueKey = this.value();
@@ -3187,7 +3192,7 @@ class ShipSelectComponent {
                         e.preventDefault();
                         this.close();
                     }
-                    if (e.key === 'Enter' || e.key === ' ') {
+                    if (e.key === 'Enter') {
                         e.preventDefault();
                         this.toggleOptionByIndex(this.focusedOptionIndex());
                     }
@@ -3399,6 +3404,7 @@ class ShipSelectComponent {
                 const index = options.findIndex((option) => this.getValue(option) === newOptionValue);
                 if (index > -1)
                     return options;
+                this.onAddNewFreeTextOption.emit(newOptionValue);
                 return [newOption, ...options];
             });
             optionIndex = 0;
@@ -3570,7 +3576,7 @@ class ShipSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: ShipSelectComponent, isStandalone: true, selector: "sh-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, asFreeText: { classPropertyName: "asFreeText", publicName: "asFreeText", isSignal: true, isRequired: false, transformFunction: null }, validateFreeText: { classPropertyName: "validateFreeText", publicName: "validateFreeText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, lazySearch: { classPropertyName: "lazySearch", publicName: "lazySearch", isSignal: true, isRequired: false, transformFunction: null }, inlineSearch: { classPropertyName: "inlineSearch", publicName: "inlineSearch", isSignal: true, isRequired: false, transformFunction: null }, asText: { classPropertyName: "asText", publicName: "asText", isSignal: true, isRequired: false, transformFunction: null }, isClearable: { classPropertyName: "isClearable", publicName: "isClearable", isSignal: true, isRequired: false, transformFunction: null }, selectMultiple: { classPropertyName: "selectMultiple", publicName: "selectMultiple", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionTemplate: { classPropertyName: "selectedOptionTemplate", publicName: "selectedOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, placeholderTemplate: { classPropertyName: "placeholderTemplate", publicName: "placeholderTemplate", isSignal: true, isRequired: false, transformFunction: null }, freeTextOptionTemplate: { classPropertyName: "freeTextOptionTemplate", publicName: "freeTextOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedOptions: { classPropertyName: "selectedOptions", publicName: "selectedOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { readonly: "readonlyChange", disabled: "disabledChange", isOpen: "isOpenChange", isLoading: "isLoadingChange", options: "optionsChange", selectedOptions: "selectedOptionsChange", cleared: "cleared" }, host: { properties: { "class.multiple": "selectMultiple()" } }, queries: [{ propertyName: "inlineTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionsWrapRef", first: true, predicate: ["optionsWrap"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: ShipSelectComponent, isStandalone: true, selector: "sh-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, asFreeText: { classPropertyName: "asFreeText", publicName: "asFreeText", isSignal: true, isRequired: false, transformFunction: null }, optionTitle: { classPropertyName: "optionTitle", publicName: "optionTitle", isSignal: true, isRequired: false, transformFunction: null }, freeTextTitle: { classPropertyName: "freeTextTitle", publicName: "freeTextTitle", isSignal: true, isRequired: false, transformFunction: null }, freeTextPlaceholder: { classPropertyName: "freeTextPlaceholder", publicName: "freeTextPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, validateFreeText: { classPropertyName: "validateFreeText", publicName: "validateFreeText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, lazySearch: { classPropertyName: "lazySearch", publicName: "lazySearch", isSignal: true, isRequired: false, transformFunction: null }, inlineSearch: { classPropertyName: "inlineSearch", publicName: "inlineSearch", isSignal: true, isRequired: false, transformFunction: null }, asText: { classPropertyName: "asText", publicName: "asText", isSignal: true, isRequired: false, transformFunction: null }, isClearable: { classPropertyName: "isClearable", publicName: "isClearable", isSignal: true, isRequired: false, transformFunction: null }, selectMultiple: { classPropertyName: "selectMultiple", publicName: "selectMultiple", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionTemplate: { classPropertyName: "selectedOptionTemplate", publicName: "selectedOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, placeholderTemplate: { classPropertyName: "placeholderTemplate", publicName: "placeholderTemplate", isSignal: true, isRequired: false, transformFunction: null }, freeTextOptionTemplate: { classPropertyName: "freeTextOptionTemplate", publicName: "freeTextOptionTemplate", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedOptions: { classPropertyName: "selectedOptions", publicName: "selectedOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { readonly: "readonlyChange", disabled: "disabledChange", isOpen: "isOpenChange", isLoading: "isLoadingChange", options: "optionsChange", selectedOptions: "selectedOptionsChange", cleared: "cleared", onAddNewFreeTextOption: "onAddNewFreeTextOption" }, host: { properties: { "class.multiple": "selectMultiple()" } }, queries: [{ propertyName: "inlineTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "optionsWrapRef", first: true, predicate: ["optionsWrap"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @let _placeholderTemplate = placeholderTemplate();
     @let _optionTemplate = optionTemplate();
     @let _freeTextOptionTemplate = freeTextOptionTemplate();
@@ -3670,6 +3676,10 @@ class ShipSelectComponent {
           @let freeTextOptionValue = getValue(freeTextOption);
 
           @if ($any(freeTextOptionValue).length > 0) {
+            @if (freeTextTitle()) {
+              <p title>{{ freeTextTitle() }}</p>
+            }
+
             <li
               (click)="toggleOptionByIndex(-1)"
               class="option"
@@ -3687,9 +3697,17 @@ class ShipSelectComponent {
                 {{ freeTextOptionValue }}
               }
             </li>
+
+            @if (freeTextTitle() && filteredOptions().length > 0) {
+              <sh-divider />
+            }
           }
         }
 
+        @if (optionTitle() && filteredOptions().length > 0) {
+          <p title>{{ optionTitle() }}</p>
+        }
+
         @for (option of filteredOptions(); track $index) {
           <li
             (click)="toggleOptionByIndex($index)"
@@ -3711,7 +3729,7 @@ class ShipSelectComponent {
         }
       </div>
     </sh-popover>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipPopoverComponent, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormFieldComponent, selector: "sh-form-field" }, { kind: "component", type: ShipIconComponent, selector: "sh-icon" }, { kind: "component", type: ShipCheckboxComponent, selector: "sh-checkbox" }, { kind: "component", type: ShipSpinnerComponent, selector: "sh-spinner" }, { kind: "component", type: ShipChipComponent, selector: "sh-chip" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ShipPopoverComponent, selector: "sh-popover", inputs: ["asMultiLayer", "disableOpenByClick", "isOpen", "options"], outputs: ["isOpenChange", "closed"] }, { kind: "component", type: ShipFormFieldComponent, selector: "sh-form-field" }, { kind: "component", type: ShipIconComponent, selector: "sh-icon" }, { kind: "component", type: ShipCheckboxComponent, selector: "sh-checkbox" }, { kind: "component", type: ShipSpinnerComponent, selector: "sh-spinner" }, { kind: "component", type: ShipChipComponent, selector: "sh-chip" }, { kind: "component", type: ShipDividerComponent$1, selector: "sh-divider" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: ShipSelectComponent, decorators: [{
             type: Component,
@@ -3725,6 +3743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                         ShipCheckboxComponent,
                         ShipSpinnerComponent,
                         ShipChipComponent,
+                        ShipDividerComponent$1,
                     ],
                     template: `
     @let _placeholderTemplate = placeholderTemplate();
@@ -3826,6 +3845,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
           @let freeTextOptionValue = getValue(freeTextOption);
 
           @if ($any(freeTextOptionValue).length > 0) {
+            @if (freeTextTitle()) {
+              <p title>{{ freeTextTitle() }}</p>
+            }
+
             <li
               (click)="toggleOptionByIndex(-1)"
               class="option"
@@ -3843,9 +3866,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                 {{ freeTextOptionValue }}
               }
             </li>
+
+            @if (freeTextTitle() && filteredOptions().length > 0) {
+              <sh-divider />
+            }
           }
         }
 
+        @if (optionTitle() && filteredOptions().length > 0) {
+          <p title>{{ optionTitle() }}</p>
+        }
+
         @for (option of filteredOptions(); track $index) {
           <li
             (click)="toggleOptionByIndex($index)"