ng-prime-tools
Version:
An advanced PrimeNG table for Angular
57 lines • 11.7 kB
JavaScript
import { Component, Input } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "primeng/multiselect";
export class PTMultiSelectComponent {
ngOnInit() {
this.setupControl();
}
setupControl() {
let control = this.formGroup.get(this.formField.name);
if (!control) {
control = new FormControl(this.formField.value || []);
this.formGroup.addControl(this.formField.name, control);
}
const validators = this.getValidators();
control.setValidators(validators);
// Manage the disabled state using form control
setTimeout(() => {
if (this.formField.disabled !== undefined) {
if (this.formField.disabled) {
control.disable({ emitEvent: false });
}
else {
control.enable({ emitEvent: false });
}
}
control.updateValueAndValidity({ emitEvent: false });
});
}
getValidators() {
const validators = [];
if (this.formField.required) {
validators.push(Validators.required);
}
return validators;
}
getErrorMessage() {
const control = this.formGroup.get(this.formField.name);
if (control?.hasError('required')) {
return this.formField.errorText || `${this.formField.label} is required`;
}
return '';
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: { formGroup: "formGroup", formField: "formField" }, ngImport: i0, template: "<div\n [formGroup]=\"formGroup\"\n class=\"form-field\"\n [ngStyle]=\"{ width: formField.width || '100%' }\"\n *ngIf=\"!formField.hidden\"\n>\n <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n <p-multiSelect\n [formControlName]=\"formField.name\"\n [options]=\"formField.options\"\n [placeholder]=\"formField.placeholder || 'Select options'\"\n optionLabel=\"label\"\n ></p-multiSelect>\n <div\n *ngIf=\"\n formGroup.get(formField.name)?.invalid &&\n formGroup.get(formField.name)?.touched\n \"\n >\n <small class=\"p-error\">{{ getErrorMessage() }}</small>\n </div>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: PTMultiSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'pt-multi-select', template: "<div\n [formGroup]=\"formGroup\"\n class=\"form-field\"\n [ngStyle]=\"{ width: formField.width || '100%' }\"\n *ngIf=\"!formField.hidden\"\n>\n <label *ngIf=\"formField.label\">{{ formField.label }}</label>\n <p-multiSelect\n [formControlName]=\"formField.name\"\n [options]=\"formField.options\"\n [placeholder]=\"formField.placeholder || 'Select options'\"\n optionLabel=\"label\"\n ></p-multiSelect>\n <div\n *ngIf=\"\n formGroup.get(formField.name)?.invalid &&\n formGroup.get(formField.name)?.touched\n \"\n >\n <small class=\"p-error\">{{ getErrorMessage() }}</small>\n </div>\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
}], propDecorators: { formGroup: [{
type: Input
}], formField: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHQtbXVsdGktc2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLXByaW1lLXRvb2xzL3NyYy9saWIvcHQtbXVsdGktc2VsZWN0L3B0LW11bHRpLXNlbGVjdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1wcmltZS10b29scy9zcmMvbGliL3B0LW11bHRpLXNlbGVjdC9wdC1tdWx0aS1zZWxlY3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDekQsT0FBTyxFQUFhLFdBQVcsRUFBRSxVQUFVLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7QUFRcEUsTUFBTSxPQUFPLHNCQUFzQjtJQUlqQyxRQUFRO1FBQ04sSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRCxZQUFZO1FBQ1YsSUFBSSxPQUFPLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQWdCLENBQUM7UUFFckUsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ2IsT0FBTyxHQUFHLElBQUksV0FBVyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxJQUFJLEVBQUUsQ0FBQyxDQUFDO1lBQ3RELElBQUksQ0FBQyxTQUFTLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLE9BQU8sQ0FBQyxDQUFDO1FBQzFELENBQUM7UUFFRCxNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDeEMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUVsQywrQ0FBK0M7UUFDL0MsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLEtBQUssU0FBUyxFQUFFLENBQUM7Z0JBQzFDLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLEVBQUUsQ0FBQztvQkFDNUIsT0FBTyxDQUFDLE9BQU8sQ0FBQyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO2dCQUN4QyxDQUFDO3FCQUFNLENBQUM7b0JBQ04sT0FBTyxDQUFDLE1BQU0sQ0FBQyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO2dCQUN2QyxDQUFDO1lBQ0gsQ0FBQztZQUNELE9BQU8sQ0FBQyxzQkFBc0IsQ0FBQyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO1FBQ3ZELENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVPLGFBQWE7UUFDbkIsTUFBTSxVQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ3RCLElBQUksSUFBSSxDQUFDLFNBQVMsQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUM1QixVQUFVLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN2QyxDQUFDO1FBQ0QsT0FBTyxVQUFVLENBQUM7SUFDcEIsQ0FBQztJQUVELGVBQWU7UUFDYixNQUFNLE9BQU8sR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3hELElBQUksT0FBTyxFQUFFLFFBQVEsQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDO1lBQ2xDLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQyxTQUFTLElBQUksR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssY0FBYyxDQUFDO1FBQzNFLENBQUM7UUFDRCxPQUFPLEVBQUUsQ0FBQztJQUNaLENBQUM7K0dBOUNVLHNCQUFzQjttR0FBdEIsc0JBQXNCLG1IQ1RuQywybkJBc0JBOzs0RkRiYSxzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0UsaUJBQWlCOzhCQUtsQixTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEZvcm1Hcm91cCwgRm9ybUNvbnRyb2wsIFZhbGlkYXRvcnMgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBGb3JtTXVsdGlTZWxlY3RGaWVsZCB9IGZyb20gJy4uL21vZGVscy9mb3JtLW11bHRpLXNlbGVjdC5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3B0LW11bHRpLXNlbGVjdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9wdC1tdWx0aS1zZWxlY3QuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9wdC1tdWx0aS1zZWxlY3QuY29tcG9uZW50LmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBQVE11bHRpU2VsZWN0Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgZm9ybUdyb3VwITogRm9ybUdyb3VwO1xuICBASW5wdXQoKSBmb3JtRmllbGQhOiBGb3JtTXVsdGlTZWxlY3RGaWVsZDtcblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLnNldHVwQ29udHJvbCgpO1xuICB9XG5cbiAgc2V0dXBDb250cm9sKCkge1xuICAgIGxldCBjb250cm9sID0gdGhpcy5mb3JtR3JvdXAuZ2V0KHRoaXMuZm9ybUZpZWxkLm5hbWUpIGFzIEZvcm1Db250cm9sO1xuXG4gICAgaWYgKCFjb250cm9sKSB7XG4gICAgICBjb250cm9sID0gbmV3IEZvcm1Db250cm9sKHRoaXMuZm9ybUZpZWxkLnZhbHVlIHx8IFtdKTtcbiAgICAgIHRoaXMuZm9ybUdyb3VwLmFkZENvbnRyb2wodGhpcy5mb3JtRmllbGQubmFtZSwgY29udHJvbCk7XG4gICAgfVxuXG4gICAgY29uc3QgdmFsaWRhdG9ycyA9IHRoaXMuZ2V0VmFsaWRhdG9ycygpO1xuICAgIGNvbnRyb2wuc2V0VmFsaWRhdG9ycyh2YWxpZGF0b3JzKTtcblxuICAgIC8vIE1hbmFnZSB0aGUgZGlzYWJsZWQgc3RhdGUgdXNpbmcgZm9ybSBjb250cm9sXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICBpZiAodGhpcy5mb3JtRmllbGQuZGlzYWJsZWQgIT09IHVuZGVmaW5lZCkge1xuICAgICAgICBpZiAodGhpcy5mb3JtRmllbGQuZGlzYWJsZWQpIHtcbiAgICAgICAgICBjb250cm9sLmRpc2FibGUoeyBlbWl0RXZlbnQ6IGZhbHNlIH0pO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIGNvbnRyb2wuZW5hYmxlKHsgZW1pdEV2ZW50OiBmYWxzZSB9KTtcbiAgICAgICAgfVxuICAgICAgfVxuICAgICAgY29udHJvbC51cGRhdGVWYWx1ZUFuZFZhbGlkaXR5KHsgZW1pdEV2ZW50OiBmYWxzZSB9KTtcbiAgICB9KTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0VmFsaWRhdG9ycygpIHtcbiAgICBjb25zdCB2YWxpZGF0b3JzID0gW107XG4gICAgaWYgKHRoaXMuZm9ybUZpZWxkLnJlcXVpcmVkKSB7XG4gICAgICB2YWxpZGF0b3JzLnB1c2goVmFsaWRhdG9ycy5yZXF1aXJlZCk7XG4gICAgfVxuICAgIHJldHVybiB2YWxpZGF0b3JzO1xuICB9XG5cbiAgZ2V0RXJyb3JNZXNzYWdlKCk6IHN0cmluZyB7XG4gICAgY29uc3QgY29udHJvbCA9IHRoaXMuZm9ybUdyb3VwLmdldCh0aGlzLmZvcm1GaWVsZC5uYW1lKTtcbiAgICBpZiAoY29udHJvbD8uaGFzRXJyb3IoJ3JlcXVpcmVkJykpIHtcbiAgICAgIHJldHVybiB0aGlzLmZvcm1GaWVsZC5lcnJvclRleHQgfHwgYCR7dGhpcy5mb3JtRmllbGQubGFiZWx9IGlzIHJlcXVpcmVkYDtcbiAgICB9XG4gICAgcmV0dXJuICcnO1xuICB9XG59XG4iLCI8ZGl2XG4gIFtmb3JtR3JvdXBdPVwiZm9ybUdyb3VwXCJcbiAgY2xhc3M9XCJmb3JtLWZpZWxkXCJcbiAgW25nU3R5bGVdPVwieyB3aWR0aDogZm9ybUZpZWxkLndpZHRoIHx8ICcxMDAlJyB9XCJcbiAgKm5nSWY9XCIhZm9ybUZpZWxkLmhpZGRlblwiXG4+XG4gIDxsYWJlbCAqbmdJZj1cImZvcm1GaWVsZC5sYWJlbFwiPnt7IGZvcm1GaWVsZC5sYWJlbCB9fTwvbGFiZWw+XG4gIDxwLW11bHRpU2VsZWN0XG4gICAgW2Zvcm1Db250cm9sTmFtZV09XCJmb3JtRmllbGQubmFtZVwiXG4gICAgW29wdGlvbnNdPVwiZm9ybUZpZWxkLm9wdGlvbnNcIlxuICAgIFtwbGFjZWhvbGRlcl09XCJmb3JtRmllbGQucGxhY2Vob2xkZXIgfHwgJ1NlbGVjdCBvcHRpb25zJ1wiXG4gICAgb3B0aW9uTGFiZWw9XCJsYWJlbFwiXG4gID48L3AtbXVsdGlTZWxlY3Q+XG4gIDxkaXZcbiAgICAqbmdJZj1cIlxuICAgICAgZm9ybUdyb3VwLmdldChmb3JtRmllbGQubmFtZSk/LmludmFsaWQgJiZcbiAgICAgIGZvcm1Hcm91cC5nZXQoZm9ybUZpZWxkLm5hbWUpPy50b3VjaGVkXG4gICAgXCJcbiAgPlxuICAgIDxzbWFsbCBjbGFzcz1cInAtZXJyb3JcIj57eyBnZXRFcnJvck1lc3NhZ2UoKSB9fTwvc21hbGw+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=