ngx-surveys
Version:
Angular 18+ survey / form builder
37 lines • 8.87 kB
JavaScript
import { Component, Input, EventEmitter, Output } from '@angular/core';
import { FormItem } from '../form-item';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/button-toggle";
import * as i3 from "@angular/material/form-field";
export class FormItemSegments extends FormItem {
constructor() {
super(...arguments);
this.hasOptions = true;
}
}
export class FormItemSegmentsComponent {
constructor() {
this.editable = true;
this.changes = new EventEmitter();
}
ngOnInit() {
}
onSelectionChange(value) {
this.item.value = value;
this.changes.emit(this.item);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemSegmentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FormItemSegmentsComponent, selector: "ammo-form-item-segments", inputs: { item: "item", editable: "editable" }, outputs: { changes: "changes" }, ngImport: i0, template: "<div class=\"form-group\">\n <mat-label *ngIf=\"item.label\">{{item.label}}</mat-label>\n <mat-button-toggle-group\n aria-label=\"type of credits\"\n [ngClass]=\"{'has-error':item.errors && item.errors.length}\"\n value=\"{{item.value}}\">\n <mat-button-toggle\n *ngFor=\"let segment of item.segments\"\n [disabled]=\"!editable\"\n (click)=\"editable ? onSelectionChange(segment.optionValue) : false\"\n [value]=\"segment.value\"\n [checked]=\"segment.optionValue===item.value\"\n >{{segment.label}}\n </mat-button-toggle>\n </mat-button-toggle-group>\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</div>\n", styles: [".mat-button-toggle-group{display:flex}.mat-button-toggle{flex:1}.mat-button-toggle.btn-primary{color:#fff}.mat-button-toggle.mat-button-toggle-disabled.btn-primary{background-color:#00f}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormItemSegmentsComponent, decorators: [{
type: Component,
args: [{ selector: 'ammo-form-item-segments', template: "<div class=\"form-group\">\n <mat-label *ngIf=\"item.label\">{{item.label}}</mat-label>\n <mat-button-toggle-group\n aria-label=\"type of credits\"\n [ngClass]=\"{'has-error':item.errors && item.errors.length}\"\n value=\"{{item.value}}\">\n <mat-button-toggle\n *ngFor=\"let segment of item.segments\"\n [disabled]=\"!editable\"\n (click)=\"editable ? onSelectionChange(segment.optionValue) : false\"\n [value]=\"segment.value\"\n [checked]=\"segment.optionValue===item.value\"\n >{{segment.label}}\n </mat-button-toggle>\n </mat-button-toggle-group>\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</div>\n", styles: [".mat-button-toggle-group{display:flex}.mat-button-toggle{flex:1}.mat-button-toggle.btn-primary{color:#fff}.mat-button-toggle.mat-button-toggle-disabled.btn-primary{background-color:#00f}\n"] }]
}], ctorParameters: () => [], propDecorators: { item: [{
type: Input
}], editable: [{
type: Input
}], changes: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS1pdGVtLXNlZ21lbnRzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zdXJ2ZXlzL3NyYy9saWIvZm9ybS1pdGVtL2Zvcm0taXRlbS1zZWdtZW50cy9mb3JtLWl0ZW0tc2VnbWVudHMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXN1cnZleXMvc3JjL2xpYi9mb3JtLWl0ZW0vZm9ybS1pdGVtLXNlZ21lbnRzL2Zvcm0taXRlbS1zZWdtZW50cy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxZQUFZLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBRSxRQUFRLEVBQXNDLE1BQU0sY0FBYyxDQUFDOzs7OztBQUU1RSxNQUFNLE9BQU8sZ0JBQWlCLFNBQVEsUUFBUTtJQUE5Qzs7UUFHSSxlQUFVLEdBQVUsSUFBSSxDQUFDO0lBQzdCLENBQUM7Q0FBQTtBQU9ELE1BQU0sT0FBTyx5QkFBeUI7SUFNbEM7UUFIUyxhQUFRLEdBQVUsSUFBSSxDQUFDO1FBQ3RCLFlBQU8sR0FBRyxJQUFJLFlBQVksRUFBb0IsQ0FBQztJQUV6QyxDQUFDO0lBRWpCLFFBQVE7SUFFUixDQUFDO0lBRUQsaUJBQWlCLENBQUMsS0FBSztRQUNuQixJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssR0FBQyxLQUFLLENBQUM7UUFDdEIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ2pDLENBQUM7K0dBZlEseUJBQXlCO21HQUF6Qix5QkFBeUIsZ0pDZHRDLGk3QkFvQkE7OzRGRE5hLHlCQUF5QjtrQkFMckMsU0FBUzsrQkFDRSx5QkFBeUI7d0RBTXhCLElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNJLE9BQU87c0JBQWhCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIEV2ZW50RW1pdHRlciwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb3JtSXRlbSwgRm9ybUl0ZW1PcHRpb25JdGVtLCBGb3JtSXRlbVdpZGdldCB9IGZyb20gJy4uL2Zvcm0taXRlbSc7XG5cbmV4cG9ydCBjbGFzcyBGb3JtSXRlbVNlZ21lbnRzIGV4dGVuZHMgRm9ybUl0ZW0ge1xuICAgIHNlZ21lbnRzOiBGb3JtSXRlbU9wdGlvbkl0ZW1bXTtcbiAgICB2YWx1ZTogc3RyaW5nO1xuICAgIGhhc09wdGlvbnM6IGJvb2xlYW49dHJ1ZTtcbn1cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYW1tby1mb3JtLWl0ZW0tc2VnbWVudHMnLFxuICB0ZW1wbGF0ZVVybDogJy4vZm9ybS1pdGVtLXNlZ21lbnRzLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZm9ybS1pdGVtLXNlZ21lbnRzLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRm9ybUl0ZW1TZWdtZW50c0NvbXBvbmVudCBpbXBsZW1lbnRzIEZvcm1JdGVtV2lkZ2V0LCBPbkluaXQge1xuXG4gICAgQElucHV0KCkgaXRlbTogRm9ybUl0ZW1TZWdtZW50cztcbiAgICBASW5wdXQoKSBlZGl0YWJsZTogYm9vbGVhbj10cnVlO1xuICAgIEBPdXRwdXQoKSBjaGFuZ2VzID0gbmV3IEV2ZW50RW1pdHRlcjxGb3JtSXRlbVNlZ21lbnRzPigpO1xuXG4gICAgY29uc3RydWN0b3IoKSB7IH1cblxuICAgIG5nT25Jbml0KCkge1xuXG4gICAgfVxuXG4gICAgb25TZWxlY3Rpb25DaGFuZ2UodmFsdWUpe1xuICAgICAgICB0aGlzLml0ZW0udmFsdWU9dmFsdWU7XG4gICAgICAgIHRoaXMuY2hhbmdlcy5lbWl0KHRoaXMuaXRlbSk7XG4gICAgfVxuXG59XG4iLCI8ZGl2IGNsYXNzPVwiZm9ybS1ncm91cFwiPlxuICAgIDxtYXQtbGFiZWwgKm5nSWY9XCJpdGVtLmxhYmVsXCI+e3tpdGVtLmxhYmVsfX08L21hdC1sYWJlbD5cbiAgICA8bWF0LWJ1dHRvbi10b2dnbGUtZ3JvdXBcbiAgICAgICAgYXJpYS1sYWJlbD1cInR5cGUgb2YgY3JlZGl0c1wiXG4gICAgICAgIFtuZ0NsYXNzXT1cInsnaGFzLWVycm9yJzppdGVtLmVycm9ycyAmJiBpdGVtLmVycm9ycy5sZW5ndGh9XCJcbiAgICAgICAgdmFsdWU9XCJ7e2l0ZW0udmFsdWV9fVwiPlxuICAgICAgICA8bWF0LWJ1dHRvbi10b2dnbGVcbiAgICAgICAgICAgICpuZ0Zvcj1cImxldCBzZWdtZW50IG9mIGl0ZW0uc2VnbWVudHNcIlxuICAgICAgICAgICAgW2Rpc2FibGVkXT1cIiFlZGl0YWJsZVwiXG4gICAgICAgICAgICAoY2xpY2spPVwiZWRpdGFibGUgPyBvblNlbGVjdGlvbkNoYW5nZShzZWdtZW50Lm9wdGlvblZhbHVlKSA6IGZhbHNlXCJcbiAgICAgICAgICAgIFt2YWx1ZV09XCJzZWdtZW50LnZhbHVlXCJcbiAgICAgICAgICAgIFtjaGVja2VkXT1cInNlZ21lbnQub3B0aW9uVmFsdWU9PT1pdGVtLnZhbHVlXCJcbiAgICAgICAgICAgID57e3NlZ21lbnQubGFiZWx9fVxuICAgICAgICA8L21hdC1idXR0b24tdG9nZ2xlPlxuICAgIDwvbWF0LWJ1dHRvbi10b2dnbGUtZ3JvdXA+XG4gICAgPG1hdC1lcnJvciAqbmdJZj1cIml0ZW0uZXJyb3JzICYmIGl0ZW0uZXJyb3JzLmxlbmd0aFwiPlxuICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgZXJyb3Igb2YgaXRlbS5lcnJvcnNcIj57e2Vycm9yLm1lc3NhZ2V9fTwvZGl2PlxuICAgIDwvbWF0LWVycm9yPlxuICAgIDxtYXQtaGludCBhbGlnbj1cInN0YXJ0XCIgKm5nSWY9XCIhKGl0ZW0uZXJyb3JzICYmIGl0ZW0uZXJyb3JzLmxlbmd0aClcIj48c3Ryb25nPnt7aXRlbS5oaW50fX08L3N0cm9uZz4gPC9tYXQtaGludD5cbjwvZGl2PlxuIl19