bitfront-library
Version:
Angular CLI project with components and classes used by other Angular projects of the BIT foundation.
240 lines • 16.3 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.BitDropDownMultipleComponent = exports.CUSTOM_DROPDOWN_MULTIPLE_CONTROL_VALUE_ACCESSOR = void 0;
var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms");
var router_1 = require("@angular/router");
var ayuda_service_1 = require("../../service/ayuda.service");
var session_shared_service_1 = require("../../service/session-shared.service");
var bit_dropdown_general_component_1 = require("./bit-dropdown-general.component");
var i0 = require("@angular/core");
var i1 = require("@angular/router");
var i2 = require("../../service/session-shared.service");
var i3 = require("../../service/ayuda.service");
var i4 = require("@angular/common");
var i5 = require("primeng/multiselect");
var i6 = require("@angular/forms");
var i7 = require("../bit-control-messages.component");
function BitDropDownMultipleComponent_div_0_ng_container_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementContainer(0);
} }
function BitDropDownMultipleComponent_div_0_div_7_Template(rf, ctx) { if (rf & 1) {
var _r7 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "div", 6);
i0.ɵɵelementStart(1, "span");
i0.ɵɵtext(2);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(3, "a", 7);
i0.ɵɵlistener("click", function BitDropDownMultipleComponent_div_0_div_7_Template_a_click_3_listener($event) { i0.ɵɵrestoreView(_r7); var item_r5 = ctx.$implicit; var ctx_r6 = i0.ɵɵnextContext(2); return ctx_r6.deleteSelectedItem($event, item_r5); });
i0.ɵɵelement(4, "i", 8);
i0.ɵɵelementEnd();
i0.ɵɵelementEnd();
} if (rf & 2) {
var item_r5 = ctx.$implicit;
var ctx_r4 = i0.ɵɵnextContext(2);
i0.ɵɵadvance(2);
i0.ɵɵtextInterpolate(ctx_r4.labelSelectedItem(item_r5));
i0.ɵɵadvance(1);
i0.ɵɵpropertyInterpolate1("title", "", ctx_r4.title, "}");
} }
function BitDropDownMultipleComponent_div_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div", 2);
i0.ɵɵelementStart(1, "div");
i0.ɵɵtemplate(2, BitDropDownMultipleComponent_div_0_ng_container_2_Template, 1, 0, "ng-container", 3);
i0.ɵɵelementEnd();
i0.ɵɵelementStart(3, "div");
i0.ɵɵelementStart(4, "label");
i0.ɵɵtext(5, "\u00A0");
i0.ɵɵelementEnd();
i0.ɵɵelementStart(6, "div", 4);
i0.ɵɵtemplate(7, BitDropDownMultipleComponent_div_0_div_7_Template, 5, 2, "div", 5);
i0.ɵɵelementEnd();
i0.ɵɵelementEnd();
i0.ɵɵelementEnd();
} if (rf & 2) {
var ctx_r0 = i0.ɵɵnextContext();
var _r1 = i0.ɵɵreference(2);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngTemplateOutlet", _r1);
i0.ɵɵadvance(5);
i0.ɵɵproperty("ngForOf", ctx_r0.value);
} }
function BitDropDownMultipleComponent_ng_template_1_label_0_span_3_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "span", 13);
} }
function BitDropDownMultipleComponent_ng_template_1_label_0_i_5_Template(rf, ctx) { if (rf & 1) {
var _r14 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "i", 14);
i0.ɵɵlistener("click", function BitDropDownMultipleComponent_ng_template_1_label_0_i_5_Template_i_click_0_listener() { i0.ɵɵrestoreView(_r14); var ctx_r13 = i0.ɵɵnextContext(3); return ctx_r13.showAyuda(); });
i0.ɵɵelementEnd();
} }
function BitDropDownMultipleComponent_ng_template_1_label_0_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "label");
i0.ɵɵprojection(1);
i0.ɵɵtext(2, "\u00A0");
i0.ɵɵtemplate(3, BitDropDownMultipleComponent_ng_template_1_label_0_span_3_Template, 1, 0, "span", 11);
i0.ɵɵtext(4, "\u00A0\u00A0 ");
i0.ɵɵtemplate(5, BitDropDownMultipleComponent_ng_template_1_label_0_i_5_Template, 1, 0, "i", 12);
i0.ɵɵelementEnd();
} if (rf & 2) {
var ctx_r8 = i0.ɵɵnextContext(2);
i0.ɵɵadvance(3);
i0.ɵɵproperty("ngIf", ctx_r8.obligatorio);
i0.ɵɵadvance(2);
i0.ɵɵproperty("ngIf", ctx_r8.ayuda);
} }
function BitDropDownMultipleComponent_ng_template_1_p_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "p", 15);
i0.ɵɵtext(1);
i0.ɵɵelementEnd();
} if (rf & 2) {
var ctx_r9 = i0.ɵɵnextContext(2);
i0.ɵɵadvance(1);
i0.ɵɵtextInterpolate(ctx_r9.value_lectura);
} }
function BitDropDownMultipleComponent_ng_template_1_div_2_p_multiSelect_1_Template(rf, ctx) { if (rf & 1) {
var _r18 = i0.ɵɵgetCurrentView();
i0.ɵɵelementStart(0, "p-multiSelect", 18);
i0.ɵɵlistener("ngModelChange", function BitDropDownMultipleComponent_ng_template_1_div_2_p_multiSelect_1_Template_p_multiSelect_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r18); var ctx_r17 = i0.ɵɵnextContext(3); return ctx_r17.value = $event; })("onFocus", function BitDropDownMultipleComponent_ng_template_1_div_2_p_multiSelect_1_Template_p_multiSelect_onFocus_0_listener() { i0.ɵɵrestoreView(_r18); var ctx_r19 = i0.ɵɵnextContext(3); return ctx_r19.onFocus(); })("onBlur", function BitDropDownMultipleComponent_ng_template_1_div_2_p_multiSelect_1_Template_p_multiSelect_onBlur_0_listener() { i0.ɵɵrestoreView(_r18); var ctx_r20 = i0.ɵɵnextContext(3); return ctx_r20.onBlur(); });
i0.ɵɵelementEnd();
} if (rf & 2) {
var ctx_r15 = i0.ɵɵnextContext(3);
i0.ɵɵpropertyInterpolate("id", ctx_r15.id);
i0.ɵɵproperty("ngModel", ctx_r15.value)("options", ctx_r15.listaOpciones)("defaultLabel", ctx_r15.emptyText)("maxSelectedLabels", ctx_r15.maxSelectedLabels);
} }
function BitDropDownMultipleComponent_ng_template_1_div_2_control_messages_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelement(0, "control-messages", 19);
} if (rf & 2) {
var ctx_r16 = i0.ɵɵnextContext(3);
i0.ɵɵproperty("control", ctx_r16.control)("field", ctx_r16.id);
} }
function BitDropDownMultipleComponent_ng_template_1_div_2_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵelementStart(0, "div");
i0.ɵɵtemplate(1, BitDropDownMultipleComponent_ng_template_1_div_2_p_multiSelect_1_Template, 1, 5, "p-multiSelect", 16);
i0.ɵɵtemplate(2, BitDropDownMultipleComponent_ng_template_1_div_2_control_messages_2_Template, 1, 2, "control-messages", 17);
i0.ɵɵelementEnd();
} if (rf & 2) {
var ctx_r10 = i0.ɵɵnextContext(2);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", !ctx_r10.readOnly);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx_r10.control != null);
} }
function BitDropDownMultipleComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵtemplate(0, BitDropDownMultipleComponent_ng_template_1_label_0_Template, 6, 2, "label", 9);
i0.ɵɵtemplate(1, BitDropDownMultipleComponent_ng_template_1_p_1_Template, 2, 1, "p", 10);
i0.ɵɵtemplate(2, BitDropDownMultipleComponent_ng_template_1_div_2_Template, 3, 2, "div", 9);
} if (rf & 2) {
var ctx_r2 = i0.ɵɵnextContext();
i0.ɵɵproperty("ngIf", !ctx_r2.hideLabel);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", ctx_r2.readOnly);
i0.ɵɵadvance(1);
i0.ɵɵproperty("ngIf", !ctx_r2.readOnly);
} }
var _c0 = ["*"];
exports.CUSTOM_DROPDOWN_MULTIPLE_CONTROL_VALUE_ACCESSOR = {
provide: forms_1.NG_VALUE_ACCESSOR,
useExisting: core_1.forwardRef(function () { return BitDropDownMultipleComponent; }),
multi: true
};
/**
* Clase que utiliza un custom componente para select múltiple de elementos
* Utiliza la interfaz ControlValueAccessor
* <bit-select [domain]="'DOMAIN_TIPO_LOG'" id="tipolog" [control]="formControl""> Tipus d'operació</bit-select>
*
* @input data: array de objetos a mostrar en el select. Puede ser null, en cuyo caso domain no puede ser null
* @input domain: nombre del dominio que contiene los datos y que nos resolverá la página cuando cargue el componente. Puede ser null, en cuyo caso data no puede ser null
* @input id: identificador del componente select
**/
var BitDropDownMultipleComponent = /** @class */ (function (_super) {
__extends(BitDropDownMultipleComponent, _super);
// Si se pueden seleccionar muchos elementos, que el label de los elementos seleccionados no
// aparezca dentro del select, y hacerlo como una lista fuera del select.
function BitDropDownMultipleComponent(router, sessionShared, ayudaService, changeDetectorRef) {
var _this = _super.call(this, router, sessionShared, ayudaService, changeDetectorRef) || this;
_this.router = router;
_this.sessionShared = sessionShared;
_this.ayudaService = ayudaService;
_this.changeDetectorRef = changeDetectorRef;
_this.emptyText = "Cap";
_this.maxSelectedLabels = 3;
_this.showSeparateSelectedLabels = false; // indica si se muestran los elementos seleccionados en una columna separada
return _this;
}
BitDropDownMultipleComponent.prototype.ngOnChanges = function (changes) {
for (var propName in changes) {
var changedProp = changes[propName];
if (propName === "data") {
this.listaOpciones = changedProp.currentValue ? changedProp.currentValue.slice() : [];
this.postRetrieveData();
}
else if (propName === "dominio") {
this.domain = changedProp.currentValue;
// TODO: recargar dominio por si es distinto?
}
}
};
// custom processing after retrieving data array from service
BitDropDownMultipleComponent.prototype.postRetrieveData = function () { };
Object.defineProperty(BitDropDownMultipleComponent.prototype, "value_lectura", {
get: function () {
var val = this.value;
var labels = this.listaOpciones && this.listaOpciones.filter(function (d) { return val && val.indexOf(d.value) > -1; }).map(function (d) { return d.label; });
return labels ? labels.join(", ") : null;
},
enumerable: false,
configurable: true
});
BitDropDownMultipleComponent.prototype.labelSelectedItem = function (id) {
return this.listaOpciones.find(function (c) { return c.value == id; }).label;
};
BitDropDownMultipleComponent.prototype.deleteSelectedItem = function (event, item) {
event.preventDefault();
var index = this.value.indexOf(item);
this.value.splice(index, 1);
// se clona el array. Si no, el texto "{0} elementos seleccionados" del select de Prime no se actualiza.
this.value = this.value.slice(0);
};
BitDropDownMultipleComponent.ɵfac = function BitDropDownMultipleComponent_Factory(t) { return new (t || BitDropDownMultipleComponent)(i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.SessionSharedService), i0.ɵɵdirectiveInject(i3.AyudaService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
BitDropDownMultipleComponent.ɵcmp = i0.ɵɵdefineComponent({ type: BitDropDownMultipleComponent, selectors: [["bit-dropdown-multiple"]], inputs: { emptyText: "emptyText", maxSelectedLabels: "maxSelectedLabels", showSeparateSelectedLabels: "showSeparateSelectedLabels", title: "title" }, features: [i0.ɵɵProvidersFeature([exports.CUSTOM_DROPDOWN_MULTIPLE_CONTROL_VALUE_ACCESSOR]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 3, vars: 2, consts: [["class", "row separador", 4, "ngIf", "ngIfElse"], ["normalBitSelectMultiple", ""], [1, "row", "separador"], [4, "ngTemplateOutlet"], [1, "multiselect-labels"], ["class", "label label-primary multiselect-labels-lg", 4, "ngFor", "ngForOf"], [1, "label", "label-primary", "multiselect-labels-lg"], [3, "title", "click"], [1, "fa", "fa-times"], [4, "ngIf"], ["class", "lectura", 4, "ngIf"], ["class", "fa fa-asterisk", 4, "ngIf"], ["class", "btn-ayuda fa fa-question", 3, "click", 4, "ngIf"], [1, "fa", "fa-asterisk"], [1, "btn-ayuda", "fa", "fa-question", 3, "click"], [1, "lectura"], ["selectedItemsLabel", "{0} elements seleccionats", 3, "id", "ngModel", "options", "defaultLabel", "maxSelectedLabels", "ngModelChange", "onFocus", "onBlur", 4, "ngIf"], [3, "control", "field", 4, "ngIf"], ["selectedItemsLabel", "{0} elements seleccionats", 3, "id", "ngModel", "options", "defaultLabel", "maxSelectedLabels", "ngModelChange", "onFocus", "onBlur"], [3, "control", "field"]], template: function BitDropDownMultipleComponent_Template(rf, ctx) { if (rf & 1) {
i0.ɵɵprojectionDef();
i0.ɵɵtemplate(0, BitDropDownMultipleComponent_div_0_Template, 8, 2, "div", 0);
i0.ɵɵtemplate(1, BitDropDownMultipleComponent_ng_template_1_Template, 3, 3, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
} if (rf & 2) {
var _r1 = i0.ɵɵreference(2);
i0.ɵɵproperty("ngIf", ctx.showSeparateSelectedLabels)("ngIfElse", _r1);
} }, directives: [i4.NgIf, i4.NgTemplateOutlet, i4.NgForOf, i5.MultiSelect, i6.NgControlStatus, i6.NgModel, i7.BitControlMessages], encapsulation: 2 });
return BitDropDownMultipleComponent;
}(bit_dropdown_general_component_1.BitDropDownGeneralComponent));
exports.BitDropDownMultipleComponent = BitDropDownMultipleComponent;
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BitDropDownMultipleComponent, [{
type: core_1.Component,
args: [{
selector: "bit-dropdown-multiple",
template: "\n <div class=\"row separador\" *ngIf=\"showSeparateSelectedLabels; else normalBitSelectMultiple\">\n <div> <!-- class=\"col-sm-4\"-->\n <ng-container *ngTemplateOutlet=\"normalBitSelectMultiple\"></ng-container>\n </div>\n <div><!-- elementos seleccionados -->\n <label> </label>\n <div class=\"multiselect-labels\">\n <div class=\"label label-primary multiselect-labels-lg\" *ngFor=\"let item of value\">\n <span>{{labelSelectedItem(item)}}</span>\n <a (click)=\"deleteSelectedItem($event, item)\" title=\"{{title}}}\"> <i class=\"fa fa-times\"></i></a>\n </div>\n </div>\n </div>\n </div>\n <ng-template #normalBitSelectMultiple>\n <label *ngIf=\"!hideLabel\"><ng-content></ng-content> <span *ngIf=\"obligatorio\" class=\"fa fa-asterisk\"></span> \n <i *ngIf=\"ayuda\" (click)=\"showAyuda()\" class=\"btn-ayuda fa fa-question\"></i>\n </label>\n <p *ngIf=\"readOnly\" class=\"lectura\">{{value_lectura}}</p>\n <div *ngIf=\"!readOnly\">\n <p-multiSelect \n *ngIf=\"!readOnly\" \n id=\"{{id}}\" \n [(ngModel)]=\"value\" \n [options]=\"listaOpciones\" \n [defaultLabel]=\"emptyText\" \n [maxSelectedLabels]=\"maxSelectedLabels\"\n selectedItemsLabel=\"{0} elements seleccionats\"\n (onFocus)=\"onFocus()\" \n (onBlur)=\"onBlur()\"> \n </p-multiSelect>\n <control-messages *ngIf=\"control!=null\" [control]=\"control\" [field]=\"id\"></control-messages>\n </div>\n </ng-template>\n ",
providers: [exports.CUSTOM_DROPDOWN_MULTIPLE_CONTROL_VALUE_ACCESSOR]
}]
}], function () { return [{ type: i1.ActivatedRoute }, { type: i2.SessionSharedService }, { type: i3.AyudaService }, { type: i0.ChangeDetectorRef }]; }, { emptyText: [{
type: core_1.Input
}], maxSelectedLabels: [{
type: core_1.Input
}], showSeparateSelectedLabels: [{
type: core_1.Input
}], title: [{
type: core_1.Input
}] }); })();
//# sourceMappingURL=bit-dropdown-multiple.component.js.map