intelica-library-ui 0.1.102 → 0.1.104

package/fesm2022/intelica-library-ui.mjs

@@ -31,6 +31,8 @@ import * as i3$2 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import { Dialog } from 'primeng/dialog';
 import * as echarts from 'echarts';
+import * as i2$2 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
 import * as i1$3 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as XLSX from 'xlsx';
@@ -2751,6 +2753,13 @@ class TemplateMenuComponent {
         if (!event)
             return;
         const target = event.target;
+        // clases que fuerzan el cierre del popover
+        const forceCloseClasses = ["closePopoverNow", "closeTemplateMenu"];
+        // Si se da clic en una clase que debe cerrar sí o sí
+        if (forceCloseClasses.some(className => target.closest(`.${className}`))) {
+            this.closePopover();
+            return;
+        }
         const allowedClasses = [
             "prSelect",
             "p-select-option-selected",
@@ -2828,6 +2837,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ["document:click", ["$event"]]
             }] } });
 
+class MultiSelectComponent {
+    /**
+     * @description Id
+     * @default	""
+     * @type {string}
+     */
+    id = "";
+    /**
+     * @description Opciones.
+     * @example	[{value: string, text: string}]
+     * @type {any[]}
+     */
+    options = [];
+    /**
+     * @description Label name.
+     * @default	"text"
+     * @type {{value: string, label: string}[]}
+     */
+    optionLabel = "text";
+    /**
+     * @description Value name.
+     * @default	"value"
+     * @type {{value: string, label: string}[]}
+     */
+    optionValue = "value";
+    /**
+     * @description Placeholder
+     * @default	"Select an item"
+     * @type {string}
+     */
+    placeholder = "Select an item";
+    /**
+     * @description Show filter textbox
+     * @default	false
+     * @type {boolean}
+     */
+    showFilter = false;
+    /**
+     * @description Show All Checkbox
+     * @default	false
+     * @type {boolean}
+     */
+    showAll = false;
+    /**
+     * @description All | Todo
+     * @default	"All"
+     * @type {string}
+     */
+    allText = "All";
+    /**
+     * @description Number	of selected labels to show
+     * @default	3
+     * @type {number}
+     */
+    maxSelectedLabels = 3;
+    /**
+     * @description Append To
+     * @default	""
+     * @type {string}
+     */
+    appendTo = "";
+    /**
+     * @description Panel Style Class
+     * @default	""
+     * @type {string}
+     */
+    panelStyleClass = "prMultiselect";
+    /**
+     * @description Change event
+     * @emits {string[]}
+     * @type {EventEmitter<string[]>}
+     */
+    onChangeEvent = new EventEmitter();
+    checked = false;
+    selectedOptions = [];
+    toggleAllSelection(event) {
+        this.selectedOptions = event.checked ? this.options.map(option => option.value) : [];
+        this.emitChangeEvent();
+    }
+    onChangeSelect(event) {
+        console.log("onChange -> ", event);
+        this.checked = this.selectedOptions.length === this.options.length;
+        this.emitChangeEvent();
+    }
+    emitChangeEvent() {
+        this.onChangeEvent.emit(this.selectedOptions);
+    }
+    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" }, 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>\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>\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: [{
+                type: Input
+            }], optionLabel: [{
+                type: Input
+            }], optionValue: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], showFilter: [{
+                type: Input
+            }], showAll: [{
+                type: Input
+            }], allText: [{
+                type: Input
+            }], maxSelectedLabels: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], panelStyleClass: [{
+                type: Input
+            }], onChangeEvent: [{
+                type: Output,
+                args: ["onChange"]
+            }] } });
+
 class SkeletonService {
     isLoading = signal(false);
     hide() {
@@ -6130,5 +6259,5 @@ const IntelicaTheme = definePreset(Aura, {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionDirective, ActionsMenuComponent, ButtonSplitComponent, Color, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DynamicInputValidation, EchartComponent, EchartService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, FormatAmountPipe, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaTheme, ItemSplitDirective, LanguageService, ModalDialogComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, ProfileService, RecordPerPageComponent, RefreshTokenInterceptor, RowResumenComponent, SearchComponent, SharedService, SkeletonComponent, SkeletonService, SkeletonTableComponent, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TemplateMenuComponent, TermGuard, TermPipe, TermService, TruncatePipe, decryptData, encryptData, getColor };
+export { ActionDirective, ActionsMenuComponent, ButtonSplitComponent, Color, ColumnComponent, ColumnGroupComponent, CompareByField, ConfigService, CookieAttributesGeneral, DynamicInputValidation, EchartComponent, EchartService, EmailInputValidation, ErrorInterceptor, FeatureFlagService, FormatAmountPipe, GlobalFeatureFlagService, GlobalTermService, HtmlToExcelService, InitializeConfigService, InputValidation, IntelicaTheme, ItemSplitDirective, LanguageService, ModalDialogComponent, MultiSelectComponent, OrderConstants, PaginatorComponent, Patterns, PopoverComponent, ProfileService, RecordPerPageComponent, RefreshTokenInterceptor, RowResumenComponent, SearchComponent, SharedService, SkeletonComponent, SkeletonService, SkeletonTableComponent, SortingComponent, SpinnerComponent, SpinnerService, SweetAlertService, TableComponent, TemplateMenuComponent, TermGuard, TermPipe, TermService, TruncatePipe, decryptData, encryptData, getColor };
 //# sourceMappingURL=intelica-library-ui.mjs.map