{"_id":"@byteowls/ionic-hierarchical-menu","_rev":"3-bc0058d8be494137e895ad9a7e5091a8","name":"@byteowls/ionic-hierarchical-menu","description":"Hierarchical menu is a hierarchical / multi-level menu component for Ionic 2+","dist-tags":{"latest":"1.0.0-beta2"},"versions":{"1.0.0-beta1":{"name":"@byteowls/ionic-hierarchical-menu","description":"Hierarchical menu is a hierarchical / multi-level menu component for Ionic 2+","version":"1.0.0-beta1","scripts":{"ngc":"ngc","webpack":"webpack","build":"rm -rf aot dist && ngc && webpack","theme":"node-sass themes/scss -o dist/themes/css/ && cp -r themes/ dist/themes/","serve":"http-server ./dist -a 0.0.0.0 -p 9000","dist":"npm run build && npm run theme && cp package.json dist/ && cp README.md dist/","pack":"npm run dist && npm pack dist/","publish":"npm run dist && cd dist/ && npm publish --access public","test":"rm -rf coverage && karma start","test-watch":"ngc && karma start --no-single-run --auto-watch","coverage":"http-server -c-1 -o -p 9875 ./coverage"},"repository":{"type":"git","url":"git+https://github.com/moberwasserlechner/ionic-hierarchical-menu.git"},"keywords":["ionic","menu","vertical nav","navigation","multi-level"],"author":{"name":"Michael Oberwasserlechner"},"homepage":"https://github.com/moberwasserlechner/ionic-hierarchical-menu","license":"MIT","bugs":{"url":"https://github.com/moberwasserlechner/ionic-hierarchical-menu/issues"},"main":"bundles/index.umd.js","module":"index.js","devDependencies":{"@angular/common":"2.4.8","@angular/compiler":"2.4.8","@angular/compiler-cli":"2.4.8","@angular/core":"2.4.8","@angular/forms":"2.4.8","@angular/http":"2.4.8","@angular/platform-browser":"2.4.8","@angular/platform-browser-dynamic":"2.4.8","@angular/platform-server":"2.4.8","ionic-angular":"2.2.0","ionicons":"3.0.0","rxjs":"5.0.1","typescript":"2.0.9","zone.js":"0.7.2","@types/jasmine":"2.5.37","@types/node":"6.0.46","jasmine-core":"^2.5.2","karma":"^1.5.0","karma-chrome-launcher":"^2.0.0","karma-coverage":"^1.1.1","karma-firefox-launcher":"^1.0.1","karma-jasmine":"^1.1.0","karma-mocha-reporter":"^2.2.3","karma-remap-coverage":"^0.1.4","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^2.0.3","ts-helpers":"1.1.2","tslint":"^4.5.0","codelyzer":"2.1.0","webpack":"^2.3.3","sass-loader":"^6.0.3","node-sass":"^4.5.2","raw-loader":"^0.5.1","awesome-typescript-loader":"2.2.4","tslint-loader":"^3.4.3","http-server":"^0.9.0","source-map-loader":"0.1.5","istanbul-instrumenter-loader":"0.2.0","cash-cp":"^0.2.0"},"peerDependencies":{"ionic-angular":"^2.2.0","ionicons":"^3.0.0"},"_id":"@byteowls/ionic-hierarchical-menu@1.0.0-beta1","_shasum":"938fb605cc30e6f78b79eb05c6f9e7d6b6e02002","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.5","_npmUser":{"name":"moberwasserlechner","email":"michael@byteowls.com"},"dist":{"shasum":"938fb605cc30e6f78b79eb05c6f9e7d6b6e02002","tarball":"https://registry.npmjs.org/@byteowls/ionic-hierarchical-menu/-/ionic-hierarchical-menu-1.0.0-beta1.tgz","integrity":"sha512-0HGv3dITARCI0G1R04z8V3CSDoBqSgkIfwd5gmFDxQbo4pYpE/PlZuigI2QOr7N18pa6Jg5zNtG9FE7aRiP7Hg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFDAfbyosDVN4gvFdJPTgEPea56A1IF1W3iBs/q+upwQAiEAxyvQZXNwbUiEGhLLQUF9QUFouWgd/nHAE4KxWeXuCso="}]},"maintainers":[{"name":"moberwasserlechner","email":"michael@byteowls.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/ionic-hierarchical-menu-1.0.0-beta1.tgz_1493109152816_0.30929159303195775"}},"1.0.0-beta2":{"name":"@byteowls/ionic-hierarchical-menu","description":"Hierarchical menu is a hierarchical / multi-level menu component for Ionic 2+","version":"1.0.0-beta2","scripts":{"ngc":"ngc","webpack":"webpack","build":"rm -rf aot dist && ngc && webpack","theme":"node-sass themes/scss -o dist/themes/css/ && cp -r themes/ dist/themes/","serve":"http-server ./dist -a 0.0.0.0 -p 9000","dist":"npm run build && npm run theme && cp package.json dist/ && cp README.md dist/","pack":"npm run dist && npm pack dist/","publish":"npm run dist && cd dist/ && npm publish --access public","test":"rm -rf coverage && karma start","test-watch":"ngc && karma start --no-single-run --auto-watch","coverage":"http-server -c-1 -o -p 9875 ./coverage"},"repository":{"type":"git","url":"git+https://github.com/moberwasserlechner/ionic-hierarchical-menu.git"},"keywords":["ionic","menu","vertical nav","navigation","multi-level"],"author":{"name":"Michael Oberwasserlechner"},"homepage":"https://github.com/moberwasserlechner/ionic-hierarchical-menu","license":"MIT","bugs":{"url":"https://github.com/moberwasserlechner/ionic-hierarchical-menu/issues"},"main":"bundles/index.umd.js","module":"index.js","devDependencies":{"@angular/common":"2.4.8","@angular/compiler":"2.4.8","@angular/compiler-cli":"2.4.8","@angular/core":"2.4.8","@angular/forms":"2.4.8","@angular/http":"2.4.8","@angular/platform-browser":"2.4.8","@angular/platform-browser-dynamic":"2.4.8","@angular/platform-server":"2.4.8","ionic-angular":"2.2.0","ionicons":"3.0.0","rxjs":"5.0.1","typescript":"2.0.9","zone.js":"0.7.2","@types/jasmine":"2.5.37","@types/node":"6.0.46","jasmine-core":"^2.5.2","karma":"^1.5.0","karma-chrome-launcher":"^2.0.0","karma-coverage":"^1.1.1","karma-firefox-launcher":"^1.0.1","karma-jasmine":"^1.1.0","karma-mocha-reporter":"^2.2.3","karma-remap-coverage":"^0.1.4","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^2.0.3","ts-helpers":"1.1.2","tslint":"^4.5.0","codelyzer":"2.1.0","webpack":"^2.3.3","sass-loader":"^6.0.3","node-sass":"^4.5.2","raw-loader":"^0.5.1","awesome-typescript-loader":"2.2.4","tslint-loader":"^3.4.3","http-server":"^0.9.0","source-map-loader":"0.1.5","istanbul-instrumenter-loader":"0.2.0","cash-cp":"^0.2.0"},"peerDependencies":{"ionic-angular":"^2.2.0","ionicons":"^3.0.0"},"_id":"@byteowls/ionic-hierarchical-menu@1.0.0-beta2","_shasum":"ac6e94cb5438b01eb2e897996dd9e8a9ec6e72ec","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.5","_npmUser":{"name":"moberwasserlechner","email":"michael@byteowls.com"},"dist":{"shasum":"ac6e94cb5438b01eb2e897996dd9e8a9ec6e72ec","tarball":"https://registry.npmjs.org/@byteowls/ionic-hierarchical-menu/-/ionic-hierarchical-menu-1.0.0-beta2.tgz","integrity":"sha512-PMeuCL8Xlm4jzofLrYprKnjhjMMcxO95yJD61e0STz7ZYLVvv1yuMuO6iQM9ovcQ3SdSyPHx52i2figlYJ5Low==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDct4S9jUjOTqtfFSPr4f/kP9SSSHAZ8PMjErtqrZ9kGgIhAM4vgwe5KeObgdI924rPOfssRxNOBz5AT4Z9iu7WjavI"}]},"maintainers":[{"name":"moberwasserlechner","email":"michael@byteowls.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/ionic-hierarchical-menu-1.0.0-beta2.tgz_1493114396222_0.9461821138393134"}}},"readme":"# Hierarchical Menu for Ionic [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) [![Travis](https://img.shields.io/travis/moberwasserlechner/ionic-hierarchical-menu/master.svg)](https://travis-ci.org/moberwasserlechner/ionic-hierarchical-menu) [![npm monthly downloads](https://img.shields.io/npm/dm/@byteowls/ionic-hierarchical-menu.svg)](https://www.npmjs.com/package/@byteowls/ionic-hierarchical-menu) [![npm version](https://img.shields.io/npm/v/@byteowls/ionic-hierarchical-menu.svg)](https://www.npmjs.com/package/@byteowls/ionic-hierarchical-menu)\r\n\r\nHierarchical Menu (@byteowls/ionic-hierarchical-menu) for Ionic 2+ is a hierarchical / multi-level menu component.\r\n\r\n## Installation\r\n```sh\r\nnpm install @byteowls/ionic-hierarchical-menu --save\r\n```\r\n\r\n## Demo\r\n\r\n\r\n\r\n## Usage\r\nIf you use SystemJS to load your files, you might have to update your config:\r\n\r\n```js\r\nSystem.config({\r\n    map: {\r\n        '@byteowls/ionic-hierarchical-menu': 'npm:@byteowls/ionic-hierarchical-menu/bundles/index.umd.js'\r\n    }\r\n});\r\n```\r\n\r\n#### Theming / Styles\r\n\r\nThe npm module includes both scss and css files. Depending on your use case you have to include them in your project to get the themes or default styles.\r\n\r\nThese themes are included\r\n- default ... hierarchical-menu.themes.default\r\n- dark ... TBD\r\n\r\n##### Ionic 2\r\n\r\nIn Ionic we can use SASS but have to customize Ionic's build process so the module styles are recognized.\r\nFor that can use the `config` section in our `packages.json`\r\n\r\n```json\r\n{\r\n  \"dependencies\": {\r\n    \"@angular/common\": \"2.4.8\",\r\n    \"@angular/compiler\": \"2.4.8\",\r\n    \"@angular/compiler-cli\": \"2.4.8\",\r\n    \"@angular/core\": \"2.4.8\",\r\n    \"@angular/forms\": \"2.4.8\",\r\n    \"@angular/http\": \"2.4.8\",\r\n    \"@angular/platform-browser\": \"2.4.8\",\r\n    \"@angular/platform-browser-dynamic\": \"2.4.8\",\r\n    \"@angular/platform-server\": \"2.4.8\",\r\n    \"@ionic/storage\": \"2.0.1\",\r\n    \"@byteowls/ionic-hierarchical-menu\": \"~1.0.0-beta2\",\r\n    \"angular2-jwt\": \"0.1.28\",\r\n    \"ionic-angular\": \"2.3.0\",\r\n    \"ionic-native\": \"2.8.1\",\r\n    \"ionicons\": \"3.0.0\",\r\n    \"ng2-translate\": \"5.0.0\",\r\n    \"rxjs\": \"5.0.1\",\r\n    \"sw-toolbox\": \"3.4.0\",\r\n    \"zone.js\": \"0.7.2\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@ionic/app-scripts\": \"~1.1.4\",\r\n    \"typescript\": \"~2.0.9\"\r\n  },\r\n  \"config\": {\r\n    \"ionic_sass\": \"./config/ionic.sass.config.js\"\r\n  }\r\n}\r\n```\r\n\r\nIn detail you have to overwrite the `ionic_sass` config script. A good starting point is the [original script](https://github.com/driftyco/ionic-app-scripts/blob/master/config/sass.config.js). \r\nCopy it for example to `./config/ionic.sass.config.js` and add `node_modules/@byteowls/ionic-hierarchical-menu/themes/scss` to the `includePaths` property.\r\n \r\n```js\r\n/**\r\n     * includePaths: Used by node-sass for additional\r\n     * paths to search for sass imports by just name.\r\n     */\r\n    includePaths: [\r\n        'node_modules/ionic-angular/themes',\r\n        'node_modules/ionicons/dist/scss',\r\n        'node_modules/ionic-angular/fonts',\r\n        // add this line\r\n        'node_modules/@byteowls/ionic-hierarchical-menu/themes/scss'\r\n    ]\r\n```\r\n\r\n*Note:* It would be nices to just add the line instead of overwriting the whole file, because on every new version of the ionic-app-scripts you have to check for changes.\r\n\r\nNow simply import the styles in your page.\r\n\r\n```scss\r\npage-example {\r\n  // overwrite component variables\r\n\r\n  // menu container\r\n\r\n  // menu item\r\n  $hierarchical-menu-text-color: $color4;\r\n  // separator\r\n  $hierarchical-menu-item-separator-color: $color4;\r\n  // active\r\n  $hierarchical-menu-active-text-color: $color2;\r\n  $hierarchical-menu-active-bg-color: $color4;\r\n  // hover\r\n  $hierarchical-menu-hover-text-color: $color4;\r\n  $hierarchical-menu-hover-bg-color: $color2;\r\n\r\n  @import \"hierarchical-menu.themes.default\";\r\n\r\n  .other-styles {\r\n  \r\n  }\r\n}\r\n```\r\n\r\nResources:\r\n- https://ionicframework.com/docs/v2/resources/app-scripts/\r\n- https://github.com/driftyco/ionic-app-scripts#custom-configuration\r\n\r\n\r\n#### Import the `HierarchicalMenuModule`\r\n\r\n```ts\r\nimport {BrowserModule} from \"@angular/platform-browser\";\r\nimport {NgModule} from '@angular/core';\r\nimport {HierarchicalMenuModule} from '@byteowls/ionic-hierarchical-menu';\r\n\r\n@NgModule({\r\n    imports: [\r\n        BrowserModule,\r\n        HierarchicalMenuModule.forRoot()\r\n    ],\r\n    bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {\r\n}\r\n```\r\n\r\n#### Use the `HierarchicalMenuComponent`\r\n\r\nThis example show a menu page I use in a Ionic 2 project.\r\n\r\n\r\n```ts\r\n@Component({\r\n    selector: 'page-menu',\r\n    template: '<hierarchical-menu [config]=\"menuConfig\"></hierarchical-menu>'\r\n})\r\nexport class MenuPage {\r\n\r\n    menuConfig: HierarchicalMenuConfig;\r\n    \r\n    constructor(\r\n        // ionic2 event bus\r\n        public eventBus: Events,\r\n        // ngx-translate translation service\r\n        public i18n: TranslateService) {\r\n        this.buildMenu();\r\n    }\r\n    \r\n    buildMenu() {\r\n        // create the config object\r\n        this.menuConfig = new HierarchicalMenuConfig();\r\n        // the menu items are structured a flat list\r\n        this.menuConfig.menuItemStructure = \"F\";\r\n        // translate menu item titles using this callback\r\n        this.menuConfig.onTranslate = (code: string) => {\r\n            return this.i18n.instant(code);\r\n        };\r\n        // if there is a page assigned to the menu item send a navigation event\r\n        this.menuConfig.onClickLink = (item: HierarchicalMenuItem) => {\r\n          if (item.page) {\r\n            let navEvent = new NavEvent();\r\n            navEvent.page = item.page;\r\n            if (item.pageOptions) {\r\n              navEvent.options = item.pageOptions;\r\n            }\r\n            this.eventBus.publish(AppConstants.Event.NAV, navEvent);\r\n          }\r\n        };\r\n        // run this callback if the expander is clicked\r\n        this.menuConfig.onClickExpander = (item: HierarchicalMenuItem) => {\r\n             console.info(\"config: parent menu#\"+item.id+\" \"+(item.expanded?\"opened\":\"closed\"));\r\n             // get all expanded item ids\r\n             console.log(this.menuConfig.getExpandedIds());\r\n        };\r\n\r\n        // add a parent menu item with a special style and expand it per default\r\n        this.menuConfig.add({title: \"menu.personal.section\", styleLine: \"top-section\", expanded: true});\r\n        // Add simple menu item with a reference to the parent. Because we said that items are delivered as flat list. \r\n        // The component will create the hierarchical structure by itself\r\n        this.menuConfig.add({title: \"menu.personal.home\", parentRef: \"menu.personal.section\", page: HomePage});\r\n        // Another menu item\r\n        this.menuConfig.add({title: \"menu.personal.profile\", parentRef: \"menu.personal.section\", page: ProfilePage});\r\n        // Another menu item with a index because its a tabbed page\r\n        this.menuConfig.add({title: \"menu.personal.events\", parentRef: \"menu.personal.section\", page: TabsPage, pageOptions: {tabIndex: 0}});\r\n        // A parent menu item\r\n        this.menuConfig.add({title: \"menu.settings.section\", styleLine: \"top-section\", expanded: true});\r\n        \r\n        this.menuConfig.add({title: \"menu.settings.language\", parentRef: \"menu.settings.section\"});\r\n        for (let lang of [\"de\",\"en\"]) {\r\n          this.menuConfig.add({title: \"common.language.\" + lang, parentRef: \"menu.settings.language\", onClickLink: () => {\r\n            this.changeLanguage(lang);\r\n          }});\r\n        }\r\n        this.menuConfig.add({title: \"menu.settings.feedback\", parentRef: \"menu.settings.section\"});\r\n        this.menuConfig.add({title: \"menu.settings.about\", parentRef: \"menu.settings.section\"});\r\n        // use a special click callback for this menu item\r\n        this.menuConfig.add({title: \"menu.settings.logout\", parentRef: \"menu.settings.section\", onClickLink: ()=> {\r\n            this.logout();\r\n        }});\r\n     }\r\n```\r\n\r\nIt's also possible to load menu items after first init, e.g. from a backend service.\r\n   \r\n```ts   \r\n     // \r\n     loadMenuItems() {\r\n         const ITEM_ID = \"menu.chosen_club.section\";\r\n         this.menuConfig.addBefore(\"menu.settings.section\", { id: ITEM_ID, title: \"Special section\", expanded: true, styleLine: \"special-section\"});\r\n         \r\n         // this is a \r\n         this.backendService.getMenuItems().subscribe(\r\n             (menuItems) => {\r\n                 menuItems.forEach(i => {\r\n                     if (i.parentRef == null) {\r\n                         i.style = \"top-section\";\r\n                         i.parentRef = ITEM_ID;\r\n                     } else {\r\n                         i.onClickLink = (item: HierarchicalMenuItem) => {\r\n                            this.openRemoteMenuItemPage(item);\r\n                         }\r\n                     }\r\n                 });\r\n    \r\n                 this.menuConfig.addArray(moduleMenuItems);\r\n             },\r\n             error => {\r\n                 console.log(error);\r\n             }\r\n         );\r\n     }\r\n    \r\n}\r\n```\r\n\r\n# License\r\n[MIT](/LICENSE)\r\n","maintainers":[{"name":"moberwasserlechner","email":"michael@byteowls.com"}],"time":{"modified":"2022-06-12T15:35:42.068Z","created":"2017-04-25T08:32:33.665Z","1.0.0-beta1":"2017-04-25T08:32:33.665Z","1.0.0-beta2":"2017-04-25T09:59:58.489Z"},"homepage":"https://github.com/moberwasserlechner/ionic-hierarchical-menu","keywords":["ionic","menu","vertical nav","navigation","multi-level"],"repository":{"type":"git","url":"git+https://github.com/moberwasserlechner/ionic-hierarchical-menu.git"},"author":{"name":"Michael Oberwasserlechner"},"bugs":{"url":"https://github.com/moberwasserlechner/ionic-hierarchical-menu/issues"},"license":"MIT","readmeFilename":"README.md"}