ngx-surveys
Version:
Angular 18+ survey / form builder
45 lines • 8.85 kB
JavaScript
import { Component, Input, EventEmitter, Output } from '@angular/core';
import { SurveyErrorStateMatcher } from '../error-state.matcher';
import { FormItem } from '../form-item';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/form-field";
import * as i3 from "@angular/material/select";
import * as i4 from "@angular/material/core";
export class FormItemSelect extends FormItem {
constructor() {
super(...arguments);
this.hasOptions = true;
}
}
export class FormItemSelectComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
this.matcher = new SurveyErrorStateMatcher();
}
ngOnInit() {
}
onSelectionChange(value) {
console.log(value);
this.item.value = value;
this.changes.emit(this.item);
}
isOptionSelected(option) {
const item = this.item;
return item.value === option.optionValue;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemSelectComponent, selector: "ammo-form-item-select", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, ngImport: i0, template: "<mat-form-field appearance=\"fill\">\n <mat-label>{{item.label}}</mat-label>\n <mat-select\n [value]=\"item.value\"\n [disabled]=\"!editable\"\n (valueChange)=\"onSelectionChange($event)\"\n [errorStateMatcher]=\"matcher\"\n [required]=\"item.required\"\n >\n <mat-option *ngFor=\"let option of item.items\" [value]=\"option.optionValue\">\n {{option.label}}\n </mat-option>\n </mat-select>\n</mat-form-field>\n\n<mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n</mat-error>\n<mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n", styles: [".mat-mdc-form-field{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-select', template: "<mat-form-field appearance=\"fill\">\n <mat-label>{{item.label}}</mat-label>\n <mat-select\n [value]=\"item.value\"\n [disabled]=\"!editable\"\n (valueChange)=\"onSelectionChange($event)\"\n [errorStateMatcher]=\"matcher\"\n [required]=\"item.required\"\n >\n <mat-option *ngFor=\"let option of item.items\" [value]=\"option.optionValue\">\n {{option.label}}\n </mat-option>\n </mat-select>\n</mat-form-field>\n\n<mat-error *ngIf=\"item.errors && item.errors.length\">\n <div *ngFor=\"let error of item.errors\">{{error.message}}</div>\n</mat-error>\n<mat-hint align=\"start\" *ngIf=\"!(item.errors && item.errors.length)\"><strong>{{item.hint}}</strong> </mat-hint>\n", styles: [".mat-mdc-form-field{display:block}\n"] }]
}], ctorParameters: () => [], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1pdGVtLXNlbGVjdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc3VydmV5cy9zcmMvbGliL2Zvcm0taXRlbS9mb3JtLWl0ZW0tc2VsZWN0L2Zvcm0taXRlbS1zZWxlY3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXN1cnZleXMvc3JjL2xpYi9mb3JtLWl0ZW0vZm9ybS1pdGVtLXNlbGVjdC9mb3JtLWl0ZW0tc2VsZWN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDL0UsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDakUsT0FBTyxFQUFFLFFBQVEsRUFBc0MsTUFBTSxjQUFjLENBQUM7Ozs7OztBQUU1RSxNQUFNLE9BQU8sY0FBZSxTQUFRLFFBQVE7SUFBNUM7O1FBR0ksZUFBVSxHQUFVLElBQUksQ0FBQztJQUM3QixDQUFDO0NBQUE7QUFPRCxNQUFNLE9BQU8sdUJBQXVCO0lBT2hDO1FBSlMsYUFBUSxHQUFVLElBQUksQ0FBQztRQUN0QixZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQWtCLENBQUM7UUFDdkQsWUFBTyxHQUFHLElBQUksdUJBQXVCLEVBQUUsQ0FBQztJQUV4QixDQUFDO0lBRWpCLFFBQVE7SUFFUixDQUFDO0lBRUQsaUJBQWlCLENBQUMsS0FBSztRQUNuQixPQUFPLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ25CLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxHQUFDLEtBQUssQ0FBQztRQUN0QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVELGdCQUFnQixDQUFDLE1BQU07UUFDbkIsTUFBTSxJQUFJLEdBQUMsSUFBSSxDQUFDLElBQUksQ0FBQztRQUNyQixPQUFPLElBQUksQ0FBQyxLQUFLLEtBQUcsTUFBTSxDQUFDLFdBQVcsQ0FBQztJQUMzQyxDQUFDOytHQXRCUSx1QkFBdUI7bUdBQXZCLHVCQUF1Qiw4SUNmcEMsNnJCQW1CQTs7NEZESmEsdUJBQXVCO2tCQUxuQyxTQUFTOytCQUNFLHVCQUF1Qjt3REFNdEIsSUFBSTtzQkFBWixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0ksT0FBTztzQkFBaEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgRXZlbnRFbWl0dGVyLCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1cnZleUVycm9yU3RhdGVNYXRjaGVyIH0gZnJvbSAnLi4vZXJyb3Itc3RhdGUubWF0Y2hlcic7XG5pbXBvcnQgeyBGb3JtSXRlbSwgRm9ybUl0ZW1PcHRpb25JdGVtLCBGb3JtSXRlbVdpZGdldCB9IGZyb20gJy4uL2Zvcm0taXRlbSc7XG5cbmV4cG9ydCBjbGFzcyBGb3JtSXRlbVNlbGVjdCBleHRlbmRzIEZvcm1JdGVtIHtcbiAgICBpdGVtczogRm9ybUl0ZW1PcHRpb25JdGVtW107XG4gICAgdmFsdWU6IHN0cmluZztcbiAgICBoYXNPcHRpb25zOiBib29sZWFuPXRydWU7XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FtbW8tZm9ybS1pdGVtLXNlbGVjdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9mb3JtLWl0ZW0tc2VsZWN0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZm9ybS1pdGVtLXNlbGVjdC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIEZvcm1JdGVtU2VsZWN0Q29tcG9uZW50IGltcGxlbWVudHMgRm9ybUl0ZW1XaWRnZXQsIE9uSW5pdCB7XG5cbiAgICBASW5wdXQoKSBpdGVtOiBGb3JtSXRlbVNlbGVjdDtcbiAgICBASW5wdXQoKSBlZGl0YWJsZTogYm9vbGVhbj10cnVlO1xuICAgIEBPdXRwdXQoKSBjaGFuZ2VzID0gbmV3IEV2ZW50RW1pdHRlcjxGb3JtSXRlbVNlbGVjdD4oKTtcbiAgICBtYXRjaGVyID0gbmV3IFN1cnZleUVycm9yU3RhdGVNYXRjaGVyKCk7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gICAgbmdPbkluaXQoKSB7XG5cbiAgICB9XG5cbiAgICBvblNlbGVjdGlvbkNoYW5nZSh2YWx1ZSl7XG4gICAgICAgIGNvbnNvbGUubG9nKHZhbHVlKTtcbiAgICAgICAgdGhpcy5pdGVtLnZhbHVlPXZhbHVlO1xuICAgICAgICB0aGlzLmNoYW5nZXMuZW1pdCh0aGlzLml0ZW0pO1xuICAgIH1cblxuICAgIGlzT3B0aW9uU2VsZWN0ZWQob3B0aW9uKXtcbiAgICAgICAgY29uc3QgaXRlbT10aGlzLml0ZW07XG4gICAgICAgIHJldHVybiBpdGVtLnZhbHVlPT09b3B0aW9uLm9wdGlvblZhbHVlO1xuICAgIH1cbn1cbiIsIjxtYXQtZm9ybS1maWVsZCBhcHBlYXJhbmNlPVwiZmlsbFwiPlxuICA8bWF0LWxhYmVsPnt7aXRlbS5sYWJlbH19PC9tYXQtbGFiZWw+XG4gIDxtYXQtc2VsZWN0XG4gICAgW3ZhbHVlXT1cIml0ZW0udmFsdWVcIlxuICAgIFtkaXNhYmxlZF09XCIhZWRpdGFibGVcIlxuICAgICh2YWx1ZUNoYW5nZSk9XCJvblNlbGVjdGlvbkNoYW5nZSgkZXZlbnQpXCJcbiAgICBbZXJyb3JTdGF0ZU1hdGNoZXJdPVwibWF0Y2hlclwiXG4gICAgW3JlcXVpcmVkXT1cIml0ZW0ucmVxdWlyZWRcIlxuICA+XG4gICAgPG1hdC1vcHRpb24gKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBpdGVtLml0ZW1zXCIgW3ZhbHVlXT1cIm9wdGlvbi5vcHRpb25WYWx1ZVwiPlxuICAgICAge3tvcHRpb24ubGFiZWx9fVxuICAgIDwvbWF0LW9wdGlvbj5cbiAgPC9tYXQtc2VsZWN0PlxuPC9tYXQtZm9ybS1maWVsZD5cblxuPG1hdC1lcnJvciAqbmdJZj1cIml0ZW0uZXJyb3JzICYmIGl0ZW0uZXJyb3JzLmxlbmd0aFwiPlxuICA8ZGl2ICpuZ0Zvcj1cImxldCBlcnJvciBvZiBpdGVtLmVycm9yc1wiPnt7ZXJyb3IubWVzc2FnZX19PC9kaXY+XG48L21hdC1lcnJvcj5cbjxtYXQtaGludCBhbGlnbj1cInN0YXJ0XCIgKm5nSWY9XCIhKGl0ZW0uZXJyb3JzICYmIGl0ZW0uZXJyb3JzLmxlbmd0aClcIj48c3Ryb25nPnt7aXRlbS5oaW50fX08L3N0cm9uZz4gPC9tYXQtaGludD5cbiJdfQ==