@taiga-ui/core 3.14.0 → 3.15.0

package/fesm2015/taiga-ui-core-directives-dropdown.js

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { InjectionToken, ElementRef, INJECTOR, Directive, Inject, Input, Optional, SkipSelf, forwardRef, Component, ChangeDetectionStrategy, Self, HostBinding, HostListener, ViewContainerRef, NgModule } from '@angular/core';
 import { WINDOW } from '@ng-web-apis/common';
 import * as i2 from '@taiga-ui/cdk';
-import { TuiDropdownPortalService, tuiDefaultProp, tuiPure, TuiHoveredService, tuiPx, tuiGetClosestFocusable, TuiDestroyService, AbstractTuiPortalHostComponent, EMPTY_CLIENT_RECT, tuiPointToClientRect, ALWAYS_TRUE_HANDLER, tuiIsTextNode, tuiIsString, tuiIsElement, tuiGetNativeFocused, tuiIsTextfield, CHAR_ZERO_WIDTH_SPACE, CHAR_NO_BREAK_SPACE, TUI_RANGE, TuiActiveZoneModule, TuiOverscrollModule, TuiHoveredModule } from '@taiga-ui/cdk';
+import { TuiDropdownPortalService, tuiDefaultProp, tuiPure, TuiHoveredService, tuiPx, tuiGetClosestFocusable, TuiDestroyService, AbstractTuiPortalHostComponent, EMPTY_CLIENT_RECT, tuiPointToClientRect, TuiActiveZoneDirective, ALWAYS_TRUE_HANDLER, tuiIsTextNode, tuiIsString, tuiIsElement, tuiGetNativeFocused, tuiIsTextfield, CHAR_ZERO_WIDTH_SPACE, CHAR_NO_BREAK_SPACE, TUI_RANGE, TuiActiveZoneModule, TuiOverscrollModule, TuiHoveredModule } from '@taiga-ui/cdk';
 import * as i1$2 from '@taiga-ui/core/abstract';
 import { tuiAsRectAccessor, tuiAsVehicle, TuiDriver, tuiAsDriver, TuiRectAccessor, AbstractTuiDriverDirective, tuiAsPositionAccessor } from '@taiga-ui/core/abstract';
 import { tuiDropdownAnimation } from '@taiga-ui/core/animations';
@@ -30,13 +30,13 @@ class TuiDropdownDirective {
         this.elementRef = elementRef;
         this.component = component;
         this.dropdownService = dropdownService;
-        this.content = ``;
+        this.content = '';
         this.dropdownBoxRef = null;
     }
     get position() {
         return tuiCheckFixedPosition(this.elementRef.nativeElement)
-            ? `fixed`
-            : `absolute`;
+            ? 'fixed'
+            : 'absolute';
     }
     ngAfterViewChecked() {
         var _a, _b;
@@ -83,8 +83,8 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[tuiDropdown]:not(ng-container)`,
-                    exportAs: `tuiDropdown`,
+                    selector: '[tuiDropdown]:not(ng-container)',
+                    exportAs: 'tuiDropdown',
                     providers: [
                         tuiAsRectAccessor(TuiDropdownDirective),
                         tuiAsVehicle(TuiDropdownDirective),
@@ -106,7 +106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     args: [TuiDropdownPortalService]
                 }] }]; }, propDecorators: { content: [{
                 type: Input,
-                args: [`tuiDropdown`]
+                args: ['tuiDropdown']
             }], position: [] } });
 
 class TuiDropdownHoverDirective extends TuiDriver {
@@ -133,7 +133,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownHoverDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[tuiDropdownHover]:not(ng-container)`,
+                    selector: '[tuiDropdownHover]:not(ng-container)',
                     providers: [tuiAsDriver(TuiDropdownHoverDirective), TuiHoveredService],
                 }]
         }], ctorParameters: function () { return [{ type: i5.Observable, decorators: [{
@@ -141,25 +141,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     args: [TuiHoveredService]
                 }] }]; }, propDecorators: { showDelay: [{
                 type: Input,
-                args: [`tuiDropdownShowDelay`]
+                args: ['tuiDropdownShowDelay']
             }], hideDelay: [{
                 type: Input,
-                args: [`tuiDropdownHideDelay`]
+                args: ['tuiDropdownHideDelay']
             }] } });
 
-/**
- * Safe space around host and screen edges
- */
-const TUI_DROPDOWN_OFFSET = 4;
 /** Default values for dropdown options */
 const TUI_DROPDOWN_DEFAULT_OPTIONS = {
-    align: `left`,
+    align: 'left',
     direction: null,
-    limitWidth: `auto`,
+    limitWidth: 'auto',
     maxHeight: 400,
     minHeight: 80,
+    offset: 4,
 };
-const TUI_DROPDOWN_OPTIONS = new InjectionToken(`[TUI_DROPDOWN_OPTIONS] Default parameters for dropdown directive`, {
+const TUI_DROPDOWN_OPTIONS = new InjectionToken('[TUI_DROPDOWN_OPTIONS] Default parameters for dropdown directive', {
     factory: () => TUI_DROPDOWN_DEFAULT_OPTIONS,
 });
 const tuiDropdownOptionsProvider = (override) => ({
@@ -178,10 +175,11 @@ class TuiDropdownOptionsDirective {
         this.limitWidth = this.options.limitWidth;
         this.minHeight = this.options.minHeight;
         this.maxHeight = this.options.maxHeight;
+        this.offset = this.options.offset;
     }
 }
 TuiDropdownOptionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownOptionsDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
-TuiDropdownOptionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight]", inputs: { align: ["tuiDropdownAlign", "align"], direction: ["tuiDropdownDirection", "direction"], limitWidth: ["tuiDropdownLimitWidth", "limitWidth"], minHeight: ["tuiDropdownMinHeight", "minHeight"], maxHeight: ["tuiDropdownMaxHeight", "maxHeight"] }, providers: [
+TuiDropdownOptionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: { align: ["tuiDropdownAlign", "align"], direction: ["tuiDropdownDirection", "direction"], limitWidth: ["tuiDropdownLimitWidth", "limitWidth"], minHeight: ["tuiDropdownMinHeight", "minHeight"], maxHeight: ["tuiDropdownMaxHeight", "maxHeight"], offset: ["tuiDropdownOffset", "offset"] }, providers: [
         {
             provide: TUI_DROPDOWN_OPTIONS,
             useExisting: forwardRef(() => TuiDropdownOptionsDirective),
@@ -202,10 +200,13 @@ __decorate([
 __decorate([
     tuiDefaultProp()
 ], TuiDropdownOptionsDirective.prototype, "maxHeight", void 0);
+__decorate([
+    tuiDefaultProp()
+], TuiDropdownOptionsDirective.prototype, "offset", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownOptionsDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight]`,
+                    selector: '[tuiDropdownAlign], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]',
                     providers: [
                         {
                             provide: TUI_DROPDOWN_OPTIONS,
@@ -220,19 +221,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     args: [TUI_DROPDOWN_OPTIONS]
                 }] }]; }, propDecorators: { align: [{
                 type: Input,
-                args: [`tuiDropdownAlign`]
+                args: ['tuiDropdownAlign']
             }], direction: [{
                 type: Input,
-                args: [`tuiDropdownDirection`]
+                args: ['tuiDropdownDirection']
             }], limitWidth: [{
                 type: Input,
-                args: [`tuiDropdownLimitWidth`]
+                args: ['tuiDropdownLimitWidth']
             }], minHeight: [{
                 type: Input,
-                args: [`tuiDropdownMinHeight`]
+                args: ['tuiDropdownMinHeight']
             }], maxHeight: [{
                 type: Input,
-                args: [`tuiDropdownMaxHeight`]
+                args: ['tuiDropdownMaxHeight']
+            }], offset: [{
+                type: Input,
+                args: ['tuiDropdownOffset']
             }] } });
 
 /**
@@ -268,37 +272,35 @@ class TuiDropdownComponent {
     update(top, left) {
         const { style } = this.elementRef.nativeElement;
         const { right } = this.elementRef.nativeElement.getBoundingClientRect();
-        const { limitWidth, maxHeight } = this.options;
+        const { limitWidth, maxHeight, offset } = this.options;
         const { innerHeight } = this.windowRef;
         const { clientRect } = this.host;
         const { position } = this.directive;
         const rect = this.accessor.getClientRect();
-        const offsetX = position === `fixed` ? 0 : -clientRect.left;
-        const offsetY = position === `fixed` ? 0 : -clientRect.top;
+        const offsetX = position === 'fixed' ? 0 : -clientRect.left;
+        const offsetY = position === 'fixed' ? 0 : -clientRect.top;
         top += offsetY;
         left += offsetX;
-        const isIntersecting = left < rect.right &&
-            right > rect.left &&
-            top < offsetY + 2 * TUI_DROPDOWN_OFFSET;
+        const isIntersecting = left < rect.right && right > rect.left && top < offsetY + 2 * offset;
         const available = isIntersecting
-            ? rect.top - 2 * TUI_DROPDOWN_OFFSET
-            : offsetY + innerHeight - top - TUI_DROPDOWN_OFFSET;
+            ? rect.top - 2 * offset
+            : offsetY + innerHeight - top - offset;
         style.position = position;
-        style.top = tuiPx(Math.max(top, offsetY + TUI_DROPDOWN_OFFSET));
+        style.top = tuiPx(Math.max(top, offsetY + offset));
         style.left = tuiPx(left);
         style.maxHeight = tuiPx(Math.min(maxHeight, available));
-        style.width = ``;
-        style.minWidth = ``;
+        style.width = '';
+        style.minWidth = '';
         switch (limitWidth) {
-            case `min`:
+            case 'min':
                 style.minWidth = tuiPx(rect.width);
                 break;
-            case `fixed`:
+            case 'fixed':
                 style.width = tuiPx(rect.width);
         }
     }
     moveFocusOutside(previous) {
-        const host = document.createElement(`div`);
+        const host = document.createElement('div');
         const { ownerDocument } = host;
         const root = ownerDocument ? ownerDocument.body : host;
         let focusable = tuiGetClosestFocusable({ initial: host, root, previous });
@@ -313,9 +315,9 @@ TuiDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: `tui-dropdown`,
-                    templateUrl: `./dropdown.template.html`,
-                    styleUrls: [`./dropdown.style.less`],
+                    selector: 'tui-dropdown',
+                    templateUrl: './dropdown.template.html',
+                    styleUrls: ['./dropdown.style.less'],
                     changeDetection: ChangeDetectionStrategy.Default,
                     providers: [TuiDestroyService, TuiPositionService],
                     animations: [tuiDropdownAnimation],
@@ -356,13 +358,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     args: [TuiDropdownHoverDirective]
                 }] }]; }, propDecorators: { dropdownAnimation: [{
                 type: HostBinding,
-                args: [`@tuiDropdownAnimation`]
+                args: ['@tuiDropdownAnimation']
             }] } });
 
 class TuiDropdownContextDirective extends TuiDriver {
-    constructor(dropdown) {
+    constructor(activeZone) {
         super(subscriber => this.stream$.subscribe(subscriber));
-        this.dropdown = dropdown;
+        this.activeZone = activeZone;
         this.stream$ = new Subject();
         this.currentRect = EMPTY_CLIENT_RECT;
     }
@@ -371,8 +373,7 @@ class TuiDropdownContextDirective extends TuiDriver {
         this.stream$.next(true);
     }
     closeDropdown(target) {
-        var _a;
-        if (!((_a = this.dropdown.dropdownBoxRef) === null || _a === void 0 ? void 0 : _a.location.nativeElement.contains(target))) {
+        if (!this.activeZone.contains(target)) {
             this.stream$.next(false);
         }
     }
@@ -380,35 +381,37 @@ class TuiDropdownContextDirective extends TuiDriver {
         return this.currentRect;
     }
 }
-TuiDropdownContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownContextDirective, deps: [{ token: TuiDropdownDirective }], target: i0.ɵɵFactoryTarget.Directive });
+TuiDropdownContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownContextDirective, deps: [{ token: TuiActiveZoneDirective }], target: i0.ɵɵFactoryTarget.Directive });
 TuiDropdownContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownContextDirective, selector: "[tuiDropdown][tuiDropdownContext]", host: { listeners: { "contextmenu.prevent.stop": "onContextMenu($event.clientX,$event.clientY)", "document:click.silent": "closeDropdown($event.target)", "document:contextmenu.capture.silent": "closeDropdown($event.target)", "document:keydown.esc": "closeDropdown($event.currentTarget)" } }, providers: [
+        TuiActiveZoneDirective,
         tuiAsDriver(TuiDropdownContextDirective),
         tuiAsRectAccessor(TuiDropdownContextDirective),
     ], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownContextDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[tuiDropdown][tuiDropdownContext]`,
+                    selector: '[tuiDropdown][tuiDropdownContext]',
                     providers: [
+                        TuiActiveZoneDirective,
                         tuiAsDriver(TuiDropdownContextDirective),
                         tuiAsRectAccessor(TuiDropdownContextDirective),
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: TuiDropdownDirective, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2.TuiActiveZoneDirective, decorators: [{
                     type: Inject,
-                    args: [TuiDropdownDirective]
+                    args: [TuiActiveZoneDirective]
                 }] }]; }, propDecorators: { onContextMenu: [{
                 type: HostListener,
-                args: [`contextmenu.prevent.stop`, [`$event.clientX`, `$event.clientY`]]
+                args: ['contextmenu.prevent.stop', ['$event.clientX', '$event.clientY']]
             }], closeDropdown: [{
                 type: HostListener,
-                args: [`document:click.silent`, [`$event.target`]]
+                args: ['document:click.silent', ['$event.target']]
             }, {
                 type: HostListener,
-                args: [`document:contextmenu.capture.silent`, [`$event.target`]]
+                args: ['document:contextmenu.capture.silent', ['$event.target']]
             }, {
                 type: HostListener,
-                args: [`document:keydown.esc`, [`$event.currentTarget`]]
+                args: ['document:keydown.esc', ['$event.currentTarget']]
             }] } });
 
 class TuiDropdownDriverDirective extends AbstractTuiDriverDirective {
@@ -418,7 +421,7 @@ TuiDropdownDriverDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownDriverDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[tuiDropdown]`,
+                    selector: '[tuiDropdown]',
                     providers: [TuiDestroyService],
                 }]
         }] });
@@ -434,7 +437,7 @@ TuiDropdownHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownHostDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[tuiDropdown][tuiDropdownHost]`,
+                    selector: '[tuiDropdown][tuiDropdownHost]',
                     providers: [tuiAsRectAccessor(TuiDropdownHostDirective)],
                 }]
         }], propDecorators: { tuiDropdownHost: [{
@@ -456,7 +459,7 @@ TuiDropdownManualDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownManualDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[tuiDropdown][tuiDropdownManual]`,
+                    selector: '[tuiDropdown][tuiDropdownManual]',
                     providers: [tuiAsDriver(TuiDropdownManualDirective)],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { tuiDropdownManual: [{
@@ -472,22 +475,20 @@ class TuiDropdownPositionDirective {
     getPosition({ width, height }) {
         const hostRect = this.accessor.getClientRect();
         const { innerHeight, innerWidth } = this.windowRef;
-        const { minHeight, align, direction } = this.options;
-        const previous = this.previous || direction || `bottom`;
-        const right = Math.max(hostRect.right - width, TUI_DROPDOWN_OFFSET);
+        const { minHeight, align, direction, offset } = this.options;
+        const previous = this.previous || direction || 'bottom';
+        const right = Math.max(hostRect.right - width, offset);
         const available = {
-            top: hostRect.top - 2 * TUI_DROPDOWN_OFFSET,
-            bottom: innerHeight - hostRect.bottom - 2 * TUI_DROPDOWN_OFFSET,
+            top: hostRect.top - 2 * offset,
+            bottom: innerHeight - hostRect.bottom - 2 * offset,
         };
         const position = {
-            top: hostRect.top - TUI_DROPDOWN_OFFSET - height,
-            bottom: hostRect.bottom + TUI_DROPDOWN_OFFSET,
+            top: hostRect.top - offset - height,
+            bottom: hostRect.bottom + offset,
             right,
-            left: hostRect.left + width < innerWidth - TUI_DROPDOWN_OFFSET
-                ? hostRect.left
-                : right,
+            left: hostRect.left + width < innerWidth - offset ? hostRect.left : right,
         };
-        const better = available.top > available.bottom ? `top` : `bottom`;
+        const better = available.top > available.bottom ? 'top' : 'bottom';
         if ((available[previous] > minHeight && direction) ||
             available[previous] > height) {
             return [position[previous], position[align]];
@@ -501,7 +502,7 @@ TuiDropdownPositionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownPositionDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])`,
+                    selector: '[tuiDropdown]:not([tuiDropdownCustomPosition]):not([tuiDropdownSided])',
                     providers: [tuiAsPositionAccessor(TuiDropdownPositionDirective)],
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -521,8 +522,9 @@ class TuiDropdownPositionSidedDirective {
         this.windowRef = windowRef;
         this.accessor = accessor;
         this.vertical = vertical;
-        this.previous = this.options.direction || `bottom`;
-        this.tuiDropdownSided = ``;
+        this.previous = this.options.direction || 'bottom';
+        this.tuiDropdownSided = '';
+        this.tuiDropdownSidedOffset = 4;
     }
     getPosition(rect) {
         if (this.tuiDropdownSided === false) {
@@ -531,20 +533,20 @@ class TuiDropdownPositionSidedDirective {
         const { height, width } = rect;
         const hostRect = this.accessor.getClientRect();
         const { innerHeight, innerWidth } = this.windowRef;
-        const { align, direction, minHeight } = this.options;
+        const { align, direction, minHeight, offset } = this.options;
         const available = {
             top: hostRect.bottom,
-            left: hostRect.left - TUI_DROPDOWN_OFFSET,
-            right: innerWidth - hostRect.right - TUI_DROPDOWN_OFFSET,
+            left: hostRect.left - offset,
+            right: innerWidth - hostRect.right - offset,
             bottom: innerHeight - hostRect.top,
         };
         const position = {
-            top: hostRect.bottom - height + 2 * TUI_DROPDOWN_OFFSET + 1,
-            left: hostRect.left - width - TUI_DROPDOWN_OFFSET,
-            right: hostRect.right + TUI_DROPDOWN_OFFSET,
-            bottom: hostRect.top - 2 * TUI_DROPDOWN_OFFSET - 1, // 1 for border
+            top: hostRect.bottom - height + this.tuiDropdownSidedOffset + 1,
+            left: hostRect.left - width - offset,
+            right: hostRect.right + offset,
+            bottom: hostRect.top - this.tuiDropdownSidedOffset - 1, // 1 for border
         };
-        const better = available.top > available.bottom ? `top` : `bottom`;
+        const better = available.top > available.bottom ? 'top' : 'bottom';
         const maxLeft = available.left > available.right ? position.left : position.right;
         const left = available[align] > width ? position[align] : maxLeft;
         if ((available[this.previous] > minHeight && direction) ||
@@ -556,14 +558,14 @@ class TuiDropdownPositionSidedDirective {
     }
 }
 TuiDropdownPositionSidedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownPositionSidedDirective, deps: [{ token: TUI_DROPDOWN_OPTIONS }, { token: WINDOW }, { token: TuiRectAccessor }, { token: TuiDropdownPositionDirective }], target: i0.ɵɵFactoryTarget.Directive });
-TuiDropdownPositionSidedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownPositionSidedDirective, selector: "[tuiDropdownSided]", inputs: { tuiDropdownSided: "tuiDropdownSided" }, providers: [
+TuiDropdownPositionSidedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiDropdownPositionSidedDirective, selector: "[tuiDropdownSided]", inputs: { tuiDropdownSided: "tuiDropdownSided", tuiDropdownSidedOffset: "tuiDropdownSidedOffset" }, providers: [
         TuiDropdownPositionDirective,
         tuiAsPositionAccessor(TuiDropdownPositionSidedDirective),
     ], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownPositionSidedDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[tuiDropdownSided]`,
+                    selector: '[tuiDropdownSided]',
                     providers: [
                         TuiDropdownPositionDirective,
                         tuiAsPositionAccessor(TuiDropdownPositionSidedDirective),
@@ -583,6 +585,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     args: [TuiDropdownPositionDirective]
                 }] }]; }, propDecorators: { tuiDropdownSided: [{
                 type: Input
+            }], tuiDropdownSidedOffset: [{
+                type: Input
             }] } });
 
 class TuiDropdownSelectionDirective extends TuiDriver {
@@ -606,7 +610,7 @@ class TuiDropdownSelectionDirective extends TuiDriver {
                     : this.range;
             return (contained && handler(this.range)) || this.inDropdown(range);
         }));
-        this.position = `selection`;
+        this.position = 'selection';
     }
     set tuiDropdownSelection(visible) {
         if (!tuiIsString(visible)) {
@@ -615,7 +619,7 @@ class TuiDropdownSelectionDirective extends TuiDriver {
     }
     getClientRect() {
         switch (this.position) {
-            case `tag`: {
+            case 'tag': {
                 const { commonAncestorContainer } = this.range;
                 const element = tuiIsElement(commonAncestorContainer)
                     ? commonAncestorContainer
@@ -624,7 +628,7 @@ class TuiDropdownSelectionDirective extends TuiDriver {
                     ? element.getBoundingClientRect()
                     : EMPTY_CLIENT_RECT;
             }
-            case `word`:
+            case 'word':
                 return tuiGetWordRange(this.range).getBoundingClientRect();
             default:
                 return this.range.getBoundingClientRect();
@@ -681,13 +685,13 @@ class TuiDropdownSelectionDirective extends TuiDriver {
      * Create an invisible DIV styled exactly like input/textarea element inside directive
      */
     initGhost(element) {
-        const ghost = this.documentRef.createElement(`div`);
+        const ghost = this.documentRef.createElement('div');
         const { nativeElement } = this.viewContainerRef.element;
         const { font, letterSpacing, textTransform, padding } = getComputedStyle(element);
-        ghost.style.position = `absolute`;
-        ghost.style.pointerEvents = `none`;
-        ghost.style.opacity = `0`;
-        ghost.style.whiteSpace = `pre-wrap`;
+        ghost.style.position = 'absolute';
+        ghost.style.pointerEvents = 'none';
+        ghost.style.opacity = '0';
+        ghost.style.whiteSpace = 'pre-wrap';
         ghost.style.font = font;
         ghost.style.letterSpacing = letterSpacing;
         ghost.style.textTransform = textTransform;
@@ -708,7 +712,7 @@ __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiDropdownSelectionDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: `[tuiDropdown][tuiDropdownSelection]`,
+                    selector: '[tuiDropdown][tuiDropdownSelection]',
                     providers: [
                         tuiAsDriver(TuiDropdownSelectionDirective),
                         tuiAsRectAccessor(TuiDropdownSelectionDirective),
@@ -734,7 +738,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     args: [TuiDropdownDirective]
                 }] }]; }, propDecorators: { position: [{
                 type: Input,
-                args: [`tuiDropdownSelectionPosition`]
+                args: ['tuiDropdownSelectionPosition']
             }], tuiDropdownSelection: [{
                 type: Input
             }] } });
@@ -820,5 +824,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_OFFSET, TUI_DROPDOWN_OPTIONS, TuiDropdownComponent, TuiDropdownContextDirective, TuiDropdownDirective, TuiDropdownDriverDirective, TuiDropdownHostDirective, TuiDropdownHoverDirective, TuiDropdownManualDirective, TuiDropdownModule, TuiDropdownOptionsDirective, TuiDropdownPositionDirective, TuiDropdownPositionSidedDirective, TuiDropdownSelectionDirective, tuiDropdownOptionsProvider };
+export { TUI_DROPDOWN_COMPONENT, TUI_DROPDOWN_DEFAULT_OPTIONS, TUI_DROPDOWN_OPTIONS, TuiDropdownComponent, TuiDropdownContextDirective, TuiDropdownDirective, TuiDropdownDriverDirective, TuiDropdownHostDirective, TuiDropdownHoverDirective, TuiDropdownManualDirective, TuiDropdownModule, TuiDropdownOptionsDirective, TuiDropdownPositionDirective, TuiDropdownPositionSidedDirective, TuiDropdownSelectionDirective, tuiDropdownOptionsProvider };
 //# sourceMappingURL=taiga-ui-core-directives-dropdown.js.map