@db-ux/ngx-core-components 3.0.8-switch-439d623 → 3.1.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.
Files changed (6) hide show
  1. package/components/input/input.d.ts +6 -1
  2. package/components/input/model.d.ts +21 -1
  3. package/components/select/select.d.ts +2 -2
  4. package/fesm2022/db-ux-ngx-core-components.mjs +55 -32
  5. package/fesm2022/db-ux-ngx-core-components.mjs.map +1 -1
  6. package/package.json +3 -3
package/components/input/input.d.ts CHANGED
@@ -56,8 +56,13 @@ export declare class DBInput implements AfterViewInit, ControlValueAccessor {
56
56
  size: InputSignal<DBInputProps["size"]>;
57
57
  autocomplete: InputSignal<DBInputProps["autocomplete"]>;
58
58
  autofocus: InputSignal<DBInputProps["autofocus"]>;
59
+ enterkeyhint: InputSignal<DBInputProps["enterkeyhint"]>;
60
+ inputmode: InputSignal<DBInputProps["inputmode"]>;
59
61
  ariaDescribedBy: InputSignal<DBInputProps["ariaDescribedBy"]>;
62
+ messageSize: InputSignal<DBInputProps["messageSize"]>;
60
63
  messageIcon: InputSignal<DBInputProps["messageIcon"]>;
64
+ validMessageSize: InputSignal<DBInputProps["validMessageSize"]>;
65
+ invalidMessageSize: InputSignal<DBInputProps["invalidMessageSize"]>;
61
66
  input: import("@angular/core").OutputEmitterRef<void | Event>;
62
67
  change: import("@angular/core").OutputEmitterRef<void | Event>;
63
68
  blur: import("@angular/core").OutputEmitterRef<void | FocusEvent>;
@@ -94,5 +99,5 @@ export declare class DBInput implements AfterViewInit, ControlValueAccessor {
94
99
  setDisabledState(disabled: boolean): void;
95
100
  ngAfterViewInit(): void;
96
101
  static ɵfac: i0.ɵɵFactoryDeclaration<DBInput, never>;
97
- static ɵcmp: i0.ɵɵComponentDeclaration<DBInput, "db-input", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; "isSignal": true; }; "dataListId": { "alias": "dataListId"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "showMessage": { "alias": "showMessage"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "validMessage": { "alias": "validMessage"; "required": false; "isSignal": true; }; "validation": { "alias": "validation"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "dataList": { "alias": "dataList"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "showIconLeading": { "alias": "showIconLeading"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "iconLeading": { "alias": "iconLeading"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconTrailing": { "alias": "iconTrailing"; "required": false; "isSignal": true; }; "showRequiredAsterisk": { "alias": "showRequiredAsterisk"; "required": false; "isSignal": true; }; "showIconTrailing": { "alias": "showIconTrailing"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "fieldSizing": { "alias": "fieldSizing"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "minlength": { "alias": "minlength"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "messageIcon": { "alias": "messageIcon"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "input": "input"; "change": "change"; "blur": "blur"; "focus": "focus"; }, never, ["*"], true, never>;
102
+ static ɵcmp: i0.ɵɵComponentDeclaration<DBInput, "db-input", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; "isSignal": true; }; "dataListId": { "alias": "dataListId"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "showMessage": { "alias": "showMessage"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "validMessage": { "alias": "validMessage"; "required": false; "isSignal": true; }; "validation": { "alias": "validation"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "dataList": { "alias": "dataList"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "showIconLeading": { "alias": "showIconLeading"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "iconLeading": { "alias": "iconLeading"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconTrailing": { "alias": "iconTrailing"; "required": false; "isSignal": true; }; "showRequiredAsterisk": { "alias": "showRequiredAsterisk"; "required": false; "isSignal": true; }; "showIconTrailing": { "alias": "showIconTrailing"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "fieldSizing": { "alias": "fieldSizing"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "maxlength": { "alias": "maxlength"; "required": false; "isSignal": true; }; "minlength": { "alias": "minlength"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "enterkeyhint": { "alias": "enterkeyhint"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "messageSize": { "alias": "messageSize"; "required": false; "isSignal": true; }; "messageIcon": { "alias": "messageIcon"; "required": false; "isSignal": true; }; "validMessageSize": { "alias": "validMessageSize"; "required": false; "isSignal": true; }; "invalidMessageSize": { "alias": "invalidMessageSize"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "input": "input"; "change": "change"; "blur": "blur"; "focus": "focus"; }, never, ["*"], true, never>;
98
103
  }
package/components/input/model.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InputEventProps, InputEventState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, ValueLabelType } from '../../shared/model';
1
+ import { ChangeEventProps, ChangeEventState, FocusEventProps, FocusEventState, FormMessageProps, FormProps, FormSizeProps, FormState, FormTextProps, FromValidState, GlobalProps, GlobalState, IconLeadingProps, IconProps, IconTrailingProps, InputEventProps, InputEventState, ShowIconLeadingProps, ShowIconProps, ShowIconTrailingProps, SizeType, ValueLabelType } from '../../shared/model';
2
2
  export declare const InputTypeList: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", "week"];
3
3
  export type InputTypeType = (typeof InputTypeList)[number];
4
4
  export type DBInputDefaultProps = {
@@ -34,6 +34,26 @@ export type DBInputDefaultProps = {
34
34
  * Sets [step value](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step).
35
35
  */
36
36
  step?: number | string;
37
+ /**
38
+ * Hint for the [enter key behavior](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) on virtual keyboards.
39
+ */
40
+ enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
41
+ /**
42
+ * Hint for [virtual keyboard](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) selection.
43
+ */
44
+ inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
45
+ /**
46
+ * The size of the message infotext. Defaults to "small".
47
+ */
48
+ messageSize?: SizeType;
49
+ /**
50
+ * The size of the valid message infotext. Defaults to "small".
51
+ */
52
+ validMessageSize?: SizeType;
53
+ /**
54
+ * The size of the invalid message infotext. Defaults to "small".
55
+ */
56
+ invalidMessageSize?: SizeType;
37
57
  };
38
58
  export type DBInputProps = DBInputDefaultProps & GlobalProps & FormTextProps & InputEventProps<HTMLInputElement> & ChangeEventProps<HTMLInputElement> & FocusEventProps<HTMLInputElement> & FormProps & IconProps & IconTrailingProps & FormMessageProps & ShowIconProps & IconLeadingProps & ShowIconLeadingProps & ShowIconTrailingProps & FormSizeProps;
39
59
  export type DBInputDefaultState = {
package/components/select/select.d.ts CHANGED
@@ -20,6 +20,7 @@ export declare class DBSelect implements AfterViewInit, ControlValueAccessor {
20
20
  invalidMessage: InputSignal<DBSelectProps["invalidMessage"]>;
21
21
  message: InputSignal<DBSelectProps["message"]>;
22
22
  showMessage: InputSignal<DBSelectProps["showMessage"]>;
23
+ placeholder: InputSignal<DBSelectProps["placeholder"]>;
23
24
  value: ModelSignal<DBSelectProps["value"]>;
24
25
  validMessage: InputSignal<DBSelectProps["validMessage"]>;
25
26
  validation: InputSignal<DBSelectProps["validation"]>;
@@ -38,7 +39,6 @@ export declare class DBSelect implements AfterViewInit, ControlValueAccessor {
38
39
  multiple: InputSignal<DBSelectProps["multiple"]>;
39
40
  ariaDescribedBy: InputSignal<DBSelectProps["ariaDescribedBy"]>;
40
41
  options: InputSignal<DBSelectProps["options"]>;
41
- placeholder: InputSignal<DBSelectProps["placeholder"]>;
42
42
  messageIcon: InputSignal<DBSelectProps["messageIcon"]>;
43
43
  click: import("@angular/core").OutputEmitterRef<void | MouseEvent>;
44
44
  input: import("@angular/core").OutputEmitterRef<void | Event>;
@@ -79,5 +79,5 @@ export declare class DBSelect implements AfterViewInit, ControlValueAccessor {
79
79
  setDisabledState(disabled: boolean): void;
80
80
  ngAfterViewInit(): void;
81
81
  static ɵfac: i0.ɵɵFactoryDeclaration<DBSelect, never>;
82
- static ɵcmp: i0.ɵɵComponentDeclaration<DBSelect, "db-select", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "showMessage": { "alias": "showMessage"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "validMessage": { "alias": "validMessage"; "required": false; "isSignal": true; }; "validation": { "alias": "validation"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "showRequiredAsterisk": { "alias": "showRequiredAsterisk"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "messageIcon": { "alias": "messageIcon"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "click": "click"; "input": "input"; "change": "change"; "blur": "blur"; "focus": "focus"; }, never, ["*"], true, never>;
82
+ static ɵcmp: i0.ɵɵComponentDeclaration<DBSelect, "db-select", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "invalidMessage": { "alias": "invalidMessage"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "showMessage": { "alias": "showMessage"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "validMessage": { "alias": "validMessage"; "required": false; "isSignal": true; }; "validation": { "alias": "validation"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "className": { "alias": "className"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showLabel": { "alias": "showLabel"; "required": false; "isSignal": true; }; "showRequiredAsterisk": { "alias": "showRequiredAsterisk"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "messageIcon": { "alias": "messageIcon"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "click": "click"; "input": "input"; "change": "change"; "blur": "blur"; "focus": "focus"; }, never, ["*"], true, never>;
83
83
  }
package/fesm2022/db-ux-ngx-core-components.mjs CHANGED
@@ -964,15 +964,7 @@ const CardElevationLevelList = ['1', '2', '3'];
964
964
  const handleFrameworkEventAngular = (component, event, modelValue = 'value') => {
965
965
  // Change event to work with reactive and template driven forms
966
966
  component.propagateChange(event.target[modelValue]);
967
- // Skip writeValue for user-initiated change events on signal-based properties
968
- // to prevent double event firing. The propagateChange call above is sufficient
969
- // for notifying Angular forms of the change.
970
- // For signal-based properties like 'checked', the component's signal will be
971
- // updated through the normal Angular change detection cycle.
972
- const isSignalBasedProperty = modelValue === 'checked' || modelValue === 'disabled';
973
- if (!isSignalBasedProperty) {
974
- component.writeValue(event.target[modelValue]);
975
- }
967
+ component.writeValue(event.target[modelValue]);
976
968
  };
977
969
  const handleFrameworkEventVue = (emit, event, modelValue = 'value') => {
978
970
  // TODO: Replace this with the solution out of https://github.com/BuilderIO/mitosis/issues/833 after this has been "solved"
@@ -2225,8 +2217,13 @@ class DBInput {
2225
2217
  this.size = input();
2226
2218
  this.autocomplete = input();
2227
2219
  this.autofocus = input();
2220
+ this.enterkeyhint = input();
2221
+ this.inputmode = input();
2228
2222
  this.ariaDescribedBy = input();
2223
+ this.messageSize = input();
2229
2224
  this.messageIcon = input();
2225
+ this.validMessageSize = input();
2226
+ this.invalidMessageSize = input();
2230
2227
  this.input = output();
2231
2228
  this.change = output();
2232
2229
  this.blur = output();
@@ -2348,7 +2345,7 @@ class DBInput {
2348
2345
  }
2349
2346
  }
2350
2347
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DBInput, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
2351
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DBInput, isStandalone: true, selector: "db-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, dataListId: { classPropertyName: "dataListId", publicName: "dataListId", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, dataList: { classPropertyName: "dataList", publicName: "dataList", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldSizing: { classPropertyName: "fieldSizing", publicName: "fieldSizing", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
2348
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DBInput, isStandalone: true, selector: "db-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, dataListId: { classPropertyName: "dataListId", publicName: "dataListId", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, dataList: { classPropertyName: "dataList", publicName: "dataList", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showIconLeading: { classPropertyName: "showIconLeading", publicName: "showIconLeading", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, iconLeading: { classPropertyName: "iconLeading", publicName: "iconLeading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconTrailing: { classPropertyName: "iconTrailing", publicName: "iconTrailing", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, showIconTrailing: { classPropertyName: "showIconTrailing", publicName: "showIconTrailing", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldSizing: { classPropertyName: "fieldSizing", publicName: "fieldSizing", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, enterkeyhint: { classPropertyName: "enterkeyhint", publicName: "enterkeyhint", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, messageSize: { classPropertyName: "messageSize", publicName: "messageSize", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null }, validMessageSize: { classPropertyName: "validMessageSize", publicName: "validMessageSize", isSignal: true, isRequired: false, transformFunction: null }, invalidMessageSize: { classPropertyName: "invalidMessageSize", publicName: "invalidMessageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
2352
2349
  provide: NG_VALUE_ACCESSOR,
2353
2350
  useExisting: DBInput,
2354
2351
  multi: true
@@ -2387,6 +2384,8 @@ class DBInput {
2387
2384
  [attr.size]="size()"
2388
2385
  [attr.autoComplete]="autocomplete()"
2389
2386
  [attr.autoFocus]="getBoolean(autofocus(), 'autofocus')"
2387
+ [attr.enterKeyHint]="enterkeyhint()"
2388
+ [attr.inputMode]="inputmode()"
2390
2389
  (input)="handleInput($event)"
2391
2390
  (change)="handleChange($event)"
2392
2391
  (blur)="handleBlur($event)"
@@ -2405,23 +2404,23 @@ class DBInput {
2405
2404
  <ng-content></ng-content>
2406
2405
  @if(stringPropVisible(message(), showMessage())){
2407
2406
  <db-infotext
2408
- size="small"
2407
+ [size]="messageSize() || 'small'"
2409
2408
  [icon]="messageIcon()"
2410
2409
  [id]="_messageId()"
2411
2410
  >{{message()}}</db-infotext
2412
2411
  >
2413
2412
  } @if(hasValidState()){
2414
2413
  <db-infotext
2415
- size="small"
2416
2414
  semantic="successful"
2417
2415
  [id]="_validMessageId()"
2416
+ [size]="validMessageSize() || 'small'"
2418
2417
  >{{validMessage() || DEFAULT_VALID_MESSAGE}}</db-infotext
2419
2418
  >
2420
2419
  }
2421
2420
  <db-infotext
2422
- size="small"
2423
2421
  semantic="critical"
2424
2422
  [id]="_invalidMessageId()"
2423
+ [size]="invalidMessageSize() || 'small'"
2425
2424
  >{{_invalidMessage()}}</db-infotext
2426
2425
  >
2427
2426
  <span
@@ -2472,6 +2471,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
2472
2471
  [attr.size]="size()"
2473
2472
  [attr.autoComplete]="autocomplete()"
2474
2473
  [attr.autoFocus]="getBoolean(autofocus(), 'autofocus')"
2474
+ [attr.enterKeyHint]="enterkeyhint()"
2475
+ [attr.inputMode]="inputmode()"
2475
2476
  (input)="handleInput($event)"
2476
2477
  (change)="handleChange($event)"
2477
2478
  (blur)="handleBlur($event)"
@@ -2490,23 +2491,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
2490
2491
  <ng-content></ng-content>
2491
2492
  @if(stringPropVisible(message(), showMessage())){
2492
2493
  <db-infotext
2493
- size="small"
2494
+ [size]="messageSize() || 'small'"
2494
2495
  [icon]="messageIcon()"
2495
2496
  [id]="_messageId()"
2496
2497
  >{{message()}}</db-infotext
2497
2498
  >
2498
2499
  } @if(hasValidState()){
2499
2500
  <db-infotext
2500
- size="small"
2501
2501
  semantic="successful"
2502
2502
  [id]="_validMessageId()"
2503
+ [size]="validMessageSize() || 'small'"
2503
2504
  >{{validMessage() || DEFAULT_VALID_MESSAGE}}</db-infotext
2504
2505
  >
2505
2506
  }
2506
2507
  <db-infotext
2507
- size="small"
2508
2508
  semantic="critical"
2509
2509
  [id]="_invalidMessageId()"
2510
+ [size]="invalidMessageSize() || 'small'"
2510
2511
  >{{_invalidMessage()}}</db-infotext
2511
2512
  >
2512
2513
  <span
@@ -3048,6 +3049,18 @@ class DBCustomSelect {
3048
3049
  this.handleClose(undefined, true);
3049
3050
  this.handleSummaryFocus();
3050
3051
  }
3052
+ else if (event.key === "Enter" &&
3053
+ this.detailsRef()?.nativeElement?.open) {
3054
+ // Handle Enter key to select option like Space key
3055
+ if (self.document) {
3056
+ const activeElement = self.document.activeElement;
3057
+ if (["checkbox", "radio"].includes(activeElement.getAttribute("type") || "")) {
3058
+ // Trigger click to simulate Space key behavior
3059
+ activeElement.click();
3060
+ event.preventDefault();
3061
+ }
3062
+ }
3063
+ }
3051
3064
  else if (event.key === "ArrowDown" ||
3052
3065
  event.key === "ArrowUp" ||
3053
3066
  event.key === "ArrowLeft" ||
@@ -3845,7 +3858,7 @@ class DBCustomSelect {
3845
3858
  role="status"
3846
3859
  >{{_voiceOverFallback()}}</span
3847
3860
  >
3848
- </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTag, selector: "db-tag", inputs: ["removeButton", "id", "className", "semantic", "emphasis", "icon", "showCheckState", "showIcon", "noText", "overflow", "text", "behavior"], outputs: ["remove"] }, { kind: "component", type: DBCustomSelectDropdown, selector: "db-custom-select-dropdown", inputs: ["id", "className", "width"] }, { kind: "component", type: DBInput, selector: "db-input", inputs: ["id", "invalidMessage", "dataListId", "message", "showMessage", "value", "validMessage", "validation", "required", "minLength", "maxLength", "pattern", "dataList", "className", "variant", "showLabel", "showIconLeading", "showIcon", "iconLeading", "icon", "iconTrailing", "showRequiredAsterisk", "showIconTrailing", "label", "fieldSizing", "name", "type", "multiple", "placeholder", "disabled", "step", "maxlength", "minlength", "max", "min", "readOnly", "readonly", "form", "size", "autocomplete", "autofocus", "ariaDescribedBy", "messageIcon"], outputs: ["valueChange", "disabledChange", "input", "change", "blur", "focus"] }, { kind: "component", type: DBCustomSelectList, selector: "db-custom-select-list", inputs: ["multiple", "label", "id", "className"] }, { kind: "component", type: DBCustomSelectListItem, selector: "db-custom-select-list-item", inputs: ["id", "isGroupTitle", "showDivider", "type", "checked", "className", "groupTitle", "icon", "showIcon", "name", "disabled", "value", "label"], outputs: ["checkedChange", "disabledChange", "change"] }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "noText", "name", "form", "value", "text"], outputs: ["click"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "variant", "placement", "className", "emphasis", "animation", "delay", "width", "showArrow"] }] }); }
3861
+ </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTag, selector: "db-tag", inputs: ["removeButton", "id", "className", "semantic", "emphasis", "icon", "showCheckState", "showIcon", "noText", "overflow", "text", "behavior"], outputs: ["remove"] }, { kind: "component", type: DBCustomSelectDropdown, selector: "db-custom-select-dropdown", inputs: ["id", "className", "width"] }, { kind: "component", type: DBInput, selector: "db-input", inputs: ["id", "invalidMessage", "dataListId", "message", "showMessage", "value", "validMessage", "validation", "required", "minLength", "maxLength", "pattern", "dataList", "className", "variant", "showLabel", "showIconLeading", "showIcon", "iconLeading", "icon", "iconTrailing", "showRequiredAsterisk", "showIconTrailing", "label", "fieldSizing", "name", "type", "multiple", "placeholder", "disabled", "step", "maxlength", "minlength", "max", "min", "readOnly", "readonly", "form", "size", "autocomplete", "autofocus", "enterkeyhint", "inputmode", "ariaDescribedBy", "messageSize", "messageIcon", "validMessageSize", "invalidMessageSize"], outputs: ["valueChange", "disabledChange", "input", "change", "blur", "focus"] }, { kind: "component", type: DBCustomSelectList, selector: "db-custom-select-list", inputs: ["multiple", "label", "id", "className"] }, { kind: "component", type: DBCustomSelectListItem, selector: "db-custom-select-list-item", inputs: ["id", "isGroupTitle", "showDivider", "type", "checked", "className", "groupTitle", "icon", "showIcon", "name", "disabled", "value", "label"], outputs: ["checkedChange", "disabledChange", "change"] }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "id", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "noText", "name", "form", "value", "text"], outputs: ["click"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "variant", "placement", "className", "emphasis", "animation", "delay", "width", "showArrow"] }] }); }
3849
3862
  }
3850
3863
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DBCustomSelect, decorators: [{
3851
3864
  type: Component,
@@ -6112,9 +6125,12 @@ class DBSelect {
6112
6125
  else if (stringPropVisible(this.message(), this.showMessage())) {
6113
6126
  this._descByIds.set(this._messageId());
6114
6127
  }
6115
- else {
6128
+ else if (this.placeholder()) {
6116
6129
  this._descByIds.set(this._placeholderId());
6117
6130
  }
6131
+ else {
6132
+ this._descByIds.set(undefined);
6133
+ }
6118
6134
  }
6119
6135
  handleClick(event) {
6120
6136
  if (this.click) {
@@ -6165,6 +6181,7 @@ class DBSelect {
6165
6181
  this.invalidMessage = input();
6166
6182
  this.message = input();
6167
6183
  this.showMessage = input();
6184
+ this.placeholder = input();
6168
6185
  this.value = model();
6169
6186
  this.validMessage = input();
6170
6187
  this.validation = input();
@@ -6183,7 +6200,6 @@ class DBSelect {
6183
6200
  this.multiple = input();
6184
6201
  this.ariaDescribedBy = input();
6185
6202
  this.options = input();
6186
- this.placeholder = input();
6187
6203
  this.messageIcon = input();
6188
6204
  this.click = output();
6189
6205
  this.input = output();
@@ -6228,9 +6244,12 @@ class DBSelect {
6228
6244
  if (stringPropVisible(this.message(), this.showMessage())) {
6229
6245
  this._descByIds.set(messageId);
6230
6246
  }
6231
- else {
6247
+ else if (this.placeholder()) {
6232
6248
  this._descByIds.set(placeholderId);
6233
6249
  }
6250
+ else {
6251
+ this._descByIds.set(undefined);
6252
+ }
6234
6253
  this.handleValidation();
6235
6254
  this.initialized.set(false);
6236
6255
  }
@@ -6295,7 +6314,7 @@ class DBSelect {
6295
6314
  this.disabled.set(disabled);
6296
6315
  }
6297
6316
  ngAfterViewInit() {
6298
- this.writeValue(this.value());
6317
+ this.writeValue(this.value() ?? "");
6299
6318
  if (typeof window !== "undefined") {
6300
6319
  const element = this._ref()?.nativeElement;
6301
6320
  this.enableAttributePassing(element, "db-select");
@@ -6310,7 +6329,7 @@ class DBSelect {
6310
6329
  }
6311
6330
  }
6312
6331
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DBSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
6313
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DBSelect, isStandalone: true, selector: "db-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", click: "click", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
6332
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: DBSelect, isStandalone: true, selector: "db-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showRequiredAsterisk: { classPropertyName: "showRequiredAsterisk", publicName: "showRequiredAsterisk", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", click: "click", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
6314
6333
  provide: NG_VALUE_ACCESSOR,
6315
6334
  useExisting: DBSelect,
6316
6335
  multi: true
@@ -6342,9 +6361,10 @@ class DBSelect {
6342
6361
  (focus)="handleFocus($event)"
6343
6362
  [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
6344
6363
  >
6345
- <option [attr.hidden]="true"></option>
6346
- @if(options()?.length){ @for (option of options();track i;let i = $index)
6347
- {
6364
+ @if(variant() === 'floating' || placeholder()){
6365
+ <option class="placeholder" value=""></option>
6366
+ } @if(options()?.length){ @for (option of options();track i;let i =
6367
+ $index) {
6348
6368
  <ng-container
6349
6369
  >@if(option.options){
6350
6370
  <optgroup [attr.label]="getOptionLabel(option)">
@@ -6373,8 +6393,9 @@ class DBSelect {
6373
6393
  <ng-content></ng-content>
6374
6394
  }
6375
6395
  </select>
6376
- <span [attr.id]="_placeholderId()">{{placeholder() ?? label()}}</span>
6377
- @if(stringPropVisible(message(), showMessage())){
6396
+ @if(placeholder()){
6397
+ <span [attr.id]="_placeholderId()">{{placeholder()}}</span>
6398
+ } @if(stringPropVisible(message(), showMessage())){
6378
6399
  <db-infotext
6379
6400
  size="small"
6380
6401
  [icon]="messageIcon()"
@@ -6436,9 +6457,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
6436
6457
  (focus)="handleFocus($event)"
6437
6458
  [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
6438
6459
  >
6439
- <option [attr.hidden]="true"></option>
6440
- @if(options()?.length){ @for (option of options();track i;let i = $index)
6441
- {
6460
+ @if(variant() === 'floating' || placeholder()){
6461
+ <option class="placeholder" value=""></option>
6462
+ } @if(options()?.length){ @for (option of options();track i;let i =
6463
+ $index) {
6442
6464
  <ng-container
6443
6465
  >@if(option.options){
6444
6466
  <optgroup [attr.label]="getOptionLabel(option)">
@@ -6467,8 +6489,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
6467
6489
  <ng-content></ng-content>
6468
6490
  }
6469
6491
  </select>
6470
- <span [attr.id]="_placeholderId()">{{placeholder() ?? label()}}</span>
6471
- @if(stringPropVisible(message(), showMessage())){
6492
+ @if(placeholder()){
6493
+ <span [attr.id]="_placeholderId()">{{placeholder()}}</span>
6494
+ } @if(stringPropVisible(message(), showMessage())){
6472
6495
  <db-infotext
6473
6496
  size="small"
6474
6497
  [icon]="messageIcon()"