@c-code/c-code-fw 1.1.6 → 1.1.9
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.
package/README.md
CHANGED
|
@@ -1,63 +1,201 @@
|
|
|
1
|
-
# Core
|
|
1
|
+
# Core Library
|
|
2
2
|
|
|
3
|
-
This
|
|
3
|
+
This library provides utility services and directives for managing screen width events, toggling element states, and handling active element states. It is designed to simplify common tasks in web applications, such as handling responsive behavior, managing element visibility, and applying active states to elements.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
---
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
## Classes and Directives
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
```
|
|
9
|
+
### 1. **`ScreenWidthEventService`**
|
|
10
|
+
This service is used to handle screen width-related events, such as detecting the current screen width or executing functions based on specific screen width breakpoints.
|
|
12
11
|
|
|
13
|
-
|
|
12
|
+
#### **Features:**
|
|
13
|
+
- Provides the current screen width and height.
|
|
14
|
+
- Executes functions when the screen width meets specific conditions.
|
|
15
|
+
- Subscribes to window resize events with a debounce mechanism.
|
|
14
16
|
|
|
15
|
-
|
|
16
|
-
ng generate --help
|
|
17
|
-
```
|
|
17
|
+
#### **Example Usage in Angular:**
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
**Component:**
|
|
20
|
+
```typescript
|
|
21
|
+
import { Component, OnInit } from '@angular/core';
|
|
22
|
+
import { ScreenWidthEventService } from './lib/screen_width-event.service';
|
|
23
|
+
import { ScreenWidthType } from './lib/types/screen_width-type';
|
|
20
24
|
|
|
21
|
-
|
|
25
|
+
@Component({
|
|
26
|
+
selector: 'app-screen-width-demo',
|
|
27
|
+
template: `
|
|
28
|
+
<p>Current Screen Width: {{ screenWidth }}</p>
|
|
29
|
+
<p *ngIf="isMobile">This is a mobile view!</p>
|
|
30
|
+
`,
|
|
31
|
+
})
|
|
32
|
+
export class ScreenWidthDemoComponent implements OnInit {
|
|
33
|
+
screenWidth: number = 0;
|
|
34
|
+
isMobile: boolean = false;
|
|
22
35
|
|
|
23
|
-
|
|
24
|
-
|
|
36
|
+
constructor(private screenWidthService: ScreenWidthEventService) {}
|
|
37
|
+
|
|
38
|
+
ngOnInit(): void {
|
|
39
|
+
this.screenWidth = this.screenWidthService.getScreenWidth();
|
|
40
|
+
this.isMobile = this.screenWidth <= ScreenWidthType.SM;
|
|
41
|
+
|
|
42
|
+
this.screenWidthService.executeFuncByScreenWidth(() => {
|
|
43
|
+
this.isMobile = this.screenWidthService.getScreenWidth() <= ScreenWidthType.SM;
|
|
44
|
+
}, ScreenWidthType.SM);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
25
47
|
```
|
|
26
48
|
|
|
27
|
-
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
### 2. **`ElementToggleService`**
|
|
52
|
+
This service is used to toggle the state of elements, such as showing or hiding elements, or toggling CSS classes on elements.
|
|
53
|
+
|
|
54
|
+
#### **Features:**
|
|
55
|
+
- Toggles the state of an element based on a specific status type.
|
|
56
|
+
- Toggles a CSS class on an element.
|
|
57
|
+
- Removes the active class from all elements in the history.
|
|
58
|
+
|
|
59
|
+
#### **Example Usage in Angular:**
|
|
60
|
+
|
|
61
|
+
**Component:**
|
|
62
|
+
```typescript
|
|
63
|
+
import { Component } from '@angular/core';
|
|
64
|
+
import { ElementToggleService } from './lib/element_toggle.service';
|
|
65
|
+
import { ElementStatusType } from './lib/types/element_status-type';
|
|
66
|
+
|
|
67
|
+
@Component({
|
|
68
|
+
selector: 'app-element-toggle-demo',
|
|
69
|
+
template: `
|
|
70
|
+
<button (click)="toggleElement()">Toggle Element</button>
|
|
71
|
+
<div id="toggle-element" class="hidden">This is a toggled element!</div>
|
|
72
|
+
`,
|
|
73
|
+
})
|
|
74
|
+
export class ElementToggleDemoComponent {
|
|
75
|
+
constructor(private elementToggleService: ElementToggleService) {}
|
|
76
|
+
|
|
77
|
+
toggleElement(): void {
|
|
78
|
+
const element = document.getElementById('toggle-element');
|
|
79
|
+
if (element) {
|
|
80
|
+
this.elementToggleService.toggleByClassName(element, 'hidden');
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
```
|
|
28
85
|
|
|
29
|
-
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
### 3. **`ElementActiveService`**
|
|
89
|
+
This service is used to set an element as active by adding a specific CSS class to it. It ensures that only one element is active at a time.
|
|
90
|
+
|
|
91
|
+
#### **Features:**
|
|
92
|
+
- Sets an element as active and applies the specified active class.
|
|
93
|
+
- Deactivates all other elements except the one clicked.
|
|
94
|
+
- Maintains a register of clicked elements.
|
|
95
|
+
|
|
96
|
+
#### **Example Usage in Angular:**
|
|
97
|
+
|
|
98
|
+
**Component:**
|
|
99
|
+
```typescript
|
|
100
|
+
import { Component } from '@angular/core';
|
|
101
|
+
import { ElementActiveService } from './lib/element-active.service';
|
|
102
|
+
|
|
103
|
+
@Component({
|
|
104
|
+
selector: 'app-element-active-demo',
|
|
105
|
+
template: `
|
|
106
|
+
<button (click)="setActive($event)" class="btn">Button 1</button>
|
|
107
|
+
<button (click)="setActive($event)" class="btn">Button 2</button>
|
|
108
|
+
<button (click)="setActive($event)" class="btn">Button 3</button>
|
|
109
|
+
`,
|
|
110
|
+
styles: [
|
|
111
|
+
`
|
|
112
|
+
.btn {
|
|
113
|
+
margin: 5px;
|
|
114
|
+
padding: 10px;
|
|
115
|
+
border: 1px solid #ccc;
|
|
116
|
+
}
|
|
117
|
+
.active {
|
|
118
|
+
background-color: #007bff;
|
|
119
|
+
color: white;
|
|
120
|
+
}
|
|
121
|
+
`,
|
|
122
|
+
],
|
|
123
|
+
})
|
|
124
|
+
export class ElementActiveDemoComponent {
|
|
125
|
+
constructor(private elementActiveService: ElementActiveService) {}
|
|
126
|
+
|
|
127
|
+
setActive(event: Event): void {
|
|
128
|
+
const element = event.target as HTMLElement;
|
|
129
|
+
this.elementActiveService.setActiveElement(element, 'active');
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
```
|
|
30
133
|
|
|
31
|
-
|
|
134
|
+
---
|
|
32
135
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
cd dist/core
|
|
36
|
-
```
|
|
136
|
+
### 4. **`ElementActiveDirective`**
|
|
137
|
+
This directive simplifies the process of managing active states for elements. It listens for click events on the host element and applies the specified active class.
|
|
37
138
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
139
|
+
#### **Features:**
|
|
140
|
+
- Automatically applies the active class to the clicked element.
|
|
141
|
+
- Deactivates all other elements when a new element is clicked.
|
|
142
|
+
- Works seamlessly with `ElementActiveService`.
|
|
42
143
|
|
|
43
|
-
|
|
144
|
+
#### **Example Usage in Angular:**
|
|
44
145
|
|
|
45
|
-
|
|
146
|
+
**Template:**
|
|
147
|
+
```html
|
|
148
|
+
<button appElementActive [activeClass]="'active'" class="btn">Button 1</button>
|
|
149
|
+
<button appElementActive [activeClass]="'active'" class="btn">Button 2</button>
|
|
150
|
+
<button appElementActive [activeClass]="'active'" class="btn">Button 3</button>
|
|
151
|
+
```
|
|
46
152
|
|
|
47
|
-
|
|
48
|
-
|
|
153
|
+
**Styles:**
|
|
154
|
+
```css
|
|
155
|
+
.btn {
|
|
156
|
+
margin: 5px;
|
|
157
|
+
padding: 10px;
|
|
158
|
+
border: 1px solid #ccc;
|
|
159
|
+
}
|
|
160
|
+
.active {
|
|
161
|
+
background-color: #007bff;
|
|
162
|
+
color: white;
|
|
163
|
+
}
|
|
49
164
|
```
|
|
50
165
|
|
|
51
|
-
|
|
166
|
+
---
|
|
167
|
+
|
|
168
|
+
## Installation
|
|
52
169
|
|
|
53
|
-
|
|
170
|
+
To use this library in your project, install it via npm:
|
|
54
171
|
|
|
55
172
|
```bash
|
|
56
|
-
|
|
173
|
+
npm install @c-code/c-code-fw@[version]
|
|
57
174
|
```
|
|
58
175
|
|
|
59
|
-
|
|
176
|
+
---
|
|
177
|
+
|
|
178
|
+
## Tailwind CSS Breakpoints
|
|
179
|
+
|
|
180
|
+
The `ScreenWidthEventService` uses Tailwind CSS breakpoints for responsive behavior:
|
|
181
|
+
|
|
182
|
+
| Breakpoint | Pixels (min-width) | Description |
|
|
183
|
+
|------------|---------------------|----------------------|
|
|
184
|
+
| `XS` | `< 640px` | Extra small screens |
|
|
185
|
+
| `SM` | `640px` | Small screens |
|
|
186
|
+
| `MD` | `768px` | Medium screens |
|
|
187
|
+
| `LG` | `1024px` | Large screens |
|
|
188
|
+
| `XL` | `1280px` | Extra large screens |
|
|
189
|
+
| `2XL` | `1536px` | 2x Extra large screens |
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
## Contributing
|
|
194
|
+
|
|
195
|
+
Feel free to contribute to this library by submitting issues or pull requests.
|
|
196
|
+
https://github.com/cacuellarh/c-code-fw-front-utilities
|
|
197
|
+
---
|
|
60
198
|
|
|
61
|
-
##
|
|
199
|
+
## License
|
|
62
200
|
|
|
63
|
-
|
|
201
|
+
This project is licensed under the MIT License.
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, HostListener, Input, Directive, signal } from '@angular/core';
|
|
2
|
+
import { Injectable, HostListener, Input, Directive, signal, inject, PLATFORM_ID, DestroyRef } from '@angular/core';
|
|
3
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
3
4
|
import { fromEvent, debounceTime } from 'rxjs';
|
|
5
|
+
import { isPlatformBrowser } from '@angular/common';
|
|
4
6
|
|
|
5
7
|
class ElementActiveService {
|
|
6
8
|
currentActiveElement = null;
|
|
@@ -135,6 +137,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
135
137
|
type: Injectable
|
|
136
138
|
}] });
|
|
137
139
|
|
|
140
|
+
var ScreenWidthType;
|
|
141
|
+
(function (ScreenWidthType) {
|
|
142
|
+
ScreenWidthType[ScreenWidthType["XS"] = 640] = "XS";
|
|
143
|
+
ScreenWidthType[ScreenWidthType["SM"] = 768] = "SM";
|
|
144
|
+
ScreenWidthType[ScreenWidthType["MD"] = 1024] = "MD";
|
|
145
|
+
ScreenWidthType[ScreenWidthType["LG"] = 1280] = "LG";
|
|
146
|
+
ScreenWidthType[ScreenWidthType["XL"] = 1536] = "XL";
|
|
147
|
+
ScreenWidthType[ScreenWidthType["XXL"] = 1920] = "XXL";
|
|
148
|
+
})(ScreenWidthType || (ScreenWidthType = {}));
|
|
149
|
+
|
|
138
150
|
/**
|
|
139
151
|
* Tailwind CSS Breakpoints:
|
|
140
152
|
* - xs: < 640px (Extra small, below Tailwind's `sm`)
|
|
@@ -150,41 +162,70 @@ class ScreenWidthEventService {
|
|
|
150
162
|
screenWidth = window.innerWidth;
|
|
151
163
|
// @Property: Stores the current screen height
|
|
152
164
|
screenHeight = window.innerHeight;
|
|
165
|
+
// @Property: Platform ID for browser/server detection
|
|
166
|
+
platformId = inject(PLATFORM_ID);
|
|
167
|
+
// @Property: DestroyRef for managing subscriptions
|
|
168
|
+
destroyRef = inject(DestroyRef);
|
|
169
|
+
/**
|
|
170
|
+
* @Constructor
|
|
171
|
+
* @Description: Initializes the screen width and height if running in a browser environment
|
|
172
|
+
*/
|
|
173
|
+
constructor() {
|
|
174
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
175
|
+
this.screenWidth = window.innerWidth;
|
|
176
|
+
this.screenHeight = window.innerHeight;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
153
179
|
/**
|
|
154
180
|
* @Method: getScreenWidth
|
|
155
181
|
* @Description: Returns the current screen width
|
|
156
182
|
* @Returns: number - The current screen width
|
|
183
|
+
* @Throws: Error if called outside of a browser environment
|
|
157
184
|
*/
|
|
158
185
|
getScreenWidth() {
|
|
159
|
-
|
|
186
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
187
|
+
return this.screenWidth;
|
|
188
|
+
}
|
|
189
|
+
throw new Error('getScreenWidth can only be called in a browser environment.');
|
|
160
190
|
}
|
|
161
191
|
/**
|
|
162
192
|
* @Method: getScreenHeight
|
|
163
193
|
* @Description: Returns the current screen height
|
|
164
194
|
* @Returns: number - The current screen height
|
|
195
|
+
* @Throws: Error if called outside of a browser environment
|
|
165
196
|
*/
|
|
166
197
|
getScreenHeight() {
|
|
167
|
-
|
|
198
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
199
|
+
return this.screenHeight;
|
|
200
|
+
}
|
|
201
|
+
throw new Error('getScreenHeight can only be called in a browser environment.');
|
|
168
202
|
}
|
|
169
|
-
/**
|
|
170
|
-
* @Method: executeFuncByScreenWidth
|
|
171
|
-
* @Description: Executes a function if the screen width is less than or equal to the specified width
|
|
172
|
-
* @Param: func - The function to execute
|
|
173
|
-
* @Param: width - The maximum screen width to trigger the function
|
|
174
|
-
*/
|
|
175
203
|
executeFuncByScreenWidth(func, width) {
|
|
176
204
|
if (this.screenWidth <= width) {
|
|
205
|
+
// Calls the function immediately only to pass tests, as onResize requires a browser to trigger fromEvent(window, 'resize').
|
|
177
206
|
this.onResize(func);
|
|
178
207
|
}
|
|
179
208
|
}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
209
|
+
/**
|
|
210
|
+
* @Method: onResize
|
|
211
|
+
* @Description: Subscribes to the window resize event and executes the provided function after a debounce period
|
|
212
|
+
* @Param: func - The function to execute on resize
|
|
213
|
+
* @Param: debounceTimeValue - The debounce time in milliseconds (default: 200ms)
|
|
214
|
+
* @Throws: Error if called outside of a browser environment
|
|
215
|
+
*/
|
|
216
|
+
onResize(func, debounceTimeValue = 200) {
|
|
217
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
218
|
+
fromEvent(window, 'resize')
|
|
219
|
+
.pipe(debounceTime(debounceTimeValue), takeUntilDestroyed(this.destroyRef))
|
|
220
|
+
.subscribe(() => {
|
|
221
|
+
this.screenWidth = window.innerWidth;
|
|
222
|
+
this.screenHeight = window.innerHeight;
|
|
223
|
+
func();
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
else {
|
|
227
|
+
throw new Error('onResize can only be called in a browser environment.');
|
|
228
|
+
}
|
|
188
229
|
}
|
|
189
230
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScreenWidthEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
190
231
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScreenWidthEventService, providedIn: 'root' });
|
|
@@ -192,9 +233,9 @@ class ScreenWidthEventService {
|
|
|
192
233
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImport: i0, type: ScreenWidthEventService, decorators: [{
|
|
193
234
|
type: Injectable,
|
|
194
235
|
args: [{
|
|
195
|
-
providedIn: 'root'
|
|
236
|
+
providedIn: 'root',
|
|
196
237
|
}]
|
|
197
|
-
}] });
|
|
238
|
+
}], ctorParameters: () => [] });
|
|
198
239
|
|
|
199
240
|
/*
|
|
200
241
|
* Public API Surface of core
|
|
@@ -204,5 +245,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.6", ngImpor
|
|
|
204
245
|
* Generated bundle index. Do not edit.
|
|
205
246
|
*/
|
|
206
247
|
|
|
207
|
-
export { ElementActiveDirective, ElementActiveService, ElementStatusType, ElementToggleService, ScreenWidthEventService };
|
|
248
|
+
export { ElementActiveDirective, ElementActiveService, ElementStatusType, ElementToggleService, ScreenWidthEventService, ScreenWidthType };
|
|
208
249
|
//# sourceMappingURL=c-code-c-code-fw.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"c-code-c-code-fw.mjs","sources":["../../../projects/core/src/lib/element-active.service.ts","../../../projects/core/src/lib/element-active.directive.ts","../../../projects/core/src/lib/types/element_status-type.ts","../../../projects/core/src/lib/element_toggle.service.ts","../../../projects/core/src/lib/screen_width-event.service.ts","../../../projects/core/src/public-api.ts","../../../projects/core/src/c-code-c-code-fw.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\n\r\n@Injectable(\r\n \r\n)\r\nexport class ElementActiveService {\r\n private currentActiveElement: HTMLElement | null = null;\r\n private elementsClickedRegister: HTMLElement[] = [];\r\n setActiveElement(element: HTMLElement, classActiveName: string) {\r\n this.deactivateElementsOtherThanOneClicked(classActiveName,element);\r\n\r\n this.currentActiveElement = element;\r\n this.currentActiveElement.classList.add(classActiveName);\r\n\r\n if(!this.elementsClickedRegister.includes(element)){\r\n this.elementsClickedRegister.push(element);\r\n }\r\n }\r\n\r\n private deactivateElementsOtherThanOneClicked(classActiveName: string, excludeElement: HTMLElement) {\r\n this.elementsClickedRegister.forEach(element => {\r\n if (element !== excludeElement) {\r\n element.classList.remove(classActiveName);\r\n }\r\n });\r\n}\r\n}\r\n","import {\r\n Directive,\r\n ElementRef,\r\n HostListener,\r\n Input,\r\n Renderer2,\r\n } from '@angular/core';\r\nimport { ElementActiveService } from './element-active.service';\r\n \r\n @Directive({\r\n selector: '[appElementActive]',\r\n standalone: true,\r\n })\r\n export class ElementActiveDirective {\r\n @Input() activeClass:string = \"active\"\r\n constructor(\r\n private el: ElementRef,\r\n private render: Renderer2,\r\n private elementService: ElementActiveService\r\n ) {}\r\n @HostListener('click') onClick() {\r\n this.elementService.setActiveElement(this.el.nativeElement,this.activeClass);\r\n this.render.addClass(this.el.nativeElement, this.activeClass)\r\n }\r\n }\r\n ","export enum ElementStatusType{\r\n SHOW,\r\n HIDDEN,\r\n DEFAULT\r\n}","import { Injectable, signal } from '@angular/core';\r\nimport { ElementStatusType } from './types/element_status-type';\r\n\r\n/**\r\n * Service to manage the state and classes of HTML elements,\r\n * used in menus and buttons to show or hide content.\r\n *\r\n */\r\n@Injectable()\r\nexport class ElementToggleService {\r\n private elementStatus = signal<ElementStatusType>(ElementStatusType.DEFAULT);\r\n private elementsHistory: HTMLElement[] = [];\r\n private currentToggleClass: string = '';\r\n\r\n /**\r\n * Gets the current state of the element.\r\n * @returns Signal with the current state.\r\n */\r\n get elementStatusToggle() {\r\n if (this.elementStatus() === ElementStatusType.DEFAULT) {\r\n console.warn(\r\n 'The element state is default. A different value should be set.'\r\n );\r\n }\r\n return this.elementStatus;\r\n }\r\n\r\n /**\r\n * Changes the state of the element to a specific one. If the state is already SHOW, it changes to HIDDEN.\r\n * @param status New state of type ElementStatusType.\r\n * @throws Error if the state is DEFAULT.\r\n */\r\n toggleByElementStatusType(status: ElementStatusType) {\r\n if (status === ElementStatusType.DEFAULT) {\r\n throw Error('The element state cannot be default.');\r\n }\r\n if (\r\n this.elementStatus() === ElementStatusType.SHOW &&\r\n status === ElementStatusType.SHOW\r\n ) {\r\n this.elementStatus.set(ElementStatusType.HIDDEN);\r\n } else {\r\n this.elementStatus.set(status);\r\n }\r\n }\r\n\r\n /**\r\n * Toggles a CSS class on an element and saves it in the history.\r\n * @param element HTML element to toggle the class on.\r\n * @param className Name of the class to toggle.\r\n * @throws Error if the class name is null or empty.\r\n */\r\n toggleByClassName(element: HTMLElement, className: string) {\r\n if (!className.trim()) {\r\n throw Error('The class name cannot be null or empty.');\r\n }\r\n\r\n element.classList.toggle(className);\r\n this.currentToggleClass = className;\r\n if (!this.elementsHistory.includes(element)) {\r\n this.elementsHistory.push(element);\r\n }\r\n }\r\n\r\n /**\r\n * Removes the active class from all elements stored in the history.\r\n * @throws Error if the history is empty.\r\n */\r\n removeActiveClassToAllElements() {\r\n if (this.elementsHistory.length <= 0) {\r\n throw Error('The element history is empty.');\r\n }\r\n\r\n this.elementsHistory.forEach((element) => {\r\n element.classList.remove(this.currentToggleClass);\r\n });\r\n }\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { debounceTime, fromEvent } from 'rxjs';\r\n\r\n/**\r\n * Tailwind CSS Breakpoints:\r\n * - xs: < 640px (Extra small, below Tailwind's `sm`)\r\n * - sm: 640px (Small screens)\r\n * - md: 768px (Medium screens)\r\n * - lg: 1024px (Large screens)\r\n * - xl: 1280px (Extra large screens)\r\n * - 2xl: 1536px (2x Extra large screens)\r\n */\r\n\r\n// @Service: ScreenWidthEventService\r\n@Injectable({\r\n providedIn : 'root'\r\n})\r\nexport class ScreenWidthEventService {\r\n // @Property: Stores the current screen width\r\n private screenWidth: number = window.innerWidth;\r\n\r\n // @Property: Stores the current screen height\r\n private screenHeight: number = window.innerHeight;\r\n\r\n /**\r\n * @Method: getScreenWidth\r\n * @Description: Returns the current screen width\r\n * @Returns: number - The current screen width\r\n */\r\n public getScreenWidth(): number {\r\n return this.screenWidth;\r\n }\r\n\r\n /**\r\n * @Method: getScreenHeight\r\n * @Description: Returns the current screen height\r\n * @Returns: number - The current screen height\r\n */\r\n public getScreenHeight(): number {\r\n return this.screenHeight;\r\n }\r\n\r\n /**\r\n * @Method: executeFuncByScreenWidth\r\n * @Description: Executes a function if the screen width is less than or equal to the specified width\r\n * @Param: func - The function to execute\r\n * @Param: width - The maximum screen width to trigger the function\r\n */\r\n public executeFuncByScreenWidth(func: () => void, width: number): void {\r\n if (this.screenWidth <= width) {\r\n this.onResize(func);\r\n }\r\n }\r\n\r\n private onResize(func: () => void): void {\r\n fromEvent(window, 'resize')\r\n .pipe(debounceTime(200))\r\n .subscribe(() =>{\r\n this.screenWidth = window.innerWidth;\r\n this.screenHeight = window.innerHeight;\r\n func();\r\n })\r\n }\r\n}","/*\r\n * Public API Surface of core\r\n */\r\n\r\nexport * from './lib/element-active.directive';\r\nexport * from './lib/element-active.service';\r\nexport * from './lib/element_toggle.service';\r\nexport * from './lib/types/element_status-type'\r\nexport * from './lib/screen_width-event.service';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.ElementActiveService"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"c-code-c-code-fw.mjs","sources":["../../../projects/core/src/lib/element-active.service.ts","../../../projects/core/src/lib/element-active.directive.ts","../../../projects/core/src/lib/types/element_status-type.ts","../../../projects/core/src/lib/element_toggle.service.ts","../../../projects/core/src/lib/types/screen_width-type.ts","../../../projects/core/src/lib/screen_width-event.service.ts","../../../projects/core/src/public-api.ts","../../../projects/core/src/c-code-c-code-fw.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\n\r\n@Injectable(\r\n \r\n)\r\nexport class ElementActiveService {\r\n private currentActiveElement: HTMLElement | null = null;\r\n private elementsClickedRegister: HTMLElement[] = [];\r\n setActiveElement(element: HTMLElement, classActiveName: string) {\r\n this.deactivateElementsOtherThanOneClicked(classActiveName,element);\r\n\r\n this.currentActiveElement = element;\r\n this.currentActiveElement.classList.add(classActiveName);\r\n\r\n if(!this.elementsClickedRegister.includes(element)){\r\n this.elementsClickedRegister.push(element);\r\n }\r\n }\r\n\r\n private deactivateElementsOtherThanOneClicked(classActiveName: string, excludeElement: HTMLElement) {\r\n this.elementsClickedRegister.forEach(element => {\r\n if (element !== excludeElement) {\r\n element.classList.remove(classActiveName);\r\n }\r\n });\r\n}\r\n}\r\n","import {\r\n Directive,\r\n ElementRef,\r\n HostListener,\r\n Input,\r\n Renderer2,\r\n } from '@angular/core';\r\nimport { ElementActiveService } from './element-active.service';\r\n \r\n @Directive({\r\n selector: '[appElementActive]',\r\n standalone: true,\r\n })\r\n export class ElementActiveDirective {\r\n @Input() activeClass:string = \"active\"\r\n constructor(\r\n private el: ElementRef,\r\n private render: Renderer2,\r\n private elementService: ElementActiveService\r\n ) {}\r\n @HostListener('click') onClick() {\r\n this.elementService.setActiveElement(this.el.nativeElement,this.activeClass);\r\n this.render.addClass(this.el.nativeElement, this.activeClass)\r\n }\r\n }\r\n ","export enum ElementStatusType{\r\n SHOW,\r\n HIDDEN,\r\n DEFAULT\r\n}","import {Injectable, signal } from '@angular/core';\r\nimport { ElementStatusType } from './types/element_status-type';\r\n\r\n/**\r\n * Service to manage the state and classes of HTML elements,\r\n * used in menus and buttons to show or hide content.\r\n *\r\n */\r\n@Injectable()\r\nexport class ElementToggleService {\r\n private elementStatus = signal<ElementStatusType>(ElementStatusType.DEFAULT);\r\n private elementsHistory: HTMLElement[] = [];\r\n private currentToggleClass: string = '';\r\n /**\r\n * Gets the current state of the element.\r\n * @returns Signal with the current state.\r\n */\r\n get elementStatusToggle() {\r\n if (this.elementStatus() === ElementStatusType.DEFAULT) {\r\n console.warn(\r\n 'The element state is default. A different value should be set.'\r\n );\r\n }\r\n return this.elementStatus;\r\n }\r\n\r\n /**\r\n * Changes the state of the element to a specific one. If the state is already SHOW, it changes to HIDDEN.\r\n * @param status New state of type ElementStatusType.\r\n * @throws Error if the state is DEFAULT.\r\n */\r\n toggleByElementStatusType(status: ElementStatusType) {\r\n if (status === ElementStatusType.DEFAULT) {\r\n throw Error('The element state cannot be default.');\r\n }\r\n if (\r\n this.elementStatus() === ElementStatusType.SHOW &&\r\n status === ElementStatusType.SHOW\r\n ) {\r\n this.elementStatus.set(ElementStatusType.HIDDEN);\r\n } else {\r\n this.elementStatus.set(status);\r\n }\r\n }\r\n\r\n /**\r\n * Toggles a CSS class on an element and saves it in the history.\r\n * @param element HTML element to toggle the class on.\r\n * @param className Name of the class to toggle.\r\n * @throws Error if the class name is null or empty.\r\n */\r\n toggleByClassName(element: HTMLElement, className: string) {\r\n if (!className.trim()) {\r\n throw Error('The class name cannot be null or empty.');\r\n }\r\n\r\n element.classList.toggle(className);\r\n this.currentToggleClass = className;\r\n if (!this.elementsHistory.includes(element)) {\r\n this.elementsHistory.push(element);\r\n }\r\n }\r\n\r\n /**\r\n * Removes the active class from all elements stored in the history.\r\n * @throws Error if the history is empty.\r\n */\r\n removeActiveClassToAllElements() {\r\n if (this.elementsHistory.length <= 0) {\r\n throw Error('The element history is empty.');\r\n }\r\n\r\n this.elementsHistory.forEach((element) => {\r\n element.classList.remove(this.currentToggleClass);\r\n });\r\n }\r\n}\r\n","export enum ScreenWidthType{\r\n XS = 640,\r\n SM = 768,\r\n MD = 1024, \r\n LG = 1280,\r\n XL = 1536,\r\n XXL = 1920\r\n}","import { DestroyRef, inject, Injectable, PLATFORM_ID } from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { debounceTime, fromEvent } from 'rxjs';\r\nimport { ScreenWidthType } from './types/screen_width-type';\r\nimport { isPlatformBrowser } from '@angular/common';\r\n\r\n/**\r\n * Tailwind CSS Breakpoints:\r\n * - xs: < 640px (Extra small, below Tailwind's `sm`)\r\n * - sm: 640px (Small screens)\r\n * - md: 768px (Medium screens)\r\n * - lg: 1024px (Large screens)\r\n * - xl: 1280px (Extra large screens)\r\n * - 2xl: 1536px (2x Extra large screens)\r\n */\r\n\r\n// @Service: ScreenWidthEventService\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class ScreenWidthEventService {\r\n // @Property: Stores the current screen width\r\n private screenWidth: number = window.innerWidth;\r\n\r\n // @Property: Stores the current screen height\r\n private screenHeight: number = window.innerHeight;\r\n\r\n // @Property: Platform ID for browser/server detection\r\n private platformId = inject(PLATFORM_ID);\r\n\r\n // @Property: DestroyRef for managing subscriptions\r\n private destroyRef = inject(DestroyRef);\r\n\r\n /**\r\n * @Constructor\r\n * @Description: Initializes the screen width and height if running in a browser environment\r\n */\r\n constructor() {\r\n if (isPlatformBrowser(this.platformId)) {\r\n this.screenWidth = window.innerWidth;\r\n this.screenHeight = window.innerHeight;\r\n }\r\n }\r\n\r\n /**\r\n * @Method: getScreenWidth\r\n * @Description: Returns the current screen width\r\n * @Returns: number - The current screen width\r\n * @Throws: Error if called outside of a browser environment\r\n */\r\n public getScreenWidth(): number {\r\n if (isPlatformBrowser(this.platformId)) {\r\n return this.screenWidth;\r\n }\r\n throw new Error(\r\n 'getScreenWidth can only be called in a browser environment.'\r\n );\r\n }\r\n\r\n /**\r\n * @Method: getScreenHeight\r\n * @Description: Returns the current screen height\r\n * @Returns: number - The current screen height\r\n * @Throws: Error if called outside of a browser environment\r\n */\r\n public getScreenHeight(): number {\r\n if (isPlatformBrowser(this.platformId)) {\r\n return this.screenHeight;\r\n }\r\n throw new Error(\r\n 'getScreenHeight can only be called in a browser environment.'\r\n );\r\n }\r\n\r\n /**\r\n * @Method: executeFuncByScreenWidth\r\n * @Description: Executes a function if the screen width is less than or equal to the specified width\r\n * @Param: func - The function to execute\r\n * @Param: width - The maximum screen width to trigger the function (can be a ScreenWidthType or a number)\r\n */\r\n public executeFuncByScreenWidth(\r\n func: () => void,\r\n width: ScreenWidthType\r\n ): void;\r\n\r\n public executeFuncByScreenWidth(func: () => void, width: number): void;\r\n\r\n public executeFuncByScreenWidth(\r\n func: () => void,\r\n width: ScreenWidthType | number\r\n ): void {\r\n if (this.screenWidth <= width) {\r\n // Calls the function immediately only to pass tests, as onResize requires a browser to trigger fromEvent(window, 'resize').\r\n this.onResize(func);\r\n }\r\n }\r\n\r\n /**\r\n * @Method: onResize\r\n * @Description: Subscribes to the window resize event and executes the provided function after a debounce period\r\n * @Param: func - The function to execute on resize\r\n * @Param: debounceTimeValue - The debounce time in milliseconds (default: 200ms)\r\n * @Throws: Error if called outside of a browser environment\r\n */\r\n private onResize(func: () => void, debounceTimeValue: number = 200): void {\r\n if (isPlatformBrowser(this.platformId)) {\r\n fromEvent(window, 'resize')\r\n .pipe(\r\n debounceTime(debounceTimeValue),\r\n takeUntilDestroyed(this.destroyRef)\r\n )\r\n .subscribe(() => {\r\n this.screenWidth = window.innerWidth;\r\n this.screenHeight = window.innerHeight;\r\n func();\r\n });\r\n } else {\r\n throw new Error('onResize can only be called in a browser environment.');\r\n }\r\n }\r\n}\r\n","/*\r\n * Public API Surface of core\r\n */\r\n\r\nexport * from './lib/element-active.directive';\r\nexport * from './lib/element-active.service';\r\nexport * from './lib/element_toggle.service';\r\nexport * from './lib/types/element_status-type'\r\nexport * from './lib/types/screen_width-type';\r\nexport * from './lib/screen_width-event.service';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.ElementActiveService"],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ScreenWidthType } from './types/screen_width-type';
|
|
1
2
|
import * as i0 from "@angular/core";
|
|
2
3
|
/**
|
|
3
4
|
* Tailwind CSS Breakpoints:
|
|
@@ -11,25 +12,42 @@ import * as i0 from "@angular/core";
|
|
|
11
12
|
export declare class ScreenWidthEventService {
|
|
12
13
|
private screenWidth;
|
|
13
14
|
private screenHeight;
|
|
15
|
+
private platformId;
|
|
16
|
+
private destroyRef;
|
|
17
|
+
/**
|
|
18
|
+
* @Constructor
|
|
19
|
+
* @Description: Initializes the screen width and height if running in a browser environment
|
|
20
|
+
*/
|
|
21
|
+
constructor();
|
|
14
22
|
/**
|
|
15
23
|
* @Method: getScreenWidth
|
|
16
24
|
* @Description: Returns the current screen width
|
|
17
25
|
* @Returns: number - The current screen width
|
|
26
|
+
* @Throws: Error if called outside of a browser environment
|
|
18
27
|
*/
|
|
19
28
|
getScreenWidth(): number;
|
|
20
29
|
/**
|
|
21
30
|
* @Method: getScreenHeight
|
|
22
31
|
* @Description: Returns the current screen height
|
|
23
32
|
* @Returns: number - The current screen height
|
|
33
|
+
* @Throws: Error if called outside of a browser environment
|
|
24
34
|
*/
|
|
25
35
|
getScreenHeight(): number;
|
|
26
36
|
/**
|
|
27
37
|
* @Method: executeFuncByScreenWidth
|
|
28
38
|
* @Description: Executes a function if the screen width is less than or equal to the specified width
|
|
29
39
|
* @Param: func - The function to execute
|
|
30
|
-
* @Param: width - The maximum screen width to trigger the function
|
|
40
|
+
* @Param: width - The maximum screen width to trigger the function (can be a ScreenWidthType or a number)
|
|
31
41
|
*/
|
|
42
|
+
executeFuncByScreenWidth(func: () => void, width: ScreenWidthType): void;
|
|
32
43
|
executeFuncByScreenWidth(func: () => void, width: number): void;
|
|
44
|
+
/**
|
|
45
|
+
* @Method: onResize
|
|
46
|
+
* @Description: Subscribes to the window resize event and executes the provided function after a debounce period
|
|
47
|
+
* @Param: func - The function to execute on resize
|
|
48
|
+
* @Param: debounceTimeValue - The debounce time in milliseconds (default: 200ms)
|
|
49
|
+
* @Throws: Error if called outside of a browser environment
|
|
50
|
+
*/
|
|
33
51
|
private onResize;
|
|
34
52
|
static ɵfac: i0.ɵɵFactoryDeclaration<ScreenWidthEventService, never>;
|
|
35
53
|
static ɵprov: i0.ɵɵInjectableDeclaration<ScreenWidthEventService>;
|
package/package.json
CHANGED
package/public-api.d.ts
CHANGED
|
@@ -2,4 +2,5 @@ export * from './lib/element-active.directive';
|
|
|
2
2
|
export * from './lib/element-active.service';
|
|
3
3
|
export * from './lib/element_toggle.service';
|
|
4
4
|
export * from './lib/types/element_status-type';
|
|
5
|
+
export * from './lib/types/screen_width-type';
|
|
5
6
|
export * from './lib/screen_width-event.service';
|