ng-auto-position 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +53 -73
  2. package/ng-auto-position-0.0.2.tgz +0 -0
  3. package/package.json +37 -1
  4. package/ng-auto-position-0.0.1.tgz +0 -0
package/README.md CHANGED
@@ -8,14 +8,14 @@ This directive is designed for cases where **Angular CDK Overlay is too heavy**,
8
8
 
9
9
  ## **✨ Features**
10
10
 
11
- * ✅ **Smart Positioning**: Auto positions popup **above or below** a reference element.
12
- * ✅ **Dynamic Tracking**: Popup **follows the reference** while scrolling (no freezing).
13
- * ✅ **Boundary Detection**: Viewport clamping when the reference is visible.
14
- * ✅ **Natural Exit**: Popup moves out of viewport when the reference fully leaves.
15
- * ✅ **Responsive**: Optional repositioning on scroll & resize.
16
- * ✅ **Layout Sync**: Optional width matching with reference element.
17
- * ✅ **UX Control**: Optional background scroll locking and internal scroll handling.
18
- * ✅ **Modern**: Standalone directive (Angular 16+), no Angular CDK dependency.
11
+ - ✅ **Smart Positioning**: Auto positions popup **above or below** a reference element.
12
+ - ✅ **Dynamic Tracking**: Popup **follows the reference** while scrolling (no freezing).
13
+ - ✅ **Boundary Detection**: Viewport clamping when the reference is visible.
14
+ - ✅ **Natural Exit**: Popup moves out of viewport when the reference fully leaves.
15
+ - ✅ **Responsive**: Optional repositioning on scroll & resize.
16
+ - ✅ **Layout Sync**: Optional width matching with reference element.
17
+ - ✅ **UX Control**: Optional background scroll locking and internal scroll handling.
18
+ - ✅ **Modern**: Standalone directive (Angular 16+), no Angular CDK dependency.
19
19
 
20
20
  ---
21
21
 
@@ -31,9 +31,9 @@ npm install ng-auto-position
31
31
 
32
32
  Apply the directive and provide the ID of the element it should anchor to.
33
33
 
34
- HTML
34
+ HTML
35
35
 
36
- ``` html
36
+ ```html
37
37
  <div
38
38
  class="flex flex-row"
39
39
  style="
@@ -47,43 +47,37 @@ HTML
47
47
  padding: 700px;
48
48
  "
49
49
  >
50
- <div>
51
- Lorem ipsum, dolor sit amet consectetur adipisicing elit.
52
- </div>
50
+ <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
53
51
  <div style="height: fit-content">
54
- <button style="padding: 4px; border: 2px solid" (click)="toggle()">
55
- Toggle
56
- </button>
52
+ <button style="padding: 4px; border: 2px solid" (click)="toggle()">Toggle</button>
57
53
  @if (show) {
58
- <div
59
- ngAutoPosition
60
- style="
54
+ <div
55
+ ngAutoPosition
56
+ style="
61
57
  width: 200px;
62
58
  height: 200px;
63
59
  border: 1px solid;
64
60
  background-color: white;
65
61
  "
66
- ></div>
62
+ ></div>
67
63
  }
68
64
  </div>
69
- <div>
70
- Lorem ipsum, dolor sit amet consectetur adipisicing elit.
71
- </div>
65
+ <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
72
66
  </div>
73
67
  ```
74
68
 
75
69
  Typescript
76
70
 
77
71
  ```typescript
78
- import { NgAutoPositionElementDirective } from '../ng-auto-position.directive';
79
- import { CommonModule } from '@angular/common';
80
- import { Component } from '@angular/core';
72
+ import { NgAutoPositionElementDirective } from "../ng-auto-position.directive";
73
+ import { CommonModule } from "@angular/common";
74
+ import { Component } from "@angular/core";
81
75
 
82
76
  @Component({
83
- selector: 'ng-auto-position-test',
77
+ selector: "ng-auto-position-test",
84
78
  standalone: true,
85
79
  imports: [CommonModule, NgAutoPositionElementDirective],
86
- templateUrl: './ng-autoposition-test.component.html',
80
+ templateUrl: "./ng-autoposition-test.component.html",
87
81
  })
88
82
  export class NgAutoPositionTestComponent {
89
83
  show: boolean = false;
@@ -92,22 +86,21 @@ export class NgAutoPositionTestComponent {
92
86
  this.show = !this.show;
93
87
  }
94
88
  }
95
-
96
89
  ```
97
90
 
98
91
  ---
99
92
 
100
93
  ## **⚙️ API Inputs**
101
94
 
102
- | Input | Type | Default | Description |
103
- | :---- | :---- | :---- | :---- |
104
- | referenceElementId | string | null | ID of the reference element. |
105
- | enableAutoReposition | boolean | true | Reposition on window scroll & resize. |
106
- | debounceMs | number | 0 | Debounce delay for scroll/resize events. |
107
- | offset | number | 0 | Pixel gap between reference and popup. |
108
- | matchWidth | boolean | false | Match popup width to reference element width. |
109
- | scrollableSelector | string | null | Inner element selector to limit height/enable scroll. |
110
- | hideScrollTargets | string[] | null | IDs or classes (e.g. ['body']) to hide scrollbars. |
95
+ | Input | Type | Default | Description |
96
+ | :------------------- | :------- | :------ | :---------------------------------------------------- |
97
+ | referenceElementId | string | null | ID of the reference element. |
98
+ | enableAutoReposition | boolean | true | Reposition on window scroll & resize. |
99
+ | debounceMs | number | 0 | Debounce delay for scroll/resize events. |
100
+ | offset | number | 0 | Pixel gap between reference and popup. |
101
+ | matchWidth | boolean | false | Match popup width to reference element width. |
102
+ | scrollableSelector | string | null | Inner element selector to limit height/enable scroll. |
103
+ | hideScrollTargets | string[] | null | IDs or classes (e.g. ['body']) to hide scrollbars. |
111
104
 
112
105
  ---
113
106
 
@@ -117,27 +110,21 @@ export class NgAutoPositionTestComponent {
117
110
 
118
111
  Automatically constrains height and enables internal scrolling if the viewport is too small.
119
112
 
120
- HTML
113
+ HTML
121
114
 
122
- ```
115
+ ```html
123
116
  <button id="actionsBtn">Actions</button>
124
117
 
125
- <div
126
- autoPositionElement
127
- referenceElementId="actionsBtn"
128
- scrollableSelector=".menu-items"
129
- class="dropdown"
130
- >
131
- <div class="menu-items">
132
- </div>
118
+ <div autoPositionElement referenceElementId="actionsBtn" scrollableSelector=".menu-items" class="dropdown">
119
+ <div class="menu-items"></div>
133
120
  </div>
134
121
  ```
135
122
 
136
- CSS
123
+ CSS
137
124
 
138
125
  ```css
139
- .menu-items {
140
- overflow-y: auto;
126
+ .menu-items {
127
+ overflow-y: auto;
141
128
  }
142
129
  ```
143
130
 
@@ -145,46 +132,39 @@ CSS
145
132
 
146
133
  Prevents the user from scrolling the background while the popup is active.
147
134
 
148
- HTML
135
+ HTML
149
136
 
150
137
  ```html
151
- <div
152
- autoPositionElement
153
- referenceElementId="menuBtn"
154
- [hideScrollTargets]="['body', '.layout-container']"
155
- class="dropdown"
156
- >
157
- Menu content
158
- </div>
138
+ <div autoPositionElement referenceElementId="menuBtn" [hideScrollTargets]="['body', '.layout-container']" class="dropdown">Menu content</div>
159
139
  ```
160
140
 
161
141
  ---
162
142
 
163
143
  ## **🧠 Positioning Behavior Explained**
164
144
 
165
- * **Reference is fully visible**: Popup is clamped to the viewport to prevent overflow on all sides.
166
- * **Reference is partially visible**: Popup remains visible and clamped to the viewport.
167
- * **Reference is outside viewport**: Popup moves with the reference and can go fully off-screen. It never "freezes" or sticks in mid-air.
145
+ - **Reference is fully visible**: Popup is clamped to the viewport to prevent overflow on all sides.
146
+ - **Reference is partially visible**: Popup remains visible and clamped to the viewport.
147
+ - **Reference is outside viewport**: Popup moves with the reference and can go fully off-screen. It never "freezes" or sticks in mid-air.
168
148
 
169
149
  ---
170
150
 
171
151
  ## **🧪 Angular Compatibility**
172
152
 
173
153
  | Angular Version | Supported |
174
- | :---- | :---- |
175
- | 16+ | ✅ |
154
+ | :-------------- | :-------- |
155
+ | 16+ | ✅ |
176
156
 
177
157
  ### **Standalone Import Example**
178
158
 
179
- TypeScript
159
+ TypeScript
180
160
 
181
161
  ```typescript
182
- import { AutoPositionElementDirective } from '@roshan-ng/ng-auto-position';
162
+ import { AutoPositionElementDirective } from "@roshan-ng/ng-auto-position";
183
163
 
184
- @Component({
185
- standalone: true,
186
- imports: [AutoPositionElementDirective],
187
- })
164
+ @Component({
165
+ standalone: true,
166
+ imports: [AutoPositionElementDirective],
167
+ })
188
168
  export class DemoComponent {}
189
169
  ```
190
170
 
@@ -196,5 +176,5 @@ MIT © Roshan
196
176
 
197
177
  ## **🔗 Links**
198
178
 
199
- * **npm**: [https://www.npmjs.com/package/ng-auto-position](https://www.npmjs.com/package/@roshan-ng/ng-auto-position)
200
- * **GitHub**: [https://github.com/roshan2197/ng-auto-position](https://github.com/roshan/ng-auto-position)
179
+ - **npm**: [https://www.npmjs.com/package/ng-auto-position](https://www.npmjs.com/package/@roshan-ng/ng-auto-position)
180
+ - **GitHub**: [https://github.com/roshan2197/ng-auto-position](https://github.com/roshan/ng-auto-position)
package/ng-auto-position-0.0.2.tgz ADDED
Binary file
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ng-auto-position",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "Angular directive for auto positioning dropdowns and popovers",
5
5
  "dependencies": {
6
6
  "@angular/animations": "^17.3.0",
@@ -16,6 +16,42 @@
16
16
  "tslib": "^2.3.0",
17
17
  "zone.js": "~0.14.3"
18
18
  },
19
+ "keywords": [
20
+ "angular",
21
+ "angular-ui",
22
+ "angular-directive",
23
+ "angular-standalone",
24
+ "angular16",
25
+ "angular17",
26
+ "angular18",
27
+ "dropdown",
28
+ "popover",
29
+ "tooltip",
30
+ "menu",
31
+ "context-menu",
32
+ "popup",
33
+ "overlay",
34
+ "floating",
35
+ "floating-ui",
36
+ "auto-position",
37
+ "positioning",
38
+ "smart-positioning",
39
+ "viewport",
40
+ "scroll-aware",
41
+ "responsive-ui",
42
+ "cdk-alternative",
43
+ "no-cdk",
44
+ "lightweight",
45
+ "standalone-directive",
46
+ "frontend",
47
+ "ui",
48
+ "ux"
49
+ ],
50
+ "repository": {
51
+ "type": "git",
52
+ "url": "https://github.com/roshan2197/ng-auto-position"
53
+ },
54
+ "homepage": "https://github.com/roshan2197/ng-auto-position",
19
55
  "module": "fesm2022/ng-auto-position.mjs",
20
56
  "typings": "index.d.ts",
21
57
  "exports": {
package/ng-auto-position-0.0.1.tgz DELETED
Binary file