@db-ux/ngx-core-components 4.12.0 → 4.12.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @db-ux/ngx-core-components
 
+## 4.12.1
+
+### Patch Changes
+
+- fix(custom-select): dropdown with `dropdownWidth="auto"` now correctly sizes to content width and respects the trigger minimum width. Long option labels no longer get truncated: `auto` keeps them on a single line (dropdown grows to the longest option), while `fixed` and `full` wrap long labels onto new lines. - [see commit 68dedc3](https://github.com/db-ux-design-system/core-web/commit/68dedc33c324b48339d5bb73a85fdff3045ed059)
+
+- fix(drawer): prevent backdrop drag-close when selection starts inside content - [see commit b53ff8a](https://github.com/db-ux-design-system/core-web/commit/b53ff8a4f0a5350c5be41fad072e14797676bba7)
+
 ## 4.12.0
 
 _version bump_

package/fesm2022/db-ux-ngx-core-components.mjs

@@ -2074,24 +2074,69 @@ const handleDataOutside = (el) => {
 const handleFixedDropdown = (element, parent, placement) => {
     if (!element || !parent)
         return;
-    // We skip this if we are in mobile it's already fixed
+    const fullWidth = element.dataset['width'] === 'full';
+    const autoWidth = element.dataset['width'] === 'auto';
+    // Reset width-specific inline styles first so a previous mode (e.g. "auto")
+    // doesn't leave a stale minInlineSize/inlineSize behind when the dropdown
+    // width changes at runtime. This must happen before getFloatingProps
+    // measures the element, otherwise the dropdown would be measured with a
+    // width it no longer has and positioned incorrectly. It also has to run
+    // before the mobile bailout below: otherwise a desktop minInlineSize would
+    // survive into the mobile sheet, where CSS min-inline-size beats the
+    // mobile max-inline-size guard and overflows the viewport.
+    element.style.inlineSize = '';
+    element.style.minInlineSize = '';
+    // We skip the rest if we are in mobile, it's already fixed via CSS.
     if (getComputedStyle(element).zIndex === '9999')
         return;
-    const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement } = getFloatingProps(element, parent, placement);
-    const fullWidth = element.dataset['width'] === 'full';
+    const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement, innerWidth } = getFloatingProps(element, parent, placement);
+    // For auto width the dropdown is forced to be at least as wide as the trigger,
+    // but clamped to its own max-inline-size: CSS lets a min-inline-size override
+    // the max when the minimum is larger, so a trigger wider than the viewport
+    // limit would otherwise drop the side margins or overflow horizontally.
+    let autoMinWidth = width;
+    if (autoWidth) {
+        const maxInlineSize = parseFloat(getComputedStyle(element).maxInlineSize);
+        if (!isNaN(maxInlineSize) && maxInlineSize > 0) {
+            autoMinWidth = Math.min(width, maxInlineSize);
+        }
+    }
     if (fullWidth) {
         element.style.inlineSize = `${width}px`;
     }
-    if (correctedPlacement === 'top' || correctedPlacement === 'bottom' || correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
+    else if (autoWidth) {
+        element.style.minInlineSize = `${autoMinWidth}px`;
+    }
+    // getFloatingProps measured childWidth before the inline styles were
+    // (re)applied, so use the width the dropdown will actually have:
+    // - auto: the clamped minimum, so end-aligned dropdowns don't extend past
+    //   the trigger's right edge.
+    // - full: the trigger width (the reset above drops it to content width).
+    let effectiveChildWidth = childWidth;
+    if (autoWidth) {
+        effectiveChildWidth = Math.max(childWidth, autoMinWidth);
+    }
+    else if (fullWidth) {
+        effectiveChildWidth = width;
+    }
+    // getFloatingProps detects horizontal overflow assuming a centered element
+    // (it halves childWidth). The dropdown is actually start-aligned (inset =
+    // left), so for the wider auto dropdown re-check overflow against its full
+    // width and flip to end-alignment when it would extend past the viewport.
+    let dropdownPlacement = correctedPlacement;
+    if (autoWidth && (dropdownPlacement === 'top' || dropdownPlacement === 'bottom' || dropdownPlacement === 'top-start' || dropdownPlacement === 'bottom-start') && left + effectiveChildWidth > innerWidth) {
+        dropdownPlacement = dropdownPlacement.startsWith('top') ? 'top-end' : 'bottom-end';
+    }
+    if (dropdownPlacement === 'top' || dropdownPlacement === 'bottom' || dropdownPlacement === 'top-start' || dropdownPlacement === 'bottom-start') {
         element.style.insetInlineStart = `${left}px`;
     }
-    else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
-        element.style.insetInlineStart = `${right - childWidth}px`;
+    else if (dropdownPlacement === 'top-end' || dropdownPlacement === 'bottom-end') {
+        element.style.insetInlineStart = `${Math.max(right - effectiveChildWidth, 0)}px`;
     }
-    if (correctedPlacement?.startsWith('top')) {
+    if (dropdownPlacement?.startsWith('top')) {
         element.style.insetBlockStart = `${top - childHeight}px`;
     }
-    else if (correctedPlacement?.startsWith('bottom')) {
+    else if (dropdownPlacement?.startsWith('bottom')) {
         element.style.insetBlockStart = `${bottom}px`;
     }
     element.style.position = 'fixed';
@@ -2638,7 +2683,8 @@ class DBCustomSelectListItem {
         [disabled]="getBoolean(disabled(), 'disabled')"
         [value]="value()"
         (change)="handleChange($event)" />
-      @if(label()){{{label()}}} <ng-content></ng-content
+      <span class="db-custom-select-list-item-label"
+        >@if(label()){{{label()}}} <ng-content></ng-content></span
     ></label>
     }@else{
     <span>{{groupTitle()}}</span>
@@ -2675,7 +2721,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         [disabled]="getBoolean(disabled(), 'disabled')"
         [value]="value()"
         (change)="handleChange($event)" />
-      @if(label()){{{label()}}} <ng-content></ng-content
+      <span class="db-custom-select-list-item-label"
+        >@if(label()){{{label()}}} <ng-content></ng-content></span
     ></label>
     }@else{
     <span>{{groupTitle()}}</span>
@@ -4196,6 +4243,9 @@ class DBCustomSelect {
                     .toLowerCase()
                     .includes(filterText.toLowerCase())));
         }
+        if (this.detailsRef()?.nativeElement?.open) {
+            this.handleAutoPlacement();
+        }
     }
     handleClearAll(event) {
         event.stopPropagation();
@@ -4531,6 +4581,10 @@ class DBCustomSelect {
                 // ---
                 this._options.set(this.options());
                 this.amountOptions.set(this.options()?.filter((option) => !option.isGroupTitle).length ?? 0);
+                // Reposition open auto-width dropdowns: replacing options can change their content width.
+                if (this.detailsRef()?.nativeElement?.open) {
+                    this.handleAutoPlacement();
+                }
             }, Number(VERSION.major) < 19
                 ? { allowSignalWrites: true }
                 : undefined);
@@ -5375,6 +5429,18 @@ const DividerVariantList = ['horizontal', 'vertical'];
 
 const defaultProps$q = {};
 class DBDrawer {
+    isNotModal() {
+        return (this.position() === "absolute" ||
+            this.backdrop() === "none" ||
+            this.variant() === "inside");
+    }
+    handleBackdropPointerDown(event) {
+        // Remember whether the pointer interaction started on the backdrop
+        // (the DIALOG element itself) so we only close on a real backdrop
+        // click and not when a drag started inside the content and ended
+        // on the backdrop.
+        this.backdropPointerDown.set(event?.target?.nodeName === "DIALOG");
+    }
     handleClose(event, forceClose) {
         if (!event)
             return;
@@ -5395,11 +5461,15 @@ class DBDrawer {
             }
             if (event.target?.nodeName === "DIALOG" &&
                 event.type === "click" &&
-                this.backdrop() !== "none") {
+                this.backdrop() !== "none" &&
+                this.backdropPointerDown()) {
                 if (this.close) {
                     this.close.emit(event);
                 }
             }
+            // Reset after handling the click so the next interaction
+            // starts from a clean state.
+            this.backdropPointerDown.set(false);
         }
     }
     handleDialogOpen() {
@@ -5409,12 +5479,15 @@ class DBDrawer {
                 if (this.dialogContainerRef()?.nativeElement) {
                     (this.dialogContainerRef()?.nativeElement).removeAttribute("data-transition");
                 }
-                if (this.position() === "absolute" ||
-                    this.backdrop() === "none" ||
-                    this.variant() === "inside") {
+                if (this.isNotModal()) {
                     this._ref()?.nativeElement.show();
                 }
                 else {
+                    // Set the closedby attribute imperatively: the JSX
+                    // dialog type does not know this attribute yet, and it
+                    // only applies to modal dialogs. "any" enables native
+                    // light dismiss (backdrop click / Esc).
+                    this._ref()?.nativeElement.setAttribute("closedby", "any");
                     this._ref()?.nativeElement.showModal();
                 }
                 void delay(() => {
@@ -5473,6 +5546,7 @@ class DBDrawer {
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
         this.dialogContainerRef = viewChild("dialogContainerRef", ...(ngDevMode ? [{ debugName: "dialogContainerRef" }] : /* istanbul ignore next */ []));
         this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
+        this.backdropPointerDown = signal(false, ...(ngDevMode ? [{ debugName: "backdropPointerDown" }] : /* istanbul ignore next */ []));
         this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
         if (typeof window !== "undefined") {
             effect(() => {
@@ -5562,6 +5636,7 @@ class DBDrawer {
     [attr.id]="id() ?? propOverrides()?.id"
     #_ref
     (click)="handleClose($event)"
+    (mousedown)="handleBackdropPointerDown($event)"
     (keydown)="handleClose($event)"
     [attr.data-position]="position()"
     [attr.data-backdrop]="backdrop()"
@@ -5601,6 +5676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     [attr.id]="id() ?? propOverrides()?.id"
     #_ref
     (click)="handleClose($event)"
+    (mousedown)="handleBackdropPointerDown($event)"
     (keydown)="handleClose($event)"
     [attr.data-position]="position()"
     [attr.data-backdrop]="backdrop()"