@ajsf/bootstrap5 22.0.0 → 22.2.0

package/README.md

@@ -53,6 +53,57 @@ Where `schema` is a valid JSON schema object, and `onSubmit` calls a function to
 * `bootstrap-5` for 'Bootstrap 5.
 * `no-framework` for (plain HTML).
 
+## Checkbox and radio structure, changed in 22.1.0
+
+Checkboxes and radios previously rendered the `<input>` inside its `<label>`,
+which is the Bootstrap 3 shape this package was copied from. They now render
+as siblings inside a `.form-check` wrapper, which is what Bootstrap 5
+documents and what its state styling requires:
+
+    <div class="form-check">
+      <input class="form-check-input" id="control1" type="checkbox">
+      <label class="form-check-label" for="control1">Accept</label>
+    </div>
+
+Every variant takes this sibling shape, including toggle buttons
+(`checkboxbuttons`, `radiobuttons`) and the inline forms (`checkboxes-inline`,
+`radios-inline`), because Bootstrap 5 styles its `.btn-check` toggle buttons
+through a sibling input too, unlike Bootstrap 4's nested `.btn-group-toggle`.
+
+If you wrote CSS selecting `label > input` or styling the label as the
+control's ancestor, that is where the difference is.
+
+## Array row layout, changed in 22.2.0
+
+The remove button on an array item used to be the first child of the field
+wrapper and floated, so it left normal flow and sat at the top of the row
+rather than beside the control. It now shares a flex row with the field. Beside
+a single control it aligns to that control's centre; when the item is a group
+of fields it anchors at the group's top edge, because a group's midpoint moves
+as its contents grow.
+
+Two details matter if you have written CSS against the old output. Every field
+gains one wrapper element between the outer `form-group` container and the field
+itself, and that wrapper becomes a flex container only on a removable array
+item. The invalid marker moved onto that wrapper, so a selector written as
+`.input-group.is-invalid` no longer matches; the marker is now on the
+element directly above it.
+
+## Array titles, changed in 22.2.0
+
+An array rendered its title twice: once as the field label, and again as the
+fieldset legend, which the widget rebuilt from the raw property name. A
+`phone_numbers` property showed "Phone Numbers" followed by "Phone_numbers".
+
+The title now belongs to the widget, as it already did for a fieldset, so it
+renders once, on the `<legend>` that names the group, in the normalised
+spelling. If your CSS targets the array label through `labelHtmlClass`, it now
+applies to the legend.
+
+The required marker moves with the title. It was previously appended only to
+the framework's own label, so a required fieldset, whose title the widget
+already owned, rendered no asterisk at all; it now does.
+
 ## Code scaffolding
 
 Run `ng generate component component-name --project @ajsf/bootstrap5` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project @ajsf/bootstrap5`.

package/fesm2022/ajsf-bootstrap5.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Input, ChangeDetectionStrategy, Component, Injectable, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@ajsf/core';
-import { cloneDeep, inArray, addClasses, Framework, JsonSchemaFormModule, WidgetLibraryModule, JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService } from '@ajsf/core';
+import { cloneDeep, inArray, addClasses, CheckboxComponent, CheckboxesComponent, RadiosComponent, Framework, JsonSchemaFormModule, WidgetLibraryModule, JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService } from '@ajsf/core';
 
 /**
  * Bootstrap 5 framework for Angular JSON Schema Form.
@@ -66,7 +66,8 @@ class Bootstrap5FrameworkComponent {
             this.widgetOptions = this.widgetLayoutNode.options;
             this.formControl = this.jsf.getFormControl(this);
             this.options.isInputWidget = inArray(this.layoutNode.type, [
-                'button', 'checkbox', 'checkboxes-inline', 'checkboxes', 'color',
+                'button', 'checkbox', 'checkboxbuttons', 'checkboxes-inline',
+                'checkboxes', 'color',
                 'date', 'datetime-local', 'datetime', 'email', 'file', 'hidden',
                 'image', 'integer', 'month', 'number', 'password', 'radio',
                 'radiobuttons', 'radios-inline', 'radios', 'range', 'reset', 'search',
@@ -91,17 +92,24 @@ class Bootstrap5FrameworkComponent {
                 this.options.fieldAddonLeft || this.options.prepend;
             this.options.fieldAddonRight =
                 this.options.fieldAddonRight || this.options.append;
-            // Add asterisk to titles if required
-            if (this.options.title && this.layoutNode.type !== 'tab' &&
+            // Add asterisk to titles if required. setTitle hands the title to the
+            // widget for an array or a fieldset and leaves none here, so the marker
+            // follows it. Named types only: setTitle also returns null for submit,
+            // whose widget uses the title as an input value rather than as HTML, so
+            // markup appended there would render literally.
+            const titled = this.layoutNode.type === 'array' || this.layoutNode.type === 'fieldset'
+                ? this.widgetOptions : this.options;
+            if (titled.title && this.layoutNode.type !== 'tab' &&
                 !this.options.notitle && this.options.required &&
-                !this.options.title.includes('*')) {
-                this.options.title += ' <strong class="text-danger">*</strong>';
+                !titled.title.includes('*')) {
+                titled.title += ' <strong class="text-danger">*</strong>';
             }
             // Set miscelaneous styles and settings for each control type
             switch (this.layoutNode.type) {
                 // Checkbox controls
-                // CheckboxComponent renders no element carrying htmlClass, so the
-                // single checkbox takes .form-check from the framework's own div.
+                // The framework template puts [class.form-check]="isSingleCheck" on
+                // its own wrapper div, so the single checkbox takes .form-check from
+                // there rather than from this switch.
                 case 'checkbox':
                     this.widgetOptions.fieldHtmlClass = addClasses(this.widgetOptions.fieldHtmlClass, 'form-check-input');
                     this.widgetOptions.itemLabelHtmlClass = addClasses(this.widgetOptions.itemLabelHtmlClass, 'form-check-label');
@@ -112,8 +120,9 @@ class Bootstrap5FrameworkComponent {
                     this.widgetOptions.itemLabelHtmlClass = addClasses(this.widgetOptions.itemLabelHtmlClass, 'form-check-label');
                     break;
                 case 'checkboxes-inline':
+                    this.widgetOptions.htmlClass = addClasses(this.widgetOptions.htmlClass, 'form-check form-check-inline');
                     this.widgetOptions.fieldHtmlClass = addClasses(this.widgetOptions.fieldHtmlClass, 'form-check-input');
-                    this.widgetOptions.itemLabelHtmlClass = addClasses(this.widgetOptions.itemLabelHtmlClass, 'form-check form-check-inline form-check-label');
+                    this.widgetOptions.itemLabelHtmlClass = addClasses(this.widgetOptions.itemLabelHtmlClass, 'form-check-label');
                     break;
                 // Radio controls
                 case 'radio':
@@ -123,8 +132,9 @@ class Bootstrap5FrameworkComponent {
                     this.widgetOptions.itemLabelHtmlClass = addClasses(this.widgetOptions.itemLabelHtmlClass, 'form-check-label');
                     break;
                 case 'radios-inline':
+                    this.widgetOptions.htmlClass = addClasses(this.widgetOptions.htmlClass, 'form-check form-check-inline');
                     this.widgetOptions.fieldHtmlClass = addClasses(this.widgetOptions.fieldHtmlClass, 'form-check-input');
-                    this.widgetOptions.itemLabelHtmlClass = addClasses(this.widgetOptions.itemLabelHtmlClass, 'form-check form-check-inline form-check-label');
+                    this.widgetOptions.itemLabelHtmlClass = addClasses(this.widgetOptions.itemLabelHtmlClass, 'form-check-label');
                     break;
                 // Button sets - checkboxbuttons and radiobuttons
                 case 'checkboxbuttons':
@@ -132,7 +142,7 @@ class Bootstrap5FrameworkComponent {
                     this.widgetOptions.htmlClass = addClasses(this.widgetOptions.htmlClass, 'btn-group');
                     this.widgetOptions.itemLabelHtmlClass = addClasses(this.widgetOptions.itemLabelHtmlClass, 'btn');
                     this.widgetOptions.itemLabelHtmlClass = addClasses(this.widgetOptions.itemLabelHtmlClass, this.options.style || 'btn-outline-primary');
-                    this.widgetOptions.fieldHtmlClass = addClasses(this.widgetOptions.fieldHtmlClass, 'visually-hidden');
+                    this.widgetOptions.fieldHtmlClass = addClasses(this.widgetOptions.fieldHtmlClass, 'btn-check');
                     break;
                 // Single button controls
                 case 'button':
@@ -206,6 +216,11 @@ class Bootstrap5FrameworkComponent {
                 this.widgetOptions.expandable = true;
                 this.widgetOptions.title = 'Authentication settings';
                 return null;
+            // An array is a fieldset too: its title belongs to the widget, which
+            // renders it as the legend naming the group. Leaving it to the default
+            // branch blanked it here and had the widget rebuild one from the raw
+            // property name, so the title appeared twice and in two spellings.
+            case 'array':
             case 'fieldset':
                 this.widgetOptions.title = this.options.title;
                 return null;
@@ -218,11 +233,11 @@ class Bootstrap5FrameworkComponent {
         this.jsf.removeItem(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Bootstrap5FrameworkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.JsonSchemaFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Bootstrap5FrameworkComponent, isStandalone: false, selector: "bootstrap-5-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, usesOnChanges: true, ngImport: i0, template: "<!--\nBootstrap 5 replaced the has-error and has-success wrapper classes with\nis-invalid and is-valid on the control itself, so the state classes are bound\nto the field rather than to this container.\n-->\n<div [class]=\"options?.htmlClass || ''\">\n\n  @if (showRemoveButton) {\n    <button\n      class=\"float-end btn btn-outline-danger btn-sm\"\n      type=\"button\"\n      (click)=\"removeItem()\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  }\n  @if (options?.messageLocation === 'top') {\n    <div>\n      @if (options?.helpBlock) {\n        <p\n          class=\"form-text\"\n        [innerHTML]=\"$safeNavigationMigration(options?.helpBlock)\"></p>\n      }\n    </div>\n  }\n\n  @if (options?.title && layoutNode?.type !== 'tab') {\n    <label\n      [attr.for]=\"'control' + layoutNode?._id\"\n      [class]=\"options?.labelHtmlClass || ''\"\n      [class.visually-hidden]=\"options?.notitle\"\n    [innerHTML]=\"$safeNavigationMigration(options?.title)\"></label>\n  }\n  @if (layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired) {\n    <p>\n      <strong class=\"text-danger\">*</strong> = required fields\n    </p>\n  }\n  <div\n    [class.h-100]=\"true\"\n    [class.mt-1]=\"true\"\n    [class.form-check]=\"isSingleCheck\"\n    [class.is-invalid]=\"!!options?.errorMessage\"\n    [class.input-group]=\"options?.fieldAddonLeft || options?.fieldAddonRight\"\n    >\n    @if (options?.fieldAddonLeft) {\n      <div class=\"input-group-prepend\">\n        <span class=\"input-group-text\" [innerHTML]=\"$safeNavigationMigration(options?.fieldAddonLeft)\"></span>\n      </div>\n    }\n\n    <select-widget-widget\n      [layoutNode]=\"widgetLayoutNode\"\n      [dataIndex]=\"dataIndex\"\n    [layoutIndex]=\"layoutIndex\"></select-widget-widget>\n\n    @if (options?.fieldAddonRight) {\n      <div class=\"input-group-append\">\n        <span class=\"input-group-text\" [innerHTML]=\"$safeNavigationMigration(options?.fieldAddonRight)\"></span>\n      </div>\n    }\n  </div>\n\n  @if (formControl?.touched && options?.errorMessage) {\n    <div\n      class=\"invalid-feedback\"\n    [innerHTML]=\"$safeNavigationMigration(options?.errorMessage)\"></div>\n  }\n\n  <!--\n  description || help is the order updateHelpBlock uses for options.helpBlock,\n  which this block replaced. Reading description alone lost help entirely.\n  The messageLocation guard mirrors the paragraph above: containers set it\n  to 'top', and without it the same text renders in both places.\n  -->\n  @if ((options?.description || options?.help) &&\n    options?.messageLocation !== 'top' &&\n    (!options?.showErrors || !options?.errorMessage)) {\n    <div\n      class=\"form-text text-muted\"\n    [innerHTML]=\"options?.description || options?.help\"></div>\n  }\n</div>\n\n@if (debug && debugOutput) {\n  <div>debug:\n    <pre>{{debugOutput}}</pre>\n  </div>\n}\n", styles: [":host ::ng-deep .list-group-item .form-control-feedback{top:40px}:host ::ng-deep .ng-invalid.ng-touched{border:1px solid #f44336}\n"], dependencies: [{ kind: "component", type: i1.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Bootstrap5FrameworkComponent, isStandalone: false, selector: "bootstrap-5-framework", inputs: { layoutNode: "layoutNode", layoutIndex: "layoutIndex", dataIndex: "dataIndex" }, usesOnChanges: true, ngImport: i0, template: "<!--\nBootstrap 5 replaced the has-error and has-success wrapper classes with\nis-invalid and is-valid on the control itself, so the state classes are bound\nto the field rather than to this container.\n-->\n<div [class]=\"options?.htmlClass || ''\">\n\n  @if (options?.messageLocation === 'top') {\n    <div>\n      @if (options?.helpBlock) {\n        <p\n          class=\"form-text\"\n        [innerHTML]=\"$safeNavigationMigration(options?.helpBlock)\"></p>\n      }\n    </div>\n  }\n\n  @if (options?.title && layoutNode?.type !== 'tab') {\n    <label\n      [attr.for]=\"'control' + layoutNode?._id\"\n      [class]=\"options?.labelHtmlClass || ''\"\n      [class.visually-hidden]=\"options?.notitle\"\n    [innerHTML]=\"$safeNavigationMigration(options?.title)\"></label>\n  }\n  @if (layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired) {\n    <p>\n      <strong class=\"text-danger\">*</strong> = required fields\n    </p>\n  }\n  <!--\n  is-invalid sits on this row rather than on the field inside it, because\n  Bootstrap reveals .invalid-feedback only as a following sibling of the\n  element carrying .is-invalid, and the message below is this row's sibling.\n  The row is a flex container only for a removable array item, which is also\n  what stops the button's float taking it out of normal flow.\n  -->\n  <div\n    [class.d-flex]=\"showRemoveButton\"\n    [class.align-items-center]=\"showRemoveButton && options?.isInputWidget\"\n    [class.align-items-start]=\"showRemoveButton && !options?.isInputWidget\"\n    [class.is-invalid]=\"!!options?.errorMessage\">\n    <div\n      [class.h-100]=\"true\"\n      [class.mt-1]=\"true\"\n      [class.form-check]=\"isSingleCheck\"\n      [class.input-group]=\"options?.fieldAddonLeft || options?.fieldAddonRight\"\n      [class.flex-grow-1]=\"showRemoveButton\"\n      >\n      @if (options?.fieldAddonLeft) {\n        <div class=\"input-group-prepend\">\n          <span class=\"input-group-text\" [innerHTML]=\"$safeNavigationMigration(options?.fieldAddonLeft)\"></span>\n        </div>\n      }\n\n      <select-widget-widget\n        [layoutNode]=\"widgetLayoutNode\"\n        [dataIndex]=\"dataIndex\"\n      [layoutIndex]=\"layoutIndex\"></select-widget-widget>\n\n      @if (options?.fieldAddonRight) {\n        <div class=\"input-group-append\">\n          <span class=\"input-group-text\" [innerHTML]=\"$safeNavigationMigration(options?.fieldAddonRight)\"></span>\n        </div>\n      }\n    </div>\n\n    @if (showRemoveButton) {\n      <button\n        class=\"ms-2 btn btn-outline-danger btn-sm\"\n        type=\"button\"\n        (click)=\"removeItem()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    }\n  </div>\n\n  @if (formControl?.touched && options?.errorMessage) {\n    <div\n      class=\"invalid-feedback\"\n    [innerHTML]=\"$safeNavigationMigration(options?.errorMessage)\"></div>\n  }\n\n  <!--\n  description || help is the order updateHelpBlock uses for options.helpBlock,\n  which this block replaced. Reading description alone lost help entirely.\n  The messageLocation guard mirrors the paragraph above: containers set it\n  to 'top', and without it the same text renders in both places.\n  -->\n  @if ((options?.description || options?.help) &&\n    options?.messageLocation !== 'top' &&\n    (!options?.showErrors || !options?.errorMessage)) {\n    <div\n      class=\"form-text text-muted\"\n    [innerHTML]=\"options?.description || options?.help\"></div>\n  }\n</div>\n\n@if (debug && debugOutput) {\n  <div>debug:\n    <pre>{{debugOutput}}</pre>\n  </div>\n}\n", styles: [":host ::ng-deep .list-group-item .form-control-feedback{top:40px}:host ::ng-deep .ng-invalid.ng-touched{border:1px solid #f44336}\n"], dependencies: [{ kind: "component", type: i1.SelectWidgetComponent, selector: "select-widget-widget", inputs: ["layoutNode", "layoutIndex", "dataIndex"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Bootstrap5FrameworkComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bootstrap-5-framework', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<!--\nBootstrap 5 replaced the has-error and has-success wrapper classes with\nis-invalid and is-valid on the control itself, so the state classes are bound\nto the field rather than to this container.\n-->\n<div [class]=\"options?.htmlClass || ''\">\n\n  @if (showRemoveButton) {\n    <button\n      class=\"float-end btn btn-outline-danger btn-sm\"\n      type=\"button\"\n      (click)=\"removeItem()\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  }\n  @if (options?.messageLocation === 'top') {\n    <div>\n      @if (options?.helpBlock) {\n        <p\n          class=\"form-text\"\n        [innerHTML]=\"$safeNavigationMigration(options?.helpBlock)\"></p>\n      }\n    </div>\n  }\n\n  @if (options?.title && layoutNode?.type !== 'tab') {\n    <label\n      [attr.for]=\"'control' + layoutNode?._id\"\n      [class]=\"options?.labelHtmlClass || ''\"\n      [class.visually-hidden]=\"options?.notitle\"\n    [innerHTML]=\"$safeNavigationMigration(options?.title)\"></label>\n  }\n  @if (layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired) {\n    <p>\n      <strong class=\"text-danger\">*</strong> = required fields\n    </p>\n  }\n  <div\n    [class.h-100]=\"true\"\n    [class.mt-1]=\"true\"\n    [class.form-check]=\"isSingleCheck\"\n    [class.is-invalid]=\"!!options?.errorMessage\"\n    [class.input-group]=\"options?.fieldAddonLeft || options?.fieldAddonRight\"\n    >\n    @if (options?.fieldAddonLeft) {\n      <div class=\"input-group-prepend\">\n        <span class=\"input-group-text\" [innerHTML]=\"$safeNavigationMigration(options?.fieldAddonLeft)\"></span>\n      </div>\n    }\n\n    <select-widget-widget\n      [layoutNode]=\"widgetLayoutNode\"\n      [dataIndex]=\"dataIndex\"\n    [layoutIndex]=\"layoutIndex\"></select-widget-widget>\n\n    @if (options?.fieldAddonRight) {\n      <div class=\"input-group-append\">\n        <span class=\"input-group-text\" [innerHTML]=\"$safeNavigationMigration(options?.fieldAddonRight)\"></span>\n      </div>\n    }\n  </div>\n\n  @if (formControl?.touched && options?.errorMessage) {\n    <div\n      class=\"invalid-feedback\"\n    [innerHTML]=\"$safeNavigationMigration(options?.errorMessage)\"></div>\n  }\n\n  <!--\n  description || help is the order updateHelpBlock uses for options.helpBlock,\n  which this block replaced. Reading description alone lost help entirely.\n  The messageLocation guard mirrors the paragraph above: containers set it\n  to 'top', and without it the same text renders in both places.\n  -->\n  @if ((options?.description || options?.help) &&\n    options?.messageLocation !== 'top' &&\n    (!options?.showErrors || !options?.errorMessage)) {\n    <div\n      class=\"form-text text-muted\"\n    [innerHTML]=\"options?.description || options?.help\"></div>\n  }\n</div>\n\n@if (debug && debugOutput) {\n  <div>debug:\n    <pre>{{debugOutput}}</pre>\n  </div>\n}\n", styles: [":host ::ng-deep .list-group-item .form-control-feedback{top:40px}:host ::ng-deep .ng-invalid.ng-touched{border:1px solid #f44336}\n"] }]
+            args: [{ selector: 'bootstrap-5-framework', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<!--\nBootstrap 5 replaced the has-error and has-success wrapper classes with\nis-invalid and is-valid on the control itself, so the state classes are bound\nto the field rather than to this container.\n-->\n<div [class]=\"options?.htmlClass || ''\">\n\n  @if (options?.messageLocation === 'top') {\n    <div>\n      @if (options?.helpBlock) {\n        <p\n          class=\"form-text\"\n        [innerHTML]=\"$safeNavigationMigration(options?.helpBlock)\"></p>\n      }\n    </div>\n  }\n\n  @if (options?.title && layoutNode?.type !== 'tab') {\n    <label\n      [attr.for]=\"'control' + layoutNode?._id\"\n      [class]=\"options?.labelHtmlClass || ''\"\n      [class.visually-hidden]=\"options?.notitle\"\n    [innerHTML]=\"$safeNavigationMigration(options?.title)\"></label>\n  }\n  @if (layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired) {\n    <p>\n      <strong class=\"text-danger\">*</strong> = required fields\n    </p>\n  }\n  <!--\n  is-invalid sits on this row rather than on the field inside it, because\n  Bootstrap reveals .invalid-feedback only as a following sibling of the\n  element carrying .is-invalid, and the message below is this row's sibling.\n  The row is a flex container only for a removable array item, which is also\n  what stops the button's float taking it out of normal flow.\n  -->\n  <div\n    [class.d-flex]=\"showRemoveButton\"\n    [class.align-items-center]=\"showRemoveButton && options?.isInputWidget\"\n    [class.align-items-start]=\"showRemoveButton && !options?.isInputWidget\"\n    [class.is-invalid]=\"!!options?.errorMessage\">\n    <div\n      [class.h-100]=\"true\"\n      [class.mt-1]=\"true\"\n      [class.form-check]=\"isSingleCheck\"\n      [class.input-group]=\"options?.fieldAddonLeft || options?.fieldAddonRight\"\n      [class.flex-grow-1]=\"showRemoveButton\"\n      >\n      @if (options?.fieldAddonLeft) {\n        <div class=\"input-group-prepend\">\n          <span class=\"input-group-text\" [innerHTML]=\"$safeNavigationMigration(options?.fieldAddonLeft)\"></span>\n        </div>\n      }\n\n      <select-widget-widget\n        [layoutNode]=\"widgetLayoutNode\"\n        [dataIndex]=\"dataIndex\"\n      [layoutIndex]=\"layoutIndex\"></select-widget-widget>\n\n      @if (options?.fieldAddonRight) {\n        <div class=\"input-group-append\">\n          <span class=\"input-group-text\" [innerHTML]=\"$safeNavigationMigration(options?.fieldAddonRight)\"></span>\n        </div>\n      }\n    </div>\n\n    @if (showRemoveButton) {\n      <button\n        class=\"ms-2 btn btn-outline-danger btn-sm\"\n        type=\"button\"\n        (click)=\"removeItem()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    }\n  </div>\n\n  @if (formControl?.touched && options?.errorMessage) {\n    <div\n      class=\"invalid-feedback\"\n    [innerHTML]=\"$safeNavigationMigration(options?.errorMessage)\"></div>\n  }\n\n  <!--\n  description || help is the order updateHelpBlock uses for options.helpBlock,\n  which this block replaced. Reading description alone lost help entirely.\n  The messageLocation guard mirrors the paragraph above: containers set it\n  to 'top', and without it the same text renders in both places.\n  -->\n  @if ((options?.description || options?.help) &&\n    options?.messageLocation !== 'top' &&\n    (!options?.showErrors || !options?.errorMessage)) {\n    <div\n      class=\"form-text text-muted\"\n    [innerHTML]=\"options?.description || options?.help\"></div>\n  }\n</div>\n\n@if (debug && debugOutput) {\n  <div>debug:\n    <pre>{{debugOutput}}</pre>\n  </div>\n}\n", styles: [":host ::ng-deep .list-group-item .form-control-feedback{top:40px}:host ::ng-deep .ng-invalid.ng-touched{border:1px solid #f44336}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.JsonSchemaFormService }], propDecorators: { layoutNode: [{
                 type: Input
             }], layoutIndex: [{
@@ -231,6 +246,487 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Bootstrap 5 wants the input and label as siblings inside .form-check, and
+ * styles the input's state through sibling selectors. The core widget nests
+ * the input inside the label, which is the Bootstrap 3 shape.
+ *
+ * Template only. No constructor: Angular inherits the base's injection
+ * through its generated factory, and adding one would break that.
+ */
+class Bootstrap5CheckboxComponent extends CheckboxComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Bootstrap5CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Bootstrap5CheckboxComponent, isStandalone: false, selector: "bootstrap5-checkbox-widget", usesInheritance: true, ngImport: i0, template: `
+    <div [class]="options?.htmlClass || ''">
+      @if (boundControl) {
+        <input
+          [formControl]="formControl"
+          [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+          [class]="(options?.fieldHtmlClass || '') + (isChecked ?
+            (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+            (' ' + (options?.style?.unselected || '')))"
+          [id]="'control' + layoutNode?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          type="checkbox">
+      }
+      @if (!boundControl) {
+        <input
+          [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+          [checked]="isChecked ? 'checked' : null"
+          [class]="(options?.fieldHtmlClass || '') + (isChecked ?
+            (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+            (' ' + (options?.style?.unselected || '')))"
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          [value]="controlValue"
+          type="checkbox"
+          (change)="updateValue($event)">
+      }
+      <label
+        [attr.for]="'control' + layoutNode?._id"
+        [class]="options?.itemLabelHtmlClass || ''">
+        @if (options?.title) {
+          <span
+            [style.display]="options?.notitle ? 'none' : ''"
+            [innerHTML]="options?.title"></span>
+        }
+      </label>
+    </div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Bootstrap5CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bootstrap5-checkbox-widget',
+                    changeDetection: ChangeDetectionStrategy.Eager,
+                    standalone: false,
+                    template: `
+    <div [class]="options?.htmlClass || ''">
+      @if (boundControl) {
+        <input
+          [formControl]="formControl"
+          [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+          [class]="(options?.fieldHtmlClass || '') + (isChecked ?
+            (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+            (' ' + (options?.style?.unselected || '')))"
+          [id]="'control' + layoutNode?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          type="checkbox">
+      }
+      @if (!boundControl) {
+        <input
+          [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+          [checked]="isChecked ? 'checked' : null"
+          [class]="(options?.fieldHtmlClass || '') + (isChecked ?
+            (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+            (' ' + (options?.style?.unselected || '')))"
+          [disabled]="controlDisabled"
+          [id]="'control' + layoutNode?._id"
+          [name]="controlName"
+          [readonly]="options?.readonly ? 'readonly' : null"
+          [value]="controlValue"
+          type="checkbox"
+          (change)="updateValue($event)">
+      }
+      <label
+        [attr.for]="'control' + layoutNode?._id"
+        [class]="options?.itemLabelHtmlClass || ''">
+        @if (options?.title) {
+          <span
+            [style.display]="options?.notitle ? 'none' : ''"
+            [innerHTML]="options?.title"></span>
+        }
+      </label>
+    </div>`,
+                }]
+        }] });
+
+/**
+ * Sibling input and label per item, for checkboxes, checkboxes-inline and
+ * checkboxbuttons alike. The horizontal branch splits on layoutNode.type:
+ * checkboxbuttons keeps the one shared wrapper, because btn-group belongs on
+ * a single element around the whole set and Bootstrap 5's btn-check idiom is
+ * a sibling input there too. checkboxes-inline gives each item its own
+ * wrapper, because Bootstrap 5 documents one .form-check.form-check-inline
+ * per item, not one around the whole set.
+ *
+ * activeClass and style.selected stay on the label, where the core widget
+ * puts them, so the button idiom keeps working.
+ *
+ * Template only. No constructor.
+ */
+class Bootstrap5CheckboxesComponent extends CheckboxesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Bootstrap5CheckboxesComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Bootstrap5CheckboxesComponent, isStandalone: false, selector: "bootstrap5-checkboxes-widget", usesInheritance: true, ngImport: i0, template: `
+    @if (options?.title) {
+      <label
+        [class]="options?.labelHtmlClass || ''"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+    }
+
+    @if (layoutOrientation === 'horizontal') {
+      @if (layoutNode?.type === 'checkboxbuttons') {
+        <div [class]="options?.htmlClass || ''">
+          @for (checkboxItem of checkboxList; track checkboxItem) {
+            <input type="checkbox"
+              [attr.required]="options?.required"
+              [checked]="checkboxItem.checked"
+              [class]="options?.fieldHtmlClass || ''"
+              [disabled]="controlDisabled"
+              [id]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+              [name]="checkboxItem?.name"
+              [readonly]="options?.readonly ? 'readonly' : null"
+              [value]="checkboxItem.value"
+              (change)="updateValue($event, checkboxItem)">
+            <label
+              [attr.for]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+              [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
+                (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+                (' ' + (options?.style?.unselected || '')))"
+              [innerHTML]="checkboxItem.name"></label>
+          }
+        </div>
+      } @else {
+        <div>
+          @for (checkboxItem of checkboxList; track checkboxItem) {
+            <div [class]="options?.htmlClass || ''">
+              <input type="checkbox"
+                [attr.required]="options?.required"
+                [checked]="checkboxItem.checked"
+                [class]="options?.fieldHtmlClass || ''"
+                [disabled]="controlDisabled"
+                [id]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+                [name]="checkboxItem?.name"
+                [readonly]="options?.readonly ? 'readonly' : null"
+                [value]="checkboxItem.value"
+                (change)="updateValue($event, checkboxItem)">
+              <label
+                [attr.for]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+                [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
+                  (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+                  (' ' + (options?.style?.unselected || '')))"
+                [innerHTML]="checkboxItem.name"></label>
+            </div>
+          }
+        </div>
+      }
+    }
+
+    @if (layoutOrientation === 'vertical') {
+      <div>
+        @for (checkboxItem of checkboxList; track checkboxItem) {
+          <div [class]="options?.htmlClass || ''">
+            <input type="checkbox"
+              [attr.required]="options?.required"
+              [checked]="checkboxItem.checked"
+              [class]="options?.fieldHtmlClass || ''"
+              [disabled]="controlDisabled"
+              [id]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+              [name]="checkboxItem?.name"
+              [readonly]="options?.readonly ? 'readonly' : null"
+              [value]="checkboxItem.value"
+              (change)="updateValue($event, checkboxItem)">
+            <label
+              [attr.for]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+              [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
+                (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+                (' ' + (options?.style?.unselected || '')))"
+              [innerHTML]="checkboxItem.name"></label>
+          </div>
+        }
+      </div>
+    }`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Bootstrap5CheckboxesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bootstrap5-checkboxes-widget',
+                    changeDetection: ChangeDetectionStrategy.Eager,
+                    standalone: false,
+                    template: `
+    @if (options?.title) {
+      <label
+        [class]="options?.labelHtmlClass || ''"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+    }
+
+    @if (layoutOrientation === 'horizontal') {
+      @if (layoutNode?.type === 'checkboxbuttons') {
+        <div [class]="options?.htmlClass || ''">
+          @for (checkboxItem of checkboxList; track checkboxItem) {
+            <input type="checkbox"
+              [attr.required]="options?.required"
+              [checked]="checkboxItem.checked"
+              [class]="options?.fieldHtmlClass || ''"
+              [disabled]="controlDisabled"
+              [id]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+              [name]="checkboxItem?.name"
+              [readonly]="options?.readonly ? 'readonly' : null"
+              [value]="checkboxItem.value"
+              (change)="updateValue($event, checkboxItem)">
+            <label
+              [attr.for]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+              [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
+                (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+                (' ' + (options?.style?.unselected || '')))"
+              [innerHTML]="checkboxItem.name"></label>
+          }
+        </div>
+      } @else {
+        <div>
+          @for (checkboxItem of checkboxList; track checkboxItem) {
+            <div [class]="options?.htmlClass || ''">
+              <input type="checkbox"
+                [attr.required]="options?.required"
+                [checked]="checkboxItem.checked"
+                [class]="options?.fieldHtmlClass || ''"
+                [disabled]="controlDisabled"
+                [id]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+                [name]="checkboxItem?.name"
+                [readonly]="options?.readonly ? 'readonly' : null"
+                [value]="checkboxItem.value"
+                (change)="updateValue($event, checkboxItem)">
+              <label
+                [attr.for]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+                [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
+                  (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+                  (' ' + (options?.style?.unselected || '')))"
+                [innerHTML]="checkboxItem.name"></label>
+            </div>
+          }
+        </div>
+      }
+    }
+
+    @if (layoutOrientation === 'vertical') {
+      <div>
+        @for (checkboxItem of checkboxList; track checkboxItem) {
+          <div [class]="options?.htmlClass || ''">
+            <input type="checkbox"
+              [attr.required]="options?.required"
+              [checked]="checkboxItem.checked"
+              [class]="options?.fieldHtmlClass || ''"
+              [disabled]="controlDisabled"
+              [id]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+              [name]="checkboxItem?.name"
+              [readonly]="options?.readonly ? 'readonly' : null"
+              [value]="checkboxItem.value"
+              (change)="updateValue($event, checkboxItem)">
+            <label
+              [attr.for]="'control' + layoutNode?._id + '/' + checkboxItem.value"
+              [class]="(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?
+                (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+                (' ' + (options?.style?.unselected || '')))"
+              [innerHTML]="checkboxItem.name"></label>
+          </div>
+        }
+      </div>
+    }`,
+                }]
+        }] });
+
+/**
+ * Sibling input and label per item, for radios, radios-inline and
+ * radiobuttons alike. The horizontal branch splits on layoutNode.type:
+ * radiobuttons keeps the one shared wrapper, because btn-group belongs on a
+ * single element around the whole set and Bootstrap 5's btn-check idiom is a
+ * sibling input there too. radios-inline gives each item its own wrapper,
+ * because Bootstrap 5 documents one .form-check.form-check-inline per item,
+ * not one around the whole set.
+ *
+ * Template only. No constructor.
+ */
+class Bootstrap5RadiosComponent extends RadiosComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Bootstrap5RadiosComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Bootstrap5RadiosComponent, isStandalone: false, selector: "bootstrap5-radios-widget", usesInheritance: true, ngImport: i0, template: `
+    @if (options?.title) {
+      <label
+        [attr.for]="'control' + layoutNode?._id"
+        [class]="options?.labelHtmlClass || ''"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+    }
+
+    @if (layoutOrientation === 'horizontal') {
+      @if (layoutNode?.type === 'radiobuttons') {
+        <div [class]="options?.htmlClass || ''">
+          @for (radioItem of radiosList; track radioItem) {
+            <input type="radio"
+              [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+              [attr.readonly]="options?.readonly ? 'readonly' : null"
+              [attr.required]="options?.required"
+              [checked]="radioItem?.value === controlValue"
+              [class]="options?.fieldHtmlClass || ''"
+              [disabled]="controlDisabled"
+              [id]="'control' + layoutNode?._id + '/' + radioItem?.value"
+              [name]="controlName"
+              [value]="radioItem?.value"
+              (change)="updateValue($event)">
+            <label
+              [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value"
+              [class]="(options?.itemLabelHtmlClass || '') +
+                ((controlValue + '' === radioItem?.value + '') ?
+                (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+                (' ' + (options?.style?.unselected || '')))"
+              [innerHTML]="radioItem?.name"></label>
+          }
+        </div>
+      } @else {
+        <div>
+          @for (radioItem of radiosList; track radioItem) {
+            <div [class]="options?.htmlClass || ''">
+              <input type="radio"
+                [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+                [attr.readonly]="options?.readonly ? 'readonly' : null"
+                [attr.required]="options?.required"
+                [checked]="radioItem?.value === controlValue"
+                [class]="options?.fieldHtmlClass || ''"
+                [disabled]="controlDisabled"
+                [id]="'control' + layoutNode?._id + '/' + radioItem?.value"
+                [name]="controlName"
+                [value]="radioItem?.value"
+                (change)="updateValue($event)">
+              <label
+                [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value"
+                [class]="(options?.itemLabelHtmlClass || '') +
+                  ((controlValue + '' === radioItem?.value + '') ?
+                  (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+                  (' ' + (options?.style?.unselected || '')))"
+                [innerHTML]="radioItem?.name"></label>
+            </div>
+          }
+        </div>
+      }
+    }
+
+    @if (layoutOrientation !== 'horizontal') {
+      <div>
+        @for (radioItem of radiosList; track radioItem) {
+          <div [class]="options?.htmlClass || ''">
+            <input type="radio"
+              [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+              [attr.readonly]="options?.readonly ? 'readonly' : null"
+              [attr.required]="options?.required"
+              [checked]="radioItem?.value === controlValue"
+              [class]="options?.fieldHtmlClass || ''"
+              [disabled]="controlDisabled"
+              [id]="'control' + layoutNode?._id + '/' + radioItem?.value"
+              [name]="controlName"
+              [value]="radioItem?.value"
+              (change)="updateValue($event)">
+            <label
+              [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value"
+              [class]="(options?.itemLabelHtmlClass || '') +
+                ((controlValue + '' === radioItem?.value + '') ?
+                (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+                (' ' + (options?.style?.unselected || '')))"
+              [innerHTML]="radioItem?.name"></label>
+          </div>
+        }
+      </div>
+    }`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Bootstrap5RadiosComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'bootstrap5-radios-widget',
+                    changeDetection: ChangeDetectionStrategy.Eager,
+                    standalone: false,
+                    template: `
+    @if (options?.title) {
+      <label
+        [attr.for]="'control' + layoutNode?._id"
+        [class]="options?.labelHtmlClass || ''"
+        [style.display]="options?.notitle ? 'none' : ''"
+        [innerHTML]="options?.title"></label>
+    }
+
+    @if (layoutOrientation === 'horizontal') {
+      @if (layoutNode?.type === 'radiobuttons') {
+        <div [class]="options?.htmlClass || ''">
+          @for (radioItem of radiosList; track radioItem) {
+            <input type="radio"
+              [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+              [attr.readonly]="options?.readonly ? 'readonly' : null"
+              [attr.required]="options?.required"
+              [checked]="radioItem?.value === controlValue"
+              [class]="options?.fieldHtmlClass || ''"
+              [disabled]="controlDisabled"
+              [id]="'control' + layoutNode?._id + '/' + radioItem?.value"
+              [name]="controlName"
+              [value]="radioItem?.value"
+              (change)="updateValue($event)">
+            <label
+              [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value"
+              [class]="(options?.itemLabelHtmlClass || '') +
+                ((controlValue + '' === radioItem?.value + '') ?
+                (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+                (' ' + (options?.style?.unselected || '')))"
+              [innerHTML]="radioItem?.name"></label>
+          }
+        </div>
+      } @else {
+        <div>
+          @for (radioItem of radiosList; track radioItem) {
+            <div [class]="options?.htmlClass || ''">
+              <input type="radio"
+                [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+                [attr.readonly]="options?.readonly ? 'readonly' : null"
+                [attr.required]="options?.required"
+                [checked]="radioItem?.value === controlValue"
+                [class]="options?.fieldHtmlClass || ''"
+                [disabled]="controlDisabled"
+                [id]="'control' + layoutNode?._id + '/' + radioItem?.value"
+                [name]="controlName"
+                [value]="radioItem?.value"
+                (change)="updateValue($event)">
+              <label
+                [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value"
+                [class]="(options?.itemLabelHtmlClass || '') +
+                  ((controlValue + '' === radioItem?.value + '') ?
+                  (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+                  (' ' + (options?.style?.unselected || '')))"
+                [innerHTML]="radioItem?.name"></label>
+            </div>
+          }
+        </div>
+      }
+    }
+
+    @if (layoutOrientation !== 'horizontal') {
+      <div>
+        @for (radioItem of radiosList; track radioItem) {
+          <div [class]="options?.htmlClass || ''">
+            <input type="radio"
+              [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+              [attr.readonly]="options?.readonly ? 'readonly' : null"
+              [attr.required]="options?.required"
+              [checked]="radioItem?.value === controlValue"
+              [class]="options?.fieldHtmlClass || ''"
+              [disabled]="controlDisabled"
+              [id]="'control' + layoutNode?._id + '/' + radioItem?.value"
+              [name]="controlName"
+              [value]="radioItem?.value"
+              (change)="updateValue($event)">
+            <label
+              [attr.for]="'control' + layoutNode?._id + '/' + radioItem?.value"
+              [class]="(options?.itemLabelHtmlClass || '') +
+                ((controlValue + '' === radioItem?.value + '') ?
+                (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :
+                (' ' + (options?.style?.unselected || '')))"
+              [innerHTML]="radioItem?.name"></label>
+          </div>
+        }
+      </div>
+    }`,
+                }]
+        }] });
+
 // Bootstrap 5 Framework
 // https://github.com/ng-bootstrap/ng-bootstrap
 class Bootstrap5Framework extends Framework {
@@ -238,6 +734,11 @@ class Bootstrap5Framework extends Framework {
         super(...arguments);
         this.name = 'bootstrap-5';
         this.framework = Bootstrap5FrameworkComponent;
+        this.widgets = {
+            'checkbox': Bootstrap5CheckboxComponent,
+            'checkboxes': Bootstrap5CheckboxesComponent,
+            'radios': Bootstrap5RadiosComponent,
+        };
         this.stylesheets = [
             '//cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css'
         ];
@@ -254,12 +755,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
             type: Injectable
         }] });
 
+const BOOTSTRAP5_FRAMEWORK_COMPONENTS = [
+    Bootstrap5CheckboxComponent,
+    Bootstrap5CheckboxesComponent,
+    Bootstrap5RadiosComponent,
+];
+
 class Bootstrap5FrameworkModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Bootstrap5FrameworkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: Bootstrap5FrameworkModule, declarations: [Bootstrap5FrameworkComponent], imports: [JsonSchemaFormModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: Bootstrap5FrameworkModule, declarations: [Bootstrap5FrameworkComponent, Bootstrap5CheckboxComponent, Bootstrap5CheckboxesComponent, Bootstrap5RadiosComponent], imports: [JsonSchemaFormModule,
             CommonModule,
             WidgetLibraryModule], exports: [JsonSchemaFormModule,
-            Bootstrap5FrameworkComponent] }); }
+            Bootstrap5FrameworkComponent, Bootstrap5CheckboxComponent, Bootstrap5CheckboxesComponent, Bootstrap5RadiosComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Bootstrap5FrameworkModule, providers: [
             JsonSchemaFormService,
             FrameworkLibraryService,
@@ -279,10 +786,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ],
                     declarations: [
                         Bootstrap5FrameworkComponent,
+                        ...BOOTSTRAP5_FRAMEWORK_COMPONENTS,
                     ],
                     exports: [
                         JsonSchemaFormModule,
                         Bootstrap5FrameworkComponent,
+                        ...BOOTSTRAP5_FRAMEWORK_COMPONENTS,
                     ],
                     providers: [
                         JsonSchemaFormService,
@@ -301,5 +810,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Bootstrap5Framework, Bootstrap5FrameworkComponent, Bootstrap5FrameworkModule };
+export { BOOTSTRAP5_FRAMEWORK_COMPONENTS, Bootstrap5CheckboxComponent, Bootstrap5CheckboxesComponent, Bootstrap5Framework, Bootstrap5FrameworkComponent, Bootstrap5FrameworkModule, Bootstrap5RadiosComponent };
 //# sourceMappingURL=ajsf-bootstrap5.mjs.map

package/fesm2022/ajsf-bootstrap5.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ajsf-bootstrap5.mjs","sources":["../../../../projects/ajsf-bootstrap5/src/lib/bootstrap5-framework.component.ts","../../../../projects/ajsf-bootstrap5/src/lib/bootstrap5-framework.component.html","../../../../projects/ajsf-bootstrap5/src/lib/bootstrap5.framework.ts","../../../../projects/ajsf-bootstrap5/src/lib/bootstrap5-framework.module.ts","../../../../projects/ajsf-bootstrap5/src/public_api.ts","../../../../projects/ajsf-bootstrap5/src/ajsf-bootstrap5.ts"],"sourcesContent":["import {\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnChanges,\n  OnInit,\n  ChangeDetectionStrategy\n} from '@angular/core';\nimport {JsonSchemaFormService, addClasses, cloneDeep, inArray} from '@ajsf/core';\n\n/**\n * Bootstrap 5 framework for Angular JSON Schema Form.\n *\n */\n@Component({\n    selector: 'bootstrap-5-framework',\n    templateUrl: './bootstrap5-framework.component.html',\n    styleUrls: ['./bootstrap5-framework.component.scss'],\n    changeDetection: ChangeDetectionStrategy.Eager,\n    standalone: false\n})\nexport class Bootstrap5FrameworkComponent implements OnInit, OnChanges {\n  frameworkInitialized = false;\n  widgetOptions: any; // Options passed to child widget\n  widgetLayoutNode: any; // layoutNode passed to child widget\n  options: any; // Options used in this framework\n  formControl: any = null;\n  debugOutput: any = '';\n  debug: any = '';\n  parentArray: any = null;\n  isOrderable = false;\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    public changeDetector: ChangeDetectorRef,\n    public jsf: JsonSchemaFormService\n  ) {\n  }\n\n  get isSingleCheck(): boolean {\n    return this.layoutNode.type === 'checkbox' &&\n      !this.options.fieldAddonLeft && !this.options.fieldAddonRight;\n  }\n\n  get showRemoveButton(): boolean {\n    if (!this.options.removable || this.options.readonly ||\n      this.layoutNode.type === '$ref'\n    ) {\n      return false;\n    }\n    if (this.layoutNode.recursiveReference) {\n      return true;\n    }\n    if (!this.layoutNode.arrayItem || !this.parentArray) {\n      return false;\n    }\n    // If array length <= minItems, don't allow removing any items\n    return this.parentArray.items.length - 1 <= this.parentArray.options.minItems ? false :\n      // For removable list items, allow removing any item\n      this.layoutNode.arrayItemType === 'list' ? true :\n        // For removable tuple items, only allow removing last item in list\n        this.layoutIndex[this.layoutIndex.length - 1] === this.parentArray.items.length - 2;\n  }\n\n  ngOnInit() {\n    this.initializeFramework();\n    if (this.layoutNode.arrayItem && this.layoutNode.type !== '$ref') {\n      this.parentArray = this.jsf.getParentNode(this);\n      if (this.parentArray) {\n        this.isOrderable = this.layoutNode.arrayItemType === 'list' &&\n          !this.options.readonly && this.parentArray.options.orderable;\n      }\n    }\n  }\n\n  ngOnChanges() {\n    if (!this.frameworkInitialized) {\n      this.initializeFramework();\n    }\n  }\n\n  initializeFramework() {\n    if (this.layoutNode) {\n      this.options = cloneDeep(this.layoutNode.options);\n      this.widgetLayoutNode = {\n        ...this.layoutNode,\n        options: cloneDeep(this.layoutNode.options)\n      };\n      this.widgetOptions = this.widgetLayoutNode.options;\n      this.formControl = this.jsf.getFormControl(this);\n\n      this.options.isInputWidget = inArray(this.layoutNode.type, [\n        'button', 'checkbox', 'checkboxes-inline', 'checkboxes', 'color',\n        'date', 'datetime-local', 'datetime', 'email', 'file', 'hidden',\n        'image', 'integer', 'month', 'number', 'password', 'radio',\n        'radiobuttons', 'radios-inline', 'radios', 'range', 'reset', 'search',\n        'select', 'submit', 'tel', 'text', 'textarea', 'time', 'url', 'week'\n      ]);\n\n      this.options.title = this.setTitle();\n\n      this.options.htmlClass =\n        addClasses(this.options.htmlClass, 'schema-form-' + this.layoutNode.type);\n      this.options.htmlClass =\n        this.layoutNode.type === 'array' ?\n          addClasses(this.options.htmlClass, 'list-group') :\n          this.layoutNode.arrayItem && this.layoutNode.type !== '$ref' ?\n            addClasses(this.options.htmlClass, 'list-group-item') :\n            // Bootstrap 5 dropped .form-group in favour of margin utilities.\n            addClasses(this.options.htmlClass, 'mb-3');\n      this.widgetOptions.htmlClass = '';\n      this.options.labelHtmlClass =\n        addClasses(this.options.labelHtmlClass, 'form-label');\n      this.widgetOptions.activeClass =\n        addClasses(this.widgetOptions.activeClass, 'active');\n      this.options.fieldAddonLeft =\n        this.options.fieldAddonLeft || this.options.prepend;\n      this.options.fieldAddonRight =\n        this.options.fieldAddonRight || this.options.append;\n\n      // Add asterisk to titles if required\n      if (this.options.title && this.layoutNode.type !== 'tab' &&\n        !this.options.notitle && this.options.required &&\n        !this.options.title.includes('*')\n      ) {\n        this.options.title += ' <strong class=\"text-danger\">*</strong>';\n      }\n      // Set miscelaneous styles and settings for each control type\n      switch (this.layoutNode.type) {\n        // Checkbox controls\n        // CheckboxComponent renders no element carrying htmlClass, so the\n        // single checkbox takes .form-check from the framework's own div.\n        case 'checkbox':\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'form-check-input');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass, 'form-check-label');\n          break;\n        case 'checkboxes':\n          this.widgetOptions.htmlClass = addClasses(\n            this.widgetOptions.htmlClass, 'form-check');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'form-check-input');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass, 'form-check-label');\n          break;\n        case 'checkboxes-inline':\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'form-check-input');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass,\n            'form-check form-check-inline form-check-label');\n          break;\n        // Radio controls\n        case 'radio':\n        case 'radios':\n          this.widgetOptions.htmlClass = addClasses(\n            this.widgetOptions.htmlClass, 'form-check');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'form-check-input');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass, 'form-check-label');\n          break;\n        case 'radios-inline':\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'form-check-input');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass,\n            'form-check form-check-inline form-check-label');\n          break;\n        // Button sets - checkboxbuttons and radiobuttons\n        case 'checkboxbuttons':\n        case 'radiobuttons':\n          this.widgetOptions.htmlClass = addClasses(\n            this.widgetOptions.htmlClass, 'btn-group');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass, 'btn');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass,\n            this.options.style || 'btn-outline-primary');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'visually-hidden');\n          break;\n        // Single button controls\n        case 'button':\n        case 'submit':\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'btn');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, this.options.style || 'btn-info');\n          break;\n        // Containers - arrays and fieldsets\n        case 'array':\n        case 'fieldset':\n        case 'section':\n        case 'conditional':\n        case 'advancedfieldset':\n        case 'authfieldset':\n        case 'selectfieldset':\n        case 'optionfieldset':\n          this.options.messageLocation = 'top';\n          break;\n        case 'tabarray':\n        case 'tabs':\n          this.widgetOptions.htmlClass = addClasses(\n            this.widgetOptions.htmlClass, 'tab-content');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'tab-pane');\n          this.widgetOptions.labelHtmlClass = addClasses(\n            this.widgetOptions.labelHtmlClass, 'nav nav-tabs');\n          break;\n        // 'Add' buttons - references\n        case '$ref':\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'btn pull-right');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, this.options.style || 'btn-default');\n          this.options.icon = 'glyphicon glyphicon-plus';\n          break;\n        // Default - including regular inputs\n        default:\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'form-control');\n      }\n\n      if (this.formControl) {\n        this.updateHelpBlock(this.formControl.status);\n        this.formControl.statusChanges.subscribe(status => this.updateHelpBlock(status));\n\n        if (this.options.debug) {\n          const vars: any[] = [];\n          this.debugOutput = vars.map(thisVar => JSON.stringify(thisVar, null, 2)).join('\\n');\n        }\n      }\n      this.frameworkInitialized = true;\n    }\n\n  }\n\n  updateHelpBlock(status) {\n    this.options.helpBlock = status === 'INVALID' &&\n    this.options.enableErrorState && this.formControl.errors &&\n    (this.formControl.touched || this.formControl.dirty || this.options.feedbackOnRender) ?\n      this.jsf.formatErrors(this.formControl.errors, this.options.validationMessages) :\n      this.options.description || this.options.help || null;\n  }\n\n  setTitle(): string {\n    switch (this.layoutNode.type) {\n      case 'button':\n      case 'checkbox':\n      case 'section':\n      case 'help':\n      case 'msg':\n      case 'submit':\n      case 'message':\n      case 'tabarray':\n      case 'tabs':\n      case '$ref':\n        return null;\n      case 'advancedfieldset':\n        this.widgetOptions.expandable = true;\n        this.widgetOptions.title = 'Advanced options';\n        return null;\n      case 'authfieldset':\n        this.widgetOptions.expandable = true;\n        this.widgetOptions.title = 'Authentication settings';\n        return null;\n      case 'fieldset':\n        this.widgetOptions.title = this.options.title;\n        return null;\n      default:\n        this.widgetOptions.title = null;\n        return this.jsf.setItemTitle(this);\n    }\n  }\n\n  removeItem() {\n    this.jsf.removeItem(this);\n  }\n}\n","<!--\nBootstrap 5 replaced the has-error and has-success wrapper classes with\nis-invalid and is-valid on the control itself, so the state classes are bound\nto the field rather than to this container.\n-->\n<div [class]=\"options?.htmlClass || ''\">\n\n  @if (showRemoveButton) {\n    <button\n      class=\"float-end btn btn-outline-danger btn-sm\"\n      type=\"button\"\n      (click)=\"removeItem()\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  }\n  @if (options?.messageLocation === 'top') {\n    <div>\n      @if (options?.helpBlock) {\n        <p\n          class=\"form-text\"\n        [innerHTML]=\"$safeNavigationMigration(options?.helpBlock)\"></p>\n      }\n    </div>\n  }\n\n  @if (options?.title && layoutNode?.type !== 'tab') {\n    <label\n      [attr.for]=\"'control' + layoutNode?._id\"\n      [class]=\"options?.labelHtmlClass || ''\"\n      [class.visually-hidden]=\"options?.notitle\"\n    [innerHTML]=\"$safeNavigationMigration(options?.title)\"></label>\n  }\n  @if (layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired) {\n    <p>\n      <strong class=\"text-danger\">*</strong> = required fields\n    </p>\n  }\n  <div\n    [class.h-100]=\"true\"\n    [class.mt-1]=\"true\"\n    [class.form-check]=\"isSingleCheck\"\n    [class.is-invalid]=\"!!options?.errorMessage\"\n    [class.input-group]=\"options?.fieldAddonLeft || options?.fieldAddonRight\"\n    >\n    @if (options?.fieldAddonLeft) {\n      <div class=\"input-group-prepend\">\n        <span class=\"input-group-text\" [innerHTML]=\"$safeNavigationMigration(options?.fieldAddonLeft)\"></span>\n      </div>\n    }\n\n    <select-widget-widget\n      [layoutNode]=\"widgetLayoutNode\"\n      [dataIndex]=\"dataIndex\"\n    [layoutIndex]=\"layoutIndex\"></select-widget-widget>\n\n    @if (options?.fieldAddonRight) {\n      <div class=\"input-group-append\">\n        <span class=\"input-group-text\" [innerHTML]=\"$safeNavigationMigration(options?.fieldAddonRight)\"></span>\n      </div>\n    }\n  </div>\n\n  @if (formControl?.touched && options?.errorMessage) {\n    <div\n      class=\"invalid-feedback\"\n    [innerHTML]=\"$safeNavigationMigration(options?.errorMessage)\"></div>\n  }\n\n  <!--\n  description || help is the order updateHelpBlock uses for options.helpBlock,\n  which this block replaced. Reading description alone lost help entirely.\n  The messageLocation guard mirrors the paragraph above: containers set it\n  to 'top', and without it the same text renders in both places.\n  -->\n  @if ((options?.description || options?.help) &&\n    options?.messageLocation !== 'top' &&\n    (!options?.showErrors || !options?.errorMessage)) {\n    <div\n      class=\"form-text text-muted\"\n    [innerHTML]=\"options?.description || options?.help\"></div>\n  }\n</div>\n\n@if (debug && debugOutput) {\n  <div>debug:\n    <pre>{{debugOutput}}</pre>\n  </div>\n}\n","import {Injectable} from '@angular/core';\nimport {Framework} from '@ajsf/core';\nimport {Bootstrap5FrameworkComponent} from './bootstrap5-framework.component';\n\n// Bootstrap 5 Framework\n// https://github.com/ng-bootstrap/ng-bootstrap\n\n@Injectable()\nexport class Bootstrap5Framework extends Framework {\n  name = 'bootstrap-5';\n\n  framework = Bootstrap5FrameworkComponent;\n\n  stylesheets = [\n    '//cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css'\n  ];\n\n  // Bootstrap 5 dropped jQuery, and the bundle build already contains Popper,\n  // so this is one script where Bootstrap 4 needed three.\n  scripts = [\n    '//cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js',\n  ];\n}\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {\n  Framework,\n  JsonSchemaFormService,\n  WidgetLibraryService,\n  FrameworkLibraryService,\n  JsonSchemaFormModule,\n  WidgetLibraryModule\n} from '@ajsf/core';\nimport {Bootstrap5Framework} from './bootstrap5.framework';\nimport {Bootstrap5FrameworkComponent} from './bootstrap5-framework.component';\n\n@NgModule({\n    imports: [\n        JsonSchemaFormModule,\n        CommonModule,\n        WidgetLibraryModule,\n    ],\n    declarations: [\n        Bootstrap5FrameworkComponent,\n    ],\n    exports: [\n        JsonSchemaFormModule,\n        Bootstrap5FrameworkComponent,\n    ],\n    providers: [\n        JsonSchemaFormService,\n        FrameworkLibraryService,\n        WidgetLibraryService,\n        { provide: Framework, useClass: Bootstrap5Framework, multi: true },\n    ]\n})\nexport class Bootstrap5FrameworkModule {\n}\n","/*\n * Public API Surface of @ajsf/bootstrap5\n */\n\nexport * from './lib/bootstrap5-framework.module';\nexport * from './lib/bootstrap5-framework.component';\nexport * from './lib/bootstrap5.framework';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ajsf-bootstrap5.mjs","sources":["../../../../projects/ajsf-bootstrap5/src/lib/bootstrap5-framework.component.ts","../../../../projects/ajsf-bootstrap5/src/lib/bootstrap5-framework.component.html","../../../../projects/ajsf-bootstrap5/src/lib/widgets/bootstrap5-checkbox.component.ts","../../../../projects/ajsf-bootstrap5/src/lib/widgets/bootstrap5-checkboxes.component.ts","../../../../projects/ajsf-bootstrap5/src/lib/widgets/bootstrap5-radios.component.ts","../../../../projects/ajsf-bootstrap5/src/lib/bootstrap5.framework.ts","../../../../projects/ajsf-bootstrap5/src/lib/widgets/public_api.ts","../../../../projects/ajsf-bootstrap5/src/lib/bootstrap5-framework.module.ts","../../../../projects/ajsf-bootstrap5/src/public_api.ts","../../../../projects/ajsf-bootstrap5/src/ajsf-bootstrap5.ts"],"sourcesContent":["import {\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnChanges,\n  OnInit,\n  ChangeDetectionStrategy\n} from '@angular/core';\nimport {JsonSchemaFormService, addClasses, cloneDeep, inArray} from '@ajsf/core';\n\n/**\n * Bootstrap 5 framework for Angular JSON Schema Form.\n *\n */\n@Component({\n    selector: 'bootstrap-5-framework',\n    templateUrl: './bootstrap5-framework.component.html',\n    styleUrls: ['./bootstrap5-framework.component.scss'],\n    changeDetection: ChangeDetectionStrategy.Eager,\n    standalone: false\n})\nexport class Bootstrap5FrameworkComponent implements OnInit, OnChanges {\n  frameworkInitialized = false;\n  widgetOptions: any; // Options passed to child widget\n  widgetLayoutNode: any; // layoutNode passed to child widget\n  options: any; // Options used in this framework\n  formControl: any = null;\n  debugOutput: any = '';\n  debug: any = '';\n  parentArray: any = null;\n  isOrderable = false;\n  @Input() layoutNode: any;\n  @Input() layoutIndex: number[];\n  @Input() dataIndex: number[];\n\n  constructor(\n    public changeDetector: ChangeDetectorRef,\n    public jsf: JsonSchemaFormService\n  ) {\n  }\n\n  get isSingleCheck(): boolean {\n    return this.layoutNode.type === 'checkbox' &&\n      !this.options.fieldAddonLeft && !this.options.fieldAddonRight;\n  }\n\n  get showRemoveButton(): boolean {\n    if (!this.options.removable || this.options.readonly ||\n      this.layoutNode.type === '$ref'\n    ) {\n      return false;\n    }\n    if (this.layoutNode.recursiveReference) {\n      return true;\n    }\n    if (!this.layoutNode.arrayItem || !this.parentArray) {\n      return false;\n    }\n    // If array length <= minItems, don't allow removing any items\n    return this.parentArray.items.length - 1 <= this.parentArray.options.minItems ? false :\n      // For removable list items, allow removing any item\n      this.layoutNode.arrayItemType === 'list' ? true :\n        // For removable tuple items, only allow removing last item in list\n        this.layoutIndex[this.layoutIndex.length - 1] === this.parentArray.items.length - 2;\n  }\n\n  ngOnInit() {\n    this.initializeFramework();\n    if (this.layoutNode.arrayItem && this.layoutNode.type !== '$ref') {\n      this.parentArray = this.jsf.getParentNode(this);\n      if (this.parentArray) {\n        this.isOrderable = this.layoutNode.arrayItemType === 'list' &&\n          !this.options.readonly && this.parentArray.options.orderable;\n      }\n    }\n  }\n\n  ngOnChanges() {\n    if (!this.frameworkInitialized) {\n      this.initializeFramework();\n    }\n  }\n\n  initializeFramework() {\n    if (this.layoutNode) {\n      this.options = cloneDeep(this.layoutNode.options);\n      this.widgetLayoutNode = {\n        ...this.layoutNode,\n        options: cloneDeep(this.layoutNode.options)\n      };\n      this.widgetOptions = this.widgetLayoutNode.options;\n      this.formControl = this.jsf.getFormControl(this);\n\n      this.options.isInputWidget = inArray(this.layoutNode.type, [\n        'button', 'checkbox', 'checkboxbuttons', 'checkboxes-inline',\n        'checkboxes', 'color',\n        'date', 'datetime-local', 'datetime', 'email', 'file', 'hidden',\n        'image', 'integer', 'month', 'number', 'password', 'radio',\n        'radiobuttons', 'radios-inline', 'radios', 'range', 'reset', 'search',\n        'select', 'submit', 'tel', 'text', 'textarea', 'time', 'url', 'week'\n      ]);\n\n      this.options.title = this.setTitle();\n\n      this.options.htmlClass =\n        addClasses(this.options.htmlClass, 'schema-form-' + this.layoutNode.type);\n      this.options.htmlClass =\n        this.layoutNode.type === 'array' ?\n          addClasses(this.options.htmlClass, 'list-group') :\n          this.layoutNode.arrayItem && this.layoutNode.type !== '$ref' ?\n            addClasses(this.options.htmlClass, 'list-group-item') :\n            // Bootstrap 5 dropped .form-group in favour of margin utilities.\n            addClasses(this.options.htmlClass, 'mb-3');\n      this.widgetOptions.htmlClass = '';\n      this.options.labelHtmlClass =\n        addClasses(this.options.labelHtmlClass, 'form-label');\n      this.widgetOptions.activeClass =\n        addClasses(this.widgetOptions.activeClass, 'active');\n      this.options.fieldAddonLeft =\n        this.options.fieldAddonLeft || this.options.prepend;\n      this.options.fieldAddonRight =\n        this.options.fieldAddonRight || this.options.append;\n\n      // Add asterisk to titles if required. setTitle hands the title to the\n      // widget for an array or a fieldset and leaves none here, so the marker\n      // follows it. Named types only: setTitle also returns null for submit,\n      // whose widget uses the title as an input value rather than as HTML, so\n      // markup appended there would render literally.\n      const titled = this.layoutNode.type === 'array' || this.layoutNode.type === 'fieldset'\n        ? this.widgetOptions : this.options;\n      if (titled.title && this.layoutNode.type !== 'tab' &&\n        !this.options.notitle && this.options.required &&\n        !titled.title.includes('*')\n      ) {\n        titled.title += ' <strong class=\"text-danger\">*</strong>';\n      }\n      // Set miscelaneous styles and settings for each control type\n      switch (this.layoutNode.type) {\n        // Checkbox controls\n        // The framework template puts [class.form-check]=\"isSingleCheck\" on\n        // its own wrapper div, so the single checkbox takes .form-check from\n        // there rather than from this switch.\n        case 'checkbox':\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'form-check-input');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass, 'form-check-label');\n          break;\n        case 'checkboxes':\n          this.widgetOptions.htmlClass = addClasses(\n            this.widgetOptions.htmlClass, 'form-check');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'form-check-input');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass, 'form-check-label');\n          break;\n        case 'checkboxes-inline':\n          this.widgetOptions.htmlClass = addClasses(\n            this.widgetOptions.htmlClass, 'form-check form-check-inline');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'form-check-input');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass, 'form-check-label');\n          break;\n        // Radio controls\n        case 'radio':\n        case 'radios':\n          this.widgetOptions.htmlClass = addClasses(\n            this.widgetOptions.htmlClass, 'form-check');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'form-check-input');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass, 'form-check-label');\n          break;\n        case 'radios-inline':\n          this.widgetOptions.htmlClass = addClasses(\n            this.widgetOptions.htmlClass, 'form-check form-check-inline');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'form-check-input');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass, 'form-check-label');\n          break;\n        // Button sets - checkboxbuttons and radiobuttons\n        case 'checkboxbuttons':\n        case 'radiobuttons':\n          this.widgetOptions.htmlClass = addClasses(\n            this.widgetOptions.htmlClass, 'btn-group');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass, 'btn');\n          this.widgetOptions.itemLabelHtmlClass = addClasses(\n            this.widgetOptions.itemLabelHtmlClass,\n            this.options.style || 'btn-outline-primary');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'btn-check');\n          break;\n        // Single button controls\n        case 'button':\n        case 'submit':\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'btn');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, this.options.style || 'btn-info');\n          break;\n        // Containers - arrays and fieldsets\n        case 'array':\n        case 'fieldset':\n        case 'section':\n        case 'conditional':\n        case 'advancedfieldset':\n        case 'authfieldset':\n        case 'selectfieldset':\n        case 'optionfieldset':\n          this.options.messageLocation = 'top';\n          break;\n        case 'tabarray':\n        case 'tabs':\n          this.widgetOptions.htmlClass = addClasses(\n            this.widgetOptions.htmlClass, 'tab-content');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'tab-pane');\n          this.widgetOptions.labelHtmlClass = addClasses(\n            this.widgetOptions.labelHtmlClass, 'nav nav-tabs');\n          break;\n        // 'Add' buttons - references\n        case '$ref':\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'btn pull-right');\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, this.options.style || 'btn-default');\n          this.options.icon = 'glyphicon glyphicon-plus';\n          break;\n        // Default - including regular inputs\n        default:\n          this.widgetOptions.fieldHtmlClass = addClasses(\n            this.widgetOptions.fieldHtmlClass, 'form-control');\n      }\n\n      if (this.formControl) {\n        this.updateHelpBlock(this.formControl.status);\n        this.formControl.statusChanges.subscribe(status => this.updateHelpBlock(status));\n\n        if (this.options.debug) {\n          const vars: any[] = [];\n          this.debugOutput = vars.map(thisVar => JSON.stringify(thisVar, null, 2)).join('\\n');\n        }\n      }\n      this.frameworkInitialized = true;\n    }\n\n  }\n\n  updateHelpBlock(status) {\n    this.options.helpBlock = status === 'INVALID' &&\n    this.options.enableErrorState && this.formControl.errors &&\n    (this.formControl.touched || this.formControl.dirty || this.options.feedbackOnRender) ?\n      this.jsf.formatErrors(this.formControl.errors, this.options.validationMessages) :\n      this.options.description || this.options.help || null;\n  }\n\n  setTitle(): string {\n    switch (this.layoutNode.type) {\n      case 'button':\n      case 'checkbox':\n      case 'section':\n      case 'help':\n      case 'msg':\n      case 'submit':\n      case 'message':\n      case 'tabarray':\n      case 'tabs':\n      case '$ref':\n        return null;\n      case 'advancedfieldset':\n        this.widgetOptions.expandable = true;\n        this.widgetOptions.title = 'Advanced options';\n        return null;\n      case 'authfieldset':\n        this.widgetOptions.expandable = true;\n        this.widgetOptions.title = 'Authentication settings';\n        return null;\n      // An array is a fieldset too: its title belongs to the widget, which\n      // renders it as the legend naming the group. Leaving it to the default\n      // branch blanked it here and had the widget rebuild one from the raw\n      // property name, so the title appeared twice and in two spellings.\n      case 'array':\n      case 'fieldset':\n        this.widgetOptions.title = this.options.title;\n        return null;\n      default:\n        this.widgetOptions.title = null;\n        return this.jsf.setItemTitle(this);\n    }\n  }\n\n  removeItem() {\n    this.jsf.removeItem(this);\n  }\n}\n","<!--\nBootstrap 5 replaced the has-error and has-success wrapper classes with\nis-invalid and is-valid on the control itself, so the state classes are bound\nto the field rather than to this container.\n-->\n<div [class]=\"options?.htmlClass || ''\">\n\n  @if (options?.messageLocation === 'top') {\n    <div>\n      @if (options?.helpBlock) {\n        <p\n          class=\"form-text\"\n        [innerHTML]=\"$safeNavigationMigration(options?.helpBlock)\"></p>\n      }\n    </div>\n  }\n\n  @if (options?.title && layoutNode?.type !== 'tab') {\n    <label\n      [attr.for]=\"'control' + layoutNode?._id\"\n      [class]=\"options?.labelHtmlClass || ''\"\n      [class.visually-hidden]=\"options?.notitle\"\n    [innerHTML]=\"$safeNavigationMigration(options?.title)\"></label>\n  }\n  @if (layoutNode?.type === 'submit' && jsf?.formOptions?.fieldsRequired) {\n    <p>\n      <strong class=\"text-danger\">*</strong> = required fields\n    </p>\n  }\n  <!--\n  is-invalid sits on this row rather than on the field inside it, because\n  Bootstrap reveals .invalid-feedback only as a following sibling of the\n  element carrying .is-invalid, and the message below is this row's sibling.\n  The row is a flex container only for a removable array item, which is also\n  what stops the button's float taking it out of normal flow.\n  -->\n  <div\n    [class.d-flex]=\"showRemoveButton\"\n    [class.align-items-center]=\"showRemoveButton && options?.isInputWidget\"\n    [class.align-items-start]=\"showRemoveButton && !options?.isInputWidget\"\n    [class.is-invalid]=\"!!options?.errorMessage\">\n    <div\n      [class.h-100]=\"true\"\n      [class.mt-1]=\"true\"\n      [class.form-check]=\"isSingleCheck\"\n      [class.input-group]=\"options?.fieldAddonLeft || options?.fieldAddonRight\"\n      [class.flex-grow-1]=\"showRemoveButton\"\n      >\n      @if (options?.fieldAddonLeft) {\n        <div class=\"input-group-prepend\">\n          <span class=\"input-group-text\" [innerHTML]=\"$safeNavigationMigration(options?.fieldAddonLeft)\"></span>\n        </div>\n      }\n\n      <select-widget-widget\n        [layoutNode]=\"widgetLayoutNode\"\n        [dataIndex]=\"dataIndex\"\n      [layoutIndex]=\"layoutIndex\"></select-widget-widget>\n\n      @if (options?.fieldAddonRight) {\n        <div class=\"input-group-append\">\n          <span class=\"input-group-text\" [innerHTML]=\"$safeNavigationMigration(options?.fieldAddonRight)\"></span>\n        </div>\n      }\n    </div>\n\n    @if (showRemoveButton) {\n      <button\n        class=\"ms-2 btn btn-outline-danger btn-sm\"\n        type=\"button\"\n        (click)=\"removeItem()\">\n        <span aria-hidden=\"true\">&times;</span>\n      </button>\n    }\n  </div>\n\n  @if (formControl?.touched && options?.errorMessage) {\n    <div\n      class=\"invalid-feedback\"\n    [innerHTML]=\"$safeNavigationMigration(options?.errorMessage)\"></div>\n  }\n\n  <!--\n  description || help is the order updateHelpBlock uses for options.helpBlock,\n  which this block replaced. Reading description alone lost help entirely.\n  The messageLocation guard mirrors the paragraph above: containers set it\n  to 'top', and without it the same text renders in both places.\n  -->\n  @if ((options?.description || options?.help) &&\n    options?.messageLocation !== 'top' &&\n    (!options?.showErrors || !options?.errorMessage)) {\n    <div\n      class=\"form-text text-muted\"\n    [innerHTML]=\"options?.description || options?.help\"></div>\n  }\n</div>\n\n@if (debug && debugOutput) {\n  <div>debug:\n    <pre>{{debugOutput}}</pre>\n  </div>\n}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { CheckboxComponent } from '@ajsf/core';\n\n/**\n * Bootstrap 5 wants the input and label as siblings inside .form-check, and\n * styles the input's state through sibling selectors. The core widget nests\n * the input inside the label, which is the Bootstrap 3 shape.\n *\n * Template only. No constructor: Angular inherits the base's injection\n * through its generated factory, and adding one would break that.\n */\n@Component({\n  selector: 'bootstrap5-checkbox-widget',\n  changeDetection: ChangeDetectionStrategy.Eager,\n  standalone: false,\n  template: `\n    <div [class]=\"options?.htmlClass || ''\">\n      @if (boundControl) {\n        <input\n          [formControl]=\"formControl\"\n          [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n          [class]=\"(options?.fieldHtmlClass || '') + (isChecked ?\n            (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :\n            (' ' + (options?.style?.unselected || '')))\"\n          [id]=\"'control' + layoutNode?._id\"\n          [name]=\"controlName\"\n          [readonly]=\"options?.readonly ? 'readonly' : null\"\n          type=\"checkbox\">\n      }\n      @if (!boundControl) {\n        <input\n          [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n          [checked]=\"isChecked ? 'checked' : null\"\n          [class]=\"(options?.fieldHtmlClass || '') + (isChecked ?\n            (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :\n            (' ' + (options?.style?.unselected || '')))\"\n          [disabled]=\"controlDisabled\"\n          [id]=\"'control' + layoutNode?._id\"\n          [name]=\"controlName\"\n          [readonly]=\"options?.readonly ? 'readonly' : null\"\n          [value]=\"controlValue\"\n          type=\"checkbox\"\n          (change)=\"updateValue($event)\">\n      }\n      <label\n        [attr.for]=\"'control' + layoutNode?._id\"\n        [class]=\"options?.itemLabelHtmlClass || ''\">\n        @if (options?.title) {\n          <span\n            [style.display]=\"options?.notitle ? 'none' : ''\"\n            [innerHTML]=\"options?.title\"></span>\n        }\n      </label>\n    </div>`,\n})\nexport class Bootstrap5CheckboxComponent extends CheckboxComponent {}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { CheckboxesComponent } from '@ajsf/core';\n\n/**\n * Sibling input and label per item, for checkboxes, checkboxes-inline and\n * checkboxbuttons alike. The horizontal branch splits on layoutNode.type:\n * checkboxbuttons keeps the one shared wrapper, because btn-group belongs on\n * a single element around the whole set and Bootstrap 5's btn-check idiom is\n * a sibling input there too. checkboxes-inline gives each item its own\n * wrapper, because Bootstrap 5 documents one .form-check.form-check-inline\n * per item, not one around the whole set.\n *\n * activeClass and style.selected stay on the label, where the core widget\n * puts them, so the button idiom keeps working.\n *\n * Template only. No constructor.\n */\n@Component({\n  selector: 'bootstrap5-checkboxes-widget',\n  changeDetection: ChangeDetectionStrategy.Eager,\n  standalone: false,\n  template: `\n    @if (options?.title) {\n      <label\n        [class]=\"options?.labelHtmlClass || ''\"\n        [style.display]=\"options?.notitle ? 'none' : ''\"\n        [innerHTML]=\"options?.title\"></label>\n    }\n\n    @if (layoutOrientation === 'horizontal') {\n      @if (layoutNode?.type === 'checkboxbuttons') {\n        <div [class]=\"options?.htmlClass || ''\">\n          @for (checkboxItem of checkboxList; track checkboxItem) {\n            <input type=\"checkbox\"\n              [attr.required]=\"options?.required\"\n              [checked]=\"checkboxItem.checked\"\n              [class]=\"options?.fieldHtmlClass || ''\"\n              [disabled]=\"controlDisabled\"\n              [id]=\"'control' + layoutNode?._id + '/' + checkboxItem.value\"\n              [name]=\"checkboxItem?.name\"\n              [readonly]=\"options?.readonly ? 'readonly' : null\"\n              [value]=\"checkboxItem.value\"\n              (change)=\"updateValue($event, checkboxItem)\">\n            <label\n              [attr.for]=\"'control' + layoutNode?._id + '/' + checkboxItem.value\"\n              [class]=\"(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?\n                (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :\n                (' ' + (options?.style?.unselected || '')))\"\n              [innerHTML]=\"checkboxItem.name\"></label>\n          }\n        </div>\n      } @else {\n        <div>\n          @for (checkboxItem of checkboxList; track checkboxItem) {\n            <div [class]=\"options?.htmlClass || ''\">\n              <input type=\"checkbox\"\n                [attr.required]=\"options?.required\"\n                [checked]=\"checkboxItem.checked\"\n                [class]=\"options?.fieldHtmlClass || ''\"\n                [disabled]=\"controlDisabled\"\n                [id]=\"'control' + layoutNode?._id + '/' + checkboxItem.value\"\n                [name]=\"checkboxItem?.name\"\n                [readonly]=\"options?.readonly ? 'readonly' : null\"\n                [value]=\"checkboxItem.value\"\n                (change)=\"updateValue($event, checkboxItem)\">\n              <label\n                [attr.for]=\"'control' + layoutNode?._id + '/' + checkboxItem.value\"\n                [class]=\"(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?\n                  (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :\n                  (' ' + (options?.style?.unselected || '')))\"\n                [innerHTML]=\"checkboxItem.name\"></label>\n            </div>\n          }\n        </div>\n      }\n    }\n\n    @if (layoutOrientation === 'vertical') {\n      <div>\n        @for (checkboxItem of checkboxList; track checkboxItem) {\n          <div [class]=\"options?.htmlClass || ''\">\n            <input type=\"checkbox\"\n              [attr.required]=\"options?.required\"\n              [checked]=\"checkboxItem.checked\"\n              [class]=\"options?.fieldHtmlClass || ''\"\n              [disabled]=\"controlDisabled\"\n              [id]=\"'control' + layoutNode?._id + '/' + checkboxItem.value\"\n              [name]=\"checkboxItem?.name\"\n              [readonly]=\"options?.readonly ? 'readonly' : null\"\n              [value]=\"checkboxItem.value\"\n              (change)=\"updateValue($event, checkboxItem)\">\n            <label\n              [attr.for]=\"'control' + layoutNode?._id + '/' + checkboxItem.value\"\n              [class]=\"(options?.itemLabelHtmlClass || '') + (checkboxItem.checked ?\n                (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :\n                (' ' + (options?.style?.unselected || '')))\"\n              [innerHTML]=\"checkboxItem.name\"></label>\n          </div>\n        }\n      </div>\n    }`,\n})\nexport class Bootstrap5CheckboxesComponent extends CheckboxesComponent {}\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\nimport { RadiosComponent } from '@ajsf/core';\n\n/**\n * Sibling input and label per item, for radios, radios-inline and\n * radiobuttons alike. The horizontal branch splits on layoutNode.type:\n * radiobuttons keeps the one shared wrapper, because btn-group belongs on a\n * single element around the whole set and Bootstrap 5's btn-check idiom is a\n * sibling input there too. radios-inline gives each item its own wrapper,\n * because Bootstrap 5 documents one .form-check.form-check-inline per item,\n * not one around the whole set.\n *\n * Template only. No constructor.\n */\n@Component({\n  selector: 'bootstrap5-radios-widget',\n  changeDetection: ChangeDetectionStrategy.Eager,\n  standalone: false,\n  template: `\n    @if (options?.title) {\n      <label\n        [attr.for]=\"'control' + layoutNode?._id\"\n        [class]=\"options?.labelHtmlClass || ''\"\n        [style.display]=\"options?.notitle ? 'none' : ''\"\n        [innerHTML]=\"options?.title\"></label>\n    }\n\n    @if (layoutOrientation === 'horizontal') {\n      @if (layoutNode?.type === 'radiobuttons') {\n        <div [class]=\"options?.htmlClass || ''\">\n          @for (radioItem of radiosList; track radioItem) {\n            <input type=\"radio\"\n              [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n              [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n              [attr.required]=\"options?.required\"\n              [checked]=\"radioItem?.value === controlValue\"\n              [class]=\"options?.fieldHtmlClass || ''\"\n              [disabled]=\"controlDisabled\"\n              [id]=\"'control' + layoutNode?._id + '/' + radioItem?.value\"\n              [name]=\"controlName\"\n              [value]=\"radioItem?.value\"\n              (change)=\"updateValue($event)\">\n            <label\n              [attr.for]=\"'control' + layoutNode?._id + '/' + radioItem?.value\"\n              [class]=\"(options?.itemLabelHtmlClass || '') +\n                ((controlValue + '' === radioItem?.value + '') ?\n                (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :\n                (' ' + (options?.style?.unselected || '')))\"\n              [innerHTML]=\"radioItem?.name\"></label>\n          }\n        </div>\n      } @else {\n        <div>\n          @for (radioItem of radiosList; track radioItem) {\n            <div [class]=\"options?.htmlClass || ''\">\n              <input type=\"radio\"\n                [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n                [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n                [attr.required]=\"options?.required\"\n                [checked]=\"radioItem?.value === controlValue\"\n                [class]=\"options?.fieldHtmlClass || ''\"\n                [disabled]=\"controlDisabled\"\n                [id]=\"'control' + layoutNode?._id + '/' + radioItem?.value\"\n                [name]=\"controlName\"\n                [value]=\"radioItem?.value\"\n                (change)=\"updateValue($event)\">\n              <label\n                [attr.for]=\"'control' + layoutNode?._id + '/' + radioItem?.value\"\n                [class]=\"(options?.itemLabelHtmlClass || '') +\n                  ((controlValue + '' === radioItem?.value + '') ?\n                  (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :\n                  (' ' + (options?.style?.unselected || '')))\"\n                [innerHTML]=\"radioItem?.name\"></label>\n            </div>\n          }\n        </div>\n      }\n    }\n\n    @if (layoutOrientation !== 'horizontal') {\n      <div>\n        @for (radioItem of radiosList; track radioItem) {\n          <div [class]=\"options?.htmlClass || ''\">\n            <input type=\"radio\"\n              [attr.aria-describedby]=\"'control' + layoutNode?._id + 'Status'\"\n              [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\n              [attr.required]=\"options?.required\"\n              [checked]=\"radioItem?.value === controlValue\"\n              [class]=\"options?.fieldHtmlClass || ''\"\n              [disabled]=\"controlDisabled\"\n              [id]=\"'control' + layoutNode?._id + '/' + radioItem?.value\"\n              [name]=\"controlName\"\n              [value]=\"radioItem?.value\"\n              (change)=\"updateValue($event)\">\n            <label\n              [attr.for]=\"'control' + layoutNode?._id + '/' + radioItem?.value\"\n              [class]=\"(options?.itemLabelHtmlClass || '') +\n                ((controlValue + '' === radioItem?.value + '') ?\n                (' ' + (options?.activeClass || '') + ' ' + (options?.style?.selected || '')) :\n                (' ' + (options?.style?.unselected || '')))\"\n              [innerHTML]=\"radioItem?.name\"></label>\n          </div>\n        }\n      </div>\n    }`,\n})\nexport class Bootstrap5RadiosComponent extends RadiosComponent {}\n","import {Injectable} from '@angular/core';\nimport {Framework} from '@ajsf/core';\nimport {Bootstrap5FrameworkComponent} from './bootstrap5-framework.component';\nimport {Bootstrap5CheckboxComponent} from './widgets/bootstrap5-checkbox.component';\nimport {Bootstrap5CheckboxesComponent} from './widgets/bootstrap5-checkboxes.component';\nimport {Bootstrap5RadiosComponent} from './widgets/bootstrap5-radios.component';\n\n// Bootstrap 5 Framework\n// https://github.com/ng-bootstrap/ng-bootstrap\n\n@Injectable()\nexport class Bootstrap5Framework extends Framework {\n  name = 'bootstrap-5';\n\n  framework = Bootstrap5FrameworkComponent;\n\n  widgets = {\n    'checkbox': Bootstrap5CheckboxComponent,\n    'checkboxes': Bootstrap5CheckboxesComponent,\n    'radios': Bootstrap5RadiosComponent,\n  };\n\n  stylesheets = [\n    '//cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css'\n  ];\n\n  // Bootstrap 5 dropped jQuery, and the bundle build already contains Popper,\n  // so this is one script where Bootstrap 4 needed three.\n  scripts = [\n    '//cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js',\n  ];\n}\n","import { Bootstrap5CheckboxComponent } from './bootstrap5-checkbox.component';\nimport { Bootstrap5CheckboxesComponent } from './bootstrap5-checkboxes.component';\nimport { Bootstrap5RadiosComponent } from './bootstrap5-radios.component';\n\nexport { Bootstrap5CheckboxComponent } from './bootstrap5-checkbox.component';\nexport { Bootstrap5CheckboxesComponent } from './bootstrap5-checkboxes.component';\nexport { Bootstrap5RadiosComponent } from './bootstrap5-radios.component';\n\nexport const BOOTSTRAP5_FRAMEWORK_COMPONENTS = [\n  Bootstrap5CheckboxComponent,\n  Bootstrap5CheckboxesComponent,\n  Bootstrap5RadiosComponent,\n];\n","import {NgModule} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {\n  Framework,\n  JsonSchemaFormService,\n  WidgetLibraryService,\n  FrameworkLibraryService,\n  JsonSchemaFormModule,\n  WidgetLibraryModule\n} from '@ajsf/core';\nimport {Bootstrap5Framework} from './bootstrap5.framework';\nimport {Bootstrap5FrameworkComponent} from './bootstrap5-framework.component';\nimport {BOOTSTRAP5_FRAMEWORK_COMPONENTS} from './widgets/public_api';\n\n@NgModule({\n    imports: [\n        JsonSchemaFormModule,\n        CommonModule,\n        WidgetLibraryModule,\n    ],\n    declarations: [\n        Bootstrap5FrameworkComponent,\n        ...BOOTSTRAP5_FRAMEWORK_COMPONENTS,\n    ],\n    exports: [\n        JsonSchemaFormModule,\n        Bootstrap5FrameworkComponent,\n        ...BOOTSTRAP5_FRAMEWORK_COMPONENTS,\n    ],\n    providers: [\n        JsonSchemaFormService,\n        FrameworkLibraryService,\n        WidgetLibraryService,\n        { provide: Framework, useClass: Bootstrap5Framework, multi: true },\n    ]\n})\nexport class Bootstrap5FrameworkModule {\n}\n","/*\n * Public API Surface of @ajsf/bootstrap5\n */\n\nexport * from './lib/bootstrap5-framework.module';\nexport * from './lib/bootstrap5-framework.component';\nexport * from './lib/bootstrap5.framework';\nexport * from './lib/widgets/public_api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.Bootstrap5CheckboxComponent","i2.Bootstrap5CheckboxesComponent","i3.Bootstrap5RadiosComponent"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ajsf/bootstrap5",
-  "version": "22.0.0",
+  "version": "22.2.0",
   "description": "Angular JSON Schema Form builder using Bootstrap 5 UI",
   "author": "https://github.com/hamzahamidi/ajsf/graphs/contributors",
   "keywords": [
@@ -21,7 +21,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hamzahamidi/ajsf"
+    "url": "git+https://github.com/hamzahamidi/ajsf.git"
   },
   "bugs": {
     "url": "https://github.com/hamzahamidi/ajsf/issues"
@@ -29,7 +29,7 @@
   "funding": "https://github.com/sponsors/hamzahamidi",
   "private": false,
   "dependencies": {
-    "@ajsf/core": "^22.0.0",
+    "@ajsf/core": "^22.2.0",
     "tslib": "^2.0.0"
   },
   "peerDependencies": {

package/types/ajsf-bootstrap5.d.ts

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { OnInit, OnChanges, ChangeDetectorRef } from '@angular/core';
-import * as i2 from '@ajsf/core';
-import { JsonSchemaFormService, Framework } from '@ajsf/core';
-import * as i3 from '@angular/common';
+import * as i5 from '@ajsf/core';
+import { JsonSchemaFormService, CheckboxComponent, CheckboxesComponent, RadiosComponent, Framework } from '@ajsf/core';
+import * as i6 from '@angular/common';
 
 /**
  * Bootstrap 5 framework for Angular JSON Schema Form.
@@ -36,19 +36,74 @@ declare class Bootstrap5FrameworkComponent implements OnInit, OnChanges {
     static ɵcmp: i0.ɵɵComponentDeclaration<Bootstrap5FrameworkComponent, "bootstrap-5-framework", never, { "layoutNode": { "alias": "layoutNode"; "required": false; }; "layoutIndex": { "alias": "layoutIndex"; "required": false; }; "dataIndex": { "alias": "dataIndex"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+/**
+ * Bootstrap 5 wants the input and label as siblings inside .form-check, and
+ * styles the input's state through sibling selectors. The core widget nests
+ * the input inside the label, which is the Bootstrap 3 shape.
+ *
+ * Template only. No constructor: Angular inherits the base's injection
+ * through its generated factory, and adding one would break that.
+ */
+declare class Bootstrap5CheckboxComponent extends CheckboxComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<Bootstrap5CheckboxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Bootstrap5CheckboxComponent, "bootstrap5-checkbox-widget", never, {}, {}, never, never, false, never>;
+}
+
+/**
+ * Sibling input and label per item, for checkboxes, checkboxes-inline and
+ * checkboxbuttons alike. The horizontal branch splits on layoutNode.type:
+ * checkboxbuttons keeps the one shared wrapper, because btn-group belongs on
+ * a single element around the whole set and Bootstrap 5's btn-check idiom is
+ * a sibling input there too. checkboxes-inline gives each item its own
+ * wrapper, because Bootstrap 5 documents one .form-check.form-check-inline
+ * per item, not one around the whole set.
+ *
+ * activeClass and style.selected stay on the label, where the core widget
+ * puts them, so the button idiom keeps working.
+ *
+ * Template only. No constructor.
+ */
+declare class Bootstrap5CheckboxesComponent extends CheckboxesComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<Bootstrap5CheckboxesComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Bootstrap5CheckboxesComponent, "bootstrap5-checkboxes-widget", never, {}, {}, never, never, false, never>;
+}
+
+/**
+ * Sibling input and label per item, for radios, radios-inline and
+ * radiobuttons alike. The horizontal branch splits on layoutNode.type:
+ * radiobuttons keeps the one shared wrapper, because btn-group belongs on a
+ * single element around the whole set and Bootstrap 5's btn-check idiom is a
+ * sibling input there too. radios-inline gives each item its own wrapper,
+ * because Bootstrap 5 documents one .form-check.form-check-inline per item,
+ * not one around the whole set.
+ *
+ * Template only. No constructor.
+ */
+declare class Bootstrap5RadiosComponent extends RadiosComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<Bootstrap5RadiosComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Bootstrap5RadiosComponent, "bootstrap5-radios-widget", never, {}, {}, never, never, false, never>;
+}
+
 declare class Bootstrap5FrameworkModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<Bootstrap5FrameworkModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<Bootstrap5FrameworkModule, [typeof Bootstrap5FrameworkComponent], [typeof i2.JsonSchemaFormModule, typeof i3.CommonModule, typeof i2.WidgetLibraryModule], [typeof i2.JsonSchemaFormModule, typeof Bootstrap5FrameworkComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<Bootstrap5FrameworkModule, [typeof Bootstrap5FrameworkComponent, typeof Bootstrap5CheckboxComponent, typeof Bootstrap5CheckboxesComponent, typeof Bootstrap5RadiosComponent], [typeof i5.JsonSchemaFormModule, typeof i6.CommonModule, typeof i5.WidgetLibraryModule], [typeof i5.JsonSchemaFormModule, typeof Bootstrap5FrameworkComponent, typeof Bootstrap5CheckboxComponent, typeof Bootstrap5CheckboxesComponent, typeof Bootstrap5RadiosComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<Bootstrap5FrameworkModule>;
 }
 
 declare class Bootstrap5Framework extends Framework {
     name: string;
     framework: typeof Bootstrap5FrameworkComponent;
+    widgets: {
+        checkbox: typeof Bootstrap5CheckboxComponent;
+        checkboxes: typeof Bootstrap5CheckboxesComponent;
+        radios: typeof Bootstrap5RadiosComponent;
+    };
     stylesheets: string[];
     scripts: string[];
     static ɵfac: i0.ɵɵFactoryDeclaration<Bootstrap5Framework, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<any>;
 }
 
-export { Bootstrap5Framework, Bootstrap5FrameworkComponent, Bootstrap5FrameworkModule };
+declare const BOOTSTRAP5_FRAMEWORK_COMPONENTS: (typeof Bootstrap5CheckboxComponent | typeof Bootstrap5CheckboxesComponent | typeof Bootstrap5RadiosComponent)[];
+
+export { BOOTSTRAP5_FRAMEWORK_COMPONENTS, Bootstrap5CheckboxComponent, Bootstrap5CheckboxesComponent, Bootstrap5Framework, Bootstrap5FrameworkComponent, Bootstrap5FrameworkModule, Bootstrap5RadiosComponent };