@dereekb/dbx-form 13.26.0 → 13.27.1

package/fesm2022/dereekb-dbx-form.mjs

@@ -8530,7 +8530,7 @@ class DbxForgeSourceSelectFieldComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxForgeSourceSelectFieldComponent, isStandalone: true, selector: "dbx-forge-source-select-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 } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterInputElement", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [multiple]=\"multipleSignal()\" [panelClass]=\"selectPanelClassSignal()\" (openedChange)=\"onSelectOpenedChange($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n      </div>\n    }\n    @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n      <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n    }\n    @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n      <mat-optgroup [label]=\"optionGroup.label\">\n        @for (value of optionGroup.values; track value.value) {\n          <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n        }\n      </mat-optgroup>\n    }\n  </mat-select>\n\n  @if (showOpenSourceButtonSignal() && !isDisabled()) {\n    <div matSuffix class=\"dbx-source-select-field-suffix\">\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\">\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIconSignal()\"></dbx-button>\n      </dbx-action>\n    </div>\n  }\n\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n\n  @if (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "diameter", "linear", "loading", "error", "context"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: DbxForgeSourceSelectFieldComponent, isStandalone: true, selector: "dbx-forge-source-select-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 } }, host: { properties: { "id": "`${key()}`", "attr.data-testid": "key()", "class": "className()", "attr.hidden": "field()().hidden() || null" } }, viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "filterInputElement", first: true, predicate: ["filterInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [multiple]=\"multipleSignal()\" [panelClass]=\"selectPanelClassSignal()\" (openedChange)=\"onSelectOpenedChange($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-forge-bare-input dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n      </div>\n    }\n    @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n      <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n    }\n    @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n      <mat-optgroup [label]=\"optionGroup.label\">\n        @for (value of optionGroup.values; track value.value) {\n          <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n        }\n      </mat-optgroup>\n    }\n  </mat-select>\n\n  @if (showOpenSourceButtonSignal() && !isDisabled()) {\n    <div matSuffix class=\"dbx-source-select-field-suffix\">\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\">\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIconSignal()\"></dbx-button>\n      </dbx-action>\n    </div>\n  }\n\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n\n  @if (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n", dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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: "ngmodule", type: DbxActionModule }, { kind: "directive", type: i1.DbxActionDirective, selector: "dbx-action,[dbxAction]", exportAs: ["action", "dbxAction"] }, { kind: "directive", type: i1.DbxActionHandlerDirective, selector: "[dbxActionHandler]", inputs: ["dbxActionHandler"] }, { kind: "directive", type: i1.DbxActionValueDirective, selector: "dbxActionValue,[dbxActionValue]", inputs: ["dbxActionValue"] }, { kind: "directive", type: i1.DbxActionButtonDirective, selector: "[dbxActionButton]", inputs: ["dbxActionButtonEcho"] }, { kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "diameter", "linear", "loading", "error", "context"] }, { kind: "pipe", type: DynamicTextPipe, name: "dynamicText" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: DbxForgeSourceSelectFieldComponent, decorators: [{
             type: Component,
@@ -8539,7 +8539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
                         '[attr.data-testid]': 'key()',
                         '[class]': 'className()',
                         '[attr.hidden]': 'field()().hidden() || null'
-                    }, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [multiple]=\"multipleSignal()\" [panelClass]=\"selectPanelClassSignal()\" (openedChange)=\"onSelectOpenedChange($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n      </div>\n    }\n    @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n      <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n    }\n    @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n      <mat-optgroup [label]=\"optionGroup.label\">\n        @for (value of optionGroup.values; track value.value) {\n          <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n        }\n      </mat-optgroup>\n    }\n  </mat-select>\n\n  @if (showOpenSourceButtonSignal() && !isDisabled()) {\n    <div matSuffix class=\"dbx-source-select-field-suffix\">\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\">\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIconSignal()\"></dbx-button>\n      </dbx-action>\n    </div>\n  }\n\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n\n  @if (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n" }]
+                    }, template: "@let f = field();\n@let selectId = key() + '-select';\n\n<mat-form-field class=\"dbx-w100\" [appearance]=\"effectiveAppearanceSignal()\" [subscriptSizing]=\"effectiveSubscriptSizingSignal()\">\n  @if (label(); as label) {\n    <mat-label>{{ label | dynamicText | async }}</mat-label>\n  }\n\n  <mat-select [id]=\"selectId\" [formField]=\"f\" [multiple]=\"multipleSignal()\" [panelClass]=\"selectPanelClassSignal()\" (openedChange)=\"onSelectOpenedChange($event)\" [attr.aria-invalid]=\"ariaInvalidSignal()\" [attr.aria-required]=\"ariaRequiredSignal()\" [attr.aria-describedby]=\"ariaDescribedBySignal()\">\n    @if (filterableSignal()) {\n      <div class=\"dbx-source-select-filter-container\">\n        <input #filterInput class=\"dbx-forge-bare-input dbx-source-select-filter-input\" type=\"text\" placeholder=\"Type to filter...\" (input)=\"onFilterInput($event)\" (keydown)=\"onFilterKeydown($event)\" />\n      </div>\n    }\n    @for (value of filteredNonGroupedValuesSignal(); track value.value) {\n      <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n    }\n    @for (optionGroup of filteredGroupedOptionsSignal(); track optionGroup.label) {\n      <mat-optgroup [label]=\"optionGroup.label\">\n        @for (value of optionGroup.values; track value.value) {\n          <mat-option [value]=\"value.value\">{{ value.label }}</mat-option>\n        }\n      </mat-optgroup>\n    }\n  </mat-select>\n\n  @if (showOpenSourceButtonSignal() && !isDisabled()) {\n    <div matSuffix class=\"dbx-source-select-field-suffix\">\n      <dbx-action dbxActionValue [dbxActionHandler]=\"handleSelectOptions\">\n        <dbx-button #button dbxActionButton [fab]=\"true\" [iconOnly]=\"true\" [icon]=\"selectButtonIconSignal()\"></dbx-button>\n      </dbx-action>\n    </div>\n  }\n\n  <dbx-loading class=\"dbx-source-select-field-loading\" [linear]=\"true\" [context]=\"context\"></dbx-loading>\n\n  @if (errorsToDisplaySignal()[0]; as error) {\n    <mat-error [id]=\"errorIdSignal()\">{{ error.message }}</mat-error>\n  } @else if (hintSignal()) {\n    <mat-hint [id]=\"hintIdSignal()\">{{ hintSignal() }}</mat-hint>\n  }\n</mat-form-field>\n" }]
         }], 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 }] }], buttonElement: [{ type: i0.ViewChild, args: ['button', { ...{ read: (ElementRef) }, isSignal: true }] }], filterInputElement: [{ type: i0.ViewChild, args: ['filterInput', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
 
 var sourceselect_field_component = /*#__PURE__*/Object.freeze({