@agorapulse/ui-components 21.0.0 → 21.0.2-beta.1

package/fesm2022/agorapulse-ui-components-select.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, ViewEncapsulation, Component, input, inject, ElementRef, Renderer2, ViewContainerRef, effect, Directive, output, HostListener, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, signal, TemplateRef, computed, viewChild, viewChildren, afterRenderEffect, NgModule } from '@angular/core';
+import { Input, ViewEncapsulation, Component, input, inject, ElementRef, Renderer2, ViewContainerRef, effect, Directive, output, HostListener, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, signal, computed, viewChild, viewChildren, afterRenderEffect, NgModule } from '@angular/core';
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
 import { BadgeComponent } from '@agorapulse/ui-components/badge';
 import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
@@ -7,8 +7,7 @@ import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
 import { AvatarComponent } from '@agorapulse/ui-components/avatar';
 import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
 import { SymbolRegistry, apCheck, apPlus, SymbolComponent } from '@agorapulse/ui-symbol';
-import { Subscription, merge, BehaviorSubject, filter } from 'rxjs';
-import { LoaderComponent } from '@agorapulse/ui-animations';
+import { Subscription, BehaviorSubject, filter } from 'rxjs';
 import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
@@ -36,7 +35,7 @@ class DropdownGroupItemComponent {
         return this.children.every((child) => child.disabled);
     }
     onGroupClick(event) {
-        if (!this.select?.maxSelectedItems) {
+        if (!this.select?.maxSelectedItems()) {
             return; // Let ng-select handle it normally
         }
         event.stopPropagation();
@@ -50,7 +49,7 @@ class DropdownGroupItemComponent {
             }
         }
         else {
-            const remaining = this.select.maxSelectedItems - this.select.itemsList.selectedItems.length;
+            const remaining = this.select.maxSelectedItems() - this.select.itemsList.selectedItems.length;
             const selectableChildren = this.children.filter((child) => !child.disabled && !child.selected);
             for (const child of selectableChildren.slice(0, remaining)) {
                 this.select.select(child);
@@ -95,12 +94,12 @@ class SelectBaseDirective {
     symbolComponentRef;
     labelElement;
     constructor() {
-        this.selectComponent.appendTo = 'body';
-        this.selectComponent.searchable = false;
-        this.selectComponent.clearable = false;
-        this.selectComponent.markFirst = false;
-        this.selectComponent.selectableGroupAsModel = false;
-        this.selectComponent.tabIndex = 0;
+        this.selectComponent.appendTo.set('body');
+        this.selectComponent.searchable.set(false);
+        this.selectComponent.clearable.set(false);
+        this.selectComponent.markFirst.set(false);
+        this.selectComponent.selectableGroupAsModel.set(false);
+        this.selectComponent.tabIndex.set(0);
         this.symbolRegistry.registerSymbols([apCheck, apPlus]);
         this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
         // Handle symbolId changes
@@ -121,10 +120,10 @@ class SelectBaseDirective {
         });
     }
     ngAfterViewInit() {
-        if (!this.selectComponent.optionTemplate) {
+        if (!this.selectComponent.optionTemplate()) {
             throw new Error('optionTemplate is required for apSelect');
         }
-        if (this.selectComponent.groupBy && !this.selectComponent.optgroupTemplate) {
+        if (this.selectComponent.groupBy() && !this.selectComponent.optgroupTemplate()) {
             throw new Error('optgroupTemplate is required for apSelect');
         }
     }
@@ -177,14 +176,17 @@ class SelectMultipleDirective {
     valueContainer = null;
     subs = new Subscription();
     constructor() {
-        this.selectComponent.multiple = true;
-        this.selectComponent.closeOnSelect = false;
-        this.selectComponent.searchable = true; // small hack to not closed the dropdown panel when clear an item in value container
-        this.subs.add(merge(this.selectComponent.addEvent, this.selectComponent.removeEvent, this.selectComponent.clearEvent).subscribe(() => this.updateMaxItemsDisabledState()));
+        this.selectComponent.multiple.set(true);
+        this.selectComponent.closeOnSelect.set(false);
+        this.selectComponent.searchable.set(true); // small hack to not closed the dropdown panel when clear an item in value container
+        const updateMaxItemsDisabledState = () => this.updateMaxItemsDisabledState();
+        this.subs.add(this.selectComponent.addEvent.subscribe(updateMaxItemsDisabledState));
+        this.subs.add(this.selectComponent.removeEvent.subscribe(updateMaxItemsDisabledState));
+        this.subs.add(this.selectComponent.clearEvent.subscribe(updateMaxItemsDisabledState));
         this.subs.add(this.selectComponent.openEvent.subscribe(() => this.pinSelectedAtTop()));
     }
     ngAfterViewInit() {
-        if (!this.selectComponent.multiLabelTemplate) {
+        if (!this.selectComponent.multiLabelTemplate()) {
             throw new Error('multiLabelTemplate is required for apSelectMultiple');
         }
         // Add click handler to toggle dropdown when clicking on the select container
@@ -208,7 +210,7 @@ class SelectMultipleDirective {
         }
         event.preventDefault();
         event.stopPropagation();
-        if (this.selectComponent.isOpen) {
+        if (this.selectComponent.isOpen()) {
             this.selectComponent.close();
         }
         else {
@@ -217,7 +219,7 @@ class SelectMultipleDirective {
     };
     // `.ap-option-pinned` persists for the panel's lifetime — deselecting keeps the option pinned until reopen.
     pinSelectedAtTop() {
-        if (!this.pinnedItemsEnabled() || this.selectComponent.groupBy)
+        if (!this.pinnedItemsEnabled() || this.selectComponent.groupBy())
             return;
         queueMicrotask(() => {
             const panel = document.getElementById(this.selectComponent.dropdownId);
@@ -231,7 +233,7 @@ class SelectMultipleDirective {
         });
     }
     updateMaxItemsDisabledState() {
-        const max = this.selectComponent.maxSelectedItems;
+        const max = this.selectComponent.maxSelectedItems();
         if (!max) {
             return;
         }
@@ -546,15 +548,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
+/** Search input for an ng-select dropdown — place inside its `ng-header-tmp`. */
 class DropdownSearchFormComponent {
     searchPlaceholder = '';
     createNewEnabled = false;
     createText = 'Create';
     select;
     inputSearch;
-    notFoundTpl;
-    loadingTpl;
-    createNewTpl;
     createNew = new EventEmitter();
     searchTermSignal = signal('', ...(ngDevMode ? [{ debugName: "searchTermSignal" }] : /* istanbul ignore next */ []));
     searchTerm$ = new BehaviorSubject('');
@@ -575,12 +575,6 @@ class DropdownSearchFormComponent {
             this.inputSearch.focusInput();
             this.registerKeyboardSubmit();
         }, 100);
-        this.select.notFoundTemplate = this.notFoundTpl;
-        this.select.loadingTextTemplate = this.loadingTpl;
-        // validate the current row on keypress
-        if (this.createNewEnabled) {
-            this.select.footerTemplate = this.createNewTpl;
-        }
     }
     /**
      * Register the keyboard submit event allowing to press enter to select the first item found.
@@ -603,11 +597,11 @@ class DropdownSearchFormComponent {
         this.createNew.emit(this.searchTermSignal());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownSearchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownSearchFormComponent, isStandalone: true, selector: "ap-dropdown-search-form", inputs: { searchPlaceholder: "searchPlaceholder", createNewEnabled: "createNewEnabled", createText: "createText", select: "select" }, outputs: { createNew: "createNew" }, viewQueries: [{ propertyName: "inputSearch", first: true, predicate: InputSearchComponent, descendants: true }, { propertyName: "notFoundTpl", first: true, predicate: ["notFoundTpl"], descendants: true, read: TemplateRef }, { propertyName: "loadingTpl", first: true, predicate: ["loadingTpl"], descendants: true, read: TemplateRef }, { propertyName: "createNewTpl", first: true, predicate: ["createNewTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ap-input-search\n    class=\"dropdown-search-input\"\n    [ngModel]=\"searchTermSignal()\"\n    [placeholder]=\"searchPlaceholder\"\n    (ngModelChange)=\"searchTerm$.next($event)\" />\n\n<ng-template #notFoundTpl>\n    <div class=\"option not-found\">\n        <span>{{ select.notFoundText ? select.notFoundText : 'Not found text' }}</span>\n    </div>\n</ng-template>\n\n<ng-template #loadingTpl>\n    <div class=\"loading-state\">\n        <ap-loader diameter=\"30\" />\n        <span>\n            {{ select.loadingText ? select.loadingText : 'Loading Items' }}\n        </span>\n    </div>\n</ng-template>\n\n<ng-template\n    #createNewTpl\n    let-searchTerm=\"searchTerm\">\n    <button\n        class=\"create-new\"\n        type=\"button\"\n        (click)=\"onCreateNew()\">\n        <ap-symbol\n            symbolId=\"plus\"\n            size=\"sm\" />\n        <span>\n            {{ createText }}\n            @if (searchTerm) {\n                {{ '&quot;' + searchTerm + '&quot;' }}\n            }\n        </span>\n    </button>\n</ng-template>\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownSearchFormComponent, isStandalone: true, selector: "ap-dropdown-search-form", inputs: { searchPlaceholder: "searchPlaceholder", createNewEnabled: "createNewEnabled", createText: "createText", select: "select" }, outputs: { createNew: "createNew" }, viewQueries: [{ propertyName: "inputSearch", first: true, predicate: InputSearchComponent, descendants: true }], ngImport: i0, template: "<ap-input-search\n    class=\"dropdown-search-input\"\n    [ngModel]=\"searchTermSignal()\"\n    [placeholder]=\"searchPlaceholder\"\n    (ngModelChange)=\"searchTerm$.next($event)\" />\n\n@if (createNewEnabled) {\n    <button\n        class=\"create-new\"\n        type=\"button\"\n        (click)=\"onCreateNew()\">\n        <ap-symbol\n            symbolId=\"plus\"\n            size=\"sm\" />\n        <span>\n            {{ createText }}\n            @if (searchTermSignal()) {\n                {{ '&quot;' + searchTermSignal() + '&quot;' }}\n            }\n        </span>\n    </button>\n}\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownSearchFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-dropdown-search-form', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, FormsModule, LoaderComponent, InputSearchComponent], template: "<ap-input-search\n    class=\"dropdown-search-input\"\n    [ngModel]=\"searchTermSignal()\"\n    [placeholder]=\"searchPlaceholder\"\n    (ngModelChange)=\"searchTerm$.next($event)\" />\n\n<ng-template #notFoundTpl>\n    <div class=\"option not-found\">\n        <span>{{ select.notFoundText ? select.notFoundText : 'Not found text' }}</span>\n    </div>\n</ng-template>\n\n<ng-template #loadingTpl>\n    <div class=\"loading-state\">\n        <ap-loader diameter=\"30\" />\n        <span>\n            {{ select.loadingText ? select.loadingText : 'Loading Items' }}\n        </span>\n    </div>\n</ng-template>\n\n<ng-template\n    #createNewTpl\n    let-searchTerm=\"searchTerm\">\n    <button\n        class=\"create-new\"\n        type=\"button\"\n        (click)=\"onCreateNew()\">\n        <ap-symbol\n            symbolId=\"plus\"\n            size=\"sm\" />\n        <span>\n            {{ createText }}\n            @if (searchTerm) {\n                {{ '&quot;' + searchTerm + '&quot;' }}\n            }\n        </span>\n    </button>\n</ng-template>\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'ap-dropdown-search-form', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, FormsModule, InputSearchComponent], template: "<ap-input-search\n    class=\"dropdown-search-input\"\n    [ngModel]=\"searchTermSignal()\"\n    [placeholder]=\"searchPlaceholder\"\n    (ngModelChange)=\"searchTerm$.next($event)\" />\n\n@if (createNewEnabled) {\n    <button\n        class=\"create-new\"\n        type=\"button\"\n        (click)=\"onCreateNew()\">\n        <ap-symbol\n            symbolId=\"plus\"\n            size=\"sm\" />\n        <span>\n            {{ createText }}\n            @if (searchTermSignal()) {\n                {{ '&quot;' + searchTermSignal() + '&quot;' }}\n            }\n        </span>\n    </button>\n}\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchPlaceholder: [{
                 type: Input
             }], createNewEnabled: [{
@@ -622,15 +616,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
             }], inputSearch: [{
                 type: ViewChild,
                 args: [InputSearchComponent]
-            }], notFoundTpl: [{
-                type: ViewChild,
-                args: ['notFoundTpl', { read: TemplateRef }]
-            }], loadingTpl: [{
-                type: ViewChild,
-                args: ['loadingTpl', { read: TemplateRef }]
-            }], createNewTpl: [{
-                type: ViewChild,
-                args: ['createNewTpl', { read: TemplateRef }]
             }], createNew: [{
                 type: Output
             }] } });
@@ -713,11 +698,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
 class SelectSingleDirective {
     selectComponent = inject(NgSelectComponent);
     constructor() {
-        this.selectComponent.multiple = false;
-        this.selectComponent.closeOnSelect = true;
+        this.selectComponent.multiple.set(false);
+        this.selectComponent.closeOnSelect.set(true);
     }
     ngAfterViewInit() {
-        if (!this.selectComponent.labelTemplate) {
+        if (!this.selectComponent.labelTemplate()) {
             throw new Error('labelTemplate is required for apSelectSingle');
         }
     }