{"_id":"@awwwesome-cz/whats-new-kit","_rev":"5-3f4e9cf7a72742e0bfd1366bbf788afc","time":{"created":"2022-07-13T10:09:54.834Z","1.0.0":"2022-07-13T09:47:10.393Z","modified":"2023-01-25T18:40:51.997Z","1.0.1":"2022-07-13T10:09:55.270Z","1.0.2":"2022-07-13T10:30:58.459Z","2.0.0":"2023-01-25T18:40:51.864Z"},"name":"@awwwesome-cz/whats-new-kit","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.1":{"name":"@awwwesome-cz/whats-new-kit","version":"1.0.1","description":"A NPM Package to easily showcase your new app features in your Ionic Angular App.","keywords":["typescript","package","ionic","angular","whats new kit","whatsnewkit","capacitor"],"peerDependencies":{"@angular/common":"^12.0.0","@angular/core":"^12.0.0","@ionic/angular":"^6.1.0","@capacitor/storage":"^1.2.0"},"dependencies":{"tslib":"^2.3.0"},"repository":{"type":"git","url":"git://github.com/awwwesome-cz/whats-new-kit.git"},"module":"fesm2015/awwwesome-cz-whats-new-kit.mjs","es2020":"fesm2020/awwwesome-cz-whats-new-kit.mjs","esm2020":"esm2020/awwwesome-cz-whats-new-kit.mjs","fesm2020":"fesm2020/awwwesome-cz-whats-new-kit.mjs","fesm2015":"fesm2015/awwwesome-cz-whats-new-kit.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/awwwesome-cz-whats-new-kit.mjs","es2020":"./fesm2020/awwwesome-cz-whats-new-kit.mjs","es2015":"./fesm2015/awwwesome-cz-whats-new-kit.mjs","node":"./fesm2015/awwwesome-cz-whats-new-kit.mjs","default":"./fesm2020/awwwesome-cz-whats-new-kit.mjs"}},"sideEffects":false,"bugs":{"url":"https://github.com/awwwesome-cz/whats-new-kit/issues"},"homepage":"https://github.com/awwwesome-cz/whats-new-kit#readme","_id":"@awwwesome-cz/whats-new-kit@1.0.1","_nodeVersion":"14.20.0","_npmVersion":"6.14.17","dist":{"integrity":"sha512-42eIpJ22h+5PQVnKX9kkZsH5ZyFkeWWVGpS/1eUvhszhEtlReZ766pVKkdNqOAthxNTa6GC0WbW1NSgb/p668Q==","shasum":"31cd40292e65e887d4b2d0b6b8aef62a29a985c2","tarball":"https://registry.npmjs.org/@awwwesome-cz/whats-new-kit/-/whats-new-kit-1.0.1.tgz","fileCount":14,"unpackedSize":78355,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+K2o1M3SNE5bM9lcyjFf6Um+Pt6MVD+iVVY6EmevR/QIhAM3Lvd+3hoRl2an8/B3wiZ6t7cdfkj2pvKR22/kRutz2"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizpnzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoixg//R5KDt2ZlIDXpXndIyWnBbVhMmagFpcKchhw+qKvnJ5eND9Mt\r\ndwC1F/odTW/RWSytbRzo47PKhQ6Zf6sE5JhhyW8LYemYIDIy4VejO0zJi8zi\r\nw9lMFM11nukFonemv9P/A+KulieS5x0ueI5BxhJvkoa6VZUH87/6iW5G8OGd\r\nTpeH+QQyfktcAkbKTB/yufXkDtNk23zNjQptj66+M21CT7GK6PfiLi7JkmHT\r\nXcg/yaW/zEt5wchPQ6Eu+eN3gZrwSIleJAKrBpwdF8CJMhq3Zdb+opY2TX33\r\nKJeTGqRDAfQWH7Cr0y6pH3A27g/zCnZQUpGOIDZmfw9WFhRSUUsavkNEYB39\r\nA8rE7FZ+KTuuILLiBRCT0PsRnzu2xnVPD5iVbwGqdqvvQbFpV/JyT7KDZUw4\r\ne3aHZOj3rOQFpEeJiqqBpU8GXta0pi2rLuVxZrqK5kmsAVUlf0TZ+dmxBqcv\r\noLb9kQlr2stKD2LSgLylNl3MgcCTWM4GkQys398hQMd7nvAetwq/55tgLn92\r\nWWuKZ/FEWOo7tOXx++rzJBxfwIuW4O8G0VzQ7RMW8oJ4oYTEhSbQKU7nAeAe\r\nufHmjUPOnabpsCxeXur4D5H4M+3DxtyaTwAlVeOphgk6cWS05rNNWKwksOpH\r\nT22UD62qUAZXOhatHBvdXGHCbtFKe0BdVMo=\r\n=QCno\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jakubforman","email":"me@jakubforman.eu"},"directories":{},"maintainers":[{"name":"jakubforman","email":"me@jakubforman.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/whats-new-kit_1.0.1_1657706994921_0.748582773109888"},"_hasShrinkwrap":false},"1.0.2":{"name":"@awwwesome-cz/whats-new-kit","version":"1.0.2","description":"A NPM Package to easily showcase your new app features in your Ionic Angular App.","keywords":["typescript","package","ionic","angular","whats new kit","whatsnewkit","capacitor"],"peerDependencies":{"@angular/common":"^12.0.0","@angular/core":"^12.0.0","@ionic/angular":"^6.1.0","@capacitor/storage":"^1.2.0"},"dependencies":{"tslib":"^2.3.0"},"repository":{"type":"git","url":"git://github.com/awwwesome-cz/whats-new-kit.git"},"main":"bundles/awwwesome-cz-whats-new-kit.umd.js","module":"fesm2015/awwwesome-cz-whats-new-kit.js","es2015":"fesm2015/awwwesome-cz-whats-new-kit.js","esm2015":"esm2015/awwwesome-cz-whats-new-kit.js","fesm2015":"fesm2015/awwwesome-cz-whats-new-kit.js","typings":"awwwesome-cz-whats-new-kit.d.ts","sideEffects":false,"bugs":{"url":"https://github.com/awwwesome-cz/whats-new-kit/issues"},"homepage":"https://github.com/awwwesome-cz/whats-new-kit#readme","_id":"@awwwesome-cz/whats-new-kit@1.0.2","_nodeVersion":"14.20.0","_npmVersion":"6.14.17","dist":{"integrity":"sha512-Lqe5PNtkzfh/oEx+CzQcP/ecHcum8PZ0N9RHqlqtjjfDHbBmsVcJ54RyB7xanSgwHRD05QCRWTRy+khSW3wTsQ==","shasum":"532c138a51ca082ae3cbb53277c0b8244ff189b6","tarball":"https://registry.npmjs.org/@awwwesome-cz/whats-new-kit/-/whats-new-kit-1.0.2.tgz","fileCount":14,"unpackedSize":123825,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEc9/Sv3kUlnX9ZN4yqM4qAZDzExES+CoDmxqiCkaMQ8AiA4JsEYHpW7Gq2flJHwK/jqYo43dSiVZARxUqMD1sLbZA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizp7iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRsw//V748gpl4DS/y+kms34S02FWj7iqRmetJXSnRQSsgUyy3EJA3\r\nfOpj0en8P7xm06cO5g22Y1/Os/k58UXlNFPPFvmeYibiT5sFaCV+wHOa5Snn\r\nj0hIkcZxDQF635KhaIPOtlTj3t1hZEvOfvXo3j7jm0an9mm2FGNZ+oKdwpNb\r\nshyuNaQj9scNDi01RnRaPmGnhm/HmPgnXqTDWxtLo92u5aHP2QbmxrJZcEUt\r\nnhE3b+F/a1o23wxBTQiZfBW7GdTXTwZXm+pMZQuiXdqvslSa4owORMV109oR\r\n1hmTLsx0jTMkXmXDS3giLwKXgStWOu1FoP3PwKT5cTGGj6Lfcm95eUyzHjiu\r\nK20pWAod8VH3PgZvaQlYmvZLiWops3dPbf8vgkZ+o77s7va5oO7eEQjTgPWB\r\n3UecmGlaHezQqx/mJpZcGGwCo2f6FOTfKhuD7jYKNQF7voQWv/tY3k2Zj9jS\r\nrgHVK83BDhPbC6vLiDolvuvOLaZz9YSaVXcKQdot4uhMa1K/GlyJ80p3WaWu\r\ndbs/n+mLMgg80CfGllWD3UBvwrOYz+s81jPHNxEkGIrYTteHNN67VsqZ/UbC\r\n/ZqJSKFvQm86Dlj0L1QmJaPUQBbmYPzhLowmb7u5hsz0W5/9cTHh8JHI0VyD\r\naiIoD4h/dk1ILmXxGx60r/ZJYPZAhlGC4d8=\r\n=B/WH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jakubforman","email":"me@jakubforman.eu"},"directories":{},"maintainers":[{"name":"jakubforman","email":"me@jakubforman.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/whats-new-kit_1.0.2_1657708258069_0.9434912095630323"},"_hasShrinkwrap":false},"2.0.0":{"name":"@awwwesome-cz/whats-new-kit","version":"2.0.0","description":"A NPM Package to easily showcase your new app features in your Ionic Angular App.","keywords":["typescript","package","ionic","angular","whats new kit","whatsnewkit","capacitor"],"peerDependencies":{"@angular/common":"^15.0.0","@angular/core":"^15.0.0","@capacitor/core":"^4.0.0","@capacitor/preferences":"^4.0.0","@ionic/angular":"^6.0.0"},"dependencies":{"tslib":"^2.3.0"},"repository":{"type":"git","url":"git://github.com/awwwesome-cz/whats-new-kit.git"},"module":"fesm2015/awwwesome-cz-whats-new-kit.mjs","es2020":"fesm2020/awwwesome-cz-whats-new-kit.mjs","esm2020":"esm2020/awwwesome-cz-whats-new-kit.mjs","fesm2020":"fesm2020/awwwesome-cz-whats-new-kit.mjs","fesm2015":"fesm2015/awwwesome-cz-whats-new-kit.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2020":"./esm2020/awwwesome-cz-whats-new-kit.mjs","es2020":"./fesm2020/awwwesome-cz-whats-new-kit.mjs","es2015":"./fesm2015/awwwesome-cz-whats-new-kit.mjs","node":"./fesm2015/awwwesome-cz-whats-new-kit.mjs","default":"./fesm2020/awwwesome-cz-whats-new-kit.mjs"}},"sideEffects":false,"bugs":{"url":"https://github.com/awwwesome-cz/whats-new-kit/issues"},"homepage":"https://github.com/awwwesome-cz/whats-new-kit#readme","_id":"@awwwesome-cz/whats-new-kit@2.0.0","_nodeVersion":"14.21.2","_npmVersion":"6.14.17","dist":{"integrity":"sha512-tqO+SHfYcGtAoaOiCcdYDUcxkc4warfEC0WKTnm975Sf62Z7+HpuHLx7rTQ1H+CtyvoXSurZ+NIVMc5xTPlDRw==","shasum":"9c356932c4d42be5c057e30aa38f987f74903e30","tarball":"https://registry.npmjs.org/@awwwesome-cz/whats-new-kit/-/whats-new-kit-2.0.0.tgz","fileCount":14,"unpackedSize":78487,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQCTHNt+I2Djm4n5DK01eOdgJoMjZdHerhtA9xw8iFKgIhAM7Kxef6JcO4g5Dlz0mbV9SYFhzJEHxFLdzP3nlL0oR7"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0XezACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/ow/9EydfDY9CanMJ8D2e2GUl0ALTn5aDAPReBhHyUeLytxnPFpZk\r\nRcWgaCeip0H5UHURQDG8r5e7XVPmFtMasR42ts4SHs78L2Kl8Ggy3bRoMHaJ\r\nj/o1cbVRyHFH1uhODWzAZMBiVdPA9xvsUCu/fW+qUGci9P2Hkb9nO55nlpdf\r\nXJaGdaCQFUkpgOu6rewg0jw+DcuktekAg/CnIu0LUUlccEsVWPJi+m4Oh2I3\r\n1zyaw4Ifcsqgsq8vbEpTqOR5GAVHnCFEJUzaP5B4S9tg77SXp4GAs10kZMs+\r\nYrzFyoXXTY6di0KwEsJMl+8HUCe2brVnSA7lTILZkCUYyzX5BmcgyuumIsUZ\r\nbewXfTZcZWb22QDoGPMt6Ka3BHVqduyEE2u3snpax2RTcJt/NBfIu2G5mgsF\r\n8fzeLsmFduCmIp0KxaTaRkVyll/aE0HNLl0ZqAIWa3sPA3O3rj1hkZIYPc2M\r\nqMpiAmCt1jG6pARwTuz6y+Ccw+tTsKwoVLBElNLfxJkvyrXpvVbu7VGK4NRq\r\n7sSIodQYlx40oGU9V1F1J0CxkXfQjBeJXHOgzo8enqK2qPRpCpMCsptRDx5+\r\nYkC0PsKHQSSxSV74f2AVu6rMfXTkxwsLE0bppotjd1vNth08SQh496GIRHz+\r\ntGtyL1F3aZWt7W48jzKuK1AeH84Qt3P2xUA=\r\n=Z4jB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jakubforman","email":"me@jakubforman.eu"},"directories":{},"maintainers":[{"name":"jakubforman","email":"me@jakubforman.eu"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/whats-new-kit_2.0.0_1674672051574_0.19007792751407315"},"_hasShrinkwrap":false}},"maintainers":[{"name":"jakubforman","email":"me@jakubforman.eu"}],"description":"A NPM Package to easily showcase your new app features in your Ionic Angular App.","homepage":"https://github.com/awwwesome-cz/whats-new-kit#readme","keywords":["typescript","package","ionic","angular","whats new kit","whatsnewkit","capacitor"],"repository":{"type":"git","url":"git://github.com/awwwesome-cz/whats-new-kit.git"},"bugs":{"url":"https://github.com/awwwesome-cz/whats-new-kit/issues"},"readme":"<br>\n<p align=\"center\">\n    <img src=\"https://raw.githubusercontent.com/awwwesome-cz/whats-new-kit/master/images/logo.png\" width=\"30%\" alt=\"logo\">\n</p>\n\n<h1 align=\"center\">\n    WhatsNewKit for Ionic (Angular)\n</h1>\n\n<p align=\"center\">\n    A NPM Package to easily showcase your new app features in your Ionic Angular App.\n    <br/>\n    It's designed from the ground up to be fully customized to your needs.\n</p>\n\n<p align=\"center\">\n    Original Swift Package <a href=\"https://github.com/SvenTiigi/WhatsNewKit/\">SvenTiigi/WhatsNewKit</a>\n</p>\n\n<p align=\"center\">\n   <a href=\"projects/whats-new-kit\">\n      <img src=\"https://img.shields.io/badge/Documentation-100%25-green\" alt=\"Documentation\">\n   </a>\n   <img src=\"https://img.shields.io/badge/platform-iOS%20%7C%20macOS%20%7C%20iPadOS%20%7C%20Android%20%7C%20Web%20%7C%20Electron-brightgreen\" alt=\"Platform\">\n   <a href=\"https://awwwesome.cz\">\n      <img src=\"https://img.shields.io/badge/Web-awwwesome.cz-blueviolet\" alt=\"Web\">\n   </a>\n</p>\n\n<img align=\"right\" width=\"315\" src=\"https://raw.githubusercontent.com/awwwesome-cz/whats-new-kit/master/images/example.png\" alt=\"Example\">\n\n```typescript\nexport class HomePage implements OnInit  {\n\n  constructor(\n    protected updateWNKService: UpdateWNKService,\n  ) {\n  }\n\n  ngOnInit() {\n    this.updateWNKService.whatsNew();\n  }\n}\n```\n\n## Features\n\n- [x] Easily present your new app features 🤩\n- [x] Automatic & Manual presentation mode ✅\n- [x] Dark mode ready ☑️\n- [x] Use Ionic Theming Colors 🎨\n- [x] Support for Ionic - Angular and Capacitor 🧑‍🎨\n- [x] Support any platform: iOS, macOS, iPadOS, Android, Web & Electron 📱 🖥\n- [x] Adjustable content 🔧\n\n## Installation\n\n1. Install package from NPM using `npm i @awwwesome-cz/whats-new-kit`.\n2. Create [Custom Service](#automatic-presentation) for automatic presentation.\n3. Call `this.updateWNKService.whatsNew()` on your page.\n\n## Example\n\n<p align=\"center\">\n    <img width=\"95%\" src=\"https://raw.githubusercontent.com/awwwesome-cz/whats-new-kit/master/images/example-app.png\" alt=\"Example Applications\">\n</p>\n\n## Usage\n\n### Manual Presentation\n\n1. Define features (WNK recommend 4-5 max for small screen not good for UX, user need to scroll).\n2. Adding `ModalController` service.\n3. Show modal with `WhatsNewKitComponent`.\n\nIn `modalController.create()` you need to add `componentProps` and set all what you want to show on WNK page.\n\n```typescript\nexport class ExamplePage {\n  protected _features: WhatsNewKitFeature[] = [\n    {\n      icon: {\n        name: 'star',\n        color: 'warning'\n      },\n      title: 'Showcase your new App Features',\n      text: 'Present your new app features just like a native app from <span class=\"aw3sm-wnk-color ion-color-danger\">Apple</span>',\n    },\n    {\n      icon: {\n        name: 'color-wand',\n        color: 'primary'\n      },\n      title: 'Automatic Presentation',\n      text: 'Simple declare a WhatsNew for actual version and present it automatically by ' +\n        'using any ionic <strong>modalController.create() method</strong>.',\n    },\n    {\n      icon: {\n        name: 'cog',\n        color: 'dark'\n      },\n      title: 'Configuration',\n      text: 'Easily adjust colors, strings and the layout of the presented WhatNewKit Modal page to your needs.',\n    },\n    {\n      icon: {\n        name: 'logo-npm',\n        color: 'danger'\n      },\n      title: 'NPM Manager',\n      text: 'WhatsNewKit can by easily integrated vie the Swift Package Manager.',\n    }\n  ];\n\n  constructor(\n    protected modalController: ModalController,\n  ) {\n  }\n\n  /**\n   * Show WhatsNewKit as modal sheet\n   */\n  async showUpdateInfoSheet() {\n    const modal = await this.modalController.create({\n      component: WhatsNewKitComponent,\n      componentProps: {\n        buttons: {\n          continue: {\n            title: 'Continue',\n            color: 'danger'\n            // additionally you can add custom handler, default capacitor.storage & canShow() check won't override!\n            // handler: () => {\n            //   alert('Get more');\n            // }\n          },\n          /*more: {\n            title: 'More about this update',\n            handler: () => {\n              alert('Get more');\n            }\n          }*/\n        },\n        title: 'WhatsNewKit<br>in <span class=\"aw3sm-wnk-color ion-color-primary\">Multiline</span>',\n        features: this._features,\n      },\n      backdropDismiss: false, // other Ionic modal settings\n      // Used for iOS card presenting style (only on iOS), see doc: https://ionicframework.com/docs/api/modal#card-modal\n      presentingElement: document.querySelector('.ion-page ion-router-outlet')\n    });\n    return await modal.present();\n  }\n}\n```\n\n### Automatic Presentation\n\nℹ️ Best wey to show WNK is to create custom service with all features. WNK does not have this service, because need\nmore `Capacitor` plugins and your app may not have it.\n\n1. Do same things like in [Manual Presentation](#manual-presentation)\n3. Setup all data.\n4. Run `whatsNew()` method in any page.\n\nMore information about [canShow()](#config-of-canshow).\n\n**There is a DEMO of WNK Service.**\n\n```typescript\nimport {WhatsNewKitComponent, WhatsNewKitFeature} from 'whats-new-kit';\nimport {ModalController} from '@ionic/angular';\nimport {App} from '@capacitor/app';\nimport {Capacitor} from '@capacitor/core';\nimport {Injectable} from '@angular/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class UpdateWNKService {\n  protected _features: WhatsNewKitFeature[] = [\n    {\n      icon: {\n        name: 'star',\n        color: 'warning'\n      },\n      title: 'Showcase your new App Features',\n      text: 'Present your new app features just like a native app from <span class=\"aw3sm-wnk-color ion-color-danger\">Apple</span>',\n    },\n    {\n      icon: {\n        name: 'color-wand',\n        color: 'primary'\n      },\n      title: 'Automatic Presentation',\n      text: 'Simple declare a WhatsNew for actual version and present it automatically by ' +\n        'using any ionic <strong>modalController.create() method</strong>.',\n    },\n    {\n      icon: {\n        name: 'cog',\n        color: 'dark'\n      },\n      title: 'Configuration',\n      text: 'Easily adjust colors, strings and the layout of the presented WhatNewKit Modal page to your needs.',\n    },\n    {\n      icon: {\n        name: 'logo-npm',\n        color: 'danger'\n      },\n      title: 'NPM Manager',\n      text: 'WhatsNewKit can by easily integrated vie the Swift Package Manager.',\n    }\n  ];\n\n  constructor(\n    protected modalController: ModalController,\n  ) {\n  }\n\n  async whatsNew() {\n    // get version of app\n    let version;\n    if (Capacitor.getPlatform() !== 'web') {\n      version = (await App.getInfo()).version;\n    } else {\n      version = '1.0'; // web app version must be added by developer\n    }\n\n    if (await WhatsNewKitComponent.canShow({\n      appVersion: version,\n      skipPatchVersion: true\n    })) {\n      // eslint-disable-next-line no-underscore-dangle\n      await this._initUpdateInfoSheet();\n    }\n  }\n\n  /**\n   * Show WhatsNewKit as modal sheet\n   *\n   * @private\n   */\n  private async _initUpdateInfoSheet() {\n    const modal = await this.modalController.create({\n      component: WhatsNewKitComponent,\n      componentProps: {\n        buttons: {\n          continue: {\n            title: 'Continue',\n            color: 'danger'\n            // additionally you can add custom handler, default capacitor.storage & canShow() check won't override!\n            // handler: () => {\n            //   alert('Get more');\n            // }\n          },\n          /*more: {\n            title: 'More about this update',\n            handler: () => {\n              alert('Get more');\n            }\n          }*/\n        },\n        title: 'WhatsNewKit<br>in <span class=\"aw3sm-wnk-color ion-color-primary\">Multiline</span>',\n        // eslint-disable-next-line no-underscore-dangle\n        features: this._features,\n      },\n      backdropDismiss: false,\n      // Used for iOS card presenting style (only on iOS), see doc: https://ionicframework.com/docs/api/modal#card-modal\n      presentingElement: document.querySelector('.ion-page ion-router-outlet')\n    });\n    return await modal.present();\n  }\n}\n\n```\n\n#### Config of canShow\n\n`canShow()` is a static method for automatic check version of app last opened (installed) and your actual version. You\nneed to pass actual version of app and method return `async boolean`. `true` = app version is bigger (first install)\n1.0 < 1.1 (second install/update). `false` = you have same version as before.\n\n```typescript\nif (await WhatsNewKitComponent.canShow({\n  appVersion: version,\n  skipPatchVersion: true\n})) {\n  // eslint-disable-next-line no-underscore-dangle\n  await this._initUpdateInfoSheet();\n}\n```\n\n##### Minor & Patch versions\n\nWNK use [Semantic Versioning 2.0.0.](https://semver.org) - MAJOR.MINOR.PATCH (X.Y.Z).\n\n1. MAJOR version when you make incompatible API changes,\n2. MINOR version when you add functionality in a backwards compatible manner, and\n3. PATCH version when you make backwards compatible bug fixes.\n\nYou can set if you want check every PATCH or MINOR version of your app. We don't check PATCH version and\nuse `skipPatchVersion: true` for skip it. PATCH number in our apps use only for fix, not for new feature. Your app can\nalso skip MINOR if you add `skipMinorVersion: true`.\n\n### Styling\n\nYou can customize theming for you perfect app. WNK use default Ionic Theming system.\n\n#### Styling text\n\nFor custom color text you need to use wnk color class and original ionic color class. For your text you need to\nadd `aw3sm-wnk-color` to activate reading ionic color from class. Then you need to add color what you want, for\nexample `ion-color-primary`, `ion-color-secondary`. You can also use custom\ncolors [Ionic Theming Adding Colors](https://ionicframework.com/docs/theming/colors#adding-colors).\n\nThis colored text can be used anywhere, where you place string. ⚠️ Buttons have own object color field.\n\nYour second class need `--ion-color-base`. This will apply for color in your HTML tag `color: var(--ion-color-base)`.\nIonic Theming classes have it prepared for this situation.\n\n```json lines\n{\n  // other componentProps\n  title: 'WhatsNewKit<br>in <span class=\"aw3sm-wnk-color ion-color-primary\">Multiline</span>',\n  // other componentProps\n}\n```\n\n#### Styling Features\n\n**Icon** can by set from original [Ionicons](https://ionic.io/ionicons), also you can\nuse [custom ion-icon](https://stackoverflow.com/questions/60286018/custom-icons-with-ionic-5) or see\nofficial [Ionicons Documentation](https://ionic.io/ionicons/usage).\n\n**Color of icon** use default theming Ionic system, and you can set color as `<ion-icon color=\"warning\">`. The `warning`\nis a color what you need to set in feature icon object structure.\n\n**Title & text** are string (HTML string). For this WNK use angular `innerHTML`. There some limitation about styling,\nand you need only HTML tags with class. For **color** WNK have custom class defined for Ionic Theming colors\nnamed `aw3sm-wnk-color`, second is your Ionic color class. More info you can se in [Styling text](#styling-text).\n\n```typescript\nconst _features: WhatsNewKitFeature[] = [\n  {\n    icon: {\n      name: 'star',\n      color: 'warning'\n    },\n    title: 'Showcase your new App Features',\n    text: 'Present your new app features just like a native app from <span class=\"aw3sm-wnk-color ion-color-danger\">Apple</span>',\n  }\n]\n```\n\n#### Styling Buttons\n\n**Buttons** have WNK Ionic style and use Ionic Theming like [Icons in Stiling Features](#styling-features).\n⚠️ Title cannot be used as HTML! Title is a plain string!\n\n```typescript\nconst buttons = {\n  continue: {\n    title: 'Continue',\n    color: 'danger',\n    // Additionally you can add custom handler, default capacitor.storage & canShow() check won't override!\n    /*handler: () => {\n      alert('Get more');\n    }*/\n  },\n  more: {\n    title: 'More about this update',\n    // color: 'danger',\n    // You need to add custom handler, for define your logic! Without handler button does not execute any action.\n    handler: () => {\n      alert('Get more');\n    }\n  }\n};\n```\n\n## Licence\n\nWhatsNewKit for Ionic (Angular)\n\nCopyright (c) 2022 Ing. Jakub Josef Forman forman@awwwesome.cz\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n\n","readmeFilename":"README.md"}