()
| 97 | } |
| 98 | |
| 99 | private _createPreview(): HTMLElement { |
| 100 | const previewConfig = this._previewTemplate; |
| 101 | const previewClass = this._previewClass; |
| 102 | const previewTemplate = previewConfig ? previewConfig.template : null; |
| 103 | let preview: HTMLElement; |
| 104 | |
| 105 | if (previewTemplate && previewConfig) { |
| 106 | // Measure the element before we've inserted the preview |
| 107 | // since the insertion could throw off the measurement. |
| 108 | const rootRect = previewConfig.matchSize ? this._initialDomRect : null; |
| 109 | const viewRef = previewConfig.viewContainer.createEmbeddedView( |
| 110 | previewTemplate, |
| 111 | previewConfig.context, |
| 112 | ); |
| 113 | viewRef.detectChanges(); |
| 114 | preview = getRootNode(viewRef, this._document); |
| 115 | this._previewEmbeddedView = viewRef; |
| 116 | if (previewConfig.matchSize) { |
| 117 | matchElementSize(preview, rootRect!); |
| 118 | } else { |
| 119 | preview.style.transform = getTransform( |
| 120 | this._pickupPositionOnPage.x, |
| 121 | this._pickupPositionOnPage.y, |
| 122 | ); |
| 123 | } |
| 124 | } else { |
| 125 | preview = deepCloneNode(this._rootElement); |
| 126 | matchElementSize(preview, this._initialDomRect!); |
| 127 | |
| 128 | if (this._initialTransform) { |
| 129 | preview.style.transform = this._initialTransform; |
| 130 | } |
| 131 | } |
| 132 | |
| 133 | extendStyles( |
| 134 | preview.style, |
| 135 | { |
| 136 | // It's important that we disable the pointer events on the preview, because |
| 137 | // it can throw off the `document.elementFromPoint` calls in the `CdkDropList`. |
| 138 | 'pointer-events': 'none', |
| 139 | // If the preview has a margin, it can throw off our positioning so we reset it. The reset |
| 140 | // value for `margin-right` needs to be `auto` when opened as a popover, because our |
| 141 | // positioning is always top/left based, but native popover seems to position itself |
| 142 | // to the top/right if `<html>` or `<body>` have `dir="rtl"` (see #29604). Setting it |
| 143 | // to `auto` pushed it to the top/left corner in RTL and is a noop in LTR. |
| 144 | 'margin': supportsPopover(preview) ? '0 auto 0 0' : '0', |
| 145 | 'position': 'fixed', |
| 146 | 'top': '0', |
| 147 | 'left': '0', |
| 148 | 'z-index': this._zIndex + '', |
| 149 | }, |
| 150 | importantProperties, |
| 151 | ); |
| 152 | |
| 153 | toggleNativeDragInteractions(preview, false); |
| 154 | preview.classList.add('cdk-drag-preview'); |
| 155 | preview.setAttribute('popover', 'manual'); |
| 156 | preview.setAttribute('dir', this._direction); |
no test coverage detected