@wamlib/ngx-screen-size-reporter 1.0.0

package/README.md

@@ -0,0 +1,63 @@
+# NgxScreenSizeReporter
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build ngx-screen-size-reporter
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/ngx-screen-size-reporter
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/fesm2022/wamlib-ngx-screen-size-reporter.mjs

@@ -0,0 +1,64 @@
+import { BreakpointObserver } from '@angular/cdk/layout';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, computed, Injectable } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+const NGX_SCREEN_SIZE_BREAKPOINT_ENUM = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+    SMALL_LANDSCAPE: 'smallLandscape',
+    MEDIUM_LANDSCAPE: 'mediumLandscape',
+    LARGE_LANDSCAPE: 'largeLandscape'
+};
+const NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS = {
+    [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL]: '(max-width: 576px)',
+    [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.MEDIUM]: '(min-width: 577px) and (max-width: 991px)',
+    [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.LARGE]: '(min-width: 992px)',
+    [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL_LANDSCAPE]: '(max-width: 936px) and (orientation: landscape)',
+    [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.MEDIUM_LANDSCAPE]: '(min-width: 937px) and (max-width: 1297px) and (orientation: landscape)',
+    [NGX_SCREEN_SIZE_BREAKPOINT_ENUM.LARGE_LANDSCAPE]: '(min-width: 1298px) and (orientation: landscape)',
+};
+const NGX_SCREEN_SIZE_CONFIG = new InjectionToken('NGX_SCREEN_SIZE_CONFIG');
+
+/** Service that emits whether the screen size is small or large. */
+class ScreenSizeReporter {
+    #breakpointObserver = inject(BreakpointObserver);
+    #config = inject(NGX_SCREEN_SIZE_CONFIG, { optional: true }) ?? {
+        breakpoints: NGX_SCREEN_SIZE_DEFAULT_BREAKPOINTS
+    };
+    #state = toSignal(this.#breakpointObserver.observe(Object.values(this.#config.breakpoints)), { requireSync: true });
+    activeBreakpoint = computed(() => {
+        const breakpoints = this.#state().breakpoints;
+        const match = Object.entries(this.#config.breakpoints).find(([_, query]) => breakpoints[query]);
+        return (match ? match[0] : NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL);
+    }, ...(ngDevMode ? [{ debugName: "activeBreakpoint" }] : []));
+    isSmallScreen = computed(() => this.activeBreakpoint() === NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL ||
+        this.activeBreakpoint() === NGX_SCREEN_SIZE_BREAKPOINT_ENUM.SMALL_LANDSCAPE, ...(ngDevMode ? [{ debugName: "isSmallScreen" }] : []));
+    isLargeScreen = computed(() => !this.isSmallScreen(), ...(ngDevMode ? [{ debugName: "isLargeScreen" }] : []));
+    screenState = computed(() => ({
+        label: this.activeBreakpoint(),
+        isSmall: this.isSmallScreen(),
+        isLarge: this.isLargeScreen(),
+        allBreakpoints: this.#state().breakpoints
+    }), ...(ngDevMode ? [{ debugName: "screenState" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ScreenSizeReporter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ScreenSizeReporter, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: ScreenSizeReporter, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/*
+ * Public API Surface of ngx-screen-size-reporter
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ScreenSizeReporter };
+//# sourceMappingURL=wamlib-ngx-screen-size-reporter.mjs.map

package/fesm2022/wamlib-ngx-screen-size-reporter.mjs.map

@@ -0,0 +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":"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"}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@wamlib/ngx-screen-size-reporter",
+  "version": "1.0.0",
+  "peerDependencies": {
+    "@angular/common": ">=15.0.0",
+    "@angular/core": ">=15.0.0",
+    "@angular/cdk": ">=15.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/wamlib-ngx-screen-size-reporter.mjs",
+  "typings": "types/wamlib-ngx-screen-size-reporter.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/wamlib-ngx-screen-size-reporter.d.ts",
+      "default": "./fesm2022/wamlib-ngx-screen-size-reporter.mjs"
+    }
+  }
+}

package/types/wamlib-ngx-screen-size-reporter.d.ts

@@ -0,0 +1,31 @@
+import * as _angular_core from '@angular/core';
+
+declare const NGX_SCREEN_SIZE_BREAKPOINT_ENUM: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+    readonly SMALL_LANDSCAPE: "smallLandscape";
+    readonly MEDIUM_LANDSCAPE: "mediumLandscape";
+    readonly LARGE_LANDSCAPE: "largeLandscape";
+};
+type NgxScreenSizeBreakpoint = (typeof NGX_SCREEN_SIZE_BREAKPOINT_ENUM)[keyof typeof NGX_SCREEN_SIZE_BREAKPOINT_ENUM];
+
+/** Service that emits whether the screen size is small or large. */
+declare class ScreenSizeReporter {
+    #private;
+    readonly activeBreakpoint: _angular_core.Signal<NgxScreenSizeBreakpoint>;
+    readonly isSmallScreen: _angular_core.Signal<boolean>;
+    readonly isLargeScreen: _angular_core.Signal<boolean>;
+    readonly screenState: _angular_core.Signal<{
+        label: NgxScreenSizeBreakpoint;
+        isSmall: boolean;
+        isLarge: boolean;
+        allBreakpoints: {
+            [key: string]: boolean;
+        };
+    }>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ScreenSizeReporter, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ScreenSizeReporter>;
+}
+
+export { ScreenSizeReporter };