🐞 Bug report

Description

When the PAGE_VISIBILITY stream has more than one subscriber, all subscribers after the first will not get a value until the stream fires again (when leaving and re-entering the page).

Reproduction

In the below current behavior demos, notice how only the first subscriber gets a value initially, but when using shareReplay in the fixed demos, all subscribers get the value.

Current Behavior Demos

• current behavior mocked: https://stackblitz.com/edit/typescript-1uofs1?devtoolsheight=50&file=index.ts
• current behavior implementation: https://stackblitz.com/edit/typescript-1uofs1?devtoolsheight=50&file=index.ts

Expected behavior

Any late subscriber after the first will get an emission.

Fixed Demos:

• fix mocked: https://stackblitz.com/edit/typescript-fgswgs?file=index.ts
• fix implementation: https://stackblitz.com/edit/typescript-bxeqlt?devtoolsheight=50&file=package.json,index.ts

Versions

• OS: Any
• Browser Any
• Angular: Any with this library

Additional context

I created a pull request that links to this issue here. Also happy Friday!

🚀 Feature request

Is your feature request related to a problem?

I'm always frustrated when I need to use the Notification API and PushManager API in the ng-web-apis. The library currently lacks support for these APIs. This forces me to make some workarounds, using non-ideal techniques.

Describe the solution you'd like

I'd like to request the addition of support for the Notification API and PushManager API in the library. It would be cool if these APIs could be accessed through an injectable token in the constructor like a NAVIGATOR or a WINDOW, that allows for more maintainable code.

Describe alternatives you've considered

I'm currently using the makeshift approach:

constructor(@Inject(WINDOW) private readonly window: Window) {}

//  acces PushManager API
this.window['PushManager']

// check Notification API support
windowNotification = 'Notification' in this.window || this.window['Notification'];

However, this workaround bypasses the advantages of dependency injection and can lead to less maintainable code.

🚀 Feature request

Could we get mocks like how you've provided it in your universal package? Ref - link

import '@ng-web-apis/universal/mocks';

🐞 Bug report

Description

Reproduction

http://www.stackblitz.com/...

Expected behavior

Versions

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Angular [e.g. 8]

Additional context

🐞 Bug report

Description

Updating a project using @ng-web-apis/common from TypeScript 4.3 to 4.4 generates the following transpilation errors:

Error: node_modules/network-information-types/dist-types/index.d.ts:10:12 - error TS2687: All declarations of 'connection' must have identical modifiers.
10   readonly connection?: NetworkInformation;
              ~~~~~~~~~~

Error: node_modules/network-information-types/dist-types/index.d.ts:14:6 - error TS2300: Duplicate identifier 'ConnectionType'.
14 type ConnectionType =
        ~~~~~~~~~~~~~~
  node_modules/typescript/lib/lib.dom.d.ts:18813:6
    18813 type ConnectionType = "bluetooth" | "cellular" | "ethernet" | "mixed" | "none" | "other" | "unknown" | "wifi";
               ~~~~~~~~~~~~~~
    'ConnectionType' was also declared here.

Error: node_modules/network-information-types/dist-types/index.d.ts:36:12 - error TS2687: All declarations of 'type' must have identical modifiers.
36   readonly type?: ConnectionType;
              ~~~~

Error: node_modules/typescript/lib/lib.dom.d.ts:10461:14 - error TS2687: All declarations of 'connection' must have identical modifiers.
10461     readonly connection: NetworkInformation;
                   ~~~~~~~~~~

Error: node_modules/typescript/lib/lib.dom.d.ts:10482:14 - error TS2687: All declarations of 'type' must have identical modifiers.
10482     readonly type: ConnectionType;
                   ~~~~

Error: node_modules/typescript/lib/lib.dom.d.ts:18813:6 - error TS2300: Duplicate identifier 'ConnectionType'.
18813 type ConnectionType = "bluetooth" | "cellular" | "ethernet" | "mixed" | "none" | "other" | "unknown" | "wifi";
           ~~~~~~~~~~~~~~
  node_modules/network-information-types/dist-types/index.d.ts:14:6
    14 type ConnectionType =
            ~~~~~~~~~~~~~~
    'ConnectionType' was also declared here.

Expected behavior

Transpilation should occur without error.

Versions

• OS: MacOS 11.5
• Browser: N/A
• Angular: 12.2.5
• TypeScript: 4.4.2
• ng-web-apis: 1.12.0

Additional context

• TypeScript 4.4 libdom changes
• Adding skipLibCheck: true to tsconfig.json prevents the transpilation errors.

Description

Upgrade to Angular 16

🚀 Feature request

Is your feature request related to a problem?

Is there any plan to support angular 11 ?

Describe the solution you'd like

Describe alternatives you've considered

Additional context

🚀 Feature request

Is your feature request related to a problem?

No

Describe the solution you'd like

Republish library with Angular 13 as dependency. Currently, Angular CLI takes additional time to compile the library before starting an application
...Compiling @ng-web-apis/common : es2015 as esm2015

Describe alternatives you've considered

NA

Additional context

NA

Please provide GitHub releases so that it's easier to watch when there are new releases

🐞 Bug report

Description

Tried using ng-web-apis / common to fix global object issues when using Angular Universal (SSR), but after injecting WINDOW into the component that I'm using, I still faced the error ERROR TypeError: this.window.scrollTo is not a function

Expected behavior

I'm expecting that the error will not prompt and able to use global objects on Angular universal
.

Versions

• OS: macOS]
• Browser Chrome
• Angular v13

Additional context

content in component:
export class MainComponent { constructor( @Inject(WINDOW) readonly window: Window, @Inject(LOCAL_STORAGE) readonly localStorage: Storage, private modal_service: ModalService ) {} onActivate() { this.window.scrollTo(0, 0); }

Error:

ERROR TypeError: this.window.scrollTo is not a function at MainComponent.onActivate (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:621:21) at MainComponent_Template_router_outlet_activate_3_listener (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:644:159) at executeListenerWithErrorHandling (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:161451:16) at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:161489:22) at ConsumerObserver.__webpack_modules__.3317.ConsumerObserver.next (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:86077:33) at SafeSubscriber.__webpack_modules__.3317.Subscriber._next (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:86044:26) at SafeSubscriber.__webpack_modules__.3317.Subscriber.next (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:86015:18) at /Users/syahiruddin/RVI/app/dist/functions/server/main.js:85840:34 at Object.errorContext (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:94538:9) at EventEmitter_.__webpack_modules__.3125.Subject.next (/Users/syahiruddin/RVI/app/dist/functions/server/main.js:85832:24)

Description

Investigate more about Chrome Android and iphone.

There are examples with buttons and inline replies here, not mentioned on MDN:
https://web.dev/push-notifications-display-a-notification/

More comments:

• #123 (comment)

🚀 Feature request

Is your feature request related to a problem?

Similar to the already available PAGE_VISIBILITY token for the document visibility state changed events, I also have a need for the focus and blur events on the window object. Since the page visibility might not change state when the user switches to another application or space (the macOs terminology for virtual desktops). When that happens, the window blur/focus events do get triggered

Describe the solution you'd like

Similar to the page visibility token, a token that is created from the two events on the window object (blur and focus) emitting true upon focus and false upon blur

Describe alternatives you've considered

Currently, I have this stream created in my a project, but realise this might be very useful for other to also have available.

Additional context

Be aware when developing this token, that if you have the browser's devtools open, the devtools most probably have focus. This means, the actual window object will never receive the focus (or blur) event when you switch to another app or space to test the behaviour. It took me a while to find out/realise this.

Example implementation

factory: () => {
  const windowRef = inject(WINDOW);

  return merge(
    fromEvent(windowRef, 'focus'),
    fromEvent(windowRef, 'blur'),
  ).pipe(
    startWith({ type: 'focus' }),
    map(({ type }) => type === 'focus'),
    distinctUntilChanged(),
    share(),
  );
}

Description

#117

🐞 Bug report

Description

I get this error when running: npm run dev:ssr

ERROR TypeError: requestAnimationFrame is not a function
at subscriber (./node_modules/@ng-web-apis/common/fesm2015/ng-web-apis-common.js:25:18)
at _trySubscribe (./node_modules/rxjs/dist/cjs/internal/Observable.js:41:25)
at cb (./node_modules/rxjs/dist/cjs/internal/Observable.js:35:31)
at errorContext (./node_modules/rxjs/dist/cjs/internal/util/errorContext.js:22:9)
at subscribe (./node_modules/rxjs/dist/cjs/internal/Observable.js:26:24)
at init (./node_modules/rxjs/dist/cjs/internal/operators/share.js:83:47)
at call (./node_modules/rxjs/dist/cjs/internal/util/lift.js:14:28)
at cb (./node_modules/rxjs/dist/cjs/internal/Observable.js:30:30)
at errorContext (./node_modules/rxjs/dist/cjs/internal/util/errorContext.js:22:9)
at Observable.Observable.subscribe (./node_modules/rxjs/dist/cjs/internal/Observable.js:26:24)

Versions

• OS: [e.g. iOS] Windows 10
• Browser [e.g. chrome, safari] Chrome
• Angular [e.g. 8] 16.0.0-next.7

🐞 Bug report

Description

Can't start my Angular (v15) app due to unknown type 'SpeechRecognition'

Versions

• Angular 15

Additional context

🚀 Feature request

Is your feature request related to a problem?

Navigator.mediaDevices is used quite frequently. Thus, a custom token has to be created every time for every project.

Describe the solution you'd like

Needs a token for navigator.mediaDevices

Describe alternatives you've considered

Creating a custom token for navigator.mediaDevices

1. why I need LOCAL_STORAGE? instead of normal using localStorage in code?
2. why you create only LOCAL_STORAGE and not SESSION_STORAGE too?

• common
• universal
• audio
• canvas
• geolocation
• intersection observer
• midi
• mutation observer
• payment request
• permissions
• resize observer
• speech
• storage
• workers

Playground Link

No response

Description

I have the same problem but angular version 17
#116

. any solution?

Version:

"@ng-web-apis/common": "^3.0.6",
"@ng-web-apis/speech": "^3.0.7",
"@angular/common": "17.0.2",
"@angular/compiler": "17.0.2",
"@angular/core": "17.0.2",

Angular version

17.0.2

Taiga UI version

3.0.6

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

🐞 Bug report

Description

When building my project under Angular version I get the following error:

ERROR in node_modules/@ng-web-apis/common/tokens/css.d.ts:4:14 - error TS2709: Cannot use namespace 'CSS' as a type.
    
    4         CSS: CSS;
                   ~~~
    node_modules/@ng-web-apis/common/tokens/css.d.ts:7:42 - error TS2709: Cannot use namespace 'CSS' as a type.
    
    7 export declare const CSS: `InjectionToken<CSS>;

Reproduction

Build project under Angular version 10

Expected behavior

No error should be shown

Versions

• OS: Linux
• Browser: Chrome
• Angular 10

Additional context

🐞 Bug report

Description

Upgrading to Angular 12 is causing definition file errors...

Error: node_modules/@ng-web-apis/common/tokens/network-information.d.ts:1:23 - error TS2688: Cannot find type definition file for 'network-information-types'.

1 /// <reference types="network-information-types" />
                        ~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@ng-web-apis/common/tokens/network-information.d.ts:3:58 - error TS2304: Cannot find name 'NetworkInformation'.

3 export declare const NETWORK_INFORMATION: InjectionToken<NetworkInformation | null>;
                                                           ~~~~~~~~~~~~~~~~~~

Reproduction

1. Update to Angular 12 via the recommended steps
2. Watch the fireworks 😄

Versions

• OS: MacOS BigSur
• Browser: Chrome
• Angular 12

Playground Link

No response

Description

After updating @ng-web-apis/permissions from 3.0.3 to 3.1.1 in my project, I'm getting the following errors when compiling the project:

Error: node_modules/@ng-web-apis/permissions/utils/permissions-predicates.d.ts:1:85 - error TS2552: Cannot find name 'PushPermissionState'. Did you mean 'PermissionState'?

1 export declare function isGranted(state: PermissionState | NotificationPermission | PushPermissionState): state is 'granted';
                                                                                      ~~~~~~~~~~~~~~~~~~~


Error: node_modules/@ng-web-apis/permissions/utils/permissions-predicates.d.ts:2:84 - error TS2552: Cannot find name 'PushPermissionState'. Did you mean 'PermissionState'?

2 export declare function isDenied(state: PermissionState | NotificationPermission | PushPermissionState): state is 'denied';
                                                                                     ~~~~~~~~~~~~~~~~~~~


Error: node_modules/@ng-web-apis/permissions/utils/permissions-predicates.d.ts:4:55 - error TS2552: Cannot find name 'PushPermissionState'. Did you mean 'PermissionState'?

4 export declare function isPrompt(s: PermissionState | PushPermissionState): s is 'prompt';
                                                        ~~~~~~~~~~~~~~~~~~~

I'm using TypeScript 5.1.6. PushPermissionState type has been removed from TypeScript in microsoft/TypeScript@4e689bc.

Angular version

16.2.7

Taiga UI version

n/a

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

🚀 Feature request

provides access to Screen api

In some cases, i need work with https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation api

Can i create this token?

🚀 Feature request

Is your feature request related to a problem?

Describe the solution you'd like

npm: npm install @ng-web-apis/common --save
yarn: yarn add @ng-web-apis/common
ng add: ng add @ng-web-apis/common@latest

🐞 Bug report

Description

• project demo is broken
• I try from example but not working

Reproduction

"@ng-web-apis/common": "^2.1.0",
"@ng-web-apis/geolocation": "^2.0.0",
"@ng-web-apis/storage": "^1.0.0",

@Component({
  selector: 'app-web-api',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p>
      web-api works!
    </p>
    <div *ngIf="geolocation$ | async as position">
      <span>{{position.coords.latitude}}</span>
    </div>
    <div>
      BUG: Value from storage not working
      <code *ngIf="value$ | async as store">STORAGE_EVENT: {{ store }}</code>
    </div>

  `,
  styles: [
  ]
})
export class WebApiComponent {

  readonly geolocation$ = inject(GeolocationService);
  readonly value$ = this.event$.pipe(filterByKey('tomaz'), toValue());

  constructor(
    @Inject(STORAGE_EVENT) private readonly event$: Observable<StorageEvent>,
    @Inject(LOCAL_STORAGE) private readonly storage: Storage,
    @Inject(StorageService) private readonly storageService: Storage) {}

}

Expected behavior

• to see value from storage

Versions

• OS: Windows
• Browser chrome
• Angular: 16

Additional context