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

package/build/styles/index.scss

@@ -35,3 +35,5 @@
 @forward "../components/custom-select-dropdown/custom-select-dropdown";
 @forward "../components/custom-select-list/custom-select-list";
 @forward "../components/custom-select-list-item/custom-select-list-item";
+@forward "../components/loading-indicator/loading-indicator";
+

package/build/styles/internal/_custom-elements.scss

@@ -1,4 +1,6 @@
 $custom-elements: //hygen-insert
+db-loading-indicator,
+
 
 	db-custom-select-list-item, db-custom-select-list,
 	db-custom-select-dropdown, db-custom-select-form-field, db-custom-select,

package/build/styles/internal/_form-components.scss

@@ -160,8 +160,14 @@ $db-min-inline-size: var(
 			}
 		}
 
+		$focus-within-selector: $selector;
+
+		@if $selector == summary {
+			$focus-within-selector: "";
+		}
+
 		&:has(
-			#{$selector}:focus-within,
+			#{$focus-within-selector}:focus-within,
 			#{$selector}:is(input, textarea):not(:placeholder-shown),
 			> select option:checked:not(.placeholder),
 			input[type="checkbox"]:checked,

package/build/styles/internal/_loading.scss

@@ -0,0 +1,76 @@
+@use "@db-ux/core-foundations/build/styles/variables";
+@use "@db-ux/core-foundations/build/styles/colors";
+
+%hide-label-and-progress-text {
+	div {
+		label,
+		span {
+			display: none;
+		}
+	}
+}
+
+%interactive-element-with-loading {
+	&:has(.db-loading-indicator:not([data-overlay="true"])) {
+		// Hide icon inside button when loading indicator is present
+		&[data-icon],
+		&[data-icon-before] {
+			&::before {
+				display: none;
+			}
+		}
+
+		&[data-icon-after] {
+			&::after {
+				display: none;
+			}
+		}
+	}
+
+	&:has(.db-loading-indicator[data-state="inactive"]) {
+		.db-loading-indicator {
+			display: none;
+		}
+	}
+
+	.db-loading-indicator {
+		&:not([data-state="successful"], [data-state="critical"]) {
+			--db-loading-indicator-segment-color: currentcolor;
+			--db-loading-indicator-segment-color-overlay: currentcolor;
+		}
+
+		&:not([data-overlay]),
+		&:not([data-overlay="true"]) {
+			// Hide label and progress inside a button
+			@extend %hide-label-and-progress-text;
+
+			margin-inline-end: variables.$db-spacing-fixed-xs; // same margin like a icon
+		}
+
+		&[data-overlay="true"] {
+			background-color: transparent;
+
+			&::before {
+				z-index: 1;
+				background-color: var(
+					--db-loading-indicator-button-overlay-color,
+					inherit
+				);
+			}
+
+			&::after {
+				z-index: 0;
+				content: "";
+				position: absolute;
+				inset: 0;
+				border-radius: inherit;
+				background-color: colors.$db-adaptive-bg-basic-level-1-default;
+			}
+
+			svg,
+			div {
+				z-index: 2;
+			}
+		}
+	}
+}