@db-ux/ngx-core-components 4.3.2 → 4.4.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/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @db-ux/ngx-core-components
2
2
 
3
+ ## 4.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - feat: add `role` property to DBNotification & automatically add role based on semantic if no `role` or `ariaLive` is provided to increase UX for screen-reader users - [see commit 177d71e](https://github.com/db-ux-design-system/core-web/commit/177d71e287a64a6491ba446e7812d0adbda1717e)
8
+
9
+ - feat(DBSelect): hide empty first option in `required` selects with placeholder after the first user selection, and add `showEmptyOption` prop to overwrite this - [see commit 4280bc4](https://github.com/db-ux-design-system/core-web/commit/4280bc47538d6983d6bb5575f012b6c6b25b40e8)
10
+
3
11
  ## 4.3.2
4
12
 
5
13
  ### Patch Changes
@@ -246,6 +246,31 @@ const getOptionKey = (option, prefix) => {
246
246
  return `${prefix}${key}`;
247
247
  };
248
248
  const isKeyboardEvent = (event) => event.key !== undefined;
249
+ /**
250
+ * Maps semantic values to appropriate ARIA roles for notifications
251
+ * @param semantic - The semantic type of the notification
252
+ * @param role - The aria role of the notification
253
+ * @param ariaLive - The aria-live of the notification
254
+ * @returns The appropriate ARIA role or undefined for default behavior
255
+ */
256
+ const getNotificationRole = ({ semantic, role, ariaLive }) => {
257
+ if (role) {
258
+ return role;
259
+ }
260
+ if (ariaLive) {
261
+ return 'article';
262
+ }
263
+ switch (semantic) {
264
+ case 'critical':
265
+ case 'warning':
266
+ return 'alert';
267
+ case 'informational':
268
+ case 'successful':
269
+ return 'status';
270
+ default:
271
+ return 'article';
272
+ }
273
+ };
249
274
 
250
275
  const defaultProps$z = {};
251
276
  class DBAccordionItem {
@@ -5595,14 +5620,16 @@ class DBNotification {
5595
5620
  }
5596
5621
  constructor() {
5597
5622
  this.cls = cls;
5623
+ this.getNotificationRole = getNotificationRole;
5598
5624
  this.getBoolean = getBoolean;
5599
5625
  this.getBooleanAsString = getBooleanAsString;
5600
5626
  this.stringPropVisible = stringPropVisible;
5601
5627
  this.DEFAULT_CLOSE_BUTTON = DEFAULT_CLOSE_BUTTON;
5602
5628
  this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
5603
5629
  this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
5604
- this.ariaLive = input(...(ngDevMode ? [undefined, { debugName: "ariaLive" }] : []));
5605
5630
  this.semantic = input(...(ngDevMode ? [undefined, { debugName: "semantic" }] : []));
5631
+ this.role = input(...(ngDevMode ? [undefined, { debugName: "role" }] : []));
5632
+ this.ariaLive = input(...(ngDevMode ? [undefined, { debugName: "ariaLive" }] : []));
5606
5633
  this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
5607
5634
  this.showIcon = input(...(ngDevMode ? [undefined, { debugName: "showIcon" }] : []));
5608
5635
  this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
@@ -5657,10 +5684,15 @@ class DBNotification {
5657
5684
  }
5658
5685
  }
5659
5686
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBNotification, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5660
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBNotification, isStandalone: true, selector: "db-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, linkVariant: { classPropertyName: "linkVariant", publicName: "linkVariant", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showHeadline: { classPropertyName: "showHeadline", publicName: "showHeadline", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<article
5687
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBNotification, isStandalone: true, selector: "db-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, linkVariant: { classPropertyName: "linkVariant", publicName: "linkVariant", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showHeadline: { classPropertyName: "showHeadline", publicName: "showHeadline", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
5661
5688
  #_ref
5662
5689
  [attr.id]="id()"
5663
5690
  [class]="cls('db-notification', className())"
5691
+ [attr.role]="getNotificationRole({
5692
+ semantic: semantic(),
5693
+ role: role(),
5694
+ ariaLive: ariaLive()
5695
+ })"
5664
5696
  [attr.aria-live]="ariaLive()"
5665
5697
  [attr.data-semantic]="semantic()"
5666
5698
  [attr.data-variant]="variant()"
@@ -5692,14 +5724,19 @@ class DBNotification {
5692
5724
  >{{closeButtonText() ?? DEFAULT_CLOSE_BUTTON}}</db-button
5693
5725
  >
5694
5726
  }
5695
- </article> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
5727
+ </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] }); }
5696
5728
  }
5697
5729
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBNotification, decorators: [{
5698
5730
  type: Component,
5699
- args: [{ selector: "db-notification", standalone: true, imports: [CommonModule, DBButton], template: `<article
5731
+ args: [{ selector: "db-notification", standalone: true, imports: [CommonModule, DBButton], template: `<div
5700
5732
  #_ref
5701
5733
  [attr.id]="id()"
5702
5734
  [class]="cls('db-notification', className())"
5735
+ [attr.role]="getNotificationRole({
5736
+ semantic: semantic(),
5737
+ role: role(),
5738
+ ariaLive: ariaLive()
5739
+ })"
5703
5740
  [attr.aria-live]="ariaLive()"
5704
5741
  [attr.data-semantic]="semantic()"
5705
5742
  [attr.data-variant]="variant()"
@@ -5731,8 +5768,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5731
5768
  >{{closeButtonText() ?? DEFAULT_CLOSE_BUTTON}}</db-button
5732
5769
  >
5733
5770
  }
5734
- </article> `, styles: [":host{display:contents}\n"] }]
5735
- }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], linkVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkVariant", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], showHeadline: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeadline", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], showTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamp", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
5771
+ </div> `, styles: [":host{display:contents}\n"] }]
5772
+ }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], linkVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkVariant", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], showHeadline: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeadline", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], showTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamp", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
5736
5773
 
5737
5774
  const NotificationVariantList = ['docked', 'standalone', 'overlay'];
5738
5775
  const NotificationLinkVariantList = ['block', 'inline'];
@@ -6446,6 +6483,17 @@ class DBSelect {
6446
6483
  getOptionLabel(option) {
6447
6484
  return option.label ?? option.value?.toString();
6448
6485
  }
6486
+ shouldShowEmptyOption() {
6487
+ const hasPlaceholderOrFloating = this.variant() === "floating" || !!this.placeholder();
6488
+ if (!hasPlaceholderOrFloating) {
6489
+ return false;
6490
+ }
6491
+ if (this.showEmptyOption() !== undefined) {
6492
+ return this.showEmptyOption();
6493
+ }
6494
+ // Default: show empty option for non-required selects
6495
+ return !this.required();
6496
+ }
6449
6497
  trackByOptgroupOption0(_, optgroupOption) {
6450
6498
  return getOptionKey(optgroupOption, "select-optgroup-option-");
6451
6499
  }
@@ -6468,8 +6516,9 @@ class DBSelect {
6468
6516
  this.validMessage = input(...(ngDevMode ? [undefined, { debugName: "validMessage" }] : []));
6469
6517
  this.validation = input(...(ngDevMode ? [undefined, { debugName: "validation" }] : []));
6470
6518
  this.required = input(...(ngDevMode ? [undefined, { debugName: "required" }] : []));
6471
- this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
6472
6519
  this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
6520
+ this.showEmptyOption = input(...(ngDevMode ? [undefined, { debugName: "showEmptyOption" }] : []));
6521
+ this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
6473
6522
  this.showLabel = input(...(ngDevMode ? [undefined, { debugName: "showLabel" }] : []));
6474
6523
  this.showRequiredAsterisk = input(...(ngDevMode ? [undefined, { debugName: "showRequiredAsterisk" }] : []));
6475
6524
  this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
@@ -6641,7 +6690,7 @@ class DBSelect {
6641
6690
  this.abortController()?.abort();
6642
6691
  }
6643
6692
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
6644
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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: [{
6693
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showEmptyOption: { classPropertyName: "showEmptyOption", publicName: "showEmptyOption", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", 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: [{
6645
6694
  provide: NG_VALUE_ACCESSOR,
6646
6695
  useExisting: DBSelect,
6647
6696
  multi: true
@@ -6673,8 +6722,12 @@ class DBSelect {
6673
6722
  (focus)="handleFocus($event)"
6674
6723
  [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
6675
6724
  >
6676
- @if(variant() === 'floating' || placeholder()){
6677
- <option class="placeholder" value=""></option>
6725
+ @if(variant() === 'floating' || !!placeholder()){
6726
+ <option
6727
+ class="placeholder"
6728
+ value=""
6729
+ [attr.data-show-empty-option]="getBooleanAsString(shouldShowEmptyOption())"
6730
+ ></option>
6678
6731
  } @if(options()?.length){ @for (option of options();track i;let i =
6679
6732
  $index) {
6680
6733
  <ng-container
@@ -6773,8 +6826,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
6773
6826
  (focus)="handleFocus($event)"
6774
6827
  [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
6775
6828
  >
6776
- @if(variant() === 'floating' || placeholder()){
6777
- <option class="placeholder" value=""></option>
6829
+ @if(variant() === 'floating' || !!placeholder()){
6830
+ <option
6831
+ class="placeholder"
6832
+ value=""
6833
+ [attr.data-show-empty-option]="getBooleanAsString(shouldShowEmptyOption())"
6834
+ ></option>
6778
6835
  } @if(options()?.length){ @for (option of options();track i;let i =
6779
6836
  $index) {
6780
6837
  <ng-container
@@ -6838,7 +6895,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
6838
6895
  >{{_voiceOverFallback()}}</span
6839
6896
  >
6840
6897
  </div> `, styles: [":host{display:contents}\n"] }]
6841
- }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
6898
+ }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], invalidMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidMessage", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMessage", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], validMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validMessage", required: false }] }], validation: [{ type: i0.Input, args: [{ isSignal: true, alias: "validation", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showEmptyOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyOption", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], showRequiredAsterisk: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRequiredAsterisk", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], messageIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "messageIcon", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], input: [{ type: i0.Output, args: ["input"] }], change: [{ type: i0.Output, args: ["change"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
6842
6899
 
6843
6900
  const defaultProps$6 = {};
6844
6901
  class DBStack {
@@ -8390,5 +8447,5 @@ const AlignmentList = ['start', 'center'];
8390
8447
  * Generated bundle index. Do not edit.
8391
8448
  */
8392
8449
 
8393
- export { AccordionBehaviorList, AccordionVariantList, AlignmentList, AutoCompleteList, BadgePlacementList, ButtonTypeList, ButtonVariantList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, CardBehaviorList, CardElevationLevelList, CustomSelectDropdownWidthList, CustomSelectListItemTypeList, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
8450
+ export { AccordionBehaviorList, AccordionVariantList, AlignmentList, AutoCompleteList, BadgePlacementList, ButtonTypeList, ButtonVariantList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, CardBehaviorList, CardElevationLevelList, CustomSelectDropdownWidthList, CustomSelectListItemTypeList, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNotificationRole, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
8394
8451
  //# sourceMappingURL=db-ux-ngx-core-components.mjs.map