{"_id":"@duxor/ngx-fullscreen-directive","name":"@duxor/ngx-fullscreen-directive","dist-tags":{"latest":"18.0.0"},"versions":{"18.0.0":{"name":"@duxor/ngx-fullscreen-directive","version":"18.0.0","peerDependencies":{"@angular/common":">=18.0.0","@angular/core":">=18.0.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"description":"Displays a container in full screen mode","main":"src/public-api.ts","repository":{"type":"git","url":"git+https://github.com/duxor/ngx-fullscreen-directive.git"},"keywords":["angular","fullscreen","full","screen"],"author":{"name":"ChepteaCatalin"},"license":"MIT","module":"fesm2022/duxor-ngx-fullscreen-directive.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/duxor-ngx-fullscreen-directive.mjs"}},"_id":"@duxor/ngx-fullscreen-directive@18.0.0","bugs":{"url":"https://github.com/duxor/ngx-fullscreen-directive/issues"},"homepage":"https://github.com/duxor/ngx-fullscreen-directive#readme","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-dkascYvPrds8Ak3ienmCZP1iZ8dINWKgVwbcVtJKTf3S0FKrfP3MIubomLhYMd7lzT6rYoxqIhYDsRG/RnWXdw==","shasum":"01f330a586dca6a2777746e319068061214bb589","tarball":"https://registry.npmjs.org/@duxor/ngx-fullscreen-directive/-/ngx-fullscreen-directive-18.0.0.tgz","fileCount":8,"unpackedSize":16659,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/6xaYFEZLp06BsxletDkgH88LfUJdlgfMsM2nz0a9qAiAwvpSspJkshaqNpbdqp4hGfOdu5l/Np7Xr1qnK6637ow=="}]},"_npmUser":{"name":"duxor","email":"dullle@live.com"},"directories":{},"maintainers":[{"name":"duxor","email":"dullle@live.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-fullscreen-directive_18.0.0_1733920885492_0.9761435783204191"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-11T12:41:25.381Z","18.0.0":"2024-12-11T12:41:25.659Z","modified":"2024-12-11T12:41:25.969Z"},"maintainers":[{"name":"duxor","email":"dullle@live.com"}],"description":"Displays a container in full screen mode","homepage":"https://github.com/duxor/ngx-fullscreen-directive#readme","keywords":["angular","fullscreen","full","screen"],"repository":{"type":"git","url":"git+https://github.com/duxor/ngx-fullscreen-directive.git"},"author":{"name":"ChepteaCatalin"},"bugs":{"url":"https://github.com/duxor/ngx-fullscreen-directive/issues"},"license":"MIT","readme":"# Angular full screen directive\n\nDisplays a container in full screen mode. Requires Angular version >= 18.0.0.\n\n## Usage:\n\n- `npm i @duxor/ngx-fullscreen-directive`\n\n- Import `FullScreenDirective` in a `@NgModule`\n\n- Add the directive to the container which needs to be maximized\n\n## Toggling full screen from template\n\n```html\n<!-- container to be displayed in the full screen mode -->\n<element fullScreen #fullScreen=\"fullScreen\"> ... </element>\n\n...\n\n<!-- element which triggers the full screen mode -->\n<element (click)=\"fullScreen.openFullScreen()\"></element>\n\n<!-- OPTIONAL: element which will trigger exiting from the full screen mode -->\n<element (click)=\"fullScreen.closeFullScreen()\"></element>\n```\n\n## Specifying custom styles for the maximized container\n\nYou can define custom styles to the container while it is displayed in full screen mode by sending an object of type `CSSStyleDeclaration` to the `fullScreenCtrStyle` input property of the directive. These styles will be rolled-back after the full screen mode is exited:\n\n```typescript\ncustomStyles = {\n  /*your styles*/\n} as CSSStyleDeclaration;\n```\n\n```html\n<!-- container to be displayed in the full screen mode -->\n<element fullScreen [fullScreenCtrStyle]=\"customStyles\"> ... </element>\n```\n\n## Check if full screen is toggled on\n\nYou can handle `fullScreenEnabled` event which notifies whether the full screen mode is toggled on.\n\n```html\n<!-- container to be displayed in the full screen mode -->\n<element fullScreen (fullScreenEnabled)=\"onFullScreenToggle($event)\">\n  ...\n</element>\n```\n\n```typescript\n  onFullScreenToggle(enabled: boolean) {\n\n  }\n```\n\n## Calling `openFullScreen()` and `closeFullScreen()` from component .ts file\n\nBy handling `fullScreenInit` event, you get access to the `openFullScreen()` and `closeFullScreen()` directive functions into your component's .ts file\n\n```html\n<!-- container to be displayed in the full screen mode -->\n<element fullScreen (fullScreenInit)=\"onFullScreenInit($event)\"> ... </element>\n```\n\n```typescript\nonFullScreenInit(instance: FullScreenInstance) {\n    this._fullScreenInstance = instance\n}\n\n...\n\n//toggle on full screen\nthis._fullScreenInstance.openFullScreen();\n\n//toggle off full screen\nthis._fullScreenInstance.closeFullScreen();\n```\n","readmeFilename":"README.md"}