intelica-library-ui 0.1.119 → 0.1.120

package/fesm2022/intelica-library-ui.mjs

@@ -2901,24 +2901,55 @@ class MultiSelectComponent {
     onChangeEvent = new EventEmitter();
     checked = false;
     selectedOptions = [];
+    onChange = () => { };
+    onTouched = () => { };
     toggleAllSelection(event) {
         this.selectedOptions = event.checked ? this.options.map(option => option.value) : [];
         this.emitChangeEvent();
+        this.onChange(this.selectedOptions);
+        this.onTouched();
     }
     onChangeSelect(event) {
         console.log("onChange -> ", event);
         this.checked = this.selectedOptions.length === this.options.length;
         this.emitChangeEvent();
+        this.onChange(this.selectedOptions);
+        this.onTouched();
     }
     emitChangeEvent() {
         this.onChangeEvent.emit(this.selectedOptions);
     }
+    writeValue(value) {
+        this.selectedOptions = value || [];
+        this.checked = this.selectedOptions.length === this.options.length;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Aquí puedes manejar el estado disabled si es necesario
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: MultiSelectComponent, isStandalone: true, selector: "intelica-multi-select", inputs: { id: "id", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", placeholder: "placeholder", showFilter: "showFilter", showAll: "showAll", allText: "allText", maxSelectedLabels: "maxSelectedLabels", appendTo: "appendTo", panelStyleClass: "panelStyleClass", virtualScroll: "virtualScroll", selectedItemsLabel: "selectedItemsLabel" }, outputs: { onChangeEvent: "onChange" }, ngImport: i0, template: "<p-multiSelect\r\n\tclass=\"prMultiselect\"\r\n\t[options]=\"options\"\r\n\t[(ngModel)]=\"selectedOptions\"\r\n\t[optionLabel]=\"optionLabel\"\r\n\t[optionValue]=\"optionValue\"\r\n\t[placeholder]=\"placeholder\"\r\n\t[maxSelectedLabels]=\"maxSelectedLabels\"\r\n\t[filter]=\"showFilter\"\r\n\t[showToggleAll]=\"false\"\r\n\t(onChange)=\"onChangeSelect($event)\"\r\n\t[appendTo]=\"appendTo\"\r\n\t[panelStyleClass]=\"panelStyleClass\"\r\n\t[virtualScroll]=\"virtualScroll\"\r\n\t[virtualScrollOptions]=\"{ itemSize: 25, scrollHeight: '200px' }\"\r\n\tselectedItemsLabel=\"{0} {{ selectedItemsLabel }}\"\r\n>\r\n\t@if(showAll){\r\n\t<ng-template #header>\r\n\t\t<div class=\"prMultiselect__all\">\r\n\t\t\t<label [for]=\"id + '-all'\">\r\n\t\t\t\t<p-checkbox [inputId]=\"id + '-all'\" [binary]=\"true\" [(ngModel)]=\"checked\" (onChange)=\"toggleAllSelection($event)\"></p-checkbox>\r\n\t\t\t\t{{ allText }}\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</ng-template>\r\n\t}\r\n</p-multiSelect>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: MultiSelectComponent, isStandalone: true, selector: "intelica-multi-select", inputs: { id: "id", options: "options", optionLabel: "optionLabel", optionValue: "optionValue", placeholder: "placeholder", showFilter: "showFilter", showAll: "showAll", allText: "allText", maxSelectedLabels: "maxSelectedLabels", appendTo: "appendTo", panelStyleClass: "panelStyleClass", virtualScroll: "virtualScroll", selectedItemsLabel: "selectedItemsLabel" }, outputs: { onChangeEvent: "onChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MultiSelectComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<p-multiSelect\r\n\tclass=\"prMultiselect\"\r\n\t[options]=\"options\"\r\n\t[(ngModel)]=\"selectedOptions\"\r\n\t[optionLabel]=\"optionLabel\"\r\n\t[optionValue]=\"optionValue\"\r\n\t[placeholder]=\"placeholder\"\r\n\t[maxSelectedLabels]=\"maxSelectedLabels\"\r\n\t[filter]=\"showFilter\"\r\n\t[showToggleAll]=\"false\"\r\n\t(onChange)=\"onChangeSelect($event)\"\r\n\t[appendTo]=\"appendTo\"\r\n\t[panelStyleClass]=\"panelStyleClass\"\r\n\t[virtualScroll]=\"virtualScroll\"\r\n\t[virtualScrollOptions]=\"{ itemSize: 25, scrollHeight: '200px' }\"\r\n\tselectedItemsLabel=\"{0} {{ selectedItemsLabel }}\"\r\n>\r\n\t@if(showAll){\r\n\t<ng-template #header>\r\n\t\t<div class=\"prMultiselect__all\">\r\n\t\t\t<label [for]=\"id + '-all'\">\r\n\t\t\t\t<p-checkbox [inputId]=\"id + '-all'\" [binary]=\"true\" [(ngModel)]=\"checked\" (onChange)=\"toggleAllSelection($event)\"></p-checkbox>\r\n\t\t\t\t{{ allText }}\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</ng-template>\r\n\t}\r\n</p-multiSelect>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i5.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: "intelica-multi-select", imports: [FormsModule, MultiSelectModule, CheckboxModule], template: "<p-multiSelect\r\n\tclass=\"prMultiselect\"\r\n\t[options]=\"options\"\r\n\t[(ngModel)]=\"selectedOptions\"\r\n\t[optionLabel]=\"optionLabel\"\r\n\t[optionValue]=\"optionValue\"\r\n\t[placeholder]=\"placeholder\"\r\n\t[maxSelectedLabels]=\"maxSelectedLabels\"\r\n\t[filter]=\"showFilter\"\r\n\t[showToggleAll]=\"false\"\r\n\t(onChange)=\"onChangeSelect($event)\"\r\n\t[appendTo]=\"appendTo\"\r\n\t[panelStyleClass]=\"panelStyleClass\"\r\n\t[virtualScroll]=\"virtualScroll\"\r\n\t[virtualScrollOptions]=\"{ itemSize: 25, scrollHeight: '200px' }\"\r\n\tselectedItemsLabel=\"{0} {{ selectedItemsLabel }}\"\r\n>\r\n\t@if(showAll){\r\n\t<ng-template #header>\r\n\t\t<div class=\"prMultiselect__all\">\r\n\t\t\t<label [for]=\"id + '-all'\">\r\n\t\t\t\t<p-checkbox [inputId]=\"id + '-all'\" [binary]=\"true\" [(ngModel)]=\"checked\" (onChange)=\"toggleAllSelection($event)\"></p-checkbox>\r\n\t\t\t\t{{ allText }}\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</ng-template>\r\n\t}\r\n</p-multiSelect>\r\n" }]
+            args: [{ selector: "intelica-multi-select", imports: [FormsModule, MultiSelectModule, CheckboxModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MultiSelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<p-multiSelect\r\n\tclass=\"prMultiselect\"\r\n\t[options]=\"options\"\r\n\t[(ngModel)]=\"selectedOptions\"\r\n\t[optionLabel]=\"optionLabel\"\r\n\t[optionValue]=\"optionValue\"\r\n\t[placeholder]=\"placeholder\"\r\n\t[maxSelectedLabels]=\"maxSelectedLabels\"\r\n\t[filter]=\"showFilter\"\r\n\t[showToggleAll]=\"false\"\r\n\t(onChange)=\"onChangeSelect($event)\"\r\n\t[appendTo]=\"appendTo\"\r\n\t[panelStyleClass]=\"panelStyleClass\"\r\n\t[virtualScroll]=\"virtualScroll\"\r\n\t[virtualScrollOptions]=\"{ itemSize: 25, scrollHeight: '200px' }\"\r\n\tselectedItemsLabel=\"{0} {{ selectedItemsLabel }}\"\r\n>\r\n\t@if(showAll){\r\n\t<ng-template #header>\r\n\t\t<div class=\"prMultiselect__all\">\r\n\t\t\t<label [for]=\"id + '-all'\">\r\n\t\t\t\t<p-checkbox [inputId]=\"id + '-all'\" [binary]=\"true\" [(ngModel)]=\"checked\" (onChange)=\"toggleAllSelection($event)\"></p-checkbox>\r\n\t\t\t\t{{ allText }}\r\n\t\t\t</label>\r\n\t\t</div>\r\n\t</ng-template>\r\n\t}\r\n</p-multiSelect>\r\n" }]
         }], propDecorators: { id: [{
                 type: Input
             }], options: [{