@ng-formworks/bootstrap5
Version:
Angular ng-formworks - JSON Schema Form builder using Bootstrap 5 UI
236 lines (228 loc) • 13.2 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ChangeDetectorRef, input, ViewEncapsulation, Component, Injectable, NgModule } from '@angular/core';
import { JsonSchemaFormService, JsonSchemaFormModule, WidgetLibraryModule, FrameworkLibraryService, WidgetLibraryService, Framework } from '@ng-formworks/core';
import * as i1 from '@ng-formworks/cssframework';
import { CssFramework, CssframeworkService, CssFrameworkModule } from '@ng-formworks/cssframework';
import { CommonModule } from '@angular/common';
/**
* Bootstrap 5 framework for Angular JSON Schema Form.
*
*/
class Bootstrap5FrameworkComponent {
constructor() {
this.changeDetector = inject(ChangeDetectorRef);
this.jsf = inject(JsonSchemaFormService);
this.frameworkInitialized = false;
this.formControl = null;
this.debugOutput = '';
this.debug = '';
this.parentArray = null;
this.isOrderable = false;
this.layoutNode = input(undefined, ...(ngDevMode ? [{ debugName: "layoutNode" }] : []));
this.layoutIndex = input(undefined, ...(ngDevMode ? [{ debugName: "layoutIndex" }] : []));
this.dataIndex = input(undefined, ...(ngDevMode ? [{ debugName: "dataIndex" }] : []));
}
ngOnInit() {
}
ngOnChanges() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Bootstrap5FrameworkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.6", type: Bootstrap5FrameworkComponent, isStandalone: false, selector: "bootstrap-5-framework", inputs: { layoutNode: { classPropertyName: "layoutNode", publicName: "layoutNode", isSignal: true, isRequired: false, transformFunction: null }, layoutIndex: { classPropertyName: "layoutIndex", publicName: "layoutIndex", isSignal: true, isRequired: false, transformFunction: null }, dataIndex: { classPropertyName: "dataIndex", publicName: "dataIndex", isSignal: true, isRequired: false, transformFunction: null } }, 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}.btn-close>span:first-child{display:none}\n"], dependencies: [{ kind: "component", type: i1.CssFrameworkComponent, selector: "css-framework", inputs: ["layoutNode", "layoutIndex", "dataIndex", "widgetStyles"], outputs: ["widgetStylesChange"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Bootstrap5FrameworkComponent, decorators: [{
type: Component,
args: [{ selector: 'bootstrap-5-framework', template: `
<div>
<css-framework [layoutNode]="layoutNode()"
[layoutIndex]="layoutIndex()"
[dataIndex]="dataIndex()">
</css-framework>
</div>
`, encapsulation: ViewEncapsulation.None, standalone: false, 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}.btn-close>span:first-child{display:none}\n"] }]
}] });
const cssFrameworkCfgBootstrap5 = {
"name": "bootstrap-5",
"text": "Bootstrap 5",
"scripts": [
"//cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
],
"stylesheets": [
"//cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
],
"widgetstyles": {
"__themes__": [
{ "name": "bootstrap5_default", "text": "Bootstrap5 default" },
{ "name": "dark", "text": "Dark" },
{ "name": "light", "text": "Light" }
],
"$ref": {
"fieldHtmlClass": "btn 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__": "visually-hidden",
"__remove_item__": "btn-close float-end",
"__help_block__": "help-block",
"__field_addon_left__": "input-group-text",
"__field_addon_right__": "input-group-text",
"alt-date": {},
"alt-datetime": {},
"__array__": {
"htmlClass": "list-group"
},
"array": {},
"authfieldset": {},
"advancedfieldset": {},
"button": {
"fieldHtmlClass": "btn btn-sm btn-primary"
},
"checkbox": { "fieldHtmlClass": "form-check-input" },
"checkboxes": {
"fieldHtmlClass": "form-check-input"
},
"checkboxbuttons": {
"fieldHtmlClass": "visually-hidden",
"htmlClass": "btn-group",
"itemLabelHtmlClass": "btn"
},
"checkboxes-inline": {
"htmlClass": "form-check-input",
"itemLabelHtmlClass": "form-check-inline"
},
"date": {},
"datetime-local": {},
"fieldset": {},
"integer": {},
"number": {},
"optionfieldset": {},
"password": {},
"radiobuttons": {
"fieldHtmlClass": "visually-hidden",
"htmlClass": "btn-group",
"itemLabelHtmlClass": "btn"
},
"radio": { "fieldHtmlClass": "form-check-input" },
"radios": {
"fieldHtmlClass": "form-check-input"
},
"radios-inline": {
"htmlClass": "form-check form-check-inline",
"itemLabelHtmlClass": "form-check-label"
},
"range": {},
"section": {},
"selectfieldset": {},
"select": {
"fieldHtmlClass": "form-select"
},
"submit": {
"fieldHtmlClass": "btn btn-primary"
},
"text": {},
"tabs": {
"labelHtmlClass": "nav nav-tabs",
"htmlClass": "tab-content",
"fieldHtmlClass": "tab-pane",
"widget_radioClass": "form-check-input"
},
"tabarray": {
"labelHtmlClass": "nav nav-tabs",
"htmlClass": "tab-content",
"fieldHtmlClass": "tab-pane",
"widget_radioClass": "form-check-input"
},
"one-of": {
"labelHtmlClass": "nav nav-tabs",
"htmlClass": "tab-content",
"fieldHtmlClass": "tab-pane",
"widget_radioClass": "form-check-input"
},
"textarea": {},
"default": {
"fieldHtmlClass": "form-control"
}
}
};
// Bootstrap 4 Framework
// https://github.com/ng-bootstrap/ng-bootstrap
class Bootstrap5Framework extends CssFramework {
constructor() {
const cssFWService = inject(CssframeworkService);
//super(cssFrameworkCfgBootstrap5,cssFWService);
super(cssFrameworkCfgBootstrap5);
this.framework = Bootstrap5FrameworkComponent;
this.cssFWService = cssFWService;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Bootstrap5Framework, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Bootstrap5Framework }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Bootstrap5Framework, decorators: [{
type: Injectable
}], ctorParameters: () => [] });
class Bootstrap5FrameworkModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Bootstrap5FrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: Bootstrap5FrameworkModule, declarations: [Bootstrap5FrameworkComponent], imports: [JsonSchemaFormModule,
CommonModule,
WidgetLibraryModule,
CssFrameworkModule], exports: [JsonSchemaFormModule,
Bootstrap5FrameworkComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Bootstrap5FrameworkModule, providers: [
JsonSchemaFormService,
FrameworkLibraryService,
WidgetLibraryService,
{ provide: Framework, useClass: Bootstrap5Framework, multi: true },
], imports: [JsonSchemaFormModule,
CommonModule,
WidgetLibraryModule,
CssFrameworkModule, JsonSchemaFormModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: Bootstrap5FrameworkModule, decorators: [{
type: NgModule,
args: [{
imports: [
JsonSchemaFormModule,
CommonModule,
WidgetLibraryModule,
CssFrameworkModule
],
declarations: [
Bootstrap5FrameworkComponent,
],
exports: [
JsonSchemaFormModule,
Bootstrap5FrameworkComponent,
],
providers: [
JsonSchemaFormService,
FrameworkLibraryService,
WidgetLibraryService,
{ provide: Framework, useClass: Bootstrap5Framework, multi: true },
]
}]
}] });
/*
* Public API Surface of @ng-formworks/bootstrap5
*/
/**
* Generated bundle index. Do not edit.
*/
export { Bootstrap5Framework, Bootstrap5FrameworkComponent, Bootstrap5FrameworkModule };
//# sourceMappingURL=ng-formworks-bootstrap5.mjs.map