@zajsf/bootstrap4
Version:
Angular JSON Schema Form builder using Bootstrap 4 UI
227 lines (219 loc) • 12.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewEncapsulation, Input, Injectable, NgModule } from '@angular/core';
import * as i1 from '@zajsf/core';
import { JsonSchemaFormModule, WidgetLibraryModule, JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService, Framework } from '@zajsf/core';
import * as i1$1 from '@zajsf/cssframework';
import { CssFramework, CssFrameworkModule } from '@zajsf/cssframework';
import { CommonModule } from '@angular/common';
/**
* Bootstrap 4 framework for Angular JSON Schema Form.
*
*/
class Bootstrap4FrameworkComponent {
constructor(changeDetector, jsf) {
this.changeDetector = changeDetector;
this.jsf = jsf;
this.frameworkInitialized = false;
this.formControl = null;
this.debugOutput = '';
this.debug = '';
this.parentArray = null;
this.isOrderable = false;
}
ngOnInit() {
}
ngOnChanges() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Bootstrap4FrameworkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: Bootstrap4FrameworkComponent, selector: "bootstrap-4-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, usesOnChanges: true, ngImport: i0, template: `
<div>
<css-framework [layoutNode]="layoutNode"
[layoutIndex]="layoutIndex"
[dataIndex]="dataIndex">
</css-framework>
</div>
`, isInline: true, styles: [":host ::ng-deep .list-group-item .form-control-feedback{top:40px}:host ::ng-deep .checkbox,:host ::ng-deep .radio{margin-top:0;margin-bottom:0}:host ::ng-deep .checkbox-inline,:host ::ng-deep .checkbox-inline+.checkbox-inline,:host ::ng-deep .checkbox-inline+.radio-inline,:host ::ng-deep .radio-inline,:host ::ng-deep .radio-inline+.radio-inline,:host ::ng-deep .radio-inline+.checkbox-inline{margin-left:0;margin-right:10px}:host ::ng-deep .checkbox-inline:last-child,:host ::ng-deep .radio-inline:last-child{margin-right:0}:host ::ng-deep .ng-invalid.ng-touched{border:1px solid #f44336}.input-group .form-control:first-child,.input-group-text:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:last-child>.btn-group:not(:last-child)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}.input-group-text:first-child{border-right:0}.input-group .form-control:last-child,.input-group-text:last-child,.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:first-child>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-text:last-child{border-left:0}.input-group .form-control:not(:first-child):not(:last-child),.input-group-text:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}\n"], dependencies: [{ kind: "component", type: i1$1.CssFrameworkComponent, selector: "css-framework", inputs: ["layoutNode", "layoutIndex", "dataIndex", "widgetStyles"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Bootstrap4FrameworkComponent, decorators: [{
type: Component,
args: [{ selector: 'bootstrap-4-framework', template: `
<div>
<css-framework [layoutNode]="layoutNode"
[layoutIndex]="layoutIndex"
[dataIndex]="dataIndex">
</css-framework>
</div>
`, encapsulation: ViewEncapsulation.None, styles: [":host ::ng-deep .list-group-item .form-control-feedback{top:40px}:host ::ng-deep .checkbox,:host ::ng-deep .radio{margin-top:0;margin-bottom:0}:host ::ng-deep .checkbox-inline,:host ::ng-deep .checkbox-inline+.checkbox-inline,:host ::ng-deep .checkbox-inline+.radio-inline,:host ::ng-deep .radio-inline,:host ::ng-deep .radio-inline+.radio-inline,:host ::ng-deep .radio-inline+.checkbox-inline{margin-left:0;margin-right:10px}:host ::ng-deep .checkbox-inline:last-child,:host ::ng-deep .radio-inline:last-child{margin-right:0}:host ::ng-deep .ng-invalid.ng-touched{border:1px solid #f44336}.input-group .form-control:first-child,.input-group-text:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:last-child>.btn-group:not(:last-child)>.btn{border-top-right-radius:0;border-bottom-right-radius:0}.input-group-text:first-child{border-right:0}.input-group .form-control:last-child,.input-group-text:last-child,.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:first-child>.btn-group:not(:first-child)>.btn{border-top-left-radius:0;border-bottom-left-radius:0}.input-group-text:last-child{border-left:0}.input-group .form-control:not(:first-child):not(:last-child),.input-group-text:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
type: Input
}], layoutIndex: [{
type: Input
}], dataIndex: [{
type: Input
}] } });
const cssFrameworkCfgBootstrap4 = {
"name": "bootstrap-4",
"text": "Bootstrap 4",
"scripts": [
"//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js",
"//cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
],
"stylesheets": [
"//cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
],
"widgetstyles": {
"__themes__": [
{ "name": "bootstrap4_default", "text": "Bootstrap4 default" }
],
"$ref": {
"fieldHtmlClass": "btn float-right btn-info"
},
"__array_item_nonref__": {
"htmlClass": "list-group-item"
},
"__form_group__": {
"htmlClass": "form-group"
},
"__control_label__": {
"labelHtmlClass": "control-label"
},
"__active__": {
"activeClass": "active"
},
"__required_asterisk__": "text-danger",
"__screen_reader__": "sr-only",
"__remove_item__": "close float-right",
"__help_block__": "help-block",
"__field_addon_left__": "input-group-text input-group-prepend",
"__field_addon_right__": "input-group-text input-group-append",
"alt-date": {},
"alt-datetime": {},
"__array__": {
"htmlClass": "list-group"
},
"array": {},
"authfieldset": {},
"advancedfieldset": {},
"button": {
"fieldHtmlClass": "btn btn-sm btn-primary"
},
"checkbox": { "fieldHtmlClass": "checkbox" },
"checkboxes": {
"fieldHtmlClass": "checkbox"
},
"checkboxbuttons": {
"fieldHtmlClass": "sr-only",
"htmlClass": "btn-group",
"itemLabelHtmlClass": "btn"
},
"checkboxes-inline": {
"htmlClass": "checkbox",
"itemLabelHtmlClass": "checkbox-inline"
},
"date": {},
"datetime-local": {},
"fieldset": {},
"integer": {},
"number": {},
"optionfieldset": {},
"password": {},
"radiobuttons": {
"fieldHtmlClass": "sr-only",
"htmlClass": "btn-group",
"itemLabelHtmlClass": "btn"
},
"radio": { "fieldHtmlClass": "radio" },
"radios": {
"fieldHtmlClass": "radio"
},
"radios-inline": {
"htmlClass": "radio",
"itemLabelHtmlClass": "radio-inline"
},
"range": {},
"section": {},
"selectfieldset": {},
"select": {},
"submit": {
"fieldHtmlClass": "btn btn-primary"
},
"text": {},
"tabs": {
"labelHtmlClass": "nav nav-tabs",
"htmlClass": "tab-content",
"fieldHtmlClass": "tab-pane"
},
"tabarray": {
"labelHtmlClass": "nav nav-tabs",
"htmlClass": "tab-content",
"fieldHtmlClass": "tab-pane"
},
"textarea": {},
"default": {
"fieldHtmlClass": "form-control"
}
}
};
// Bootstrap 4 Framework
// https://github.com/ng-bootstrap/ng-bootstrap
class Bootstrap4Framework extends CssFramework {
constructor(cssFWService) {
super(cssFrameworkCfgBootstrap4, cssFWService);
this.cssFWService = cssFWService;
this.framework = Bootstrap4FrameworkComponent;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Bootstrap4Framework, deps: [{ token: i1$1.CssframeworkService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Bootstrap4Framework }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Bootstrap4Framework, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i1$1.CssframeworkService }] });
class Bootstrap4FrameworkModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Bootstrap4FrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.3", ngImport: i0, type: Bootstrap4FrameworkModule, declarations: [Bootstrap4FrameworkComponent], imports: [JsonSchemaFormModule,
CommonModule,
WidgetLibraryModule,
CssFrameworkModule], exports: [JsonSchemaFormModule,
Bootstrap4FrameworkComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Bootstrap4FrameworkModule, providers: [
JsonSchemaFormService,
FrameworkLibraryService,
WidgetLibraryService,
{ provide: Framework, useClass: Bootstrap4Framework, multi: true },
], imports: [JsonSchemaFormModule,
CommonModule,
WidgetLibraryModule,
CssFrameworkModule, JsonSchemaFormModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: Bootstrap4FrameworkModule, decorators: [{
type: NgModule,
args: [{
imports: [
JsonSchemaFormModule,
CommonModule,
WidgetLibraryModule,
CssFrameworkModule
],
declarations: [
Bootstrap4FrameworkComponent,
],
exports: [
JsonSchemaFormModule,
Bootstrap4FrameworkComponent,
],
providers: [
JsonSchemaFormService,
FrameworkLibraryService,
WidgetLibraryService,
{ provide: Framework, useClass: Bootstrap4Framework, multi: true },
]
}]
}] });
/*
* Public API Surface of @zajsf/bootstrap4
*/
/**
* Generated bundle index. Do not edit.
*/
export { Bootstrap4Framework, Bootstrap4FrameworkComponent, Bootstrap4FrameworkModule };
//# sourceMappingURL=zajsf-bootstrap4.mjs.map