ngx-sp-infra 6.0.7 → 6.0.8

package/fesm2022/ngx-sp-infra.mjs

@@ -6391,7 +6391,7 @@ class LibComboboxReworkComponent {
     set value(val) {
         if (val !== this._value) {
             this._value = val;
-            this._onChange(val); // Notifica o FormControl sobre a mudança
+            this._onChange(this.formatReturn(val)); // Notifica o FormControl sobre a mudança
         }
     }
     displayValue() {
@@ -6519,12 +6519,10 @@ class LibComboboxReworkComponent {
             if (this.selectedValues.length === 0)
                 this.selectedValues = null;
             this.value = this.selectedValues;
-            this._onChange(this.selectedValues);
             this.selectionChange.emit(this.selectedValues);
         }
         else {
             this.value = item;
-            this._onChange(item);
             this.selectionChange.emit(item);
             this.closeDropdown();
         }
@@ -6552,26 +6550,22 @@ class LibComboboxReworkComponent {
         const match = this.list?.find((item) => item[this.customValue] === val);
         return match ?? null;
     }
+    /** Formata o valor de retorno com base na configuração de retorno */
+    formatReturn(val) {
+        if (val) {
+            if (this.multiple && Array.isArray(val)) {
+                // Retorna a lista de IDs
+                return val.map(v => v[this.customValue]);
+            }
+            else {
+                // Retorna o ID do item
+                return val[this.customValue];
+            }
+        }
+        return val;
+    }
     // #endregion Seleção
     // #region VALUE_ACCESSOR do Angular
-    // // Método antigo
-    // public writeValue(obj: T | T[] | null): void {
-    //   if (!obj) this.selectedValues = null;
-    //   this._onTouched();
-    //   if (this.multiple && obj) {
-    //     this.selectedValues = Array.isArray(obj) ? [...obj] : [];
-    //     if (this.selectedValues.length === 0) this.selectedValues = null;
-    //     this.value = this.selectedValues;
-    //     this._onChange(this.selectedValues);
-    //     this.selectionChange.emit(this.selectedValues);
-    //   }
-    //   else {
-    //     this.value = obj;
-    //     this._onChange(obj);
-    //     this.selectionChange.emit(obj);
-    //   }
-    //   this._cdr.markForCheck();
-    // }
     writeValue(obj) {
         if (!obj)
             this.selectedValues = null;
@@ -6583,13 +6577,11 @@ class LibComboboxReworkComponent {
             if (this.selectedValues.length === 0)
                 this.selectedValues = null;
             this.value = this.selectedValues;
-            this._onChange(this.selectedValues);
             this.selectionChange.emit(this.selectedValues);
         }
         else {
             const resolved = this.resolveValue(obj);
             this.value = resolved;
-            this._onChange(resolved);
             this.selectionChange.emit(resolved);
         }
         this._cdr.markForCheck();
@@ -6696,7 +6688,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         }
                     ], template: "<div class=\"reusable-combobox input-group\" [class.show]=\"isOpen\" (focusout)=\"onBlurOutside($event)\" >\n  @if (leftButtonTemplate) { <ng-container *ngTemplateOutlet=\"leftButtonTemplate\"></ng-container> }\n\n  <div class=\"dropdown w-100\">\n    <div #toggleButton id=\"toggle-button\" class=\"form-select d-flex align-items-center text-start\" type=\"button\" data-bs-toggle=\"dropdown\"\n      data-bs-auto-close=\"outside\" [attr.aria-expanded]=\"isOpen\" [attr.aria-haspopup]=\"true\" [attr.aria-label]=\"placeholder\" [class.disabled]=\"disabled\"\n      [class.is-invalid]=\"invalid\" (click)=\"toggleDropdown()\" readonly\n      [ngClass]=\"{\n        'rounded-start-0': leftButtonTemplate,\n        'rounded-end-0': rightButtonTemplate,\n      }\" >\n      <span class=\"w-100 overflow-hidden text-truncate\"> {{ displayValue() }} </span>  \n    </div>\n\n    <div class=\"dropdown-menu p-2 w-100\" [class.show]=\"isOpen\" style=\"max-height: 320px; overflow-y: auto;\" >\n      <div class=\"dropdown-search input-group mb-2\">\n        <input class=\"form-control form-control-sm\" type=\"search\" [placeholder]=\"searchPlaceholder\" [formControl]=\"searchControl\" aria-label=\"Pesquisar op\u00E7\u00F5es\" (keyup.enter)=\"filterButtonClick.emit(searchControl.value)\" />\n        <button class=\"btn btn-sm btn-primary\" type=\"button\" (click)=\"filterButtonClick.emit(searchControl.value)\"> <lib-icon iconName=\"lupa\" iconSize=\"medium-small\" /> </button>\n      </div>\n\n      @if (multiple && selectedValues?.length) {\n        <div class=\"d-flex flex-row gap-2 flex-wrap my-2\">\n          <span *ngFor=\"let value of selectedValues; trackBy: trackByFn\" class=\"px-3 badge rounded-pill text-primary bg-primary-subtle\">\n            {{ value[customLabel] }} <lib-icon class=\"glb-cursor-pointer\" iconName=\"fechar\" iconSize=\"small\" (click)=\"select(value)\" />\n          </span>\n        </div>\n      }\n\n      <!-- Se utilizar o filtro interno utiliza a propriedade de lista filteredItems$, caso contr\u00E1rio usa a pr\u00F3pria list pois ela ser\u00E1 filtrada pelo componente pai -->\n      <ng-container *ngIf=\"(innerFilter ? (filteredItems$ | async) : list) as items\">\n        @if (items.length === 0) { <div class=\"py-2 px-3 text-muted small\">{{ noResultsText }}</div> }\n\n        @if (value !== '' && value !== null) {\n          <button type=\"button\" class=\"dropdown-item d-flex align-items-center\" (click)=\"writeValue(null)\">\n            <span class=\"fw-bold\">Limpar {{ multiple ? 'op\u00E7\u00F5es selecionadas' : 'op\u00E7\u00E3o selecionada' }}</span>\n          </button>\n        }\n\n        <button *ngFor=\"let item of items; trackBy: trackByFn\" class=\"dropdown-item d-flex align-items-center\" type=\"button\"\n          (click)=\"select(item)\" [attr.aria-selected]=\"isSelected(item)\" >\n\n          @if (optionTemplate) {\n            <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item, selected: isSelected(item) }\"></ng-container>\n          }\n          @else {\n            <div class=\"w-100 original\">\n              <div class=\"d-flex justify-content-between\">\n                <div>{{ (item[customLabel] ?? item[customValue]) }}</div>\n                <small class=\"text-muted\" *ngIf=\"isSelected(item)\">\u2713</small>\n              </div>\n            </div>\n          }\n        </button>\n      </ng-container>\n    </div>\n  </div>\n\n  @if (rightButtonTemplate) { <ng-container *ngTemplateOutlet=\"rightButtonTemplate\"></ng-container> }\n</div>\n", styles: [".reusable-combobox{position:relative;display:flex;flex-wrap:nowrap;width:100%;max-width:100%}.reusable-combobox #toggle-button{box-sizing:border-box}.reusable-combobox .dropdown-menu{width:100%;box-shadow:0 6px 18px #00000014;border-radius:.5rem}.reusable-combobox .dropdown-item{cursor:pointer;border-radius:6px;transition:all .3s ease}.reusable-combobox .dropdown-item:hover:not(:focus){background-color:#f1f5f9}.reusable-combobox.compact .dropdown-menu{max-height:200px}.bg-primary-subtle{background-color:#d1dfe7!important}::-webkit-scrollbar{width:4px;background:transparent}::-webkit-scrollbar-thumb{background:#bbb;border-radius:16px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { list: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], placeholder: [{
                 type: Input
             }], searchPlaceholder: [{