@db-ux/core-components 4.3.2 → 4.4.0-loading-567cd0c

package/build/components/loading-indicator/loading-indicator.scss

@@ -0,0 +1,515 @@
+@use "@db-ux/core-foundations/build/styles/animation";
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+@use "@db-ux/core-foundations/build/styles/fonts";
+@use "@db-ux/core-foundations/build/styles/icons";
+@use "../../styles/dialog-init";
+@use "../../styles/internal/loading";
+
+$stroke-dasharray-inline: calc(var(--circle) * 2 - var(--stroke-width));
+$stroke-dasharray-onsite: calc(
+	var(--circle) * 2 + var(--stroke-width) + var(--radius)
+);
+$stroke-segment-length: calc((var(--circle) / 2 - var(--stroke-width)));
+$db-loading-indicator-track-color: color(
+	from var(--db-loading-indicator-segment-color) srgb r g b /
+		#{variables.$db-opacity-2xs}
+);
+
+%text-container {
+	div {
+		display: flex;
+
+		> label {
+			display: inline-flex;
+			align-items: center;
+
+			> progress {
+				display: none;
+			}
+		}
+
+		> span,
+		> label {
+			@extend %db-overwrite-font-size-xs;
+
+			color: colors.$db-adaptive-on-bg-basic-emphasis-80-default;
+		}
+	}
+
+	&:not([data-variant]),
+	&[data-variant="inline"] {
+		flex-direction: row;
+
+		div {
+			flex-direction: column;
+		}
+	}
+
+	&[data-variant="progress-bar"],
+	&[data-variant="onsite"] {
+		flex-direction: column;
+	}
+
+	&[data-variant="onsite"] {
+		div {
+			> span {
+				position: absolute;
+
+				// Center the progress text inside the spinner
+				inset-block-start: calc(
+					var(--db-loading-indicator-spinner-inline-size) / 2
+				);
+				inset-inline-start: calc(
+					var(--db-loading-indicator-spinner-inline-size) / 2
+				);
+				transform: translate(-50%, -50%);
+			}
+		}
+	}
+
+	[data-show-label="false"],
+	[data-show-progress-text="false"] {
+		display: none;
+	}
+}
+
+%spinner {
+	&:not([data-state]),
+	&[data-state="active"] {
+		&:not([data-indeterminate]),
+		&[data-indeterminate="true"] {
+			svg {
+				animation: rotate 1.5s linear 0s infinite normal none running;
+
+				@media screen and (prefers-reduced-motion: reduce) {
+					animation-duration: 5s;
+				}
+			}
+
+			&:not([data-variant]),
+			&[data-variant="inline"] {
+				.db-loading-indicator-circle-segment {
+					stroke-dashoffset: calc(
+						#{$stroke-dasharray-inline} - #{$stroke-segment-length}
+					);
+				}
+			}
+
+			&[data-variant="onsite"] {
+				.db-loading-indicator-circle-segment {
+					stroke-dashoffset: calc(
+						#{$stroke-dasharray-onsite} - #{$stroke-segment-length}
+					);
+				}
+			}
+		}
+
+		&[data-indeterminate="false"] {
+			&:not([data-variant]),
+			&[data-variant="inline"] {
+				.db-loading-indicator-circle-segment {
+					stroke-dashoffset: calc(
+						(1 - var(--db-loading-indicator-percentage, 0)) *
+							#{$stroke-dasharray-inline}
+					);
+				}
+			}
+
+			&[data-variant="onsite"] {
+				.db-loading-indicator-circle-segment {
+					stroke-dashoffset: calc(
+						(1 - var(--db-loading-indicator-percentage, 0)) *
+							#{$stroke-dasharray-onsite}
+					);
+				}
+			}
+		}
+	}
+
+	&[data-indeterminate="false"] {
+		svg {
+			transform: rotate(-90deg);
+		}
+	}
+
+	svg {
+		aspect-ratio: 1;
+		inline-size: var(--db-loading-indicator-spinner-inline-size, 1lh);
+	}
+
+	&:not([data-variant]),
+	&[data-variant="inline"] {
+		svg {
+			--radius: 6px; // This is the size based on the viewBox of the <svg>
+			--circle: 20px; // This is the size based on the viewBox of the <svg>
+			--stroke-width: 4px;
+		}
+
+		.db-loading-indicator-circle-segment {
+			stroke-dasharray: $stroke-dasharray-inline;
+		}
+
+		&[data-size="small"] {
+			svg {
+				@extend %db-overwrite-font-size-sm;
+			}
+
+			div > label::before {
+				@extend %db-overwrite-font-size-xs;
+			}
+		}
+
+		&:not([data-size]),
+		&[data-size="medium"] {
+			svg {
+				@extend %db-overwrite-font-size-md;
+			}
+
+			div > label::before {
+				@extend %db-overwrite-font-size-sm;
+			}
+		}
+	}
+
+	&[data-variant="onsite"] {
+		.db-loading-indicator-circle-segment {
+			stroke-dasharray: $stroke-dasharray-onsite;
+		}
+
+		svg {
+			--radius: 27px; // This is the size based on the viewBox of the <svg>
+			--circle: 64px; // This is the size based on the viewBox of the <svg>
+			--stroke-width: 10px;
+		}
+
+		&[data-size="small"] {
+			--db-loading-indicator-spinner-inline-size: #{variables.$db-sizing-md};
+
+			div {
+				> span {
+					// Hide progress text for onsite spinner, as it is centered inside the spinner and can overlap with the segment
+					display: none;
+				}
+			}
+		}
+
+		&:not([data-size]),
+		&[data-size="medium"] {
+			--db-loading-indicator-spinner-inline-size: #{variables.$db-sizing-lg};
+		}
+	}
+
+	circle {
+		cx: var(--circle);
+		cy: var(--circle);
+		r: var(--radius);
+		stroke-width: var(--stroke-width);
+		stroke-linecap: round;
+		fill: none;
+	}
+
+	.db-loading-indicator-circle-track {
+		stroke: $db-loading-indicator-track-color;
+	}
+
+	.db-loading-indicator-circle-segment {
+		stroke: var(--db-loading-indicator-segment-color);
+	}
+}
+
+$progress-bar-full-segment-inline-size: calc(
+	100% - var(--db-loading-indicator-progress-bar-segment-padding) * 2
+);
+
+%progress-bar {
+	inline-size: 100%;
+
+	&[data-size="small"] {
+		div {
+			&::before,
+			&::after {
+				--db-loading-indicator-progress-bar-track-block-size: #{variables.$db-sizing-3xs};
+			}
+		}
+	}
+
+	&:not([data-size]),
+	&[data-size="medium"] {
+		div {
+			&::before,
+			&::after {
+				--db-loading-indicator-progress-bar-track-block-size: #{variables.$db-sizing-2xs};
+			}
+		}
+	}
+
+	&:not([data-state]),
+	&[data-state="inactive"] {
+		div {
+			&::after {
+				inline-size: 0;
+			}
+		}
+	}
+
+	&[data-state="active"] {
+		&:not([data-indeterminate]),
+		&[data-indeterminate="true"] {
+			div {
+				&::after {
+					inline-size: 25%;
+					animation: wobbling 2.5s infinite linear;
+
+					@media screen and (prefers-reduced-motion: reduce) {
+						animation-duration: 5s;
+					}
+				}
+			}
+		}
+
+		&[data-indeterminate="false"] {
+			div {
+				&::after {
+					inline-size: calc(
+						var(--db-loading-indicator-percentage, 0) *
+							#{$progress-bar-full-segment-inline-size}
+					);
+				}
+			}
+		}
+	}
+
+	&[data-state="successful"],
+	&[data-state="critical"] {
+		div {
+			&::after {
+				inline-size: $progress-bar-full-segment-inline-size;
+			}
+		}
+	}
+
+	div {
+		&::before,
+		&::after {
+			content: "";
+			border-radius: variables.$db-border-radius-sm;
+			position: absolute;
+		}
+
+		&::before {
+			inline-size: 100%;
+			min-inline-size: variables.$db-sizing-md;
+			inset-block-start: 0;
+			inset-inline-start: 0;
+			block-size: var(
+				--db-loading-indicator-progress-bar-track-block-size
+			);
+			background-color: $db-loading-indicator-track-color;
+		}
+
+		&::after {
+			--db-loading-indicator-progress-bar-segment-padding: 2px;
+
+			z-index: 1;
+			inset-block-start: var(
+				--db-loading-indicator-progress-bar-segment-padding
+			);
+			inset-inline: var(
+				--db-loading-indicator-progress-bar-segment-padding
+			);
+			block-size: calc(
+				var(--db-loading-indicator-progress-bar-track-block-size) - 2 *
+					var(--db-loading-indicator-progress-bar-segment-padding)
+			);
+			background-color: var(--db-loading-indicator-segment-color);
+		}
+
+		// Provide space for the progress bar because it is absolute
+		padding-block-start: calc(
+			#{variables.$db-sizing-2xs} + var(--db-indicator-gap)
+		);
+		position: relative;
+		flex-direction: row;
+		justify-content: space-between;
+		gap: variables.$db-spacing-fixed-md;
+		inline-size: 100%;
+		align-items: center;
+
+		> label {
+			align-self: flex-start;
+		}
+
+		> span {
+			align-self: flex-end;
+		}
+	}
+}
+
+@mixin get-state-icon($name) {
+	@include icons.to-filled-icon;
+	@include icons.set-icon($name);
+	@include icons.variant-icons($name);
+
+	&::before {
+		--db-icon-color: var(--db-#{$name}-on-bg-basic-emphasis-70-default);
+	}
+}
+
+%states {
+	&:not([data-state="successful"], [data-state="critical"]) {
+		--db-loading-indicator-segment-color: #{colors.$db-adaptive-on-bg-basic-emphasis-70-default};
+		--db-loading-indicator-segment-color-overlay: #{colors.$db-adaptive-on-bg-inverted-default};
+	}
+
+	&[data-state="inactive"] {
+		&:not([data-variant]),
+		&[data-variant="inline"],
+		&[data-variant="onsite"] {
+			.db-loading-indicator-circle-segment {
+				display: none;
+			}
+		}
+	}
+
+	@each $name in (successful, critical) {
+		&[data-state="#{$name}"] {
+			--db-loading-indicator-segment-color: var(
+				--db-#{$name}-on-bg-basic-emphasis-70-default
+			);
+
+			&:not([data-variant]),
+			&[data-variant="inline"] {
+				svg {
+					display: none;
+				}
+
+				div {
+					@include get-state-icon($name);
+
+					display: grid;
+					grid-template-columns: min-content 1fr;
+
+					&:has(> label) {
+						grid-template-areas: "icon label";
+					}
+
+					&:has(> span) {
+						grid-template-areas: "icon progress";
+
+						&:has(> label) {
+							grid-template-areas: "icon label" "icon progress";
+						}
+					}
+
+					&::before {
+						--db-icon-margin-end: var(--db-indicator-gap);
+
+						grid-area: icon;
+						align-self: center;
+					}
+
+					> label {
+						grid-area: label;
+					}
+
+					> span {
+						grid-area: progress;
+					}
+				}
+			}
+
+			&[data-variant="progress-bar"],
+			&[data-variant="onsite"] {
+				div {
+					> label {
+						@include get-state-icon($name);
+
+						&::before {
+							--db-icon-margin-end: var(--db-indicator-gap);
+						}
+					}
+				}
+			}
+
+			div {
+				> label,
+				> span {
+					color: var(--db-#{$name}-on-bg-basic-emphasis-80-default);
+				}
+			}
+		}
+	}
+}
+
+%overlay {
+	&:not([data-overlay="true"]) {
+		position: relative;
+		block-size: fit-content;
+	}
+
+	&[data-overlay="true"] {
+		// Hide label and progress when overlay
+		@extend %hide-label-and-progress-text;
+
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+
+		&::before {
+			content: "";
+			position: absolute;
+			inset: 0;
+			border-radius: inherit;
+			background-color: dialog-init.$backdrop-color-strong;
+		}
+
+		&[data-variant="progress-bar"] {
+			div {
+				max-inline-size: calc(100% - #{variables.$db-spacing-fixed-md});
+			}
+		}
+	}
+}
+
+*:has(
+	> .db-loading-indicator[data-overlay="true"],
+	> db-loading-indicator > .db-loading-indicator[data-overlay="true"]
+) {
+	position: relative;
+
+	.db-loading-indicator {
+		--db-loading-indicator-segment-color: var(
+			--db-loading-indicator-segment-color-overlay
+		);
+	}
+}
+
+.db-loading-indicator {
+	--db-indicator-gap: #{variables.$db-spacing-fixed-2xs};
+
+	@extend %text-container;
+	@extend %states;
+	@extend %overlay;
+
+	display: flex;
+	/* stylelint-disable-next-line db-ux/use-spacings */
+	gap: var(--db-indicator-gap);
+	align-items: center;
+	justify-content: center;
+
+	&:not([data-variant]),
+	&[data-variant="inline"],
+	&[data-variant="onsite"] {
+		@extend %spinner;
+	}
+
+	&[data-variant="progress-bar"] {
+		@extend %progress-bar;
+	}
+
+	&[data-delay="slow"],
+	&[data-delay="fast"] {
+		display: none;
+	}
+}

package/build/components/navigation-item/navigation-item.css

@@ -136,6 +136,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
+@keyframes wobbling {
+  50% {
+    inset-inline-start: 100%;
+    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
+  }
+}
 .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-show-icon-trailing=false])::after,
 .db-navigation-item .db-navigation-item-expand-button > button:not([data-show-icon-trailing=false])::after {
   color: var(--db-icon-color, inherit);

package/build/components/notification/notification.css

@@ -980,6 +980,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
+@keyframes wobbling {
+  50% {
+    inset-inline-start: 100%;
+    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
+  }
+}
 .db-notification a:not([hidden]) {
   display: inline-block;
 }

package/build/components/popover/popover.css

@@ -58,6 +58,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
+@keyframes wobbling {
+  50% {
+    inset-inline-start: 100%;
+    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
+  }
+}
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")

package/build/components/select/select.css

@@ -950,6 +950,7 @@ select[aria-disabled=true]) {
 .db-select optgroup {
   background-color: var(--db-adaptive-bg-basic-level-3-default);
 }
-.db-select:has(> select option:checked:not(.placeholder)) [id$=-placeholder] {
+.db-select:has(> select option:checked:not(.placeholder)) [id$=-placeholder],
+.db-select:has(> select option:checked:not(.placeholder)) option[data-show-empty-option=false] {
   display: none;
 }

package/build/components/select/select.scss

@@ -45,7 +45,10 @@
 	}
 
 	&:has(> select option:checked:not(.placeholder)) {
-		[id$="-placeholder"] {
+		[id$="-placeholder"],
+		// Hide placeholder option in dropdown for required selects after a selection has been made
+		// This prevents users from selecting an invalid empty option when the field is required
+		option[data-show-empty-option="false"] {
 			display: none;
 		}
 	}

package/build/components/tab-list/tab-list.css

@@ -81,6 +81,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
+@keyframes wobbling {
+  50% {
+    inset-inline-start: 100%;
+    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
+  }
+}
 /**
 	Generates 3 types of placeholders, e.g:
 	- %db-component-variables-md

package/build/components/tag/tag.css

@@ -27,6 +27,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
+@keyframes wobbling {
+  50% {
+    inset-inline-start: 100%;
+    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
+  }
+}
 /* Variants for adaptive components like input, select, notification, ... */
 .db-tag:has(label, button:not(.db-tab-remove-button), a)[data-semantic=neutral] {
   /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */

package/build/components/textarea/textarea.css

@@ -216,6 +216,12 @@ input[type=radio]:checked) > label {
     transform: rotate(1turn);
   }
 }
+@keyframes wobbling {
+  50% {
+    inset-inline-start: 100%;
+    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
+  }
+}
 .db-textarea textarea {
   /* Buttons */
   /* Up */

package/build/components/tooltip/tooltip.css

@@ -130,6 +130,12 @@ paddings/gaps in an application e.g. the <main> should have a responsive padding
     transform: rotate(1turn);
   }
 }
+@keyframes wobbling {
+  50% {
+    inset-inline-start: 100%;
+    transform: translateX(calc(-100% - var(--db-loading-indicator-progress-bar-segment-padding, 2px)));
+  }
+}
 /**
  * @mixin screen-min-max
  * @param $data an object like (min:"sm", max:"lg") or (min: "sm")