{"_id":"@akiocloud/ng5-time-picker","_rev":"2-bd0a02a00d03f502ee50c05dccc4df00","name":"@akiocloud/ng5-time-picker","dist-tags":{"latest":"0.0.8"},"versions":{"0.0.8":{"name":"@akiocloud/ng5-time-picker","version":"0.0.8","description":"A beautiful Angular Material 5 Time Picker.","main":"bundles/timePicker.umd.js","module":"index.js","typings":"index.d.ts","keywords":["angular5","angular 5"],"author":{"name":"AissamJ"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/akiocloud/ng5-time-picker.git"},"homepage":"https://github.com/akiocloud/ng5-time-picker","bugs":{"url":"https://github.com/akiocloud/ng5-time-picker/issues"},"peerDependencies":{"@angular/core":"^5.0.0","rxjs":"^5.5.2"},"dependencies":{},"devDependencies":{},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_id":"@akiocloud/ng5-time-picker@0.0.8","_npmVersion":"5.4.2","_nodeVersion":"8.8.1","_npmUser":{"name":"aissam","email":"aissam.ahbar@gmail.com"},"dist":{"integrity":"sha512-Hi81MLVHyRQEmCzVJaBc7UQJmcvj31ioUD/wIuwlIOgLORH/PxonlFdptmvYRQnb1s4Vy5OvuMwA6mdtN/R5vw==","shasum":"4156f4ce4d37504e7afe280903a39ab53f13ce74","tarball":"https://registry.npmjs.org/@akiocloud/ng5-time-picker/-/ng5-time-picker-0.0.8.tgz","fileCount":126,"unpackedSize":534697,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGohtEaIF8oeaoFvaOx9wux1uKlCnJU+KNhBOOTjS0G4AiBYSYhT6/VPtTbpFQZ/SX6aVgi0daOWQKRQ1IsH/u/fGg=="}]},"maintainers":[{"name":"aissam","email":"aissam.ahbar@gmail.com"},{"name":"cmusielak","email":"cmusielak@akio.com"},{"name":"dlebel","email":"lebel.dimitri@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng5-time-picker_0.0.8_1518184000870_0.604880492769629"},"_hasShrinkwrap":false}},"time":{"created":"2018-02-09T13:46:40.518Z","0.0.8":"2018-02-09T13:46:41.827Z","modified":"2022-04-04T12:29:36.341Z"},"maintainers":[{"name":"aissam","email":"aissam.ahbar@gmail.com"},{"name":"cmusielak","email":"cmusielak@akio.com"},{"name":"dlebel","email":"lebel.dimitri@gmail.com"}],"description":"A beautiful Angular Material 5 Time Picker.","homepage":"https://github.com/akiocloud/ng5-time-picker","keywords":["angular5","angular 5"],"repository":{"type":"git","url":"git+https://github.com/akiocloud/ng5-time-picker.git"},"author":{"name":"AissamJ"},"bugs":{"url":"https://github.com/akiocloud/ng5-time-picker/issues"},"license":"MIT","readme":"# ng5-time-picker\nThis module is a fork from https://github.com/SteveDunlap13/MaterialTimeControl.\n\nIt provides beautiful time picker for Angular Material 5.\n\n## Environment \nThe component works with Angular 5 and Angular CLI 1.5.\n\n## Install\nInstall the module via npm:\n\n    npm install ng5-time-picker --save\n\n## Usage\nImport the this module into your module as follows:\n\n    import { Ng5TimePickerModule } from 'ng5-time-picker';\n\n\t@NgModule({\n        imports: [\n            BrowserModule,\n            BrowserAnimationsModule,\n\n            Ng5TimePickerModule,\n            MatCardModule,\n            MatSnackBarModule,\n        ]\n\n    })\n    export class AppModule {\n        ...\n    }\n\nSet up the config of the time picker in your app.component.ts (ex: we choose a 12H format):\n```\n\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n\n  // Configuration of the time picker (format 12H with a default date and time)\n  public config = { hour: 7, minute: 15, meriden: 'PM', format: 12 };\n  ... \n}\n```\n\n\nUpdate your HTML (app.component.html) and instantiate the time picker :\n\n```\n<div class=\"container\">\n  <form class=\"demo-form\">\n    <timepicker color=\"primary\" [(userTime)]=\"exportTime\"></timepicker>\n  </form>\n</div>\n```\n\nUpdate your CSS (app.component.css) :\n```\n.container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n    -ms-flex-direction: row;\n    flex-direction: row;\n    -webkit-box-pack: center;\n    -ms-flex-pack: center;\n    justify-content: center;\n    position: relative;\n    margin: 1em;\n  }\n  \n  .demo-form {\n    padding: 4em;\n  }\n  \n  .mat-card {\n    padding: 0;\n    max-width: 600px;\n    margin: 3rem auto;\n  }\n```\n\n## Angular Material 5 style to import (use default or your own theme)\n\nPlease use the default theme from https://material.angular.io/guide/theming as follows:\n\nUpdate your index.html to include the following style\n\n```\n<head>\n  <link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">    \n</head>\n```\n\nUpdate your 'styles.css' to use the beautiful Angular Material theme: \n\n```\n@import \"~@angular/material/prebuilt-themes/indigo-pink.css\";\n```\n\n## Build\n\n    npm install\n    npm build\n\n## Running with Angular CLI\n\n    ng serve","readmeFilename":"README.md"}