@wamlib/ngx-screen-size-reporter 1.0.2 → 1.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.
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
2
1
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { InjectionToken, inject, computed, Injectable } from '@angular/core';
|
|
2
|
+
import { InjectionToken, makeEnvironmentProviders, inject, computed, Injectable } from '@angular/core';
|
|
3
|
+
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
4
4
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
5
5
|
|
|
6
6
|
const NGX_SCREEN_SIZE_BREAKPOINT_ENUM = {
|
|
@@ -21,6 +21,17 @@ const NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS = {
|
|
|
21
21
|
};
|
|
22
22
|
const NGX_SCREEN_SIZE_CONFIG = new InjectionToken('NGX_SCREEN_SIZE_CONFIG');
|
|
23
23
|
|
|
24
|
+
function provideScreenSizeReporter(breakpoints) {
|
|
25
|
+
return makeEnvironmentProviders([
|
|
26
|
+
{
|
|
27
|
+
provide: NGX_SCREEN_SIZE_CONFIG,
|
|
28
|
+
useValue: {
|
|
29
|
+
breakpoints: { ...NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS, ...breakpoints }
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
]);
|
|
33
|
+
}
|
|
34
|
+
|
|
24
35
|
/** Service that emits whether the screen size is small or large. */
|
|
25
36
|
class ScreenSizeReporter {
|
|
26
37
|
#breakpointObserver = inject(BreakpointObserver);
|
|
@@ -60,5 +71,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
60
71
|
* Generated bundle index. Do not edit.
|
|
61
72
|
*/
|
|
62
73
|
|
|
63
|
-
export { ScreenSizeReporter };
|
|
74
|
+
export { NGX_SCREEN_SIZE_BREAKPOINT_ENUM, NGX_SCREEN_SIZE_CONFIG, NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS, ScreenSizeReporter, provideScreenSizeReporter };
|
|
64
75
|
//# sourceMappingURL=wamlib-ngx-screen-size-reporter.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"wamlib-ngx-screen-size-reporter.mjs","sources":["../../../projects/ngx-screen-size-reporter/src/lib/ngx-screen-size.ts","../../../projects/ngx-screen-size-reporter/src/lib/ngx-screen-size-reporter.ts","../../../projects/ngx-screen-size-reporter/src/public-api.ts","../../../projects/ngx-screen-size-reporter/src/wamlib-ngx-screen-size-reporter.ts"],"sourcesContent":["import {InjectionToken} from '@angular/core';\n\nexport const NGX_SCREEN_SIZE_BREAKPOINT_ENUM = {\n SMALL: 'small',\n MEDIUM: 'medium',\n LARGE: 'large',\n SMALL_LANDSCAPE: 'smallLandscape',\n MEDIUM_LANDSCAPE: 'mediumLandscape',\n LARGE_LANDSCAPE: 'largeLandscape'\n} as const satisfies Record<string, string>;\n\nexport type NgxScreenSizeBreakpoint = (typeof NGX_SCREEN_SIZE_BREAKPOINT_ENUM)[keyof typeof NGX_SCREEN_SIZE_BREAKPOINT_ENUM];\n\nexport type NgxScreenSizeBreakpointMap = { [K in NgxScreenSizeBreakpoint]: string };\n\nexport interface NgxScreenSizeConfig {\n breakpoints: NgxScreenSizeBreakpointMap;\n}\n\nexport const NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS = {\n [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL]: '(max-width: 576px)',\n [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.MEDIUM]: '(min-width: 577px) and (max-width: 991px)',\n [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.LARGE]: '(min-width: 992px)',\n [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL_LANDSCAPE]: '(max-width: 936px) and (orientation: landscape)',\n [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.MEDIUM_LANDSCAPE]: '(min-width: 937px) and (max-width: 1297px) and (orientation: landscape)',\n [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.LARGE_LANDSCAPE]: '(min-width: 1298px) and (orientation: landscape)',\n} satisfies NgxScreenSizeBreakpointMap;\n\n\nexport const NGX_SCREEN_SIZE_CONFIG = new InjectionToken<NgxScreenSizeConfig>('NGX_SCREEN_SIZE_CONFIG');\n","import { BreakpointObserver } from \"@angular/cdk/layout\";\nimport {Injectable, inject, computed} from \"@angular/core\";\nimport {toSignal} from '@angular/core/rxjs-interop';\nimport {\n NGX_SCREEN_SIZE_BREAKPOINT_ENUM, NGX_SCREEN_SIZE_CONFIG,\n NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS,\n NgxScreenSizeBreakpoint\n} from './ngx-screen-size';\n\n/** Service that emits whether the screen size is small or large. */\n@Injectable({\n providedIn: 'root',\n})\nexport class ScreenSizeReporter {\n\n #breakpointObserver = inject(BreakpointObserver);\n\n #config = inject(NGX_SCREEN_SIZE_CONFIG, { optional: true }) ?? {\n breakpoints: NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS\n };\n\n #state = toSignal(\n this.#breakpointObserver.observe(Object.values(this.#config.breakpoints)),\n {requireSync: true}\n );\n\n readonly activeBreakpoint = computed(() => {\n const breakpoints = this.#state().breakpoints;\n const match = Object.entries(this.#config.breakpoints).find(([_, query]) => breakpoints[query]);\n return (match ? match[0] : NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL) as NgxScreenSizeBreakpoint;\n });\n\n readonly isSmallScreen = computed(() =>\n this.activeBreakpoint() === NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL ||\n this.activeBreakpoint() === NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL_LANDSCAPE\n );\n\n readonly isLargeScreen = computed(() => !this.isSmallScreen());\n\n readonly screenState = computed(() => ({\n label: this.activeBreakpoint(),\n isSmall: this.isSmallScreen(),\n isLarge: this.isLargeScreen(),\n allBreakpoints: this.#state().breakpoints\n }));\n\n}\n","/*\n * Public API Surface of ngx-screen-size-reporter\n */\n\nexport * from './lib/ngx-screen-size-reporter';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAEO,MAAM,+BAA+B,GAAG;AAC7C,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,eAAe,EAAE,gBAAgB;AACjC,IAAA,gBAAgB,EAAE,iBAAiB;AACnC,IAAA,eAAe,EAAE
|
|
1
|
+
{"version":3,"file":"wamlib-ngx-screen-size-reporter.mjs","sources":["../../../projects/ngx-screen-size-reporter/src/lib/ngx-screen-size.ts","../../../projects/ngx-screen-size-reporter/src/lib/ngx-screen-size.provider.ts","../../../projects/ngx-screen-size-reporter/src/lib/ngx-screen-size-reporter.ts","../../../projects/ngx-screen-size-reporter/src/public-api.ts","../../../projects/ngx-screen-size-reporter/src/wamlib-ngx-screen-size-reporter.ts"],"sourcesContent":["import {InjectionToken} from '@angular/core';\n\nexport const NGX_SCREEN_SIZE_BREAKPOINT_ENUM = {\n SMALL: 'small',\n MEDIUM: 'medium',\n LARGE: 'large',\n SMALL_LANDSCAPE: 'smallLandscape',\n MEDIUM_LANDSCAPE: 'mediumLandscape',\n LARGE_LANDSCAPE: 'largeLandscape'\n} as const satisfies Record<string, string>;\n\nexport type NgxScreenSizeBreakpoint = (typeof NGX_SCREEN_SIZE_BREAKPOINT_ENUM)[keyof typeof NGX_SCREEN_SIZE_BREAKPOINT_ENUM];\n\nexport type NgxScreenSizeBreakpointMap = { [K in NgxScreenSizeBreakpoint]: string };\n\nexport interface NgxScreenSizeConfig {\n breakpoints: NgxScreenSizeBreakpointMap;\n}\n\nexport const NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS = {\n [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL]: '(max-width: 576px)',\n [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.MEDIUM]: '(min-width: 577px) and (max-width: 991px)',\n [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.LARGE]: '(min-width: 992px)',\n [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL_LANDSCAPE]: '(max-width: 936px) and (orientation: landscape)',\n [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.MEDIUM_LANDSCAPE]: '(min-width: 937px) and (max-width: 1297px) and (orientation: landscape)',\n [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.LARGE_LANDSCAPE]: '(min-width: 1298px) and (orientation: landscape)',\n} satisfies NgxScreenSizeBreakpointMap;\n\n\nexport const NGX_SCREEN_SIZE_CONFIG = new InjectionToken<NgxScreenSizeConfig>('NGX_SCREEN_SIZE_CONFIG');\n","import { makeEnvironmentProviders, EnvironmentProviders } from '@angular/core';\nimport {\n NGX_SCREEN_SIZE_CONFIG,\n NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS,\n NgxScreenSizeBreakpointMap\n} from './ngx-screen-size';\n\nexport function provideScreenSizeReporter(breakpoints?: Partial<NgxScreenSizeBreakpointMap>): EnvironmentProviders {\n return makeEnvironmentProviders([\n {\n provide: NGX_SCREEN_SIZE_CONFIG,\n useValue: {\n breakpoints: { ...NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS, ...breakpoints }\n }\n }\n ]);\n}\n","import { BreakpointObserver } from \"@angular/cdk/layout\";\nimport {Injectable, inject, computed} from \"@angular/core\";\nimport {toSignal} from '@angular/core/rxjs-interop';\nimport {\n NGX_SCREEN_SIZE_BREAKPOINT_ENUM, NGX_SCREEN_SIZE_CONFIG,\n NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS,\n NgxScreenSizeBreakpoint\n} from './ngx-screen-size';\n\n/** Service that emits whether the screen size is small or large. */\n@Injectable({\n providedIn: 'root',\n})\nexport class ScreenSizeReporter {\n\n #breakpointObserver = inject(BreakpointObserver);\n\n #config = inject(NGX_SCREEN_SIZE_CONFIG, { optional: true }) ?? {\n breakpoints: NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS\n };\n\n #state = toSignal(\n this.#breakpointObserver.observe(Object.values(this.#config.breakpoints)),\n {requireSync: true}\n );\n\n readonly activeBreakpoint = computed(() => {\n const breakpoints = this.#state().breakpoints;\n const match = Object.entries(this.#config.breakpoints).find(([_, query]) => breakpoints[query]);\n return (match ? match[0] : NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL) as NgxScreenSizeBreakpoint;\n });\n\n readonly isSmallScreen = computed(() =>\n this.activeBreakpoint() === NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL ||\n this.activeBreakpoint() === NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL_LANDSCAPE\n );\n\n readonly isLargeScreen = computed(() => !this.isSmallScreen());\n\n readonly screenState = computed(() => ({\n label: this.activeBreakpoint(),\n isSmall: this.isSmallScreen(),\n isLarge: this.isLargeScreen(),\n allBreakpoints: this.#state().breakpoints\n }));\n\n}\n","/*\n * Public API Surface of ngx-screen-size-reporter\n */\n\nexport * from './lib/ngx-screen-size.provider';\nexport * from './lib/ngx-screen-size';\nexport * from './lib/ngx-screen-size-reporter';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { InjectionToken, EnvironmentProviders } from '@angular/core';
|
|
2
3
|
|
|
3
4
|
declare const NGX_SCREEN_SIZE_BREAKPOINT_ENUM: {
|
|
4
5
|
readonly SMALL: "small";
|
|
@@ -9,6 +10,23 @@ declare const NGX_SCREEN_SIZE_BREAKPOINT_ENUM: {
|
|
|
9
10
|
readonly LARGE_LANDSCAPE: "largeLandscape";
|
|
10
11
|
};
|
|
11
12
|
type NgxScreenSizeBreakpoint = (typeof NGX_SCREEN_SIZE_BREAKPOINT_ENUM)[keyof typeof NGX_SCREEN_SIZE_BREAKPOINT_ENUM];
|
|
13
|
+
type NgxScreenSizeBreakpointMap = {
|
|
14
|
+
[K in NgxScreenSizeBreakpoint]: string;
|
|
15
|
+
};
|
|
16
|
+
interface NgxScreenSizeConfig {
|
|
17
|
+
breakpoints: NgxScreenSizeBreakpointMap;
|
|
18
|
+
}
|
|
19
|
+
declare const NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS: {
|
|
20
|
+
small: string;
|
|
21
|
+
medium: string;
|
|
22
|
+
large: string;
|
|
23
|
+
smallLandscape: string;
|
|
24
|
+
mediumLandscape: string;
|
|
25
|
+
largeLandscape: string;
|
|
26
|
+
};
|
|
27
|
+
declare const NGX_SCREEN_SIZE_CONFIG: InjectionToken<NgxScreenSizeConfig>;
|
|
28
|
+
|
|
29
|
+
declare function provideScreenSizeReporter(breakpoints?: Partial<NgxScreenSizeBreakpointMap>): EnvironmentProviders;
|
|
12
30
|
|
|
13
31
|
/** Service that emits whether the screen size is small or large. */
|
|
14
32
|
declare class ScreenSizeReporter {
|
|
@@ -28,4 +46,5 @@ declare class ScreenSizeReporter {
|
|
|
28
46
|
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ScreenSizeReporter>;
|
|
29
47
|
}
|
|
30
48
|
|
|
31
|
-
export { ScreenSizeReporter };
|
|
49
|
+
export { NGX_SCREEN_SIZE_BREAKPOINT_ENUM, NGX_SCREEN_SIZE_CONFIG, NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS, ScreenSizeReporter, provideScreenSizeReporter };
|
|
50
|
+
export type { NgxScreenSizeBreakpoint, NgxScreenSizeBreakpointMap, NgxScreenSizeConfig };
|