@tedi-design-system/angular 7.1.0-rc.5 → 7.1.0-rc.6

package/fesm2022/tedi-design-system-angular-tedi.mjs

@@ -1378,6 +1378,7 @@ class DropdownComponent {
     document = inject(DOCUMENT);
     renderer = inject(Renderer2);
     scrollListener;
+    skipNextGestureOutsideClick = false;
     constructor() {
         if (isPlatformBrowser(this.platformId)) {
             document.addEventListener("focusin", this.handleFocusOut, true);
@@ -1397,6 +1398,7 @@ class DropdownComponent {
             this.triggerWidth.set(width);
         }
         this.isOpen.set(true);
+        this.skipNextGestureOutsideClick = true;
         this.setActiveToSelectedOrFirst();
         if (this.hideOnScroll()) {
             this.setupScrollListener();
@@ -1418,6 +1420,7 @@ class DropdownComponent {
         if (this.isOpen()) {
             this.cleanupScrollListener();
             this.isOpen.set(false);
+            this.skipNextGestureOutsideClick = false;
             this.activeIndex.set(null);
             this.updateTabindexes();
         }
@@ -1430,7 +1433,13 @@ class DropdownComponent {
             this.showDropdown();
         }
     }
-    onOutsideClick() {
+    onOutsideClick(event) {
+        const isGestureEnd = !!event && (event.type !== "click" || event.ctrlKey);
+        if (this.skipNextGestureOutsideClick) {
+            this.skipNextGestureOutsideClick = false;
+            if (isGestureEnd)
+                return;
+        }
         this.hideDropdown();
     }
     handleFocusOut = (event) => {
@@ -1589,7 +1598,7 @@ class DropdownComponent {
                 provide: DROPDOWN_API,
                 useExisting: forwardRef(() => DropdownComponent),
             },
-        ], queries: [{ propertyName: "dropdownTrigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownContent", first: true, predicate: DropdownContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (overlayOutsideClick)=\"onOutsideClick()\"\n>\n  <div\n    class=\"tedi-dropdown__panel\"\n    [style.--_tedi-dropdown-trigger-width]=\"triggerWidthVar()\"\n  >\n    <ng-content select=\"tedi-dropdown-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-dropdown{display:inline-flex}.tedi-dropdown__panel{z-index:var(--z-index-dropdown)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "dropdownTrigger", first: true, predicate: DropdownTriggerDirective, descendants: true, isSignal: true }, { propertyName: "dropdownContent", first: true, predicate: DropdownContentComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n>\n  <div\n    class=\"tedi-dropdown__panel\"\n    [style.--_tedi-dropdown-trigger-width]=\"triggerWidthVar()\"\n  >\n    <ng-content select=\"tedi-dropdown-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-dropdown{display:inline-flex}.tedi-dropdown__panel{z-index:var(--z-index-dropdown)}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -1598,7 +1607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             provide: DROPDOWN_API,
                             useExisting: forwardRef(() => DropdownComponent),
                         },
-                    ], template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (overlayOutsideClick)=\"onOutsideClick()\"\n>\n  <div\n    class=\"tedi-dropdown__panel\"\n    [style.--_tedi-dropdown-trigger-width]=\"triggerWidthVar()\"\n  >\n    <ng-content select=\"tedi-dropdown-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-dropdown{display:inline-flex}.tedi-dropdown__panel{z-index:var(--z-index-dropdown)}\n"] }]
+                    ], template: "<ng-content select=\"[tedi-dropdown-trigger]\" />\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n  (overlayOutsideClick)=\"onOutsideClick($event)\"\n>\n  <div\n    class=\"tedi-dropdown__panel\"\n    [style.--_tedi-dropdown-trigger-width]=\"triggerWidthVar()\"\n  >\n    <ng-content select=\"tedi-dropdown-content\" />\n  </div>\n</ng-template>\n", styles: ["tedi-dropdown{display:inline-flex}.tedi-dropdown__panel{z-index:var(--z-index-dropdown)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], preventOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventOverflow", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], dropdownTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownTriggerDirective), { isSignal: true }] }], dropdownContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownContentComponent), { isSignal: true }] }] } });
 
 const translationsMap = {