@db-ux/ngx-core-components 4.4.1 → 4.4.2-eslint-plugin-28ea614

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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/fesm2022/db-ux-ngx-core-components.mjs +139 -146
  3. package/fesm2022/db-ux-ngx-core-components.mjs.map +1 -1
  4. package/index.d.ts +14 -22
  5. package/package.json +4 -4
package/fesm2022/db-ux-ngx-core-components.mjs CHANGED
@@ -4,107 +4,6 @@ import * as i1 from '@angular/common';
4
4
  import { CommonModule } from '@angular/common';
5
5
  import { NG_VALUE_ACCESSOR } from '@angular/forms';
6
6
 
7
- const DEFAULT_ID = 'OVERWRITE_DEFAULT_ID';
8
- const DEFAULT_LABEL = 'LABEL SHOULD BE SET';
9
- const DEFAULT_PLACEHOLDER = ' ';
10
- const DEFAULT_MESSAGE = 'MESSAGE SHOULD BE SET';
11
- const DEFAULT_LABEL_ID_SUFFIX = '-label';
12
- const DEFAULT_SELECT_ID_SUFFIX = '-select';
13
- const DEFAULT_MESSAGE_ID_SUFFIX = '-message';
14
- const DEFAULT_VALID_MESSAGE_ID_SUFFIX = '-valid-message';
15
- const DEFAULT_INVALID_MESSAGE_ID_SUFFIX = '-invalid-message';
16
- const DEFAULT_PLACEHOLDER_ID_SUFFIX = '-placeholder';
17
- const DEFAULT_DATALIST_ID_SUFFIX = '-datalist';
18
- const DEFAULT_VALID_MESSAGE = 'TODO: Add a validMessage';
19
- const DEFAULT_INVALID_MESSAGE = 'TODO: Add an invalidMessage';
20
- const DEFAULT_REMOVE = 'Remove';
21
- const DEFAULT_BACK = 'Back';
22
- const DEFAULT_SELECTED = 'Selected';
23
- const DEFAULT_BURGER_MENU = 'BurgerMenu';
24
- const DEFAULT_ICON = 'brand';
25
- const DEFAULT_ROWS = 4;
26
- const DEFAULT_CLOSE_BUTTON = 'Close';
27
- const DENSITY_CONST = 'density';
28
- const COLOR_CONST = 'color';
29
- var DENSITY;
30
- (function (DENSITY) {
31
- DENSITY["FUNCTIONAL"] = "functional";
32
- DENSITY["REGULAR"] = "regular";
33
- DENSITY["EXPRESSIVE"] = "expressive";
34
- })(DENSITY || (DENSITY = {}));
35
- const DENSITIES = Object.entries(DENSITY).map(([, value]) => value);
36
- var COLOR_SIMPLE;
37
- (function (COLOR_SIMPLE) {
38
- COLOR_SIMPLE["PRIMARY"] = "primary";
39
- })(COLOR_SIMPLE || (COLOR_SIMPLE = {}));
40
- var COLOR;
41
- (function (COLOR) {
42
- COLOR["NEUTRAL_BG_LEVEL_1"] = "neutral-bg-basic-level-1";
43
- COLOR["NEUTRAL_BG_LEVEL_2"] = "neutral-bg-basic-level-2";
44
- COLOR["NEUTRAL_BG_LEVEL_3"] = "neutral-bg-basic-level-3";
45
- COLOR["NEUTRAL_BG_TRANSPARENT_SEMI"] = "neutral-bg-basic-transparent-semi";
46
- COLOR["NEUTRAL_BG_TRANSPARENT_FULL"] = "neutral-bg-basic-transparent-full";
47
- COLOR["BRAND_BG_LEVEL_1"] = "brand-bg-basic-level-1";
48
- COLOR["BRAND_BG_LEVEL_2"] = "brand-bg-basic-level-2";
49
- COLOR["BRAND_BG_LEVEL_3"] = "brand-bg-basic-level-3";
50
- COLOR["BRAND_BG_TRANSPARENT_SEMI"] = "brand-bg-basic-transparent-semi";
51
- COLOR["BRAND_BG_TRANSPARENT_FULL"] = "brand-bg-basic-transparent-full";
52
- COLOR["SUCCESSFUL_BG_LEVEL_1"] = "successful-bg-basic-level-1";
53
- COLOR["SUCCESSFUL_BG_LEVEL_2"] = "successful-bg-basic-level-2";
54
- COLOR["SUCCESSFUL_BG_LEVEL_3"] = "successful-bg-basic-level-3";
55
- COLOR["SUCCESSFUL_BG_TRANSPARENT_SEMI"] = "successful-bg-basic-transparent-semi";
56
- COLOR["SUCCESSFUL_BG_TRANSPARENT_FULL"] = "successful-bg-basic-transparent-full";
57
- COLOR["CRITICAL_BG_LEVEL_1"] = "critical-bg-basic-level-1";
58
- COLOR["CRITICAL_BG_LEVEL_2"] = "critical-bg-basic-level-2";
59
- COLOR["CRITICAL_BG_LEVEL_3"] = "critical-bg-basic-level-3";
60
- COLOR["CRITICAL_BG_TRANSPARENT_SEMI"] = "critical-bg-basic-transparent-semi";
61
- COLOR["CRITICAL_BG_TRANSPARENT_Full"] = "critical-bg-basic-transparent-full";
62
- COLOR["WARNING_BG_LEVEL_1"] = "warning-bg-basic-level-1";
63
- COLOR["WARNING_BG_LEVEL_2"] = "warning-bg-basic-level-2";
64
- COLOR["WARNING_BG_LEVEL_3"] = "warning-bg-basic-level-3";
65
- COLOR["WARNING_BG_TRANSPARENT_SEMI"] = "warning-bg-basic-transparent-semi";
66
- COLOR["WARNING_BG_TRANSPARENT_FULL"] = "warning-bg-basic-transparent-full";
67
- COLOR["INFORMATIONAL_BG_LEVEL_1"] = "informational-bg-basic-level-1";
68
- COLOR["INFORMATIONAL_BG_LEVEL_2"] = "informational-bg-basic-level-2";
69
- COLOR["INFORMATIONAL_BG_LEVEL_3"] = "informational-bg-basic-level-3";
70
- COLOR["INFORMATIONAL_BG_TRANSPARENT_SEMI"] = "informational-bg-basic-transparent-semi";
71
- COLOR["INFORMATIONAL_BG_TRANSPARENT_FULL"] = "informational-bg-basic-transparent-full";
72
- })(COLOR || (COLOR = {}));
73
- const COLORS = Object.entries(COLOR).map(([, value]) => value);
74
- const COLORS_SIMPLE = Object.entries(COLOR_SIMPLE).map(([, value]) => value);
75
- var SEMANTIC;
76
- (function (SEMANTIC) {
77
- SEMANTIC["CRITICAL"] = "critical";
78
- SEMANTIC["INFORMATIONAL"] = "informational";
79
- SEMANTIC["WARNING"] = "warning";
80
- SEMANTIC["SUCCESSFUL"] = "successful";
81
- })(SEMANTIC || (SEMANTIC = {}));
82
- const SEMANTICS = Object.entries(SEMANTIC).map(([, value]) => value);
83
- const DEFAULT_VIEWPORT = {
84
- width: 390,
85
- height: 884
86
- };
87
- const DESKTOP_VIEWPORT = {
88
- width: 1920,
89
- height: 1280
90
- };
91
- /**
92
- * Use those viewports if your component has a css media-query otherwise use the DEFAULT_VIEWPORT
93
- */
94
- const TESTING_VIEWPORTS = [{
95
- name: 'desktop',
96
- ...DESKTOP_VIEWPORT
97
- }, {
98
- name: 'tablet',
99
- width: 768,
100
- height: 1024
101
- }, {
102
- name: 'mobile',
103
- ...DEFAULT_VIEWPORT
104
- }];
105
- const DB_UX_LOCAL_STORAGE_FRAMEWORK = 'db-ux-framework';
106
- const DB_UX_LOCAL_STORAGE_MODE = 'db-ux-mode';
107
-
108
7
  const uuid = () => {
109
8
  if (typeof window !== 'undefined') {
110
9
  if (window.crypto?.randomUUID) {
@@ -297,16 +196,15 @@ class DBAccordionItem {
297
196
  constructor() {
298
197
  this.cls = cls;
299
198
  this.getBooleanAsString = getBooleanAsString;
300
- this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
301
199
  this.defaultOpen = input(...(ngDevMode ? [undefined, { debugName: "defaultOpen" }] : []));
302
200
  this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
201
+ this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
303
202
  this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
304
203
  this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
305
204
  this.headlinePlain = input(...(ngDevMode ? [undefined, { debugName: "headlinePlain" }] : []));
306
205
  this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
307
206
  this.toggle = output();
308
207
  this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
309
- this._id = signal(DEFAULT_ID, ...(ngDevMode ? [{ debugName: "_id" }] : []));
310
208
  this._open = signal(false, ...(ngDevMode ? [{ debugName: "_open" }] : []));
311
209
  this._name = signal(undefined, ...(ngDevMode ? [{ debugName: "_name" }] : []));
312
210
  this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
@@ -369,7 +267,6 @@ class DBAccordionItem {
369
267
  if (typeof window !== "undefined") {
370
268
  const element = this._ref()?.nativeElement;
371
269
  this.enableAttributePassing(element, "db-accordion-item");
372
- this._id.set(this.id() || "accordion-item-" + uuid());
373
270
  if (this.defaultOpen()) {
374
271
  this._open.set(this.defaultOpen());
375
272
  }
@@ -377,8 +274,8 @@ class DBAccordionItem {
377
274
  }
378
275
  }
379
276
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
380
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBAccordionItem, isStandalone: true, selector: "db-accordion-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, headlinePlain: { classPropertyName: "headlinePlain", publicName: "headlinePlain", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
381
- [attr.id]="_id()"
277
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBAccordionItem, isStandalone: true, selector: "db-accordion-item", inputs: { defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, headlinePlain: { classPropertyName: "headlinePlain", publicName: "headlinePlain", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
278
+ [attr.id]="id()"
382
279
  [class]="cls('db-accordion-item', className())"
383
280
  >
384
281
  <details
@@ -403,7 +300,7 @@ class DBAccordionItem {
403
300
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBAccordionItem, decorators: [{
404
301
  type: Component,
405
302
  args: [{ selector: "db-accordion-item", standalone: true, imports: [CommonModule], template: `<li
406
- [attr.id]="_id()"
303
+ [attr.id]="id()"
407
304
  [class]="cls('db-accordion-item', className())"
408
305
  >
409
306
  <details
@@ -424,7 +321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
424
321
  </div>
425
322
  </details>
426
323
  </li> `, styles: [":host{display:contents}\n"] }]
427
- }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], headlinePlain: [{ type: i0.Input, args: [{ isSignal: true, alias: "headlinePlain", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
324
+ }], ctorParameters: () => [], propDecorators: { defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], headlinePlain: [{ type: i0.Input, args: [{ isSignal: true, alias: "headlinePlain", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
428
325
 
429
326
  const defaultProps$y = {};
430
327
  class DBAccordion {
@@ -445,15 +342,14 @@ class DBAccordion {
445
342
  }
446
343
  constructor() {
447
344
  this.cls = cls;
448
- this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
449
345
  this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
450
346
  this.behavior = input(...(ngDevMode ? [undefined, { debugName: "behavior" }] : []));
451
347
  this.initOpenIndex = input(...(ngDevMode ? [undefined, { debugName: "initOpenIndex" }] : []));
452
348
  this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
349
+ this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
453
350
  this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
454
351
  this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : []));
455
352
  this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
456
- this._id = signal(DEFAULT_ID, ...(ngDevMode ? [{ debugName: "_id" }] : []));
457
353
  this._name = signal("", ...(ngDevMode ? [{ debugName: "_name" }] : []));
458
354
  this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
459
355
  this._initOpenIndexDone = signal(false, ...(ngDevMode ? [{ debugName: "_initOpenIndexDone" }] : []));
@@ -463,7 +359,6 @@ class DBAccordion {
463
359
  this.initialized();
464
360
  this.name();
465
361
  this.behavior();
466
- this._id();
467
362
  // ---
468
363
  // If we have a single behavior we first check for
469
364
  // props.name otherwise for state_id
@@ -475,9 +370,7 @@ class DBAccordion {
475
370
  }
476
371
  }
477
372
  else {
478
- if (this._name() !== this._id() && this._id()) {
479
- this._name.set(this._id());
480
- }
373
+ this._name.set(`accordion-${uuid()}`);
481
374
  }
482
375
  }
483
376
  else {
@@ -572,15 +465,14 @@ class DBAccordion {
572
465
  if (typeof window !== "undefined") {
573
466
  const element = this._ref()?.nativeElement;
574
467
  this.enableAttributePassing(element, "db-accordion");
575
- this._id.set(this.id() || "accordion-" + uuid());
576
468
  this.initialized.set(true);
577
469
  this._initOpenIndexDone.set(true);
578
470
  }
579
471
  }
580
472
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
581
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBAccordion, isStandalone: true, selector: "db-accordion", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initOpenIndex: { classPropertyName: "initOpenIndex", publicName: "initOpenIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", 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 } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<ul
473
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBAccordion, isStandalone: true, selector: "db-accordion", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initOpenIndex: { classPropertyName: "initOpenIndex", publicName: "initOpenIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", 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 } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<ul
582
474
  #_ref
583
- [attr.id]="_id()"
475
+ [attr.id]="id()"
584
476
  [class]="cls('db-accordion', className())"
585
477
  [attr.data-variant]="variant()"
586
478
  >
@@ -594,13 +486,13 @@ class DBAccordion {
594
486
  [text]="item.text"
595
487
  ></db-accordion-item>
596
488
  } }
597
- </ul> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBAccordionItem, selector: "db-accordion-item", inputs: ["id", "defaultOpen", "name", "className", "disabled", "headlinePlain", "text"], outputs: ["toggle"] }] }); }
489
+ </ul> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBAccordionItem, selector: "db-accordion-item", inputs: ["defaultOpen", "name", "id", "className", "disabled", "headlinePlain", "text"], outputs: ["toggle"] }] }); }
598
490
  }
599
491
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBAccordion, decorators: [{
600
492
  type: Component,
601
493
  args: [{ selector: "db-accordion", standalone: true, imports: [CommonModule, DBAccordionItem], template: `<ul
602
494
  #_ref
603
- [attr.id]="_id()"
495
+ [attr.id]="id()"
604
496
  [class]="cls('db-accordion', className())"
605
497
  [attr.data-variant]="variant()"
606
498
  >
@@ -615,11 +507,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
615
507
  ></db-accordion-item>
616
508
  } }
617
509
  </ul> `, styles: [":host{display:contents}\n"] }]
618
- }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], initOpenIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initOpenIndex", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
510
+ }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], initOpenIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initOpenIndex", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
619
511
 
620
512
  const AccordionVariantList = ['divider', 'card'];
621
513
  const AccordionBehaviorList = ['multiple', 'single'];
622
514
 
515
+ const DEFAULT_ID = 'OVERWRITE_DEFAULT_ID';
516
+ const DEFAULT_LABEL = 'LABEL SHOULD BE SET';
517
+ const DEFAULT_PLACEHOLDER = ' ';
518
+ const DEFAULT_MESSAGE = 'MESSAGE SHOULD BE SET';
519
+ const DEFAULT_LABEL_ID_SUFFIX = '-label';
520
+ const DEFAULT_SELECT_ID_SUFFIX = '-select';
521
+ const DEFAULT_MESSAGE_ID_SUFFIX = '-message';
522
+ const DEFAULT_VALID_MESSAGE_ID_SUFFIX = '-valid-message';
523
+ const DEFAULT_INVALID_MESSAGE_ID_SUFFIX = '-invalid-message';
524
+ const DEFAULT_PLACEHOLDER_ID_SUFFIX = '-placeholder';
525
+ const DEFAULT_DATALIST_ID_SUFFIX = '-datalist';
526
+ const DEFAULT_VALID_MESSAGE = 'TODO: Add a validMessage';
527
+ const DEFAULT_INVALID_MESSAGE = 'TODO: Add an invalidMessage';
528
+ const DEFAULT_REMOVE = 'Remove';
529
+ const DEFAULT_BACK = 'Back';
530
+ const DEFAULT_SELECTED = 'Selected';
531
+ const DEFAULT_BURGER_MENU = 'BurgerMenu';
532
+ const DEFAULT_ICON = 'brand';
533
+ const DEFAULT_ROWS = 4;
534
+ const DEFAULT_CLOSE_BUTTON = 'Close';
535
+ const DENSITY_CONST = 'density';
536
+ const COLOR_CONST = 'color';
537
+ var DENSITY;
538
+ (function (DENSITY) {
539
+ DENSITY["FUNCTIONAL"] = "functional";
540
+ DENSITY["REGULAR"] = "regular";
541
+ DENSITY["EXPRESSIVE"] = "expressive";
542
+ })(DENSITY || (DENSITY = {}));
543
+ const DENSITIES = Object.entries(DENSITY).map(([, value]) => value);
544
+ var COLOR_SIMPLE;
545
+ (function (COLOR_SIMPLE) {
546
+ COLOR_SIMPLE["PRIMARY"] = "primary";
547
+ })(COLOR_SIMPLE || (COLOR_SIMPLE = {}));
548
+ var COLOR;
549
+ (function (COLOR) {
550
+ COLOR["NEUTRAL_BG_LEVEL_1"] = "neutral-bg-basic-level-1";
551
+ COLOR["NEUTRAL_BG_LEVEL_2"] = "neutral-bg-basic-level-2";
552
+ COLOR["NEUTRAL_BG_LEVEL_3"] = "neutral-bg-basic-level-3";
553
+ COLOR["NEUTRAL_BG_TRANSPARENT_SEMI"] = "neutral-bg-basic-transparent-semi";
554
+ COLOR["NEUTRAL_BG_TRANSPARENT_FULL"] = "neutral-bg-basic-transparent-full";
555
+ COLOR["BRAND_BG_LEVEL_1"] = "brand-bg-basic-level-1";
556
+ COLOR["BRAND_BG_LEVEL_2"] = "brand-bg-basic-level-2";
557
+ COLOR["BRAND_BG_LEVEL_3"] = "brand-bg-basic-level-3";
558
+ COLOR["BRAND_BG_TRANSPARENT_SEMI"] = "brand-bg-basic-transparent-semi";
559
+ COLOR["BRAND_BG_TRANSPARENT_FULL"] = "brand-bg-basic-transparent-full";
560
+ COLOR["SUCCESSFUL_BG_LEVEL_1"] = "successful-bg-basic-level-1";
561
+ COLOR["SUCCESSFUL_BG_LEVEL_2"] = "successful-bg-basic-level-2";
562
+ COLOR["SUCCESSFUL_BG_LEVEL_3"] = "successful-bg-basic-level-3";
563
+ COLOR["SUCCESSFUL_BG_TRANSPARENT_SEMI"] = "successful-bg-basic-transparent-semi";
564
+ COLOR["SUCCESSFUL_BG_TRANSPARENT_FULL"] = "successful-bg-basic-transparent-full";
565
+ COLOR["CRITICAL_BG_LEVEL_1"] = "critical-bg-basic-level-1";
566
+ COLOR["CRITICAL_BG_LEVEL_2"] = "critical-bg-basic-level-2";
567
+ COLOR["CRITICAL_BG_LEVEL_3"] = "critical-bg-basic-level-3";
568
+ COLOR["CRITICAL_BG_TRANSPARENT_SEMI"] = "critical-bg-basic-transparent-semi";
569
+ COLOR["CRITICAL_BG_TRANSPARENT_Full"] = "critical-bg-basic-transparent-full";
570
+ COLOR["WARNING_BG_LEVEL_1"] = "warning-bg-basic-level-1";
571
+ COLOR["WARNING_BG_LEVEL_2"] = "warning-bg-basic-level-2";
572
+ COLOR["WARNING_BG_LEVEL_3"] = "warning-bg-basic-level-3";
573
+ COLOR["WARNING_BG_TRANSPARENT_SEMI"] = "warning-bg-basic-transparent-semi";
574
+ COLOR["WARNING_BG_TRANSPARENT_FULL"] = "warning-bg-basic-transparent-full";
575
+ COLOR["INFORMATIONAL_BG_LEVEL_1"] = "informational-bg-basic-level-1";
576
+ COLOR["INFORMATIONAL_BG_LEVEL_2"] = "informational-bg-basic-level-2";
577
+ COLOR["INFORMATIONAL_BG_LEVEL_3"] = "informational-bg-basic-level-3";
578
+ COLOR["INFORMATIONAL_BG_TRANSPARENT_SEMI"] = "informational-bg-basic-transparent-semi";
579
+ COLOR["INFORMATIONAL_BG_TRANSPARENT_FULL"] = "informational-bg-basic-transparent-full";
580
+ })(COLOR || (COLOR = {}));
581
+ const COLORS = Object.entries(COLOR).map(([, value]) => value);
582
+ const COLORS_SIMPLE = Object.entries(COLOR_SIMPLE).map(([, value]) => value);
583
+ var SEMANTIC;
584
+ (function (SEMANTIC) {
585
+ SEMANTIC["CRITICAL"] = "critical";
586
+ SEMANTIC["INFORMATIONAL"] = "informational";
587
+ SEMANTIC["WARNING"] = "warning";
588
+ SEMANTIC["SUCCESSFUL"] = "successful";
589
+ })(SEMANTIC || (SEMANTIC = {}));
590
+ const SEMANTICS = Object.entries(SEMANTIC).map(([, value]) => value);
591
+ const DEFAULT_VIEWPORT = {
592
+ width: 390,
593
+ height: 884
594
+ };
595
+ const DESKTOP_VIEWPORT = {
596
+ width: 1920,
597
+ height: 1280
598
+ };
599
+ /**
600
+ * Use those viewports if your component has a css media-query otherwise use the DEFAULT_VIEWPORT
601
+ */
602
+ const TESTING_VIEWPORTS = [{
603
+ name: 'desktop',
604
+ ...DESKTOP_VIEWPORT
605
+ }, {
606
+ name: 'tablet',
607
+ width: 768,
608
+ height: 1024
609
+ }, {
610
+ name: 'mobile',
611
+ ...DEFAULT_VIEWPORT
612
+ }];
613
+ const DB_UX_LOCAL_STORAGE_FRAMEWORK = 'db-ux-framework';
614
+ const DB_UX_LOCAL_STORAGE_MODE = 'db-ux-mode';
615
+
623
616
  const defaultProps$x = {};
624
617
  class DBBadge {
625
618
  constructor() {
@@ -1984,11 +1977,11 @@ class DBCustomSelectListItem {
1984
1977
  this.cls = cls;
1985
1978
  this.getBooleanAsString = getBooleanAsString;
1986
1979
  this.getBoolean = getBoolean;
1987
- this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
1988
1980
  this.isGroupTitle = input(...(ngDevMode ? [undefined, { debugName: "isGroupTitle" }] : []));
1989
1981
  this.showDivider = input(...(ngDevMode ? [undefined, { debugName: "showDivider" }] : []));
1990
1982
  this.type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
1991
1983
  this.checked = model(...(ngDevMode ? [undefined, { debugName: "checked" }] : []));
1984
+ this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
1992
1985
  this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
1993
1986
  this.groupTitle = input(...(ngDevMode ? [undefined, { debugName: "groupTitle" }] : []));
1994
1987
  this.icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
@@ -1999,7 +1992,6 @@ class DBCustomSelectListItem {
1999
1992
  this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
2000
1993
  this.change = output();
2001
1994
  this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
2002
- this._id = signal(undefined, ...(ngDevMode ? [{ debugName: "_id" }] : []));
2003
1995
  this.hasDivider = signal(false, ...(ngDevMode ? [{ debugName: "hasDivider" }] : []));
2004
1996
  if (typeof window !== "undefined") {
2005
1997
  effect(() => {
@@ -2064,17 +2056,16 @@ class DBCustomSelectListItem {
2064
2056
  if (typeof window !== "undefined") {
2065
2057
  const element = this._ref()?.nativeElement;
2066
2058
  this.enableAttributePassing(element, "db-custom-select-list-item");
2067
- this._id.set(this.id() ?? `custom-select-list-item-${uuid()}`);
2068
2059
  }
2069
2060
  }
2070
2061
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBCustomSelectListItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
2071
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBCustomSelectListItem, isStandalone: true, selector: "db-custom-select-list-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isGroupTitle: { classPropertyName: "isGroupTitle", publicName: "isGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change" }, providers: [{
2062
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBCustomSelectListItem, isStandalone: true, selector: "db-custom-select-list-item", inputs: { isGroupTitle: { classPropertyName: "isGroupTitle", publicName: "isGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", 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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change" }, providers: [{
2072
2063
  provide: NG_VALUE_ACCESSOR,
2073
2064
  useExisting: DBCustomSelectListItem,
2074
2065
  multi: true
2075
2066
  }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<li
2076
2067
  #_ref
2077
- [attr.id]="_id()"
2068
+ [attr.id]="id()"
2078
2069
  [class]="cls('db-custom-select-list-item', className(), {
2079
2070
  'db-checkbox': type() === 'checkbox' && !isGroupTitle(),
2080
2071
  'db-radio': type() !== 'checkbox' && !isGroupTitle()
@@ -2114,7 +2105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2114
2105
  multi: true
2115
2106
  }], selector: "db-custom-select-list-item", standalone: true, imports: [CommonModule], template: `<li
2116
2107
  #_ref
2117
- [attr.id]="_id()"
2108
+ [attr.id]="id()"
2118
2109
  [class]="cls('db-custom-select-list-item', className(), {
2119
2110
  'db-checkbox': type() === 'checkbox' && !isGroupTitle(),
2120
2111
  'db-radio': type() !== 'checkbox' && !isGroupTitle()
@@ -2145,7 +2136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2145
2136
  <span>{{groupTitle()}}</span>
2146
2137
  }
2147
2138
  </li> `, styles: [":host{display:contents}\n"] }]
2148
- }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], isGroupTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGroupTitle", required: false }] }], showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], groupTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
2139
+ }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { isGroupTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "isGroupTitle", required: false }] }], showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], groupTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupTitle", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
2149
2140
 
2150
2141
  const defaultProps$p = {};
2151
2142
  class DBCustomSelectList {
@@ -2761,10 +2752,21 @@ class DBTooltip {
2761
2752
  this._documentScrollListenerCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_documentScrollListenerCallbackId" }] : []));
2762
2753
  this._observer = signal(undefined, ...(ngDevMode ? [{ debugName: "_observer" }] : []));
2763
2754
  if (typeof window !== "undefined") {
2755
+ effect(() => {
2756
+ // --- Mitosis: Workaround to make sure the effect() is triggered ---
2757
+ this.id();
2758
+ // ---
2759
+ if (this.id()) {
2760
+ this._id.set(this.id());
2761
+ }
2762
+ }, {
2763
+ // Enable writing to signals inside effects
2764
+ });
2764
2765
  effect(() => {
2765
2766
  // --- Mitosis: Workaround to make sure the effect() is triggered ---
2766
2767
  this._ref();
2767
2768
  this.initialized();
2769
+ this._id();
2768
2770
  // ---
2769
2771
  if (this._ref()?.nativeElement && this.initialized() && this._id()) {
2770
2772
  const parent = this.getParent();
@@ -4096,7 +4098,7 @@ class DBCustomSelect {
4096
4098
  role="status"
4097
4099
  >{{_voiceOverFallback()}}</span
4098
4100
  >
4099
- </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", "accept", "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"] }] }); }
4101
+ </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", "accept", "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: ["isGroupTitle", "showDivider", "type", "checked", "id", "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"] }] }); }
4100
4102
  }
4101
4103
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBCustomSelect, decorators: [{
4102
4104
  type: Component,
@@ -5306,7 +5308,6 @@ class DBNavigation {
5306
5308
  this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
5307
5309
  this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
5308
5310
  this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
5309
- this._id = signal(DEFAULT_ID, ...(ngDevMode ? [{ debugName: "_id" }] : []));
5310
5311
  }
5311
5312
  /**
5312
5313
  * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -5344,13 +5345,12 @@ class DBNavigation {
5344
5345
  if (typeof window !== "undefined") {
5345
5346
  const element = this._ref()?.nativeElement;
5346
5347
  this.enableAttributePassing(element, "db-navigation");
5347
- this._id.set(this.id() || "navigation-" + uuid());
5348
5348
  }
5349
5349
  }
5350
5350
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5351
5351
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBNavigation, isStandalone: true, selector: "db-navigation", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<nav
5352
5352
  #_ref
5353
- [attr.id]="_id()"
5353
+ [attr.id]="id()"
5354
5354
  [class]="cls('db-navigation', className())"
5355
5355
  >
5356
5356
  <menu><ng-content></ng-content></menu>
@@ -5360,7 +5360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5360
5360
  type: Component,
5361
5361
  args: [{ selector: "db-navigation", standalone: true, imports: [CommonModule], template: `<nav
5362
5362
  #_ref
5363
- [attr.id]="_id()"
5363
+ [attr.id]="id()"
5364
5364
  [class]="cls('db-navigation', className())"
5365
5365
  >
5366
5366
  <menu><ng-content></ng-content></menu>
@@ -5427,7 +5427,6 @@ class DBNavigationItem {
5427
5427
  this.hasSubNavigation = signal(true, ...(ngDevMode ? [{ debugName: "hasSubNavigation" }] : []));
5428
5428
  this.isSubNavigationExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isSubNavigationExpanded" }] : []));
5429
5429
  this.autoClose = signal(false, ...(ngDevMode ? [{ debugName: "autoClose" }] : []));
5430
- this.subNavigationId = signal("sub-navigation-" + uuid(), ...(ngDevMode ? [{ debugName: "subNavigationId" }] : []));
5431
5430
  this.navigationItemSafeTriangle = signal(undefined, ...(ngDevMode ? [{ debugName: "navigationItemSafeTriangle" }] : []));
5432
5431
  if (typeof window !== "undefined") {
5433
5432
  effect(() => {
@@ -5535,7 +5534,6 @@ class DBNavigationItem {
5535
5534
  <menu
5536
5535
  class="db-sub-navigation"
5537
5536
  [attr.data-force-close]="autoClose()"
5538
- [attr.id]="subNavigationId()"
5539
5537
  (click)="handleNavigationItemClick($event)"
5540
5538
  >@if(hasAreaPopup()){
5541
5539
  <div class="db-mobile-navigation-back">
@@ -5586,7 +5584,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5586
5584
  <menu
5587
5585
  class="db-sub-navigation"
5588
5586
  [attr.data-force-close]="autoClose()"
5589
- [attr.id]="subNavigationId()"
5590
5587
  (click)="handleNavigationItemClick($event)"
5591
5588
  >@if(hasAreaPopup()){
5592
5589
  <div class="db-mobile-navigation-back">
@@ -7551,7 +7548,6 @@ class DBTabList {
7551
7548
  this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
7552
7549
  this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
7553
7550
  this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
7554
- this._id = signal(DEFAULT_ID, ...(ngDevMode ? [{ debugName: "_id" }] : []));
7555
7551
  }
7556
7552
  /**
7557
7553
  * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -7589,13 +7585,12 @@ class DBTabList {
7589
7585
  if (typeof window !== "undefined") {
7590
7586
  const element = this._ref()?.nativeElement;
7591
7587
  this.enableAttributePassing(element, "db-tab-list");
7592
- this._id.set(this.id() || "tab-list-" + uuid());
7593
7588
  }
7594
7589
  }
7595
7590
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTabList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7596
7591
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: DBTabList, isStandalone: true, selector: "db-tab-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
7597
7592
  #_ref
7598
- [attr.id]="_id()"
7593
+ [attr.id]="id()"
7599
7594
  [class]="cls('db-tab-list', className())"
7600
7595
  >
7601
7596
  <ul role="tablist">
@@ -7607,7 +7602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
7607
7602
  type: Component,
7608
7603
  args: [{ selector: "db-tab-list", standalone: true, imports: [CommonModule], template: `<div
7609
7604
  #_ref
7610
- [attr.id]="_id()"
7605
+ [attr.id]="id()"
7611
7606
  [class]="cls('db-tab-list', className())"
7612
7607
  >
7613
7608
  <ul role="tablist">
@@ -7812,7 +7807,6 @@ class DBTabs {
7812
7807
  }
7813
7808
  constructor() {
7814
7809
  this.cls = cls;
7815
- this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
7816
7810
  this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
7817
7811
  this.tabs = input(...(ngDevMode ? [undefined, { debugName: "tabs" }] : []));
7818
7812
  this.arrowScrollDistance = input(...(ngDevMode ? [undefined, { debugName: "arrowScrollDistance" }] : []));
@@ -7820,13 +7814,13 @@ class DBTabs {
7820
7814
  this.behavior = input(...(ngDevMode ? [undefined, { debugName: "behavior" }] : []));
7821
7815
  this.initialSelectedMode = input(...(ngDevMode ? [undefined, { debugName: "initialSelectedMode" }] : []));
7822
7816
  this.initialSelectedIndex = input(...(ngDevMode ? [undefined, { debugName: "initialSelectedIndex" }] : []));
7817
+ this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
7823
7818
  this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : []));
7824
7819
  this.alignment = input(...(ngDevMode ? [undefined, { debugName: "alignment" }] : []));
7825
7820
  this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : []));
7826
7821
  this.indexChange = output();
7827
7822
  this.tabSelect = output();
7828
7823
  this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : []));
7829
- this._id = signal("tabs-" + uuid(), ...(ngDevMode ? [{ debugName: "_id" }] : []));
7830
7824
  this._name = signal("", ...(ngDevMode ? [{ debugName: "_name" }] : []));
7831
7825
  this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : []));
7832
7826
  this.showScrollLeft = signal(false, ...(ngDevMode ? [{ debugName: "showScrollLeft" }] : []));
@@ -7901,7 +7895,6 @@ class DBTabs {
7901
7895
  if (typeof window !== "undefined") {
7902
7896
  const element = this._ref()?.nativeElement;
7903
7897
  this.enableAttributePassing(element, "db-tabs");
7904
- this._id.set(this.id() || this._id());
7905
7898
  this._name.set(`tabs-${this.name() || uuid()}`);
7906
7899
  this.initialized.set(true);
7907
7900
  }
@@ -7911,9 +7904,9 @@ class DBTabs {
7911
7904
  this._resizeObserver.set(undefined);
7912
7905
  }
7913
7906
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7914
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, arrowScrollDistance: { classPropertyName: "arrowScrollDistance", publicName: "arrowScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedMode: { classPropertyName: "initialSelectedMode", publicName: "initialSelectedMode", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedIndex: { classPropertyName: "initialSelectedIndex", publicName: "initialSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", tabSelect: "tabSelect" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
7907
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, arrowScrollDistance: { classPropertyName: "arrowScrollDistance", publicName: "arrowScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedMode: { classPropertyName: "initialSelectedMode", publicName: "initialSelectedMode", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedIndex: { classPropertyName: "initialSelectedIndex", publicName: "initialSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", tabSelect: "tabSelect" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
7915
7908
  #_ref
7916
- [attr.id]="_id()"
7909
+ [attr.id]="id()"
7917
7910
  [class]="cls('db-tabs', className())"
7918
7911
  [attr.data-orientation]="orientation()"
7919
7912
  [attr.data-scroll-behavior]="behavior()"
@@ -7969,7 +7962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
7969
7962
  type: Component,
7970
7963
  args: [{ selector: "db-tabs", standalone: true, imports: [CommonModule, DBButton, DBTabList, DBTabItem, DBTabPanel], template: `<div
7971
7964
  #_ref
7972
- [attr.id]="_id()"
7965
+ [attr.id]="id()"
7973
7966
  [class]="cls('db-tabs', className())"
7974
7967
  [attr.data-orientation]="orientation()"
7975
7968
  [attr.data-scroll-behavior]="behavior()"
@@ -8020,7 +8013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
8020
8013
  }
8021
8014
  <ng-content></ng-content>
8022
8015
  </div> `, styles: [":host{display:contents}\n"] }]
8023
- }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], arrowScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowScrollDistance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], initialSelectedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedMode", required: false }] }], initialSelectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedIndex", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
8016
+ }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], arrowScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowScrollDistance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], initialSelectedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedMode", required: false }] }], initialSelectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedIndex", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
8024
8017
 
8025
8018
  const TabsBehaviorList = ['scrollbar', 'arrows'];
8026
8019
  const TabsInitialSelectedModeList = ['auto', 'manually'];