ng-auto-position 0.0.1 → 0.0.3

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 +62 -72
  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,25 @@ 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
119
+ autoPositionElement
120
+ referenceElementId="actionsBtn"
121
+ scrollableSelector=".menu-items"
122
+ class="dropdown">
123
+ <div class="menu-items"></div>
133
124
  </div>
134
125
  ```
135
126
 
136
- CSS
127
+ CSS
137
128
 
138
129
  ```css
139
- .menu-items {
140
- overflow-y: auto;
130
+ .menu-items {
131
+ overflow-y: auto;
141
132
  }
142
133
  ```
143
134
 
@@ -145,16 +136,15 @@ CSS
145
136
 
146
137
  Prevents the user from scrolling the background while the popup is active.
147
138
 
148
- HTML
139
+ HTML
149
140
 
150
141
  ```html
151
- <div
152
- autoPositionElement
153
- referenceElementId="menuBtn"
154
- [hideScrollTargets]="['body', '.layout-container']"
155
- class="dropdown"
156
- >
157
- Menu content
142
+ <div
143
+ autoPositionElement
144
+ referenceElementId="menuBtn"
145
+ [hideScrollTargets]="['body', '.layout-container']"
146
+ class="dropdown">
147
+ Menu content
158
148
  </div>
159
149
  ```
160
150
 
@@ -162,29 +152,29 @@ HTML
162
152
 
163
153
  ## **🧠 Positioning Behavior Explained**
164
154
 
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.
155
+ - **Reference is fully visible**: Popup is clamped to the viewport to prevent overflow on all sides.
156
+ - **Reference is partially visible**: Popup remains visible and clamped to the viewport.
157
+ - **Reference is outside viewport**: Popup moves with the reference and can go fully off-screen. It never "freezes" or sticks in mid-air.
168
158
 
169
159
  ---
170
160
 
171
161
  ## **🧪 Angular Compatibility**
172
162
 
173
163
  | Angular Version | Supported |
174
- | :---- | :---- |
175
- | 16+ | ✅ |
164
+ | :-------------- | :-------- |
165
+ | 16+ | ✅ |
176
166
 
177
167
  ### **Standalone Import Example**
178
168
 
179
- TypeScript
169
+ TypeScript
180
170
 
181
171
  ```typescript
182
- import { AutoPositionElementDirective } from '@roshan-ng/ng-auto-position';
172
+ import { AutoPositionElementDirective } from "@roshan-ng/ng-auto-position";
183
173
 
184
- @Component({
185
- standalone: true,
186
- imports: [AutoPositionElementDirective],
187
- })
174
+ @Component({
175
+ standalone: true,
176
+ imports: [AutoPositionElementDirective],
177
+ })
188
178
  export class DemoComponent {}
189
179
  ```
190
180
 
@@ -196,5 +186,5 @@ MIT © Roshan
196
186
 
197
187
  ## **🔗 Links**
198
188
 
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)
189
+ - **npm**: [https://www.npmjs.com/package/ng-auto-position](https://www.npmjs.com/package/@roshan-ng/ng-auto-position)
190
+ - **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.3",
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