@db-ux/ngx-core-components 4.4.2 → 4.4.3

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 +10 -0
  2. package/fesm2022/db-ux-ngx-core-components.mjs +335 -134
  3. package/fesm2022/db-ux-ngx-core-components.mjs.map +1 -1
  4. package/index.d.ts +3 -3
  5. package/package.json +3 -3
package/fesm2022/db-ux-ngx-core-components.mjs CHANGED
@@ -242,12 +242,16 @@ class DBAccordionItem {
242
242
  const attributes = parent.attributes;
243
243
  for (let i = 0; i < attributes.length; i++) {
244
244
  const attr = attributes.item(i);
245
- if (attr &&
245
+ if (attr && attr.name !== 'data-density' &&
246
246
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
247
247
  element.setAttribute(attr.name, attr.value);
248
248
  parent.removeAttribute(attr.name);
249
249
  }
250
- if (attr && attr.name === "class") {
250
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
251
+ element.setAttribute(attr.name, attr.value);
252
+ parent.removeAttribute(attr.name);
253
+ }
254
+ else if (attr && attr.name === "class") {
251
255
  const isWebComponent = attr.value.includes("hydrated");
252
256
  const value = attr.value.replace("hydrated", "").trim();
253
257
  const currentClass = element.getAttribute("class");
@@ -285,12 +289,12 @@ class DBAccordionItem {
285
289
  [open]="_open()"
286
290
  >
287
291
  <summary (click)="handleToggle($event)">
288
- @if(headlinePlain()){ {{headlinePlain()}} } @if(!headlinePlain()){
292
+ @if(headlinePlain()){{{headlinePlain()}}} @if(!headlinePlain()){
289
293
  <ng-content select="[headline]"> </ng-content>
290
294
  }
291
295
  </summary>
292
296
  <div>
293
- @if(text()){ {{text()}} }@else{
297
+ @if(text()){{{text()}}}@else{
294
298
  <ng-content></ng-content>
295
299
  }
296
300
  </div>
@@ -310,12 +314,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
310
314
  [open]="_open()"
311
315
  >
312
316
  <summary (click)="handleToggle($event)">
313
- @if(headlinePlain()){ {{headlinePlain()}} } @if(!headlinePlain()){
317
+ @if(headlinePlain()){{{headlinePlain()}}} @if(!headlinePlain()){
314
318
  <ng-content select="[headline]"> </ng-content>
315
319
  }
316
320
  </summary>
317
321
  <div>
318
- @if(text()){ {{text()}} }@else{
322
+ @if(text()){{{text()}}}@else{
319
323
  <ng-content></ng-content>
320
324
  }
321
325
  </div>
@@ -440,12 +444,16 @@ class DBAccordion {
440
444
  const attributes = parent.attributes;
441
445
  for (let i = 0; i < attributes.length; i++) {
442
446
  const attr = attributes.item(i);
443
- if (attr &&
447
+ if (attr && attr.name !== 'data-density' &&
444
448
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
445
449
  element.setAttribute(attr.name, attr.value);
446
450
  parent.removeAttribute(attr.name);
447
451
  }
448
- if (attr && attr.name === "class") {
452
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
453
+ element.setAttribute(attr.name, attr.value);
454
+ parent.removeAttribute(attr.name);
455
+ }
456
+ else if (attr && attr.name === "class") {
449
457
  const isWebComponent = attr.value.includes("hydrated");
450
458
  const value = attr.value.replace("hydrated", "").trim();
451
459
  const currentClass = element.getAttribute("class");
@@ -662,12 +670,16 @@ class DBBadge {
662
670
  const attributes = parent.attributes;
663
671
  for (let i = 0; i < attributes.length; i++) {
664
672
  const attr = attributes.item(i);
665
- if (attr &&
673
+ if (attr && attr.name !== 'data-density' &&
666
674
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
667
675
  element.setAttribute(attr.name, attr.value);
668
676
  parent.removeAttribute(attr.name);
669
677
  }
670
- if (attr && attr.name === "class") {
678
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
679
+ element.setAttribute(attr.name, attr.value);
680
+ parent.removeAttribute(attr.name);
681
+ }
682
+ else if (attr && attr.name === "class") {
671
683
  const isWebComponent = attr.value.includes("hydrated");
672
684
  const value = attr.value.replace("hydrated", "").trim();
673
685
  const currentClass = element.getAttribute("class");
@@ -700,7 +712,7 @@ class DBBadge {
700
712
  [attr.data-emphasis]="emphasis()"
701
713
  [attr.data-placement]="placement()"
702
714
  [attr.data-label]="placement()?.startsWith('corner') && (label() ?? DEFAULT_LABEL)"
703
- >@if(text()){ {{text()}} }@else{
715
+ >@if(text()){{{text()}}}@else{
704
716
  <ng-content></ng-content>
705
717
  }</span
706
718
  > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -716,7 +728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
716
728
  [attr.data-emphasis]="emphasis()"
717
729
  [attr.data-placement]="placement()"
718
730
  [attr.data-label]="placement()?.startsWith('corner') && (label() ?? DEFAULT_LABEL)"
719
- >@if(text()){ {{text()}} }@else{
731
+ >@if(text()){{{text()}}}@else{
720
732
  <ng-content></ng-content>
721
733
  }</span
722
734
  > `, styles: [":host{display:contents}\n"] }]
@@ -749,12 +761,16 @@ class DBBrand {
749
761
  const attributes = parent.attributes;
750
762
  for (let i = 0; i < attributes.length; i++) {
751
763
  const attr = attributes.item(i);
752
- if (attr &&
764
+ if (attr && attr.name !== 'data-density' &&
753
765
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
754
766
  element.setAttribute(attr.name, attr.value);
755
767
  parent.removeAttribute(attr.name);
756
768
  }
757
- if (attr && attr.name === "class") {
769
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
770
+ element.setAttribute(attr.name, attr.value);
771
+ parent.removeAttribute(attr.name);
772
+ }
773
+ else if (attr && attr.name === "class") {
758
774
  const isWebComponent = attr.value.includes("hydrated");
759
775
  const value = attr.value.replace("hydrated", "").trim();
760
776
  const currentClass = element.getAttribute("class");
@@ -784,7 +800,7 @@ class DBBrand {
784
800
  [attr.id]="id()"
785
801
  [class]="cls('db-brand', className())"
786
802
  >
787
- @if(text()){ {{text()}} }@else{
803
+ @if(text()){{{text()}}}@else{
788
804
  <ng-content></ng-content>
789
805
  }
790
806
  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -798,7 +814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
798
814
  [attr.id]="id()"
799
815
  [class]="cls('db-brand', className())"
800
816
  >
801
- @if(text()){ {{text()}} }@else{
817
+ @if(text()){{{text()}}}@else{
802
818
  <ng-content></ng-content>
803
819
  }
804
820
  </div> `, styles: [":host{display:contents}\n"] }]
@@ -851,12 +867,16 @@ class DBButton {
851
867
  const attributes = parent.attributes;
852
868
  for (let i = 0; i < attributes.length; i++) {
853
869
  const attr = attributes.item(i);
854
- if (attr &&
870
+ if (attr && attr.name !== 'data-density' &&
855
871
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
856
872
  element.setAttribute(attr.name, attr.value);
857
873
  parent.removeAttribute(attr.name);
858
874
  }
859
- if (attr && attr.name === "class") {
875
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
876
+ element.setAttribute(attr.name, attr.value);
877
+ parent.removeAttribute(attr.name);
878
+ }
879
+ else if (attr && attr.name === "class") {
860
880
  const isWebComponent = attr.value.includes("hydrated");
861
881
  const value = attr.value.replace("hydrated", "").trim();
862
882
  const currentClass = element.getAttribute("class");
@@ -897,7 +917,7 @@ class DBButton {
897
917
  [attr.form]="form()"
898
918
  [attr.value]="value()"
899
919
  >
900
- @if(text()){ {{text()}} }@else{
920
+ @if(text()){{{text()}}}@else{
901
921
  <ng-content></ng-content>
902
922
  }
903
923
  </button> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -922,7 +942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
922
942
  [attr.form]="form()"
923
943
  [attr.value]="value()"
924
944
  >
925
- @if(text()){ {{text()}} }@else{
945
+ @if(text()){{{text()}}}@else{
926
946
  <ng-content></ng-content>
927
947
  }
928
948
  </button> `, styles: [":host{display:contents}\n"] }]
@@ -959,12 +979,16 @@ class DBCard {
959
979
  const attributes = parent.attributes;
960
980
  for (let i = 0; i < attributes.length; i++) {
961
981
  const attr = attributes.item(i);
962
- if (attr &&
982
+ if (attr && attr.name !== 'data-density' &&
963
983
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
964
984
  element.setAttribute(attr.name, attr.value);
965
985
  parent.removeAttribute(attr.name);
966
986
  }
967
- if (attr && attr.name === "class") {
987
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
988
+ element.setAttribute(attr.name, attr.value);
989
+ parent.removeAttribute(attr.name);
990
+ }
991
+ else if (attr && attr.name === "class") {
968
992
  const isWebComponent = attr.value.includes("hydrated");
969
993
  const value = attr.value.replace("hydrated", "").trim();
970
994
  const currentClass = element.getAttribute("class");
@@ -1093,12 +1117,16 @@ class DBInfotext {
1093
1117
  const attributes = parent.attributes;
1094
1118
  for (let i = 0; i < attributes.length; i++) {
1095
1119
  const attr = attributes.item(i);
1096
- if (attr &&
1120
+ if (attr && attr.name !== 'data-density' &&
1097
1121
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
1098
1122
  element.setAttribute(attr.name, attr.value);
1099
1123
  parent.removeAttribute(attr.name);
1100
1124
  }
1101
- if (attr && attr.name === "class") {
1125
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
1126
+ element.setAttribute(attr.name, attr.value);
1127
+ parent.removeAttribute(attr.name);
1128
+ }
1129
+ else if (attr && attr.name === "class") {
1102
1130
  const isWebComponent = attr.value.includes("hydrated");
1103
1131
  const value = attr.value.replace("hydrated", "").trim();
1104
1132
  const currentClass = element.getAttribute("class");
@@ -1129,7 +1157,7 @@ class DBInfotext {
1129
1157
  [attr.data-semantic]="semantic()"
1130
1158
  [attr.data-size]="size()"
1131
1159
  [attr.data-show-icon-leading]="getBooleanAsString(showIcon() ?? true)"
1132
- >@if(text()){ {{text()}} }@else{
1160
+ >@if(text()){{{text()}}}@else{
1133
1161
  <ng-content></ng-content>
1134
1162
  }</span
1135
1163
  > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -1144,7 +1172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1144
1172
  [attr.data-semantic]="semantic()"
1145
1173
  [attr.data-size]="size()"
1146
1174
  [attr.data-show-icon-leading]="getBooleanAsString(showIcon() ?? true)"
1147
- >@if(text()){ {{text()}} }@else{
1175
+ >@if(text()){{{text()}}}@else{
1148
1176
  <ng-content></ng-content>
1149
1177
  }</span
1150
1178
  > `, styles: [":host{display:contents}\n"] }]
@@ -1338,12 +1366,16 @@ class DBCheckbox {
1338
1366
  const attributes = parent.attributes;
1339
1367
  for (let i = 0; i < attributes.length; i++) {
1340
1368
  const attr = attributes.item(i);
1341
- if (attr &&
1369
+ if (attr && attr.name !== 'data-density' &&
1342
1370
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
1343
1371
  element.setAttribute(attr.name, attr.value);
1344
1372
  parent.removeAttribute(attr.name);
1345
1373
  }
1346
- if (attr && attr.name === "class") {
1374
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
1375
+ element.setAttribute(attr.name, attr.value);
1376
+ parent.removeAttribute(attr.name);
1377
+ }
1378
+ else if (attr && attr.name === "class") {
1347
1379
  const isWebComponent = attr.value.includes("hydrated");
1348
1380
  const value = attr.value.replace("hydrated", "").trim();
1349
1381
  const currentClass = element.getAttribute("class");
@@ -1418,7 +1450,7 @@ class DBCheckbox {
1418
1450
  (focus)="handleFocus($event)"
1419
1451
  [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
1420
1452
  />
1421
- @if(label()){ {{label()}} }@else{
1453
+ @if(label()){{{label()}}}@else{
1422
1454
  <ng-content></ng-content>
1423
1455
  }</label
1424
1456
  >
@@ -1479,7 +1511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
1479
1511
  (focus)="handleFocus($event)"
1480
1512
  [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
1481
1513
  />
1482
- @if(label()){ {{label()}} }@else{
1514
+ @if(label()){{{label()}}}@else{
1483
1515
  <ng-content></ng-content>
1484
1516
  }</label
1485
1517
  >
@@ -1811,9 +1843,53 @@ const getFloatingProps = (element, parent, placement) => {
1811
1843
  innerHeight
1812
1844
  };
1813
1845
  };
1846
+ const MAX_ANCESTOR_DEPTH = 10;
1847
+ const ancestorCache = new WeakMap();
1848
+ const getAncestorHasCorrectedPlacement = (element) => {
1849
+ if (ancestorCache.has(element)) {
1850
+ return ancestorCache.get(element);
1851
+ }
1852
+ let current = element.parentElement;
1853
+ let anchor = 0;
1854
+ while (current && anchor < MAX_ANCESTOR_DEPTH) {
1855
+ if (current.dataset['correctedPlacement']) {
1856
+ ancestorCache.set(element, current);
1857
+ return current;
1858
+ }
1859
+ current = current.parentElement;
1860
+ anchor += 1;
1861
+ }
1862
+ ancestorCache.set(element, null);
1863
+ return null;
1864
+ };
1814
1865
  const handleFixedPopover = (element, parent, placement) => {
1815
- const distance = getComputedStyle(element).getPropertyValue('--db-popover-distance') ?? '0px';
1816
- const { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
1866
+ const parentComputedStyles = getComputedStyle(parent);
1867
+ const parentHasFloatingPosition = ['absolute', 'fixed'].includes(parentComputedStyles.position);
1868
+ const ancestorWithCorrectedPlacement = getAncestorHasCorrectedPlacement(element);
1869
+ const noFloatingAncestor = !ancestorWithCorrectedPlacement && !parentHasFloatingPosition;
1870
+ const distance = getComputedStyle(element)?.getPropertyValue('--db-popover-distance') ?? '0px';
1871
+ let { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
1872
+ if (ancestorWithCorrectedPlacement) {
1873
+ const ancestorRect = ancestorWithCorrectedPlacement.getBoundingClientRect();
1874
+ left = Math.abs(left - ancestorRect.left);
1875
+ right = (width + Math.abs(right - ancestorRect.right)) * 1.5; // We add a transform -50% later
1876
+ top = Math.abs(top - ancestorRect.top);
1877
+ bottom = (height + Math.abs(bottom - ancestorRect.bottom)) * 1.5; // We add a transform -50% later
1878
+ }
1879
+ if (parentHasFloatingPosition) {
1880
+ /*
1881
+ * If we have a floating element inside an element with position:absolute/fixed
1882
+ * we need to calculate with relative values
1883
+ * */
1884
+ left = 0;
1885
+ right = width;
1886
+ top = 0;
1887
+ bottom = height;
1888
+ if (['auto', 'inherit', '0'].includes(parentComputedStyles.zIndex)) {
1889
+ // We need the default zIndex for floating elements on the parent
1890
+ parent.style.zIndex = '1';
1891
+ }
1892
+ }
1817
1893
  // Tooltip arrow position
1818
1894
  if (childWidth > width && (correctedPlacement.startsWith('bottom') || correctedPlacement.startsWith('top'))) {
1819
1895
  const diff = width / 2 / childWidth * 100;
@@ -1823,6 +1899,9 @@ const handleFixedPopover = (element, parent, placement) => {
1823
1899
  else if (correctedPlacement.endsWith('end')) {
1824
1900
  element.style.setProperty('--db-tooltip-arrow-inline-start', `${100 - diff}%`);
1825
1901
  }
1902
+ else {
1903
+ element.style.setProperty('--db-tooltip-arrow-inline-start', `50%`);
1904
+ }
1826
1905
  }
1827
1906
  if (childHeight > height && (correctedPlacement.startsWith('left') || correctedPlacement.startsWith('bottom'))) {
1828
1907
  const diff = height / 2 / childHeight * 100;
@@ -1832,6 +1911,9 @@ const handleFixedPopover = (element, parent, placement) => {
1832
1911
  else if (correctedPlacement.endsWith('end')) {
1833
1912
  element.style.setProperty('--db-tooltip-arrow-block-start', `${100 - diff}%`);
1834
1913
  }
1914
+ else {
1915
+ element.style.setProperty('--db-tooltip-arrow-block-start', `50%`);
1916
+ }
1835
1917
  }
1836
1918
  // Popover position
1837
1919
  if (correctedPlacement === 'right' || correctedPlacement === 'left') {
@@ -1841,11 +1923,11 @@ const handleFixedPopover = (element, parent, placement) => {
1841
1923
  else if (correctedPlacement === 'right-start' || correctedPlacement === 'left-start') {
1842
1924
  const end = top + childHeight;
1843
1925
  element.style.insetBlockStart = `${top}px`;
1844
- element.style.insetBlockEnd = `${end > innerHeight ? innerHeight : end}px`;
1926
+ element.style.insetBlockEnd = `${!parentHasFloatingPosition && end > innerHeight ? innerHeight : end}px`;
1845
1927
  }
1846
1928
  else if (correctedPlacement === 'right-end' || correctedPlacement === 'left-end') {
1847
1929
  const start = bottom - childHeight;
1848
- element.style.insetBlockStart = `${start < 0 ? 0 : start}px`;
1930
+ element.style.insetBlockStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
1849
1931
  element.style.insetBlockEnd = `${bottom}px`;
1850
1932
  }
1851
1933
  else if (correctedPlacement === 'top' || correctedPlacement === 'bottom') {
@@ -1855,32 +1937,32 @@ const handleFixedPopover = (element, parent, placement) => {
1855
1937
  else if (correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
1856
1938
  const end = left + childWidth;
1857
1939
  element.style.insetInlineStart = `${left}px`;
1858
- element.style.insetInlineEnd = `${end > innerWidth ? innerWidth : end}px`;
1940
+ element.style.insetInlineEnd = `${!parentHasFloatingPosition && end > innerWidth ? innerWidth : end}px`;
1859
1941
  }
1860
1942
  else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
1861
- const start = left - childWidth;
1862
- element.style.insetInlineStart = `${right - childWidth}px`;
1863
- element.style.insetInlineEnd = `${start < 0 ? 0 : start}px`;
1943
+ const start = right - childWidth;
1944
+ element.style.insetInlineStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
1945
+ element.style.insetInlineEnd = `${right}px`;
1864
1946
  }
1865
1947
  if (correctedPlacement?.startsWith('right')) {
1866
1948
  const end = right + childWidth;
1867
1949
  element.style.insetInlineStart = `calc(${right}px + ${distance})`;
1868
- element.style.insetInlineEnd = `calc(${end > innerWidth ? innerWidth : end}px + ${distance})`;
1950
+ element.style.insetInlineEnd = `calc(${noFloatingAncestor && end > innerWidth ? innerWidth : end}px + ${distance})`;
1869
1951
  }
1870
1952
  else if (correctedPlacement?.startsWith('left')) {
1871
1953
  const start = left - childWidth;
1872
- element.style.insetInlineStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
1954
+ element.style.insetInlineStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
1873
1955
  element.style.insetInlineEnd = `calc(${right}px - ${distance})`;
1874
1956
  }
1875
1957
  else if (correctedPlacement?.startsWith('top')) {
1876
1958
  const start = top - childHeight;
1877
- element.style.insetBlockStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
1878
- element.style.insetBlockEnd = `calc(${bottom}px - ${distance})`;
1959
+ element.style.insetBlockStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
1960
+ element.style.insetBlockEnd = `calc(${parentHasFloatingPosition ? start : bottom}px - ${distance})`;
1879
1961
  }
1880
1962
  else if (correctedPlacement?.startsWith('bottom')) {
1881
1963
  const end = bottom + childHeight;
1882
- element.style.insetBlockStart = `calc(${bottom}px + ${distance})`;
1883
- element.style.insetBlockEnd = `calc(${end > innerHeight ? innerHeight : end}px + ${distance})`;
1964
+ element.style.insetBlockStart = `calc(${parentHasFloatingPosition ? end : bottom}px + ${distance})`;
1965
+ element.style.insetBlockEnd = `calc(${noFloatingAncestor && end > innerHeight ? innerHeight : end}px + ${distance})`;
1884
1966
  }
1885
1967
  element.style.position = 'fixed';
1886
1968
  element.dataset['correctedPlacement'] = correctedPlacement;
@@ -1906,12 +1988,16 @@ class DBCustomSelectDropdown {
1906
1988
  const attributes = parent.attributes;
1907
1989
  for (let i = 0; i < attributes.length; i++) {
1908
1990
  const attr = attributes.item(i);
1909
- if (attr &&
1991
+ if (attr && attr.name !== 'data-density' &&
1910
1992
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
1911
1993
  element.setAttribute(attr.name, attr.value);
1912
1994
  parent.removeAttribute(attr.name);
1913
1995
  }
1914
- if (attr && attr.name === "class") {
1996
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
1997
+ element.setAttribute(attr.name, attr.value);
1998
+ parent.removeAttribute(attr.name);
1999
+ }
2000
+ else if (attr && attr.name === "class") {
1915
2001
  const isWebComponent = attr.value.includes("hydrated");
1916
2002
  const value = attr.value.replace("hydrated", "").trim();
1917
2003
  const currentClass = element.getAttribute("class");
@@ -2016,12 +2102,16 @@ class DBCustomSelectListItem {
2016
2102
  const attributes = parent.attributes;
2017
2103
  for (let i = 0; i < attributes.length; i++) {
2018
2104
  const attr = attributes.item(i);
2019
- if (attr &&
2105
+ if (attr && attr.name !== 'data-density' &&
2020
2106
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
2021
2107
  element.setAttribute(attr.name, attr.value);
2022
2108
  parent.removeAttribute(attr.name);
2023
2109
  }
2024
- if (attr && attr.name === "class") {
2110
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
2111
+ element.setAttribute(attr.name, attr.value);
2112
+ parent.removeAttribute(attr.name);
2113
+ }
2114
+ else if (attr && attr.name === "class") {
2025
2115
  const isWebComponent = attr.value.includes("hydrated");
2026
2116
  const value = attr.value.replace("hydrated", "").trim();
2027
2117
  const currentClass = element.getAttribute("class");
@@ -2088,7 +2178,7 @@ class DBCustomSelectListItem {
2088
2178
  [value]="value()"
2089
2179
  (change)="handleChange($event)"
2090
2180
  />
2091
- @if(label()){ {{label()}} }@else{
2181
+ @if(label()){{{label()}}}@else{
2092
2182
  <ng-content></ng-content>
2093
2183
  }</label
2094
2184
  >
@@ -2128,7 +2218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2128
2218
  [value]="value()"
2129
2219
  (change)="handleChange($event)"
2130
2220
  />
2131
- @if(label()){ {{label()}} }@else{
2221
+ @if(label()){{{label()}}}@else{
2132
2222
  <ng-content></ng-content>
2133
2223
  }</label
2134
2224
  >
@@ -2159,12 +2249,16 @@ class DBCustomSelectList {
2159
2249
  const attributes = parent.attributes;
2160
2250
  for (let i = 0; i < attributes.length; i++) {
2161
2251
  const attr = attributes.item(i);
2162
- if (attr &&
2252
+ if (attr && attr.name !== 'data-density' &&
2163
2253
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
2164
2254
  element.setAttribute(attr.name, attr.value);
2165
2255
  parent.removeAttribute(attr.name);
2166
2256
  }
2167
- if (attr && attr.name === "class") {
2257
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
2258
+ element.setAttribute(attr.name, attr.value);
2259
+ parent.removeAttribute(attr.name);
2260
+ }
2261
+ else if (attr && attr.name === "class") {
2168
2262
  const isWebComponent = attr.value.includes("hydrated");
2169
2263
  const value = attr.value.replace("hydrated", "").trim();
2170
2264
  const currentClass = element.getAttribute("class");
@@ -2448,12 +2542,16 @@ class DBInput {
2448
2542
  const attributes = parent.attributes;
2449
2543
  for (let i = 0; i < attributes.length; i++) {
2450
2544
  const attr = attributes.item(i);
2451
- if (attr &&
2545
+ if (attr && attr.name !== 'data-density' &&
2452
2546
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
2453
2547
  element.setAttribute(attr.name, attr.value);
2454
2548
  parent.removeAttribute(attr.name);
2455
2549
  }
2456
- if (attr && attr.name === "class") {
2550
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
2551
+ element.setAttribute(attr.name, attr.value);
2552
+ parent.removeAttribute(attr.name);
2553
+ }
2554
+ else if (attr && attr.name === "class") {
2457
2555
  const isWebComponent = attr.value.includes("hydrated");
2458
2556
  const value = attr.value.replace("hydrated", "").trim();
2459
2557
  const currentClass = element.getAttribute("class");
@@ -2709,7 +2807,7 @@ class DBTooltip {
2709
2807
  return;
2710
2808
  if (this._ref()?.nativeElement) {
2711
2809
  // This is a workaround for angular
2712
- delay(() => {
2810
+ void delay(() => {
2713
2811
  // Due to race conditions we need to check for _ref again
2714
2812
  if (this._ref()?.nativeElement) {
2715
2813
  handleFixedPopover(this._ref()?.nativeElement, parent, this.placement() ?? "bottom");
@@ -2771,6 +2869,7 @@ class DBTooltip {
2771
2869
  if (this._ref()?.nativeElement && this.initialized() && this._id()) {
2772
2870
  const parent = this.getParent();
2773
2871
  if (parent) {
2872
+ this.handleAutoPlacement(parent);
2774
2873
  ["mouseenter", "focusin"].forEach((event) => {
2775
2874
  parent.addEventListener(event, () => this.handleEnter(parent));
2776
2875
  });
@@ -2813,12 +2912,16 @@ class DBTooltip {
2813
2912
  const attributes = parent.attributes;
2814
2913
  for (let i = 0; i < attributes.length; i++) {
2815
2914
  const attr = attributes.item(i);
2816
- if (attr &&
2915
+ if (attr && attr.name !== 'data-density' &&
2817
2916
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
2818
2917
  element.setAttribute(attr.name, attr.value);
2819
2918
  parent.removeAttribute(attr.name);
2820
2919
  }
2821
- if (attr && attr.name === "class") {
2920
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
2921
+ element.setAttribute(attr.name, attr.value);
2922
+ parent.removeAttribute(attr.name);
2923
+ }
2924
+ else if (attr && attr.name === "class") {
2822
2925
  const isWebComponent = attr.value.includes("hydrated");
2823
2926
  const value = attr.value.replace("hydrated", "").trim();
2824
2927
  const currentClass = element.getAttribute("class");
@@ -2926,12 +3029,16 @@ class DBTag {
2926
3029
  const attributes = parent.attributes;
2927
3030
  for (let i = 0; i < attributes.length; i++) {
2928
3031
  const attr = attributes.item(i);
2929
- if (attr &&
3032
+ if (attr && attr.name !== 'data-density' &&
2930
3033
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
2931
3034
  element.setAttribute(attr.name, attr.value);
2932
3035
  parent.removeAttribute(attr.name);
2933
3036
  }
2934
- if (attr && attr.name === "class") {
3037
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
3038
+ element.setAttribute(attr.name, attr.value);
3039
+ parent.removeAttribute(attr.name);
3040
+ }
3041
+ else if (attr && attr.name === "class") {
2935
3042
  const isWebComponent = attr.value.includes("hydrated");
2936
3043
  const value = attr.value.replace("hydrated", "").trim();
2937
3044
  const currentClass = element.getAttribute("class");
@@ -2968,7 +3075,7 @@ class DBTag {
2968
3075
  >
2969
3076
  <ng-content select="[content]"> </ng-content>
2970
3077
  <ng-content></ng-content>
2971
- @if(text()){ {{text()}} } @if(behavior() === 'removable'){
3078
+ @if(text()){{{text()}}} @if(behavior() === 'removable'){
2972
3079
  <button
2973
3080
  class="db-button db-tab-remove-button"
2974
3081
  data-icon="cross"
@@ -2999,7 +3106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
2999
3106
  >
3000
3107
  <ng-content select="[content]"> </ng-content>
3001
3108
  <ng-content></ng-content>
3002
- @if(text()){ {{text()}} } @if(behavior() === 'removable'){
3109
+ @if(text()){{{text()}}} @if(behavior() === 'removable'){
3003
3110
  <button
3004
3111
  class="db-button db-tab-remove-button"
3005
3112
  data-icon="cross"
@@ -3819,12 +3926,16 @@ class DBCustomSelect {
3819
3926
  const attributes = parent.attributes;
3820
3927
  for (let i = 0; i < attributes.length; i++) {
3821
3928
  const attr = attributes.item(i);
3822
- if (attr &&
3929
+ if (attr && attr.name !== 'data-density' &&
3823
3930
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
3824
3931
  element.setAttribute(attr.name, attr.value);
3825
3932
  parent.removeAttribute(attr.name);
3826
3933
  }
3827
- if (attr && attr.name === "class") {
3934
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
3935
+ element.setAttribute(attr.name, attr.value);
3936
+ parent.removeAttribute(attr.name);
3937
+ }
3938
+ else if (attr && attr.name === "class") {
3828
3939
  const isWebComponent = attr.value.includes("hydrated");
3829
3940
  const value = attr.value.replace("hydrated", "").trim();
3830
3941
  const currentClass = element.getAttribute("class");
@@ -3918,6 +4029,7 @@ class DBCustomSelect {
3918
4029
  #selectRef
3919
4030
  [attr.form]="form()"
3920
4031
  [attr.name]="name()"
4032
+ [attr.data-custom-validity]="_validity()"
3921
4033
  [multiple]="getBoolean(multiple(), 'multiple')"
3922
4034
  [disabled]="getBoolean(disabled(), 'disabled')"
3923
4035
  [required]="getBoolean(required(), 'required')"
@@ -3943,6 +4055,7 @@ class DBCustomSelect {
3943
4055
  class="db-custom-select-form-field"
3944
4056
  [attr.id]="_summaryId()"
3945
4057
  [attr.aria-disabled]="getBooleanAsString(disabled())"
4058
+ [attr.tabIndex]="disabled() ? -1 : undefined"
3946
4059
  [attr.aria-labelledby]="_labelId()"
3947
4060
  >
3948
4061
  @if(_selectedLabels()?.length){
@@ -4029,7 +4142,7 @@ class DBCustomSelect {
4029
4142
  [value]="option.value"
4030
4143
  (change)="handleSelect(option.value)"
4031
4144
  >@if(!option.isGroupTitle){
4032
- {{getOptionLabel(option)}} }</db-custom-select-list-item
4145
+ {{getOptionLabel(option)}}}</db-custom-select-list-item
4033
4146
  >
4034
4147
  }
4035
4148
  </db-custom-select-list></ng-container
@@ -4058,6 +4171,7 @@ class DBCustomSelect {
4058
4171
  [noText]="true"
4059
4172
  [name]="_id()"
4060
4173
  [form]="_id()"
4174
+ [disabled]="getBoolean(disabled(), 'disabled')"
4061
4175
  (click)="handleClearAll($event)"
4062
4176
  >{{clearSelectionText()}}
4063
4177
  <db-tooltip
@@ -4141,6 +4255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
4141
4255
  #selectRef
4142
4256
  [attr.form]="form()"
4143
4257
  [attr.name]="name()"
4258
+ [attr.data-custom-validity]="_validity()"
4144
4259
  [multiple]="getBoolean(multiple(), 'multiple')"
4145
4260
  [disabled]="getBoolean(disabled(), 'disabled')"
4146
4261
  [required]="getBoolean(required(), 'required')"
@@ -4166,6 +4281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
4166
4281
  class="db-custom-select-form-field"
4167
4282
  [attr.id]="_summaryId()"
4168
4283
  [attr.aria-disabled]="getBooleanAsString(disabled())"
4284
+ [attr.tabIndex]="disabled() ? -1 : undefined"
4169
4285
  [attr.aria-labelledby]="_labelId()"
4170
4286
  >
4171
4287
  @if(_selectedLabels()?.length){
@@ -4252,7 +4368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
4252
4368
  [value]="option.value"
4253
4369
  (change)="handleSelect(option.value)"
4254
4370
  >@if(!option.isGroupTitle){
4255
- {{getOptionLabel(option)}} }</db-custom-select-list-item
4371
+ {{getOptionLabel(option)}}}</db-custom-select-list-item
4256
4372
  >
4257
4373
  }
4258
4374
  </db-custom-select-list></ng-container
@@ -4281,6 +4397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
4281
4397
  [noText]="true"
4282
4398
  [name]="_id()"
4283
4399
  [form]="_id()"
4400
+ [disabled]="getBoolean(disabled(), 'disabled')"
4284
4401
  (click)="handleClearAll($event)"
4285
4402
  >{{clearSelectionText()}}
4286
4403
  <db-tooltip
@@ -4345,12 +4462,16 @@ class DBCustomSelectFormField {
4345
4462
  const attributes = parent.attributes;
4346
4463
  for (let i = 0; i < attributes.length; i++) {
4347
4464
  const attr = attributes.item(i);
4348
- if (attr &&
4465
+ if (attr && attr.name !== 'data-density' &&
4349
4466
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
4350
4467
  element.setAttribute(attr.name, attr.value);
4351
4468
  parent.removeAttribute(attr.name);
4352
4469
  }
4353
- if (attr && attr.name === "class") {
4470
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
4471
+ element.setAttribute(attr.name, attr.value);
4472
+ parent.removeAttribute(attr.name);
4473
+ }
4474
+ else if (attr && attr.name === "class") {
4354
4475
  const isWebComponent = attr.value.includes("hydrated");
4355
4476
  const value = attr.value.replace("hydrated", "").trim();
4356
4477
  const currentClass = element.getAttribute("class");
@@ -4419,12 +4540,16 @@ class DBDivider {
4419
4540
  const attributes = parent.attributes;
4420
4541
  for (let i = 0; i < attributes.length; i++) {
4421
4542
  const attr = attributes.item(i);
4422
- if (attr &&
4543
+ if (attr && attr.name !== 'data-density' &&
4423
4544
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
4424
4545
  element.setAttribute(attr.name, attr.value);
4425
4546
  parent.removeAttribute(attr.name);
4426
4547
  }
4427
- if (attr && attr.name === "class") {
4548
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
4549
+ element.setAttribute(attr.name, attr.value);
4550
+ parent.removeAttribute(attr.name);
4551
+ }
4552
+ else if (attr && attr.name === "class") {
4428
4553
  const isWebComponent = attr.value.includes("hydrated");
4429
4554
  const value = attr.value.replace("hydrated", "").trim();
4430
4555
  const currentClass = element.getAttribute("class");
@@ -4593,12 +4718,16 @@ class DBDrawer {
4593
4718
  const attributes = parent.attributes;
4594
4719
  for (let i = 0; i < attributes.length; i++) {
4595
4720
  const attr = attributes.item(i);
4596
- if (attr &&
4721
+ if (attr && attr.name !== 'data-density' &&
4597
4722
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
4598
4723
  element.setAttribute(attr.name, attr.value);
4599
4724
  parent.removeAttribute(attr.name);
4600
4725
  }
4601
- if (attr && attr.name === "class") {
4726
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
4727
+ element.setAttribute(attr.name, attr.value);
4728
+ parent.removeAttribute(attr.name);
4729
+ }
4730
+ else if (attr && attr.name === "class") {
4602
4731
  const isWebComponent = attr.value.includes("hydrated");
4603
4732
  const value = attr.value.replace("hydrated", "").trim();
4604
4733
  const currentClass = element.getAttribute("class");
@@ -4647,9 +4776,9 @@ class DBDrawer {
4647
4776
  <ng-content select="[drawer-header]"> </ng-content>
4648
4777
  </div>
4649
4778
  <db-button
4650
- class="button-close-drawer"
4651
4779
  icon="cross"
4652
4780
  variant="ghost"
4781
+ className="button-close-drawer"
4653
4782
  [id]="closeButtonId()"
4654
4783
  [noText]="true"
4655
4784
  (click)="handleClose($event, true)"
@@ -4686,9 +4815,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
4686
4815
  <ng-content select="[drawer-header]"> </ng-content>
4687
4816
  </div>
4688
4817
  <db-button
4689
- class="button-close-drawer"
4690
4818
  icon="cross"
4691
4819
  variant="ghost"
4820
+ className="button-close-drawer"
4692
4821
  [id]="closeButtonId()"
4693
4822
  [noText]="true"
4694
4823
  (click)="handleClose($event, true)"
@@ -4941,12 +5070,16 @@ class DBHeader {
4941
5070
  const attributes = parent.attributes;
4942
5071
  for (let i = 0; i < attributes.length; i++) {
4943
5072
  const attr = attributes.item(i);
4944
- if (attr &&
5073
+ if (attr && attr.name !== 'data-density' &&
4945
5074
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
4946
5075
  element.setAttribute(attr.name, attr.value);
4947
5076
  parent.removeAttribute(attr.name);
4948
5077
  }
4949
- if (attr && attr.name === "class") {
5078
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
5079
+ element.setAttribute(attr.name, attr.value);
5080
+ parent.removeAttribute(attr.name);
5081
+ }
5082
+ else if (attr && attr.name === "class") {
4950
5083
  const isWebComponent = attr.value.includes("hydrated");
4951
5084
  const value = attr.value.replace("hydrated", "").trim();
4952
5085
  const currentClass = element.getAttribute("class");
@@ -4978,8 +5111,8 @@ class DBHeader {
4978
5111
  [attr.data-on-forcing-mobile]="forceMobile() && !forcedToMobile()"
4979
5112
  >
4980
5113
  <db-drawer
4981
- class="db-header-drawer"
4982
5114
  spacing="small"
5115
+ className="db-header-drawer"
4983
5116
  [rounded]="true"
4984
5117
  [closeButtonId]="closeButtonId()"
4985
5118
  [closeButtonText]="closeButtonText()"
@@ -5039,8 +5172,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5039
5172
  [attr.data-on-forcing-mobile]="forceMobile() && !forcedToMobile()"
5040
5173
  >
5041
5174
  <db-drawer
5042
- class="db-header-drawer"
5043
5175
  spacing="small"
5176
+ className="db-header-drawer"
5044
5177
  [rounded]="true"
5045
5178
  [closeButtonId]="closeButtonId()"
5046
5179
  [closeButtonText]="closeButtonText()"
@@ -5123,12 +5256,16 @@ class DBIcon {
5123
5256
  const attributes = parent.attributes;
5124
5257
  for (let i = 0; i < attributes.length; i++) {
5125
5258
  const attr = attributes.item(i);
5126
- if (attr &&
5259
+ if (attr && attr.name !== 'data-density' &&
5127
5260
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
5128
5261
  element.setAttribute(attr.name, attr.value);
5129
5262
  parent.removeAttribute(attr.name);
5130
5263
  }
5131
- if (attr && attr.name === "class") {
5264
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
5265
+ element.setAttribute(attr.name, attr.value);
5266
+ parent.removeAttribute(attr.name);
5267
+ }
5268
+ else if (attr && attr.name === "class") {
5132
5269
  const isWebComponent = attr.value.includes("hydrated");
5133
5270
  const value = attr.value.replace("hydrated", "").trim();
5134
5271
  const currentClass = element.getAttribute("class");
@@ -5159,7 +5296,7 @@ class DBIcon {
5159
5296
  [attr.data-icon]="icon()"
5160
5297
  [attr.data-icon-weight]="weight()"
5161
5298
  [attr.data-icon-variant]="variant()"
5162
- >@if(text()){ {{text()}} }@else{
5299
+ >@if(text()){{{text()}}}@else{
5163
5300
  <ng-content></ng-content>
5164
5301
  }</span
5165
5302
  > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -5174,7 +5311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5174
5311
  [attr.data-icon]="icon()"
5175
5312
  [attr.data-icon-weight]="weight()"
5176
5313
  [attr.data-icon-variant]="variant()"
5177
- >@if(text()){ {{text()}} }@else{
5314
+ >@if(text()){{{text()}}}@else{
5178
5315
  <ng-content></ng-content>
5179
5316
  }</span
5180
5317
  > `, styles: [":host{display:contents}\n"] }]
@@ -5222,12 +5359,16 @@ class DBLink {
5222
5359
  const attributes = parent.attributes;
5223
5360
  for (let i = 0; i < attributes.length; i++) {
5224
5361
  const attr = attributes.item(i);
5225
- if (attr &&
5362
+ if (attr && attr.name !== 'data-density' &&
5226
5363
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
5227
5364
  element.setAttribute(attr.name, attr.value);
5228
5365
  parent.removeAttribute(attr.name);
5229
5366
  }
5230
- if (attr && attr.name === "class") {
5367
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
5368
+ element.setAttribute(attr.name, attr.value);
5369
+ parent.removeAttribute(attr.name);
5370
+ }
5371
+ else if (attr && attr.name === "class") {
5231
5372
  const isWebComponent = attr.value.includes("hydrated");
5232
5373
  const value = attr.value.replace("hydrated", "").trim();
5233
5374
  const currentClass = element.getAttribute("class");
@@ -5267,7 +5408,7 @@ class DBLink {
5267
5408
  [attr.data-variant]="variant()"
5268
5409
  [attr.data-content]="content() || 'internal'"
5269
5410
  [attr.data-wrap]="getBooleanAsString(wrap())"
5270
- >@if(text()){ {{text()}} }@else{
5411
+ >@if(text()){{{text()}}}@else{
5271
5412
  <ng-content></ng-content>
5272
5413
  }</a
5273
5414
  > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -5291,7 +5432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5291
5432
  [attr.data-variant]="variant()"
5292
5433
  [attr.data-content]="content() || 'internal'"
5293
5434
  [attr.data-wrap]="getBooleanAsString(wrap())"
5294
- >@if(text()){ {{text()}} }@else{
5435
+ >@if(text()){{{text()}}}@else{
5295
5436
  <ng-content></ng-content>
5296
5437
  }</a
5297
5438
  > `, styles: [":host{display:contents}\n"] }]
@@ -5320,12 +5461,16 @@ class DBNavigation {
5320
5461
  const attributes = parent.attributes;
5321
5462
  for (let i = 0; i < attributes.length; i++) {
5322
5463
  const attr = attributes.item(i);
5323
- if (attr &&
5464
+ if (attr && attr.name !== 'data-density' &&
5324
5465
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
5325
5466
  element.setAttribute(attr.name, attr.value);
5326
5467
  parent.removeAttribute(attr.name);
5327
5468
  }
5328
- if (attr && attr.name === "class") {
5469
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
5470
+ element.setAttribute(attr.name, attr.value);
5471
+ parent.removeAttribute(attr.name);
5472
+ }
5473
+ else if (attr && attr.name === "class") {
5329
5474
  const isWebComponent = attr.value.includes("hydrated");
5330
5475
  const value = attr.value.replace("hydrated", "").trim();
5331
5476
  const currentClass = element.getAttribute("class");
@@ -5474,12 +5619,16 @@ class DBNavigationItem {
5474
5619
  const attributes = parent.attributes;
5475
5620
  for (let i = 0; i < attributes.length; i++) {
5476
5621
  const attr = attributes.item(i);
5477
- if (attr &&
5622
+ if (attr && attr.name !== 'data-density' &&
5478
5623
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
5479
5624
  element.setAttribute(attr.name, attr.value);
5480
5625
  parent.removeAttribute(attr.name);
5481
5626
  }
5482
- if (attr && attr.name === "class") {
5627
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
5628
+ element.setAttribute(attr.name, attr.value);
5629
+ parent.removeAttribute(attr.name);
5630
+ }
5631
+ else if (attr && attr.name === "class") {
5483
5632
  const isWebComponent = attr.value.includes("hydrated");
5484
5633
  const value = attr.value.replace("hydrated", "").trim();
5485
5634
  const currentClass = element.getAttribute("class");
@@ -5517,7 +5666,7 @@ class DBNavigationItem {
5517
5666
  [attr.data-wrap]="getBooleanAsString(wrap())"
5518
5667
  [attr.aria-disabled]="getBooleanAsString(disabled())"
5519
5668
  >
5520
- @if(!hasSubNavigation()){ @if(text()){ {{text()}} }@else{
5669
+ @if(!hasSubNavigation()){ @if(text()){{{text()}}}@else{
5521
5670
  <ng-content *ngTemplateOutlet="dbNavigationContent"></ng-content>
5522
5671
  } } @if(hasSubNavigation()){
5523
5672
  <button
@@ -5527,7 +5676,7 @@ class DBNavigationItem {
5527
5676
  [attr.disabled]="getBoolean(disabled(), 'disabled')"
5528
5677
  (click)="handleClick($event)"
5529
5678
  >
5530
- @if(text()){ {{text()}} }@else{
5679
+ @if(text()){{{text()}}}@else{
5531
5680
  <ng-content *ngTemplateOutlet="dbNavigationContent"></ng-content>
5532
5681
  }
5533
5682
  </button>
@@ -5567,7 +5716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5567
5716
  [attr.data-wrap]="getBooleanAsString(wrap())"
5568
5717
  [attr.aria-disabled]="getBooleanAsString(disabled())"
5569
5718
  >
5570
- @if(!hasSubNavigation()){ @if(text()){ {{text()}} }@else{
5719
+ @if(!hasSubNavigation()){ @if(text()){{{text()}}}@else{
5571
5720
  <ng-content *ngTemplateOutlet="dbNavigationContent"></ng-content>
5572
5721
  } } @if(hasSubNavigation()){
5573
5722
  <button
@@ -5577,7 +5726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5577
5726
  [attr.disabled]="getBoolean(disabled(), 'disabled')"
5578
5727
  (click)="handleClick($event)"
5579
5728
  >
5580
- @if(text()){ {{text()}} }@else{
5729
+ @if(text()){{{text()}}}@else{
5581
5730
  <ng-content *ngTemplateOutlet="dbNavigationContent"></ng-content>
5582
5731
  }
5583
5732
  </button>
@@ -5653,12 +5802,16 @@ class DBNotification {
5653
5802
  const attributes = parent.attributes;
5654
5803
  for (let i = 0; i < attributes.length; i++) {
5655
5804
  const attr = attributes.item(i);
5656
- if (attr &&
5805
+ if (attr && attr.name !== 'data-density' &&
5657
5806
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
5658
5807
  element.setAttribute(attr.name, attr.value);
5659
5808
  parent.removeAttribute(attr.name);
5660
5809
  }
5661
- if (attr && attr.name === "class") {
5810
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
5811
+ element.setAttribute(attr.name, attr.value);
5812
+ parent.removeAttribute(attr.name);
5813
+ }
5814
+ else if (attr && attr.name === "class") {
5662
5815
  const isWebComponent = attr.value.includes("hydrated");
5663
5816
  const value = attr.value.replace("hydrated", "").trim();
5664
5817
  const currentClass = element.getAttribute("class");
@@ -5702,7 +5855,7 @@ class DBNotification {
5702
5855
  <header>{{headline()}}</header>
5703
5856
  }
5704
5857
  <p>
5705
- @if(text()){ {{text()}} }@else{
5858
+ @if(text()){{{text()}}}@else{
5706
5859
  <ng-content></ng-content>
5707
5860
  }
5708
5861
  </p>
@@ -5746,7 +5899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
5746
5899
  <header>{{headline()}}</header>
5747
5900
  }
5748
5901
  <p>
5749
- @if(text()){ {{text()}} }@else{
5902
+ @if(text()){{{text()}}}@else{
5750
5903
  <ng-content></ng-content>
5751
5904
  }
5752
5905
  </p>
@@ -5797,12 +5950,16 @@ class DBPage {
5797
5950
  const attributes = parent.attributes;
5798
5951
  for (let i = 0; i < attributes.length; i++) {
5799
5952
  const attr = attributes.item(i);
5800
- if (attr &&
5953
+ if (attr && attr.name !== 'data-density' &&
5801
5954
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
5802
5955
  element.setAttribute(attr.name, attr.value);
5803
5956
  parent.removeAttribute(attr.name);
5804
5957
  }
5805
- if (attr && attr.name === "class") {
5958
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
5959
+ element.setAttribute(attr.name, attr.value);
5960
+ parent.removeAttribute(attr.name);
5961
+ }
5962
+ else if (attr && attr.name === "class") {
5806
5963
  const isWebComponent = attr.value.includes("hydrated");
5807
5964
  const value = attr.value.replace("hydrated", "").trim();
5808
5965
  const currentClass = element.getAttribute("class");
@@ -5899,7 +6056,7 @@ class DBPopover {
5899
6056
  const article = this._ref()?.nativeElement.querySelector("article");
5900
6057
  if (article) {
5901
6058
  // This is a workaround for angular
5902
- delay(() => {
6059
+ void delay(() => {
5903
6060
  handleFixedPopover(article, this._ref()?.nativeElement, this.placement() ?? "bottom");
5904
6061
  }, 1);
5905
6062
  }
@@ -6031,12 +6188,16 @@ class DBPopover {
6031
6188
  const attributes = parent.attributes;
6032
6189
  for (let i = 0; i < attributes.length; i++) {
6033
6190
  const attr = attributes.item(i);
6034
- if (attr &&
6191
+ if (attr && attr.name !== 'data-density' &&
6035
6192
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
6036
6193
  element.setAttribute(attr.name, attr.value);
6037
6194
  parent.removeAttribute(attr.name);
6038
6195
  }
6039
- if (attr && attr.name === "class") {
6196
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
6197
+ element.setAttribute(attr.name, attr.value);
6198
+ parent.removeAttribute(attr.name);
6199
+ }
6200
+ else if (attr && attr.name === "class") {
6040
6201
  const isWebComponent = attr.value.includes("hydrated");
6041
6202
  const value = attr.value.replace("hydrated", "").trim();
6042
6203
  const currentClass = element.getAttribute("class");
@@ -6219,12 +6380,16 @@ class DBRadio {
6219
6380
  const attributes = parent.attributes;
6220
6381
  for (let i = 0; i < attributes.length; i++) {
6221
6382
  const attr = attributes.item(i);
6222
- if (attr &&
6383
+ if (attr && attr.name !== 'data-density' &&
6223
6384
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
6224
6385
  element.setAttribute(attr.name, attr.value);
6225
6386
  parent.removeAttribute(attr.name);
6226
6387
  }
6227
- if (attr && attr.name === "class") {
6388
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
6389
+ element.setAttribute(attr.name, attr.value);
6390
+ parent.removeAttribute(attr.name);
6391
+ }
6392
+ else if (attr && attr.name === "class") {
6228
6393
  const isWebComponent = attr.value.includes("hydrated");
6229
6394
  const value = attr.value.replace("hydrated", "").trim();
6230
6395
  const currentClass = element.getAttribute("class");
@@ -6295,7 +6460,7 @@ class DBRadio {
6295
6460
  (blur)="handleBlur($event)"
6296
6461
  (focus)="handleFocus($event)"
6297
6462
  />
6298
- @if(label()){ {{label()}} }@else{
6463
+ @if(label()){{{label()}}}@else{
6299
6464
  <ng-content></ng-content>
6300
6465
  }</label
6301
6466
  > `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
@@ -6328,7 +6493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
6328
6493
  (blur)="handleBlur($event)"
6329
6494
  (focus)="handleFocus($event)"
6330
6495
  />
6331
- @if(label()){ {{label()}} }@else{
6496
+ @if(label()){{{label()}}}@else{
6332
6497
  <ng-content></ng-content>
6333
6498
  }</label
6334
6499
  > `, styles: [":host{display:contents}\n"] }]
@@ -6355,12 +6520,16 @@ class DBSection {
6355
6520
  const attributes = parent.attributes;
6356
6521
  for (let i = 0; i < attributes.length; i++) {
6357
6522
  const attr = attributes.item(i);
6358
- if (attr &&
6523
+ if (attr && attr.name !== 'data-density' &&
6359
6524
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
6360
6525
  element.setAttribute(attr.name, attr.value);
6361
6526
  parent.removeAttribute(attr.name);
6362
6527
  }
6363
- if (attr && attr.name === "class") {
6528
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
6529
+ element.setAttribute(attr.name, attr.value);
6530
+ parent.removeAttribute(attr.name);
6531
+ }
6532
+ else if (attr && attr.name === "class") {
6364
6533
  const isWebComponent = attr.value.includes("hydrated");
6365
6534
  const value = attr.value.replace("hydrated", "").trim();
6366
6535
  const currentClass = element.getAttribute("class");
@@ -6631,12 +6800,16 @@ class DBSelect {
6631
6800
  const attributes = parent.attributes;
6632
6801
  for (let i = 0; i < attributes.length; i++) {
6633
6802
  const attr = attributes.item(i);
6634
- if (attr &&
6803
+ if (attr && attr.name !== 'data-density' &&
6635
6804
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
6636
6805
  element.setAttribute(attr.name, attr.value);
6637
6806
  parent.removeAttribute(attr.name);
6638
6807
  }
6639
- if (attr && attr.name === "class") {
6808
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
6809
+ element.setAttribute(attr.name, attr.value);
6810
+ parent.removeAttribute(attr.name);
6811
+ }
6812
+ else if (attr && attr.name === "class") {
6640
6813
  const isWebComponent = attr.value.includes("hydrated");
6641
6814
  const value = attr.value.replace("hydrated", "").trim();
6642
6815
  const currentClass = element.getAttribute("class");
@@ -6920,12 +7093,16 @@ class DBStack {
6920
7093
  const attributes = parent.attributes;
6921
7094
  for (let i = 0; i < attributes.length; i++) {
6922
7095
  const attr = attributes.item(i);
6923
- if (attr &&
7096
+ if (attr && attr.name !== 'data-density' &&
6924
7097
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
6925
7098
  element.setAttribute(attr.name, attr.value);
6926
7099
  parent.removeAttribute(attr.name);
6927
7100
  }
6928
- if (attr && attr.name === "class") {
7101
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
7102
+ element.setAttribute(attr.name, attr.value);
7103
+ parent.removeAttribute(attr.name);
7104
+ }
7105
+ else if (attr && attr.name === "class") {
6929
7106
  const isWebComponent = attr.value.includes("hydrated");
6930
7107
  const value = attr.value.replace("hydrated", "").trim();
6931
7108
  const currentClass = element.getAttribute("class");
@@ -7144,12 +7321,16 @@ class DBSwitch {
7144
7321
  const attributes = parent.attributes;
7145
7322
  for (let i = 0; i < attributes.length; i++) {
7146
7323
  const attr = attributes.item(i);
7147
- if (attr &&
7324
+ if (attr && attr.name !== 'data-density' &&
7148
7325
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
7149
7326
  element.setAttribute(attr.name, attr.value);
7150
7327
  parent.removeAttribute(attr.name);
7151
7328
  }
7152
- if (attr && attr.name === "class") {
7329
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
7330
+ element.setAttribute(attr.name, attr.value);
7331
+ parent.removeAttribute(attr.name);
7332
+ }
7333
+ else if (attr && attr.name === "class") {
7153
7334
  const isWebComponent = attr.value.includes("hydrated");
7154
7335
  const value = attr.value.replace("hydrated", "").trim();
7155
7336
  const currentClass = element.getAttribute("class");
@@ -7228,7 +7409,7 @@ class DBSwitch {
7228
7409
  (focus)="handleFocus($event)"
7229
7410
  (keydown)="handleKeyDown($event)"
7230
7411
  />
7231
- @if(label()){ {{label()}} }@else{
7412
+ @if(label()){{{label()}}}@else{
7232
7413
  <ng-content></ng-content>
7233
7414
  }</label
7234
7415
  >
@@ -7297,7 +7478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
7297
7478
  (focus)="handleFocus($event)"
7298
7479
  (keydown)="handleKeyDown($event)"
7299
7480
  />
7300
- @if(label()){ {{label()}} }@else{
7481
+ @if(label()){{{label()}}}@else{
7301
7482
  <ng-content></ng-content>
7302
7483
  }</label
7303
7484
  >
@@ -7431,12 +7612,16 @@ class DBTabItem {
7431
7612
  const attributes = parent.attributes;
7432
7613
  for (let i = 0; i < attributes.length; i++) {
7433
7614
  const attr = attributes.item(i);
7434
- if (attr &&
7615
+ if (attr && attr.name !== 'data-density' &&
7435
7616
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
7436
7617
  element.setAttribute(attr.name, attr.value);
7437
7618
  parent.removeAttribute(attr.name);
7438
7619
  }
7439
- if (attr && attr.name === "class") {
7620
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
7621
+ element.setAttribute(attr.name, attr.value);
7622
+ parent.removeAttribute(attr.name);
7623
+ }
7624
+ else if (attr && attr.name === "class") {
7440
7625
  const isWebComponent = attr.value.includes("hydrated");
7441
7626
  const value = attr.value.replace("hydrated", "").trim();
7442
7627
  const currentClass = element.getAttribute("class");
@@ -7508,7 +7693,7 @@ class DBTabItem {
7508
7693
  [attr.name]="_name()"
7509
7694
  [attr.id]="id()"
7510
7695
  (input)="handleChange($event)" />
7511
- @if(label()){ {{label()}} } <ng-content></ng-content
7696
+ @if(label()){{{label()}}} <ng-content></ng-content
7512
7697
  ></label>
7513
7698
  </li> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
7514
7699
  }
@@ -7536,7 +7721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
7536
7721
  [attr.name]="_name()"
7537
7722
  [attr.id]="id()"
7538
7723
  (input)="handleChange($event)" />
7539
- @if(label()){ {{label()}} } <ng-content></ng-content
7724
+ @if(label()){{{label()}}} <ng-content></ng-content
7540
7725
  ></label>
7541
7726
  </li> `, styles: [":host{display:contents}\n"] }]
7542
7727
  }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], 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 }] }] } });
@@ -7560,12 +7745,16 @@ class DBTabList {
7560
7745
  const attributes = parent.attributes;
7561
7746
  for (let i = 0; i < attributes.length; i++) {
7562
7747
  const attr = attributes.item(i);
7563
- if (attr &&
7748
+ if (attr && attr.name !== 'data-density' &&
7564
7749
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
7565
7750
  element.setAttribute(attr.name, attr.value);
7566
7751
  parent.removeAttribute(attr.name);
7567
7752
  }
7568
- if (attr && attr.name === "class") {
7753
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
7754
+ element.setAttribute(attr.name, attr.value);
7755
+ parent.removeAttribute(attr.name);
7756
+ }
7757
+ else if (attr && attr.name === "class") {
7569
7758
  const isWebComponent = attr.value.includes("hydrated");
7570
7759
  const value = attr.value.replace("hydrated", "").trim();
7571
7760
  const currentClass = element.getAttribute("class");
@@ -7631,12 +7820,16 @@ class DBTabPanel {
7631
7820
  const attributes = parent.attributes;
7632
7821
  for (let i = 0; i < attributes.length; i++) {
7633
7822
  const attr = attributes.item(i);
7634
- if (attr &&
7823
+ if (attr && attr.name !== 'data-density' &&
7635
7824
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
7636
7825
  element.setAttribute(attr.name, attr.value);
7637
7826
  parent.removeAttribute(attr.name);
7638
7827
  }
7639
- if (attr && attr.name === "class") {
7828
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
7829
+ element.setAttribute(attr.name, attr.value);
7830
+ parent.removeAttribute(attr.name);
7831
+ }
7832
+ else if (attr && attr.name === "class") {
7640
7833
  const isWebComponent = attr.value.includes("hydrated");
7641
7834
  const value = attr.value.replace("hydrated", "").trim();
7642
7835
  const currentClass = element.getAttribute("class");
@@ -7665,7 +7858,7 @@ class DBTabPanel {
7665
7858
  [class]="cls('db-tab-panel', className())"
7666
7859
  [attr.id]="id()"
7667
7860
  >
7668
- @if(content()){ {{content()}} } <ng-content></ng-content>
7861
+ @if(content()){{{content()}}} <ng-content></ng-content>
7669
7862
  </section> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
7670
7863
  }
7671
7864
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DBTabPanel, decorators: [{
@@ -7676,7 +7869,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
7676
7869
  [class]="cls('db-tab-panel', className())"
7677
7870
  [attr.id]="id()"
7678
7871
  >
7679
- @if(content()){ {{content()}} } <ng-content></ng-content>
7872
+ @if(content()){{{content()}}} <ng-content></ng-content>
7680
7873
  </section> `, styles: [":host{display:contents}\n"] }]
7681
7874
  }], ctorParameters: () => [], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
7682
7875
 
@@ -7870,12 +8063,16 @@ class DBTabs {
7870
8063
  const attributes = parent.attributes;
7871
8064
  for (let i = 0; i < attributes.length; i++) {
7872
8065
  const attr = attributes.item(i);
7873
- if (attr &&
8066
+ if (attr && attr.name !== 'data-density' &&
7874
8067
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
7875
8068
  element.setAttribute(attr.name, attr.value);
7876
8069
  parent.removeAttribute(attr.name);
7877
8070
  }
7878
- if (attr && attr.name === "class") {
8071
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
8072
+ element.setAttribute(attr.name, attr.value);
8073
+ parent.removeAttribute(attr.name);
8074
+ }
8075
+ else if (attr && attr.name === "class") {
7879
8076
  const isWebComponent = attr.value.includes("hydrated");
7880
8077
  const value = attr.value.replace("hydrated", "").trim();
7881
8078
  const currentClass = element.getAttribute("class");
@@ -7917,10 +8114,10 @@ class DBTabs {
7917
8114
  >
7918
8115
  @if(showScrollLeft()){
7919
8116
  <db-button
7920
- class="tabs-scroll-left"
7921
8117
  variant="ghost"
7922
8118
  icon="chevron_left"
7923
8119
  type="button"
8120
+ className="tabs-scroll-left"
7924
8121
  [noText]="true"
7925
8122
  (click)="scroll(true)"
7926
8123
  >
@@ -7945,10 +8142,10 @@ class DBTabs {
7945
8142
  <db-tab-panel [content]="tab.content">{{tab.children}}</db-tab-panel>
7946
8143
  } } @if(showScrollRight()){
7947
8144
  <db-button
7948
- class="tabs-scroll-right"
7949
8145
  variant="ghost"
7950
8146
  icon="chevron_right"
7951
8147
  type="button"
8148
+ className="tabs-scroll-right"
7952
8149
  [noText]="true"
7953
8150
  (click)="scroll()"
7954
8151
  >
@@ -7973,10 +8170,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
7973
8170
  >
7974
8171
  @if(showScrollLeft()){
7975
8172
  <db-button
7976
- class="tabs-scroll-left"
7977
8173
  variant="ghost"
7978
8174
  icon="chevron_left"
7979
8175
  type="button"
8176
+ className="tabs-scroll-left"
7980
8177
  [noText]="true"
7981
8178
  (click)="scroll(true)"
7982
8179
  >
@@ -8001,10 +8198,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
8001
8198
  <db-tab-panel [content]="tab.content">{{tab.children}}</db-tab-panel>
8002
8199
  } } @if(showScrollRight()){
8003
8200
  <db-button
8004
- class="tabs-scroll-right"
8005
8201
  variant="ghost"
8006
8202
  icon="chevron_right"
8007
8203
  type="button"
8204
+ className="tabs-scroll-right"
8008
8205
  [noText]="true"
8009
8206
  (click)="scroll()"
8010
8207
  >
@@ -8218,12 +8415,16 @@ class DBTextarea {
8218
8415
  const attributes = parent.attributes;
8219
8416
  for (let i = 0; i < attributes.length; i++) {
8220
8417
  const attr = attributes.item(i);
8221
- if (attr &&
8418
+ if (attr && attr.name !== 'data-density' &&
8222
8419
  (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
8223
8420
  element.setAttribute(attr.name, attr.value);
8224
8421
  parent.removeAttribute(attr.name);
8225
8422
  }
8226
- if (attr && attr.name === "class") {
8423
+ else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
8424
+ element.setAttribute(attr.name, attr.value);
8425
+ parent.removeAttribute(attr.name);
8426
+ }
8427
+ else if (attr && attr.name === "class") {
8227
8428
  const isWebComponent = attr.value.includes("hydrated");
8228
8429
  const value = attr.value.replace("hydrated", "").trim();
8229
8430
  const currentClass = element.getAttribute("class");