@db-ux/core-components 4.5.4-mcp-e4cd7e6 → 4.5.4-table-c758ae7

package/build/components/table-header-cell/table-header-cell.css

@@ -0,0 +1,180 @@
+/* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+.db-table-header-cell {
+  display: flex;
+}
+[colspan="2"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 2);
+}
+[rowspan="2"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 2);
+}
+[colspan="3"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 3);
+}
+[rowspan="3"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 3);
+}
+[colspan="4"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 4);
+}
+[rowspan="4"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 4);
+}
+[colspan="5"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 5);
+}
+[rowspan="5"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 5);
+}
+[colspan="6"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 6);
+}
+[rowspan="6"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 6);
+}
+[colspan="7"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 7);
+}
+[rowspan="7"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 7);
+}
+[colspan="8"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 8);
+}
+[rowspan="8"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 8);
+}
+[colspan="9"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 9);
+}
+[rowspan="9"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 9);
+}
+[colspan="10"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 10);
+}
+[rowspan="10"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 10);
+}
+[colspan="11"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 11);
+}
+[rowspan="11"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 11);
+}
+[colspan="12"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 12);
+}
+[rowspan="12"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 12);
+}
+[colspan="13"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 13);
+}
+[rowspan="13"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 13);
+}
+[colspan="14"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 14);
+}
+[rowspan="14"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 14);
+}
+[colspan="15"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 15);
+}
+[rowspan="15"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 15);
+}
+[colspan="16"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 16);
+}
+[rowspan="16"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 16);
+}
+[colspan="17"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 17);
+}
+[rowspan="17"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 17);
+}
+[colspan="18"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 18);
+}
+[rowspan="18"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 18);
+}
+[colspan="19"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 19);
+}
+[rowspan="19"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 19);
+}
+[colspan="20"].db-table-header-cell {
+  grid-column: span var(--db-table-cell-span, 20);
+}
+[rowspan="20"].db-table-header-cell {
+  grid-row: span var(--db-table-cell-span, 20);
+}
+.db-table-header-cell:not([data-horizontal-alignment]), [data-horizontal-alignment=start].db-table-header-cell {
+  text-align: start;
+  justify-content: flex-start;
+}
+[data-horizontal-alignment=center].db-table-header-cell {
+  text-align: center;
+  justify-content: center;
+}
+[data-horizontal-alignment=end].db-table-header-cell {
+  text-align: end;
+  justify-content: flex-end;
+}
+[data-vertical-alignment=start].db-table-header-cell {
+  vertical-align: top;
+  align-items: flex-start;
+}
+.db-table-header-cell:not([data-vertical-alignment]), [data-vertical-alignment=center].db-table-header-cell {
+  vertical-align: middle;
+  align-items: center;
+}
+[data-vertical-alignment=end].db-table-header-cell {
+  vertical-align: bottom;
+  align-items: flex-end;
+}
+
+.db-table-header-cell[data-no-text=true] {
+  font-size: 0 !important;
+}

package/build/components/table-header-cell/table-header-cell.scss

@@ -0,0 +1,9 @@
+@use "./../../styles/internal/table-components";
+
+.db-table-header-cell {
+	@extend %table-cell;
+
+	&[data-no-text="true"] {
+		font-size: 0 !important;
+	}
+}

package/build/components/table-row/table-row.css

@@ -0,0 +1,128 @@
+/* Variants for adaptive components like input, select, notification, ... */
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+.db-table-row[data-interactive=true]:not([data-disable-focus=true]):has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):focus-visible)::after {
+  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
+  outline-offset: var(--db-border-width-xs);
+  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .db-table-row[data-interactive=true]:not([data-disable-focus=true]):has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):focus-visible)::after {
+    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
+  }
+}
+.db-table-row[data-interactive=true]:not([data-disable-focus=true]):not([type=radio], [role=switch]):has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):focus-visible)::after {
+  border-radius: var(--db-border-radius-xs);
+}
+
+.db-table-row {
+  display: var(--db-table-section-display, grid);
+  grid-template-columns: subgrid;
+  grid-column: 1/-1;
+}
+
+.db-table-row[data-interactive=true]::after, .db-table-row[data-interactive=true] :is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select)[data-icon-trailing]::before, .db-table-row[data-interactive=true] :is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):not([data-icon-trailing])::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.db-table-row {
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
+}
+.db-table-row[data-interactive=true] {
+  position: relative;
+}
+.db-table-row[data-interactive=true] td :is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])):not([data-table-row-action=true]) {
+  position: relative;
+  z-index: 1;
+}
+.db-table-row[data-interactive=true]:has(input:is([type=radio],
+[type=checkbox]):is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):checked:not(:hover, :active)) {
+  background-color: var(--db-adaptive-bg-basic-level-2-default);
+}
+.db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-level-2-hovered);
+}
+.db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])):is(textarea), .db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])):is(input) {
+  cursor: initial;
+}
+.db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])):is(input[type=checkbox]), .db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-level-2-pressed);
+}
+.db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])):is(textarea), .db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])):is(input) {
+  cursor: initial;
+}
+.db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])):is(input[type=checkbox]), .db-table-row[data-interactive=true]:has(:is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"])):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-table-row[data-interactive=true] :is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select) {
+  --db-tooltip-parent-position: static;
+  --db-focus-outline-color: transparent;
+  /* We set focus on complete row element, we remove it from interactive child with this trick */
+  /* stylelint-disable-next-line a11y/no-outline-none */
+}
+.db-table-row[data-interactive=true] :is([data-table-row-action=true]:is(input, button, a, select, textarea, [role=button], [role=link], [tabindex]:not([tabindex="-1"])), [data-table-row-action=true] input, textarea, select):focus-visible {
+  outline: none;
+}
+.db-table-row[data-interactive=true]::after {
+  pointer-events: none;
+  z-index: 2;
+}

package/build/components/table-row/table-row.scss

@@ -0,0 +1,106 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/helpers";
+@use "./../../styles/internal/table-components";
+
+$interactive-elements: ':is(input,button,a,select,textarea,[role="button"],[role="link"],[tabindex]:not([tabindex="-1"]))';
+$interactive-row-action: '[data-table-row-action="true"]';
+$interactive-nested-child: "#{$interactive-row-action} input,textarea,select";
+$interactive-child: ":is(#{$interactive-row-action}#{$interactive-elements},#{$interactive-nested-child})";
+
+%full-absolute {
+	content: "";
+	position: absolute;
+	inset: 0;
+}
+
+@mixin table-row-interactive-checked($with-hover: ":not(:hover, :active)") {
+	&:has(
+		input:is(
+				[type="radio"],
+				[type="checkbox"]
+			)#{$interactive-child}:checked#{$with-hover}
+	) {
+		@content;
+	}
+}
+
+.db-table-row {
+	@extend %table-section-grid;
+
+	background-color: colors.$db-adaptive-bg-basic-level-1-default;
+
+	&[data-interactive="true"] {
+		position: relative;
+
+		td #{$interactive-elements}:not(#{$interactive-row-action}) {
+			position: relative;
+			z-index: 1;
+		}
+
+		@include table-row-interactive-checked {
+			background-color: colors.$db-adaptive-bg-basic-level-2-default;
+		}
+
+		&:has(
+			#{$interactive-child}:hover:not(
+					:disabled,
+					[aria-disabled="true"],
+					[tabindex="-1"]
+				)
+		) {
+			@include helpers.cursor-pointer {
+				background-color: colors.$db-adaptive-bg-basic-level-2-hovered;
+			}
+		}
+
+		&:has(
+			#{$interactive-child}:active:not(
+					:disabled,
+					[aria-disabled="true"],
+					[tabindex="-1"]
+				)
+		) {
+			@include helpers.cursor-pointer {
+				background-color: colors.$db-adaptive-bg-basic-level-2-pressed;
+			}
+		}
+
+		&:has(#{$interactive-child}:focus-visible) {
+			&::after {
+				@extend %focus-placeholder;
+			}
+		}
+
+		#{$interactive-child} {
+			// Reset some defaults
+			--db-tooltip-parent-position: static;
+			--db-focus-outline-color: transparent;
+
+			/* We set focus on complete row element, we remove it from interactive child with this trick */
+			/* stylelint-disable-next-line a11y/no-outline-none */
+			&:focus-visible {
+				outline: none;
+			}
+
+			&:not([data-icon-trailing]) {
+				&::after {
+					@extend %full-absolute;
+				}
+			}
+
+			&[data-icon-trailing] {
+				&::before {
+					@extend %full-absolute;
+				}
+			}
+		}
+
+		&::after {
+			@extend %full-absolute;
+
+			pointer-events: none; // Ignore pointer events to use high z-index to show focus above elements
+			z-index: 2;
+		}
+	}
+}