{"_id":"@anexia/platform-tools","_rev":"6-793ca6ea1714404160698b66cde31007","name":"@anexia/platform-tools","dist-tags":{"latest":"12.0.0"},"versions":{"12.0.0":{"name":"@anexia/platform-tools","version":"12.0.0","keywords":["scss","angular","css","util","tool","screen-orientation","anexia","platform"],"author":{"name":"Sven Graziani","email":"sgraziani@anexia-it.com"},"license":"MIT","_id":"@anexia/platform-tools@12.0.0","maintainers":[{"name":"takl95","email":"laszlotakacs.95@gmail.com"},{"name":"pkrumpl","email":"pkrumpl@anexia-it.com"},{"name":"crawl","email":"icrawltogo@gmail.com"},{"name":"grazianisven","email":"sven@graziani.at"},{"name":"anx-hnezbeda","email":"hnezbeda@anexia-it.com"},{"name":"anx-astocker","email":"AStocker@anexia-it.com"}],"homepage":"https://github.com/svengraziani/platform-tools#readme","bugs":{"url":"https://github.com/svengraziani/platform-tools/issues"},"dist":{"shasum":"0179010b9efabb7fd281fd9648051780b74161a8","tarball":"https://registry.npmjs.org/@anexia/platform-tools/-/platform-tools-12.0.0.tgz","fileCount":14,"integrity":"sha512-cyN1m0WBUADzaSw6uRmZn3sWXw4JA4oYrAuDv9PZjnXhz46ih8Gs7CpyxpyK5s5jNg6oudKWihJQ4tNrKYKJUg==","signatures":[{"sig":"MEUCIFJo0uwg2K8HeNeI051+XqgVnO2+fMFoAAh2aS+x8PU2AiEApBjzdUA9ABh84o2DaEgCQnYsNrKzO9ZNoXg2hezr7L8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhzFVUCRA9TVsSAnZWagAA7kUP/1z1xeNNbWYVAlDOof+V\nn05KlOnWdqachgdHpfJi8SGqdSMoXYfI+vRzzYnjqAuKc051fL38QbU5J8Im\n3dvcW3RFhNs6q6cQK9usNt1Nc+4UFD++FbLIfbS/G5mpEYmXO+syCJZ8nqjr\nggDUx2hVf8TPJ3QIs+a5nVroz8Dg2bvw/Z/Ds/S/8ey0nKBFMknd1vCQTT9+\nFNdi45pa6NQHpe3poHBupGqLax9t5iYzCmvlL9pNbjWfCed84p7Z4KgXQuS0\nH7rAROJi8n9jSYcwCHiZMSCQKy21d/r04ZhWXAJ49GRcmFihR4kubZtjo9jL\nU7LFZcqaMIi4nxM6XAjdnQvBmPkpQhu1+E/YveorlH3x3Y9S3/nLGCwcVe8y\nEZP3v5Tm+ybToVYeHMdk+FcoVvhJoMVPIke9tSJ5sQSgRFEQSnwtV5YNr/SI\nRa1eFEmR61S0eTmlE8gQhw+ZQ6zY7Wea8+BbANmgYOQww4gw8oxBvyDXZsb+\nF1pj3qQb0yBdFYQUH/97mEEYc9Nv7fgiXHAKgKCvxy3PqcA4OQeqzIDJeXM2\nFXatwFQ8fqSZUabo18GYluumg8pWeWFBiMZumDcpZHAhvItfplDU5Wuv2ihw\naywpv2dMaN94WiDKTyKiodlq8u/s1Mfstq0E2puL3E5r7koA8RZh/kLA2I+s\nGv8r\r\n=m/YI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"bundles/anexia-platform-tools.umd.js","es2015":"fesm2015/anexia-platform-tools.js","module":"fesm2015/anexia-platform-tools.js","esm2015":"esm2015/anexia-platform-tools.js","private":false,"typings":"anexia-platform-tools.d.ts","_npmUser":{"name":"grazianisven","email":"sven@graziani.at"},"fesm2015":"fesm2015/anexia-platform-tools.js","repository":{"url":"git+https://github.com/svengraziani/platform-tools.git","type":"git"},"_npmVersion":"7.10.0","description":"Provides Ionic Framework way class mapping of current platform and orientation on the root document node ´html´ for usage inside scss or :host-context selecting.","directories":{},"sideEffects":false,"_nodeVersion":"12.14.1","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^12.2.0","@angular/common":"^12.2.0"},"_npmOperationalInternal":{"tmp":"tmp/platform-tools_12.0.0_1632325345520_0.663186163222518","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-09-22T15:42:25.476Z","modified":"2025-11-12T13:14:43.679Z","12.0.0":"2021-09-22T15:42:25.656Z"},"bugs":{"url":"https://github.com/svengraziani/platform-tools/issues"},"author":{"name":"Sven Graziani","email":"sgraziani@anexia-it.com"},"license":"MIT","homepage":"https://github.com/svengraziani/platform-tools#readme","keywords":["scss","angular","css","util","tool","screen-orientation","anexia","platform"],"repository":{"url":"git+https://github.com/svengraziani/platform-tools.git","type":"git"},"description":"Provides Ionic Framework way class mapping of current platform and orientation on the root document node ´html´ for usage inside scss or :host-context selecting.","maintainers":[{"email":"laszlotakacs.95@gmail.com","name":"takl95"},{"email":"sven@graziani.at","name":"grazianisven"},{"email":"hnezbeda@anexia-it.com","name":"anx-hnezbeda"},{"email":"AStocker@anexia-it.com","name":"anx-astocker"},{"email":"ASter@anexia-it.com","name":"anx-aster"},{"email":"valentin.gavran@icloud.com","name":"valentingavran"}],"readme":"# Platform Tools\n\nProvides Ionic Framework way class mapping of current platform and orientation on the root document node ´html´ for usage inside scss or :host-context selecting.\n\n## Usage\nSimply inject the service in your root app component and it will add classes to your document.\n```typescript\nimport {PlatformToolsService} from \"./platform-tools.service\";\n\nexport class AppComponent {\n  public constructor(\n      // ... \n    private readonly platformService: PlatformToolsService\n      // ... \n  ) {\n\n  }\n}\n\n```\nNow you're able to use `:host-context(.plt-tablet)` at Angular Component SCSS level for writing context based css,\nor use at global.scss/style.scss as selector `.plt-tablet > app-component { ... }`.\n\n### Available class selectors:\n| Selector Name | Description                              |\n|---------------|------------------------------------------|\n| plt-android       | a device running Android                 |\n| plt-desktop       | a desktop device                         |\n| plt-ios           | a device running iOS                     |\n| plt-ipad          | an iPad device                           |\n| plt-iphone        | an iPhone device                         |\n| plt-mobile        | a mobile device                          |\n| plt-mobileweb     | a web browser running in a mobile device |\n| plt-phablet       | a phablet device                         |\n| plt-pwa           | a PWA app                                |\n| plt-tablet        | a tablet device                          |\n| is-landscape        | a device with landscape orientation                          |\n| is-portrait        | a device  with portrait orientation                        |\n\n\n## Example\nInside your Angular Component Stylesheet SCSS\n```scss\n:host {\n  display: block;\n  width: 100%;\n  height: 100vh;\n}\n\n// set color of font to white on ios platform\n:host-context(.plt-ios) {\n  :host {\n    color: white;\n  }\n}\n// set background color to blue on tablet\n:host-context(.plt-tablet) {\n  :host {\n    background-color: blue;\n  }\n  \n  // set background color red if tablet and landscape\n  :host-context(.is-landscape) {\n    :host {\n      background-color: red;\n    }\n  }\n}\n\n\n```\nOr inside your style.scss / global.scss without `:host-context` since it is only\navailable inside component scss scopes.\n```\nhtml.plt-ios {\n // ... your rules\n}\n\n// or\n.plt-tablet{\n\n}\n```\n## Notes\nPlatform class mapping won't change if simply changing device emulator inside Chrome since platform evaluation is done only on boot. A Reload will be needed. Screen orientation will be update on screenorientation change by listening to the window resize event.\n\n### Author\n* [Sven Graziani](SGraziani@anexia-it.com)\n\n### Credits\nTo the Ionic Framework core team for the inspiration.\n","readmeFilename":"README.md"}