angular-custom-dropdown
Advanced tools
angular-custom-dropdown - npm Package Compare versions
Comparing version 1.0.1 to 1.1.0
@@ -1,51 +0,1 @@ | ||
| { | ||
| "name": "angular-custom-dropdown", | ||
| "description": "Angular2+ Dropdown, simple dropdowns without relying on CSS frameworks.", | ||
| "author": { | ||
| "name": "Gerard Rovira Sánchez", | ||
| "email": "zurfyx@gmail.com", | ||
| "url": "zurfyx.com" | ||
| }, | ||
| "version": "1.0.1", | ||
| "main": "dist/index.js", | ||
| "scripts": { | ||
| "build": "typings install && ngc -p tsconfig-aot.json", | ||
| "install": "npm run build", | ||
| "test": "" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/zurfyx/angular-dropdown.git" | ||
| }, | ||
| "keywords": [ | ||
| "angular", | ||
| "angular2", | ||
| "angular4", | ||
| "typescript" | ||
| ], | ||
| "license": "MIT", | ||
| "bugs": { | ||
| "url": "https://github.com/zurfyx/angular-dropdown/issues" | ||
| }, | ||
| "homepage": "https://github.com/zurfyx/angular-dropdown#readme", | ||
| "dependencies": { | ||
| "@angular/compiler-cli": "^4.1.0", | ||
| "@angular/core": "^4.1.0", | ||
| "@angular/platform-server": "^4.1.0", | ||
| "typings": "^1.0.4" | ||
| }, | ||
| "devDependencies": { | ||
| "@angular/animations": "^4.1.0", | ||
| "@angular/common": "^4.1.0", | ||
| "@angular/compiler": "^4.1.0", | ||
| "@angular/platform-browser": "^4.1.0", | ||
| "@angular/platform-browser-dynamic": "^4.1.0", | ||
| "rxjs": "^5.1.0", | ||
| "tslint": "^4.3.1", | ||
| "typescript": "~2.1.0", | ||
| "zone.js": "0.8.4" | ||
| }, | ||
| "publishConfig": { | ||
| "registry": "https://registry.npmjs.org/" | ||
| } | ||
| } | ||
| {"name":"angular-custom-dropdown","description":"Angular2+ Dropdown. Simple dropdowns without relying on CSS frameworks.","author":{"name":"Gerard Rovira Sánchez","email":"zurfyx@gmail.com","url":"zurfyx.com"},"version":"1.1.0","license":"MIT","scripts":{"start":"ng serve","build":"ng-packagr -p ng-package.json","build-ghpages":"ng build --base-href \"https://zurfyx.github.io/angular-custom-dropdown/\" --output-path \"dist-ghpages\"","test":"npm run lint && ng test --watch false","test-watch":"ng test","e2e":"ng e2e","lint":"ng lint"},"repository":{"type":"git","url":"git+https://github.com/zurfyx/angular-custom-dropdown.git"},"bugs":{"url":"https://github.com/zurfyx/angular-custom-dropdown/issues"},"homepage":"https://github.com/zurfyx/angular-custom-dropdown#readme","keywords":["angular","dropdown","custom","simple","css"],"private":false,"dependencies":{},"devDependencies":{"@angular/animations":"^4.2.4","@angular/cli":"1.4.9","@angular/common":"^4.2.4","@angular/compiler":"^4.2.4","@angular/compiler-cli":"^4.2.4","@angular/core":"^4.2.4","@angular/forms":"^4.2.4","@angular/http":"^4.2.4","@angular/language-service":"^4.2.4","@angular/platform-browser":"^4.2.4","@angular/platform-browser-dynamic":"^4.2.4","@angular/router":"^4.2.4","@types/jasmine":"~2.5.53","@types/jasminewd2":"~2.0.2","@types/node":"~6.0.60","codelyzer":"~3.2.0","core-js":"^2.4.1","jasmine-core":"~2.6.2","jasmine-spec-reporter":"~4.1.0","karma":"~1.7.0","karma-chrome-launcher":"~2.1.1","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^1.2.1","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^1.5.0-rc.1","protractor":"~5.1.2","rxjs":"^5.4.2","ts-node":"~3.2.0","tslint":"~5.7.0","typescript":"~2.3.3","zone.js":"^0.8.14"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"main":"bundles/angular-custom-dropdown.umd.js","module":"angular-custom-dropdown.es5.js","es2015":"angular-custom-dropdown.js","typings":"angular-custom-dropdown.d.ts","metadata":"angular-custom-dropdown.metadata.json"} |
152
README.md
| # Angular Custom Dropdown | ||
| [](https://www.npmjs.com/package/angular-custom-dropdown) | ||
| [](https://travis-ci.org/zurfyx/angular-custom-dropdown) | ||
| > Create simple Angular2+ dropdowns without relying on CSS frameworks. | ||
| ## Demo | ||
| https://zurfyx.github.io/angular-custom-dropdown | ||
| ## Features | ||
| - Light and simple | ||
| - No CSS framework tied | ||
| - Compatible with [Bootstrap](https://getbootstrap.com/docs/4.0/components/dropdowns/) | ||
| ## Install | ||
@@ -11,10 +24,6 @@ | ||
| ## Result | ||
| ## Getting started | ||
|  | ||
| [my-module.module.ts](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/app.module.ts) | ||
| ## Usage | ||
| my-module.module.ts | ||
| ``` | ||
@@ -30,31 +39,134 @@ import { DropdownModule } from 'angular-custom-dropdown'; | ||
| my-module.component.ts | ||
| [my-module.component.ts](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/app.component.ts) | ||
| ∅ | ||
| [my-module.component.html](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/app.component.html) | ||
| ``` | ||
| <a class="dropdown" dropdown> | ||
| <span>Click me to reveal dropdown</span> | ||
| <ul class="dropdown-menu"> | ||
| <li><a [routerLink]="['...']">Profile</a></li> | ||
| <li><a [routerLink]="['...']">Log out</a></li> | ||
| <div class="dropdown" dropdown> | ||
| <h1 class="dropdown-toggle" dropdownToggle>Angular Custom Dropdown ▼</h1> | ||
| <ul class="dropdown-menu" dropdownMenu> | ||
| <li><a class="neat" href="https://github.com/zurfyx/angular-custom-modal" rel="noopener" target="_blank">Check it out @ GitHub</a></li> | ||
| <li><a class="neat" href="#">...</a></li> | ||
| </ul> | ||
| </a> | ||
| </div> | ||
| ``` | ||
| my-module.component.css | ||
| [my-module.component.css](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/app.component.scss) [Optional] | ||
| Styles are optional and up to you. Below are the ones that the demo page uses, but you can also use Bootstrap styles for that, or any other compatible library or framework. For most cases you'll just need to adapt the class names of the HTML snippet above. | ||
| ``` | ||
| /* Show dropdown on click (active class set). */ | ||
| .dropdown.active > .dropdown-menu { | ||
| display: initial; | ||
| .dropdown { | ||
| position: relative; | ||
| } | ||
| /* Hide dropdown by default */ | ||
| ul.dropdown-menu { | ||
| display: none; | ||
| .dropdown-menu { | ||
| position: absolute; | ||
| display: block; | ||
| align-self: center; | ||
| width: 80%; | ||
| opacity: 0; | ||
| margin: -.25rem 0 0 10%; // -.25rem top (animation). | ||
| padding: 0.25rem; | ||
| list-style-type: none; | ||
| background-color: #fff; | ||
| border-radius: 4px; | ||
| transition: .2s all ease-in; | ||
| } | ||
| .dropdown-menu li { | ||
| padding: .5rem .5rem; | ||
| } | ||
| .dropdown-menu li + li { | ||
| border-top: 1px solid #e1e1e1; | ||
| padding-top: .5rem; | ||
| } | ||
| .dropdown-menu li > a { | ||
| display: block; | ||
| border-radius: 4px; | ||
| padding: 1rem 1.5rem; | ||
| transition: .2s background-color ease-in; | ||
| } | ||
| .dropdown-menu li > a:hover { | ||
| background-color: #e9e9e9; | ||
| } | ||
| .dropdown.open .dropdown-menu { | ||
| opacity: 1; | ||
| margin-top: 0; | ||
| } | ||
| a.neat { | ||
| color: inherit; | ||
| text-decoration: none; | ||
| } | ||
| ``` | ||
| ## Advanced | ||
| All directives are exported using the same selector names, which allows you to access inner methods on your own templates or components. | ||
| ### Accessing the dropdown reference in your own template | ||
| ``` | ||
| <span (click)="myDropdown.toggle()">While the toggle element is outside the dropdown, it has a reference to dropdown.</span> | ||
| <div #myDropdown=dropdown dropdown> | ||
| ... | ||
| </div> | ||
| ``` | ||
| ### Accessing the dropdown reference in your own component | ||
| All the examples below require the HTML to have a reference such as the following: | ||
| ``` | ||
| <div #myDropdown=dropdown dropdown>...</div> | ||
| ``` | ||
| Toggle dropdown: | ||
| ``` | ||
| import { DropdownDirective } from 'angular-custom-dropdown'; | ||
| ... | ||
| @ViewChild('myDropdown') myDropdown: DropdownDirective; | ||
| openNow() { | ||
| this.myDropdown.open(); | ||
| } | ||
| ``` | ||
| Subscribing to [dropdown status changes](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/app.component.ts): | ||
| ``` | ||
| import { DropdownDirective, TOGGLE_STATUS } from 'angular-custom-dropdown'; | ||
| ... | ||
| @ViewChild('myDropdown') myDropdown: DropdownDirective; | ||
| ngOnInit() { | ||
| this.myDropdown.statusChange() | ||
| .subscribe((status: TOGGLE_STATUS) => { | ||
| let statusValue: String; | ||
| if (status === TOGGLE_STATUS.OPEN) { | ||
| statusValue = 'Opened'; | ||
| } else if (status === TOGGLE_STATUS.CLOSE) { | ||
| statusValue = 'Closed'; | ||
| } | ||
| console.info(`Dropdown status changed to "${statusValue}".`); | ||
| }); | ||
| } | ||
| ``` | ||
| Warning! This example has been shortened for the sake of readability. Subscriptions should always be cleaned up on destroy (see the full source code [here](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/app.component.ts)). | ||
| ## Special thanks | ||
| To [pleerock](https://github.com/pleerock) for [ngx-dropdown](https://github.com/pleerock/ngx-dropdown), of which I took some design ideas. | ||
| ## License | ||
| MIT © [Gerard Rovira Sánchez](//zurfyx.com) |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Install scripts
Supply chain riskInstall scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.
Found 1 instance in 1 package
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by614.16%
82135
- Dependency count
- decreased by-100%
0
- Number of package files
- increased by66.67%
20
- Lines of code
- increased by381.94%
694
- Number of lines in readme file
- increased by193.1%
170
- Number of high supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Dev dependency count
- increased by255.56%
32
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
- Removed@angular/compiler-cli@^4.1.0
- Removed@angular/core@^4.1.0
- Removed@angular/platform-server@^4.1.0
- Removedtypings@^1.0.4
- Removed@angular/animations@4.4.7(transitive)
- Removed@angular/common@4.4.7(transitive)
- Removed@angular/compiler@4.4.7(transitive)
- Removed@angular/compiler-cli@4.4.7(transitive)
- Removed@angular/core@4.4.7(transitive)
- Removed@angular/platform-browser@4.4.7(transitive)
- Removed@angular/platform-server@4.4.7(transitive)
- Removed@angular/tsc-wrapped@4.4.7(transitive)
- Removed@types/node@22.10.5(transitive)
- Removedabbrev@1.1.1(transitive)
- Removedagent-base@2.1.1(transitive)
- Removedansi-align@1.1.0(transitive)
- Removedansi-escapes@1.4.0(transitive)
- Removedansi-regex@2.1.15.0.1(transitive)
- Removedansi-styles@2.2.1(transitive)
- Removedany-promise@1.3.0(transitive)
- Removedarchy@1.0.0(transitive)
- Removedarray-uniq@1.0.3(transitive)
- Removedarrify@1.0.1(transitive)
- Removedasynckit@0.4.0(transitive)
- Removedbalanced-match@1.0.2(transitive)
- Removedbluebird@3.7.2(transitive)
- Removedboxen@0.6.0(transitive)
- Removedbrace-expansion@1.1.11(transitive)
- Removedbuffer-from@1.1.2(transitive)
- Removedcamelcase@2.1.1(transitive)
- Removedcapture-stack-trace@1.0.2(transitive)
- Removedchalk@1.1.3(transitive)
- Removedcli-boxes@1.0.0(transitive)
- Removedcli-cursor@1.0.2(transitive)
- Removedcli-truncate@0.2.1(transitive)
- Removedclone@1.0.4(transitive)
- Removedcode-point-at@1.1.0(transitive)
- Removedcolumnify@1.6.0(transitive)
- Removedcombined-stream@1.0.8(transitive)
- Removedconcat-map@0.0.1(transitive)
- Removedconcat-stream@1.6.2(transitive)
- Removedconfigstore@2.1.0(transitive)
- Removedcore-util-is@1.0.3(transitive)
- Removedcreate-error-class@3.0.2(transitive)
- Removeddebug@2.6.9(transitive)
- Removeddeep-extend@0.6.0(transitive)
- Removeddefaults@1.0.4(transitive)
- Removeddelayed-stream@1.0.0(transitive)
- Removeddetect-indent@4.0.0(transitive)
- Removeddot-prop@3.0.0(transitive)
- Removedduplexer2@0.1.4(transitive)
- Removedelegant-spinner@1.0.1(transitive)
- Removederror-ex@1.3.2(transitive)
- Removedescape-string-regexp@1.0.5(transitive)
- Removedexit-hook@1.1.1(transitive)
- Removedextend@3.0.2(transitive)
- Removedfilled-array@1.1.0(transitive)
- Removedform-data@2.5.2(transitive)
- Removedfs.realpath@1.0.0(transitive)
- Removedglob@7.2.3(transitive)
- Removedgot@5.7.1(transitive)
- Removedgraceful-fs@4.2.11(transitive)
- Removedhas@1.0.4(transitive)
- Removedhas-ansi@2.0.0(transitive)
- Removedhas-unicode@2.0.1(transitive)
- Removedhttp-proxy-agent@1.0.0(transitive)
- Removedhttps-proxy-agent@1.0.0(transitive)
- Removedimurmurhash@0.1.4(transitive)
- Removedinflight@1.0.6(transitive)
- Removedinherits@2.0.4(transitive)
- Removedini@1.3.8(transitive)
- Removedinvariant@2.2.4(transitive)
- Removedis-absolute@0.2.6(transitive)
- Removedis-arrayish@0.2.1(transitive)
- Removedis-finite@1.1.0(transitive)
- Removedis-fullwidth-code-point@1.0.0(transitive)
- Removedis-npm@1.0.0(transitive)
- Removedis-obj@1.0.1(transitive)
- Removedis-plain-obj@1.1.0(transitive)
- Removedis-redirect@1.0.0(transitive)
- Removedis-relative@0.2.1(transitive)
- Removedis-retry-allowed@1.2.0(transitive)
- Removedis-stream@1.1.0(transitive)
- Removedis-unc-path@0.1.2(transitive)
- Removedis-utf8@0.2.1(transitive)
- Removedis-windows@0.2.0(transitive)
- Removedisarray@1.0.0(transitive)
- Removedisobject@3.0.1(transitive)
- Removedjs-tokens@4.0.0(transitive)
- Removedlatest-version@2.0.0(transitive)
- Removedlazy-req@1.1.0(transitive)
- Removedlistify@1.0.3(transitive)
- Removedlockfile@1.0.4(transitive)
- Removedlog-update@1.0.2(transitive)
- Removedloose-envify@1.4.0(transitive)
- Removedlowercase-keys@1.0.1(transitive)
- Removedmake-error@1.3.6(transitive)
- Removedmake-error-cause@1.2.2(transitive)
- Removedmime-db@1.52.0(transitive)
- Removedmime-types@2.1.35(transitive)
- Removedminimatch@3.1.2(transitive)
- Removedminimist@1.2.8(transitive)
- Removedmkdirp@0.5.6(transitive)
- Removedms@2.0.0(transitive)
- Removednode-status-codes@1.0.0(transitive)
- Removednopt@1.0.10(transitive)
- Removednumber-is-nan@1.0.1(transitive)
- Removedobject-assign@4.1.1(transitive)
- Removedobject.pick@1.3.0(transitive)
- Removedonce@1.4.0(transitive)
- Removedonetime@1.1.0(transitive)
- Removedos-homedir@1.0.2(transitive)
- Removedos-tmpdir@1.0.2(transitive)
- Removedosenv@0.1.5(transitive)
- Removedpackage-json@2.4.0(transitive)
- Removedparse-json@2.2.0(transitive)
- Removedparse5@3.0.3(transitive)
- Removedpath-is-absolute@1.0.1(transitive)
- Removedpinkie@2.0.4(transitive)
- Removedpinkie-promise@2.0.1(transitive)
- Removedpopsicle@8.2.0(transitive)
- Removedpopsicle-proxy-agent@3.0.0(transitive)
- Removedpopsicle-retry@3.2.1(transitive)
- Removedpopsicle-rewrite@1.0.0(transitive)
- Removedpopsicle-status@2.0.1(transitive)
- Removedprepend-http@1.0.4(transitive)
- Removedprocess-nextick-args@2.0.1(transitive)
- Removedpromise-finally@2.2.1(transitive)
- Removedpsl@1.15.0(transitive)
- Removedpunycode@2.3.1(transitive)
- Removedrc@1.2.8(transitive)
- Removedread-all-stream@3.1.0(transitive)
- Removedreadable-stream@2.3.8(transitive)
- Removedreflect-metadata@0.1.14(transitive)
- Removedregistry-auth-token@3.4.0(transitive)
- Removedregistry-url@3.1.0(transitive)
- Removedrepeating@2.0.1(transitive)
- Removedrestore-cursor@1.0.1(transitive)
- Removedrimraf@2.7.1(transitive)
- Removedrxjs@5.5.12(transitive)
- Removedsafe-buffer@5.1.25.2.1(transitive)
- Removedsemver@5.0.35.7.2(transitive)
- Removedsemver-diff@2.1.0(transitive)
- Removedsignal-exit@3.0.7(transitive)
- Removedslice-ansi@0.0.4(transitive)
- Removedslide@1.1.6(transitive)
- Removedsort-keys@1.1.2(transitive)
- Removedsource-map@0.5.7(transitive)
- Removedsource-map-support@0.4.18(transitive)
- Removedstring-template@1.0.0(transitive)
- Removedstring-width@1.0.2(transitive)
- Removedstring_decoder@1.1.1(transitive)
- Removedstrip-ansi@3.0.16.0.1(transitive)
- Removedstrip-bom@2.0.0(transitive)
- Removedstrip-json-comments@2.0.1(transitive)
- Removedsupports-color@2.0.0(transitive)
- Removedsymbol-observable@1.0.1(transitive)
- Removedthenify@3.3.1(transitive)
- Removedthroat@3.2.0(transitive)
- Removedthrowback@1.1.1(transitive)
- Removedtimed-out@3.1.3(transitive)
- Removedtouch@1.0.0(transitive)
- Removedtough-cookie@2.5.0(transitive)
- Removedtsickle@0.21.6(transitive)
- Removedtslib@1.14.1(transitive)
- Removedtypedarray@0.0.6(transitive)
- Removedtypescript@2.9.2(transitive)
- Removedtypings@1.5.0(transitive)
- Removedtypings-core@1.6.1(transitive)
- Removedunc-path-regex@0.1.2(transitive)
- Removedundici-types@6.20.0(transitive)
- Removedunzip-response@1.0.2(transitive)
- Removedupdate-notifier@1.0.3(transitive)
- Removedurl-parse-lax@1.0.0(transitive)
- Removedutil-deprecate@1.0.2(transitive)
- Removeduuid@2.0.3(transitive)
- Removedwcwidth@1.0.1(transitive)
- Removedwidest-line@1.0.0(transitive)
- Removedwordwrap@1.0.0(transitive)
- Removedwrappy@1.0.2(transitive)
- Removedwrite-file-atomic@1.3.4(transitive)
- Removedxdg-basedir@2.0.0(transitive)
- Removedxhr2@0.1.4(transitive)
- Removedxtend@4.0.2(transitive)
- Removedzip-object@0.1.0(transitive)
- Removedzone.js@0.8.29(transitive)