@zajsf/material
Version:
Angular JSON Schema Form builder using Angular Material UI
92 lines • 11.3 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@zajsf/core";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/tabs";
export class MaterialTabsComponent {
constructor(jsf) {
this.jsf = jsf;
this.selectedItem = 0;
this.showAddTab = true;
}
ngOnInit() {
this.options = this.layoutNode.options || {};
this.itemCount = this.layoutNode.items.length - 1;
this.updateControl();
}
select(index) {
if (this.layoutNode.items[index].type === '$ref') {
this.jsf.addItem({
layoutNode: this.layoutNode.items[index],
layoutIndex: this.layoutIndex.concat(index),
dataIndex: this.dataIndex.concat(index)
});
this.updateControl();
}
this.selectedItem = index;
}
updateControl() {
this.itemCount = this.layoutNode.items.length - 1;
const lastItem = this.layoutNode.items[this.layoutNode.items.length - 1];
this.showAddTab = lastItem.type === '$ref' &&
this.itemCount < (lastItem.options.maxItems || 1000);
}
setTabTitle(item, index) {
return this.jsf.setArrayItemTitle(this, item, index);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: MaterialTabsComponent, deps: [{ token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: MaterialTabsComponent, selector: "material-tabs-widget", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, ngImport: i0, template: `
<nav mat-tab-nav-bar [tabPanel]="tabPanel"
[attr.aria-label]="options?.label || options?.title || ''"
[style.width]="'100%'">
<a mat-tab-link *ngFor="let item of layoutNode?.items; let i = index"
[active]="selectedItem === i"
(click)="select(i)">
<span *ngIf="showAddTab || item.type !== '$ref'"
[innerHTML]="setTabTitle(item, i)"></span>
</a>
</nav>
<mat-tab-nav-panel #tabPanel>
<div *ngFor="let layoutItem of layoutNode?.items; let i = index"
[class]="options?.htmlClass || ''">
<select-framework-widget *ngIf="selectedItem === i"
[class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')"
[dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
[layoutIndex]="(layoutIndex || []).concat(i)"
[layoutNode]="layoutItem"></select-framework-widget>
</div>
</mat-tab-nav-panel>
`, isInline: true, styles: ["a{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i1.SelectFrameworkComponent, selector: "select-framework-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: MaterialTabsComponent, decorators: [{
type: Component,
args: [{ selector: 'material-tabs-widget', template: `
<nav mat-tab-nav-bar [tabPanel]="tabPanel"
[attr.aria-label]="options?.label || options?.title || ''"
[style.width]="'100%'">
<a mat-tab-link *ngFor="let item of layoutNode?.items; let i = index"
[active]="selectedItem === i"
(click)="select(i)">
<span *ngIf="showAddTab || item.type !== '$ref'"
[innerHTML]="setTabTitle(item, i)"></span>
</a>
</nav>
<mat-tab-nav-panel #tabPanel>
<div *ngFor="let layoutItem of layoutNode?.items; let i = index"
[class]="options?.htmlClass || ''">
<select-framework-widget *ngIf="selectedItem === i"
[class]="(options?.fieldHtmlClass || '') + ' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')"
[dataIndex]="layoutNode?.dataType === 'array' ? (dataIndex || []).concat(i) : dataIndex"
[layoutIndex]="(layoutIndex || []).concat(i)"
[layoutNode]="layoutItem"></select-framework-widget>
</div>
</mat-tab-nav-panel>
`, styles: ["a{cursor:pointer}\n"] }]
}], ctorParameters: () => [{ type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
type: Input
}], layoutIndex: [{
type: Input
}], dataIndex: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0ZXJpYWwtdGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy96YWpzZi1tYXRlcmlhbC9zcmMvbGliL3dpZGdldHMvbWF0ZXJpYWwtdGFicy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBOEJ6RCxNQUFNLE9BQU8scUJBQXFCO0lBU2hDLFlBQ1UsR0FBMEI7UUFBMUIsUUFBRyxHQUFILEdBQUcsQ0FBdUI7UUFQcEMsaUJBQVksR0FBRyxDQUFDLENBQUM7UUFDakIsZUFBVSxHQUFHLElBQUksQ0FBQztJQU9kLENBQUM7SUFFTCxRQUFRO1FBQ04sSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLE9BQU8sSUFBSSxFQUFFLENBQUM7UUFDN0MsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDO1FBQ2xELElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQsTUFBTSxDQUFDLEtBQUs7UUFDVixJQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDLElBQUksS0FBSyxNQUFNLEVBQUU7WUFDaEQsSUFBSSxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUM7Z0JBQ2YsVUFBVSxFQUFFLElBQUksQ0FBQyxVQUFVLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQztnQkFDeEMsV0FBVyxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQztnQkFDM0MsU0FBUyxFQUFFLElBQUksQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQzthQUN4QyxDQUFDLENBQUM7WUFDSCxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7U0FDdEI7UUFDRCxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztJQUM1QixDQUFDO0lBRUQsYUFBYTtRQUNYLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQztRQUNsRCxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDekUsSUFBSSxDQUFDLFVBQVUsR0FBRyxRQUFRLENBQUMsSUFBSSxLQUFLLE1BQU07WUFDeEMsSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxDQUFDO0lBQ3pELENBQUM7SUFFRCxXQUFXLENBQUMsSUFBUyxFQUFFLEtBQWE7UUFDbEMsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDLGlCQUFpQixDQUFDLElBQUksRUFBRSxJQUFJLEVBQUUsS0FBSyxDQUFDLENBQUM7SUFDdkQsQ0FBQzs4R0F4Q1UscUJBQXFCO2tHQUFyQixxQkFBcUIsc0pBeEJ0Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBcUJYOzsyRkFHWSxxQkFBcUI7a0JBM0JqQyxTQUFTOytCQUVFLHNCQUFzQixZQUN0Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBcUJYOzBGQVFVLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEpzb25TY2hlbWFGb3JtU2VydmljZSB9IGZyb20gJ0B6YWpzZi9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIC8vIHRzbGludDpkaXNhYmxlLW5leHQtbGluZTpjb21wb25lbnQtc2VsZWN0b3JcclxuICBzZWxlY3RvcjogJ21hdGVyaWFsLXRhYnMtd2lkZ2V0JyxcclxuICB0ZW1wbGF0ZTogYFxyXG4gICAgPG5hdiBtYXQtdGFiLW5hdi1iYXIgW3RhYlBhbmVsXT1cInRhYlBhbmVsXCJcclxuICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJvcHRpb25zPy5sYWJlbCB8fCBvcHRpb25zPy50aXRsZSB8fCAnJ1wiXHJcbiAgICAgIFtzdHlsZS53aWR0aF09XCInMTAwJSdcIj5cclxuICAgICAgICA8YSBtYXQtdGFiLWxpbmsgKm5nRm9yPVwibGV0IGl0ZW0gb2YgbGF5b3V0Tm9kZT8uaXRlbXM7IGxldCBpID0gaW5kZXhcIlxyXG4gICAgICAgICAgW2FjdGl2ZV09XCJzZWxlY3RlZEl0ZW0gPT09IGlcIlxyXG4gICAgICAgICAgKGNsaWNrKT1cInNlbGVjdChpKVwiPlxyXG4gICAgICAgICAgPHNwYW4gKm5nSWY9XCJzaG93QWRkVGFiIHx8IGl0ZW0udHlwZSAhPT0gJyRyZWYnXCJcclxuICAgICAgICAgICAgW2lubmVySFRNTF09XCJzZXRUYWJUaXRsZShpdGVtLCBpKVwiPjwvc3Bhbj5cclxuICAgICAgICA8L2E+XHJcbiAgICA8L25hdj5cclxuICAgIDxtYXQtdGFiLW5hdi1wYW5lbCAjdGFiUGFuZWw+XHJcbiAgICAgIDxkaXYgKm5nRm9yPVwibGV0IGxheW91dEl0ZW0gb2YgbGF5b3V0Tm9kZT8uaXRlbXM7IGxldCBpID0gaW5kZXhcIlxyXG4gICAgICAgIFtjbGFzc109XCJvcHRpb25zPy5odG1sQ2xhc3MgfHwgJydcIj5cclxuICAgICAgICA8c2VsZWN0LWZyYW1ld29yay13aWRnZXQgKm5nSWY9XCJzZWxlY3RlZEl0ZW0gPT09IGlcIlxyXG4gICAgICAgICAgW2NsYXNzXT1cIihvcHRpb25zPy5maWVsZEh0bWxDbGFzcyB8fCAnJykgKyAnICcgKyAob3B0aW9ucz8uYWN0aXZlQ2xhc3MgfHwgJycpICsgJyAnICsgKG9wdGlvbnM/LnN0eWxlPy5zZWxlY3RlZCB8fCAnJylcIlxyXG4gICAgICAgICAgW2RhdGFJbmRleF09XCJsYXlvdXROb2RlPy5kYXRhVHlwZSA9PT0gJ2FycmF5JyA/IChkYXRhSW5kZXggfHwgW10pLmNvbmNhdChpKSA6IGRhdGFJbmRleFwiXHJcbiAgICAgICAgICBbbGF5b3V0SW5kZXhdPVwiKGxheW91dEluZGV4IHx8IFtdKS5jb25jYXQoaSlcIlxyXG4gICAgICAgICAgW2xheW91dE5vZGVdPVwibGF5b3V0SXRlbVwiPjwvc2VsZWN0LWZyYW1ld29yay13aWRnZXQ+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgPC9tYXQtdGFiLW5hdi1wYW5lbD5cclxuYCxcclxuICBzdHlsZXM6IFtgIGEgeyBjdXJzb3I6IHBvaW50ZXI7IH0gYF0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBNYXRlcmlhbFRhYnNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIG9wdGlvbnM6IGFueTtcclxuICBpdGVtQ291bnQ6IG51bWJlcjtcclxuICBzZWxlY3RlZEl0ZW0gPSAwO1xyXG4gIHNob3dBZGRUYWIgPSB0cnVlO1xyXG4gIEBJbnB1dCgpIGxheW91dE5vZGU6IGFueTtcclxuICBASW5wdXQoKSBsYXlvdXRJbmRleDogbnVtYmVyW107XHJcbiAgQElucHV0KCkgZGF0YUluZGV4OiBudW1iZXJbXTtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIGpzZjogSnNvblNjaGVtYUZvcm1TZXJ2aWNlXHJcbiAgKSB7IH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgICB0aGlzLm9wdGlvbnMgPSB0aGlzLmxheW91dE5vZGUub3B0aW9ucyB8fCB7fTtcclxuICAgIHRoaXMuaXRlbUNvdW50ID0gdGhpcy5sYXlvdXROb2RlLml0ZW1zLmxlbmd0aCAtIDE7XHJcbiAgICB0aGlzLnVwZGF0ZUNvbnRyb2woKTtcclxuICB9XHJcblxyXG4gIHNlbGVjdChpbmRleCkge1xyXG4gICAgaWYgKHRoaXMubGF5b3V0Tm9kZS5pdGVtc1tpbmRleF0udHlwZSA9PT0gJyRyZWYnKSB7XHJcbiAgICAgIHRoaXMuanNmLmFkZEl0ZW0oe1xyXG4gICAgICAgIGxheW91dE5vZGU6IHRoaXMubGF5b3V0Tm9kZS5pdGVtc1tpbmRleF0sXHJcbiAgICAgICAgbGF5b3V0SW5kZXg6IHRoaXMubGF5b3V0SW5kZXguY29uY2F0KGluZGV4KSxcclxuICAgICAgICBkYXRhSW5kZXg6IHRoaXMuZGF0YUluZGV4LmNvbmNhdChpbmRleClcclxuICAgICAgfSk7XHJcbiAgICAgIHRoaXMudXBkYXRlQ29udHJvbCgpO1xyXG4gICAgfVxyXG4gICAgdGhpcy5zZWxlY3RlZEl0ZW0gPSBpbmRleDtcclxuICB9XHJcblxyXG4gIHVwZGF0ZUNvbnRyb2woKSB7XHJcbiAgICB0aGlzLml0ZW1Db3VudCA9IHRoaXMubGF5b3V0Tm9kZS5pdGVtcy5sZW5ndGggLSAxO1xyXG4gICAgY29uc3QgbGFzdEl0ZW0gPSB0aGlzLmxheW91dE5vZGUuaXRlbXNbdGhpcy5sYXlvdXROb2RlLml0ZW1zLmxlbmd0aCAtIDFdO1xyXG4gICAgdGhpcy5zaG93QWRkVGFiID0gbGFzdEl0ZW0udHlwZSA9PT0gJyRyZWYnICYmXHJcbiAgICAgIHRoaXMuaXRlbUNvdW50IDwgKGxhc3RJdGVtLm9wdGlvbnMubWF4SXRlbXMgfHwgMTAwMCk7XHJcbiAgfVxyXG5cclxuICBzZXRUYWJUaXRsZShpdGVtOiBhbnksIGluZGV4OiBudW1iZXIpOiBzdHJpbmcge1xyXG4gICAgcmV0dXJuIHRoaXMuanNmLnNldEFycmF5SXRlbVRpdGxlKHRoaXMsIGl0ZW0sIGluZGV4KTtcclxuICB9XHJcbn1cclxuIl19