@dereekb/dbx-form 13.20.0 → 13.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/dereekb-dbx-form.mjs +4 -4
- package/fesm2022/dereekb-dbx-form.mjs.map +1 -1
- package/lib/forge/field/texteditor/_texteditor.scss +21 -4
- package/lib/forge/field/value/array/_array.scss +45 -5
- package/lib/forge/field/wrapper/_wrapper.scss +11 -1
- package/lib/style/_theming.scss +0 -2
- package/package.json +8 -8
|
@@ -8983,11 +8983,11 @@ class DbxForgeTextEditorFieldComponent {
|
|
|
8983
8983
|
}
|
|
8984
8984
|
}
|
|
8985
8985
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeTextEditorFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8986
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxForgeTextEditorFieldComponent, isStandalone: true, selector: "dbx-forge-texteditor-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-texteditor-field\" [ngClass]=\"compactClassSignal()\" [class.dbx-texteditor-field-disabled]=\"isDisabled()\">\n @if (labelSignal()) {\n <span class=\"dbx-label\">{{ labelSignal() }}</span>\n }\n <div class=\"dbx-texteditor-field-
|
|
8986
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxForgeTextEditorFieldComponent, isStandalone: true, selector: "dbx-forge-texteditor-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, validationMessages: { classPropertyName: "validationMessages", publicName: "validationMessages", isSignal: true, isRequired: false, transformFunction: null }, defaultValidationMessages: { classPropertyName: "defaultValidationMessages", publicName: "defaultValidationMessages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dbx-texteditor-field\" [ngClass]=\"compactClassSignal()\" [class.dbx-texteditor-field-disabled]=\"isDisabled()\">\n @if (labelSignal()) {\n <span class=\"dbx-label\">{{ labelSignal() }}</span>\n }\n <div class=\"dbx-texteditor-field-content\">\n <div class=\"dbx-texteditor-field-input\">\n <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholderSignal()\" [formControl]=\"editorFormControl\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\"></ngx-editor>\n </div>\n <div class=\"dbx-texteditor-field-menu\">\n <ngx-editor-menu [editor]=\"editor\" [disabled]=\"isDisabled()\"></ngx-editor-menu>\n </div>\n </div>\n @if (errorsToDisplaySignal()[0]; as error) {\n <div class=\"dbx-form-description dbx-form-error\" [id]=\"errorIdSignal()\">{{ error.message }}</div>\n } @else if (descriptionSignal()) {\n <div class=\"dbx-form-description\" [id]=\"hintIdSignal()\">{{ descriptionSignal() }}</div>\n }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i1$5.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i1$5.NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
8987
8987
|
}
|
|
8988
8988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeTextEditorFieldComponent, decorators: [{
|
|
8989
8989
|
type: Component,
|
|
8990
|
-
args: [{ selector: 'dbx-forge-texteditor-field', imports: [NgClass, NgxEditorModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-texteditor-field\" [ngClass]=\"compactClassSignal()\" [class.dbx-texteditor-field-disabled]=\"isDisabled()\">\n @if (labelSignal()) {\n <span class=\"dbx-label\">{{ labelSignal() }}</span>\n }\n <div class=\"dbx-texteditor-field-
|
|
8990
|
+
args: [{ selector: 'dbx-forge-texteditor-field', imports: [NgClass, NgxEditorModule, FormsModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-texteditor-field\" [ngClass]=\"compactClassSignal()\" [class.dbx-texteditor-field-disabled]=\"isDisabled()\">\n @if (labelSignal()) {\n <span class=\"dbx-label\">{{ labelSignal() }}</span>\n }\n <div class=\"dbx-texteditor-field-content\">\n <div class=\"dbx-texteditor-field-input\">\n <ngx-editor [editor]=\"editor\" outputFormat=\"html\" [placeholder]=\"placeholderSignal()\" [formControl]=\"editorFormControl\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\"></ngx-editor>\n </div>\n <div class=\"dbx-texteditor-field-menu\">\n <ngx-editor-menu [editor]=\"editor\" [disabled]=\"isDisabled()\"></ngx-editor-menu>\n </div>\n </div>\n @if (errorsToDisplaySignal()[0]; as error) {\n <div class=\"dbx-form-description dbx-form-error\" [id]=\"errorIdSignal()\">{{ error.message }}</div>\n } @else if (descriptionSignal()) {\n <div class=\"dbx-form-description\" [id]=\"hintIdSignal()\">{{ descriptionSignal() }}</div>\n }\n</div>\n" }]
|
|
8991
8991
|
}], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], validationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "validationMessages", required: false }] }], defaultValidationMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValidationMessages", required: false }] }] } });
|
|
8992
8992
|
|
|
8993
8993
|
var texteditor_field_component = /*#__PURE__*/Object.freeze({
|
|
@@ -9415,11 +9415,11 @@ class DbxForgeArrayFieldElementWrapperComponent {
|
|
|
9415
9415
|
}
|
|
9416
9416
|
}
|
|
9417
9417
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeArrayFieldElementWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9418
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxForgeArrayFieldElementWrapperComponent, isStandalone: true, selector: "dbx-forge-array-field-element-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"dbx-form-repeat-array-field\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"disableRearrangeSignal()\">\n <ng-template cdkDragPlaceholder>\n <div class=\"dbx-form-repeat-array-drag-placeholder\"></div>\n </ng-template>\n <div class=\"dbx-content-navbar dbx-form-repeat-array-bar dbx-flex-bar\">\n @if (!disableRearrangeSignal()) {\n <button mat-icon-button type=\"button\" cdkDragHandle class=\"dbx-form-repeat-array-drag-button\" [disabled]=\"isDisabled()\" aria-label=\"Drag to reorder\">\n <mat-icon>drag_handle</mat-icon>\n </button>\n <dbx-button-spacer></dbx-button-spacer>\n }\n
|
|
9418
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxForgeArrayFieldElementWrapperComponent, isStandalone: true, selector: "dbx-forge-array-field-element-wrapper", inputs: { fieldInputs: { classPropertyName: "fieldInputs", publicName: "fieldInputs", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fieldComponent", first: true, predicate: ["fieldComponent"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div class=\"dbx-form-repeat-array-field\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"disableRearrangeSignal()\">\n <ng-template cdkDragPlaceholder>\n <div class=\"dbx-form-repeat-array-drag-placeholder\"></div>\n </ng-template>\n @if (showIndexChipSignal()) {\n <dbx-chip [display]=\"indexChipDisplaySignal()\">{{ arrayContext.index() + 1 }}</dbx-chip>\n }\n <div class=\"dbx-content-navbar dbx-form-repeat-array-bar dbx-flex-bar\">\n @if (!disableRearrangeSignal()) {\n <button mat-icon-button type=\"button\" cdkDragHandle class=\"dbx-form-repeat-array-drag-button\" [disabled]=\"isDisabled()\" aria-label=\"Drag to reorder\">\n <mat-icon>drag_handle</mat-icon>\n </button>\n <dbx-button-spacer></dbx-button-spacer>\n }\n <span class=\"dbx-form-repeat-array-label\">{{ labelSignal() }}</span>\n <span class=\"spacer\"></span>\n @if (allowDuplicateSignal()) {\n <dbx-button class=\"dbx-button-spacer\" [buttonDisplay]=\"duplicateButtonSignal().display\" [buttonStyle]=\"duplicateButtonSignal().style\" [disabled]=\"isDisabled()\" (buttonClick)=\"duplicateItem()\"></dbx-button>\n }\n @if (allowRemoveSignal()) {\n <dbx-button [text]=\"removeTextSignal()\" [buttonStyle]=\"removeButtonStyleSignal()\" [disabled]=\"isDisabled()\" (buttonClick)=\"removeItem()\"></dbx-button>\n }\n </div>\n <div class=\"dbx-form-repeat-array-field-content\">\n <ng-container #fieldComponent></ng-container>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: DbxChipDirective, selector: "dbx-chip", inputs: ["small", "block", "color", "display", "tone"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: DbxButtonComponent, selector: "dbx-button", inputs: ["bar", "type", "buttonStyle", "color", "spinnerColor", "customButtonColor", "customTextColor", "customSpinnerColor", "basic", "tonal", "raised", "stroked", "flat", "iconOnly", "fab", "customContent", "allowClickPropagation", "mode"] }, { kind: "directive", type: DbxButtonSpacerDirective, selector: "dbx-button-spacer,[dbxButtonSpacer]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
9419
9419
|
}
|
|
9420
9420
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeArrayFieldElementWrapperComponent, decorators: [{
|
|
9421
9421
|
type: Component,
|
|
9422
|
-
args: [{ selector: 'dbx-forge-array-field-element-wrapper', imports: [CdkDrag, CdkDragHandle, CdkDragPlaceholder, DbxChipDirective, MatIconModule, MatButtonModule, DbxButtonComponent, DbxButtonSpacerDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-form-repeat-array-field\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"disableRearrangeSignal()\">\n <ng-template cdkDragPlaceholder>\n <div class=\"dbx-form-repeat-array-drag-placeholder\"></div>\n </ng-template>\n <div class=\"dbx-content-navbar dbx-form-repeat-array-bar dbx-flex-bar\">\n @if (!disableRearrangeSignal()) {\n <button mat-icon-button type=\"button\" cdkDragHandle class=\"dbx-form-repeat-array-drag-button\" [disabled]=\"isDisabled()\" aria-label=\"Drag to reorder\">\n <mat-icon>drag_handle</mat-icon>\n </button>\n <dbx-button-spacer></dbx-button-spacer>\n }\n
|
|
9422
|
+
args: [{ selector: 'dbx-forge-array-field-element-wrapper', imports: [CdkDrag, CdkDragHandle, CdkDragPlaceholder, DbxChipDirective, MatIconModule, MatButtonModule, DbxButtonComponent, DbxButtonSpacerDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"dbx-form-repeat-array-field\" cdkDrag cdkDragLockAxis=\"y\" [cdkDragDisabled]=\"disableRearrangeSignal()\">\n <ng-template cdkDragPlaceholder>\n <div class=\"dbx-form-repeat-array-drag-placeholder\"></div>\n </ng-template>\n @if (showIndexChipSignal()) {\n <dbx-chip [display]=\"indexChipDisplaySignal()\">{{ arrayContext.index() + 1 }}</dbx-chip>\n }\n <div class=\"dbx-content-navbar dbx-form-repeat-array-bar dbx-flex-bar\">\n @if (!disableRearrangeSignal()) {\n <button mat-icon-button type=\"button\" cdkDragHandle class=\"dbx-form-repeat-array-drag-button\" [disabled]=\"isDisabled()\" aria-label=\"Drag to reorder\">\n <mat-icon>drag_handle</mat-icon>\n </button>\n <dbx-button-spacer></dbx-button-spacer>\n }\n <span class=\"dbx-form-repeat-array-label\">{{ labelSignal() }}</span>\n <span class=\"spacer\"></span>\n @if (allowDuplicateSignal()) {\n <dbx-button class=\"dbx-button-spacer\" [buttonDisplay]=\"duplicateButtonSignal().display\" [buttonStyle]=\"duplicateButtonSignal().style\" [disabled]=\"isDisabled()\" (buttonClick)=\"duplicateItem()\"></dbx-button>\n }\n @if (allowRemoveSignal()) {\n <dbx-button [text]=\"removeTextSignal()\" [buttonStyle]=\"removeButtonStyleSignal()\" [disabled]=\"isDisabled()\" (buttonClick)=\"removeItem()\"></dbx-button>\n }\n </div>\n <div class=\"dbx-form-repeat-array-field-content\">\n <ng-container #fieldComponent></ng-container>\n </div>\n</div>\n" }]
|
|
9423
9423
|
}], propDecorators: { fieldComponent: [{ type: i0.ViewChild, args: ['fieldComponent', { ...{ read: ViewContainerRef }, isSignal: true }] }], fieldInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldInputs", required: false }] }], props: [{ type: i0.Input, args: [{ isSignal: true, alias: "props", required: false }] }] } });
|
|
9424
9424
|
|
|
9425
9425
|
var arrayField_element_wrapper_component = /*#__PURE__*/Object.freeze({
|