New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

angular2-select

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular2-select - npm Package Compare versions

Comparing version

1.0.0-alpha
to
1.0.0-alpha.0

4

index.d.ts

@@ -1,2 +0,2 @@

import { MdSelectComponent } from './src/select.component';
export declare const MD_SELECT_DIRECTIVES: typeof MdSelectComponent[];
import { SelectComponent } from './src/select.component';
export declare const SELECT_DIRECTIVES: typeof SelectComponent[];

2

index.js
"use strict";
var select_component_1 = require('./src/select.component');
exports.MD_SELECT_DIRECTIVES = [select_component_1.MdSelectComponent];
exports.SELECT_DIRECTIVES = [select_component_1.SelectComponent];

4

package.json
{
"name": "angular2-select",
"version": "1.0.0-alpha",
"description": "Select component for Angular 2 (based on the select2 JQuery plugin).",
"version": "1.0.0-alpha.0",
"description": "Select component for Angular 2 (based on select2 JQuery plugin).",
"main": "dist/index.js",

@@ -6,0 +6,0 @@ "scripts": {

75

README.md

@@ -1,1 +0,74 @@

# Angular 2 select component (a la select2 JQuery plugin)
# Angular 2 select component
A native select component for angular 2, based on the select2 JQuery plugin.
## Install
```
npm install --save angular2-select
```
## Configuration
### Systemjs
In `systemjs.config.js` add `angular2-select` to map and package:
```javascript
var map = {
// others...,
'angular2-select': 'node_modules/angular2-select'
};
var packages = {
// others...,
'angular2-select': {
main: 'index.js',
defaultExtension: 'js'
}
};
```
## Usage
```typescript
import {SELECT_DIRECTIVES} from 'angular2-select';
```
```html
<ng-select
[options]="options">
</ng-select>
```
Adding `SELECT_DIRECTIVES` to the list of directives.
```typescript
export class AppComponent implements {
options = [
{
value: 'a',
label: 'Alpha'
},
{
value: 'b',
label: 'Beta'
},
{
value: 'c',
label: 'Gamma'
}
];
}
```
## Develop
Clone or fork the repository and run:
```
npm install
gulp build
```

2

src/select-dropdown.component.d.ts
import { EventEmitter, OnInit } from '@angular/core';
import { DiacriticsService } from './diacritics.service';
export declare class MdSelectDropdownComponent implements OnInit {
export declare class SelectDropdownComponent implements OnInit {
private diacriticsService;

@@ -5,0 +5,0 @@ private MSG_LOADING;

70

src/select-dropdown.component.js

@@ -14,4 +14,4 @@ "use strict";

var diacritics_service_1 = require('./diacritics.service');
var MdSelectDropdownComponent = (function () {
function MdSelectDropdownComponent(diacriticsService) {
var SelectDropdownComponent = (function () {
function SelectDropdownComponent(diacriticsService) {
this.diacriticsService = diacriticsService;

@@ -46,9 +46,9 @@ // Messages.

**************************************************************************/
MdSelectDropdownComponent.prototype.ngOnInit = function () {
SelectDropdownComponent.prototype.ngOnInit = function () {
this.init();
};
MdSelectDropdownComponent.prototype.onInputClick = function (event) {
SelectDropdownComponent.prototype.onInputClick = function (event) {
event.stopPropagation();
};
MdSelectDropdownComponent.prototype.onOptionsMouseMove = function (event) {
SelectDropdownComponent.prototype.onOptionsMouseMove = function (event) {
var v = event.target.dataset.value;

@@ -59,12 +59,12 @@ if (typeof v !== 'undefined') {

};
MdSelectDropdownComponent.prototype.onOptionsWheel = function (event) {
SelectDropdownComponent.prototype.onOptionsWheel = function (event) {
this.handleOptionsWheel(event);
};
MdSelectDropdownComponent.prototype.onOptionsClick = function (event) {
SelectDropdownComponent.prototype.onOptionsClick = function (event) {
this.toggleSelect.emit(event.target.dataset.value);
};
MdSelectDropdownComponent.prototype.onKeydown = function (event) {
SelectDropdownComponent.prototype.onKeydown = function (event) {
this.handleKeyDown(event);
};
MdSelectDropdownComponent.prototype.onInput = function (event) {
SelectDropdownComponent.prototype.onInput = function (event) {
this.filter(event.target.value);

@@ -75,3 +75,3 @@ };

**************************************************************************/
MdSelectDropdownComponent.prototype.init = function () {
SelectDropdownComponent.prototype.init = function () {
// Set filtered list of options to all options.

@@ -87,7 +87,7 @@ this.optionValuesFiltered = this.optionValues;

**************************************************************************/
MdSelectDropdownComponent.prototype.initHighlight = function () {
SelectDropdownComponent.prototype.initHighlight = function () {
this.highlighted = this.selection.length > 0 ?
this.selection[0] : this.optionsDict[this.optionValues[0]];
};
MdSelectDropdownComponent.prototype.highlight = function (optionValue) {
SelectDropdownComponent.prototype.highlight = function (optionValue) {
if (this.highlighted === null ||

@@ -98,3 +98,3 @@ optionValue !== this.highlighted.value) {

};
MdSelectDropdownComponent.prototype.ensureHighlightedVisible = function () {
SelectDropdownComponent.prototype.ensureHighlightedVisible = function () {
var list = this.optionsList.nativeElement;

@@ -116,3 +116,3 @@ var listHeight = list.offsetHeight;

};
MdSelectDropdownComponent.prototype.highlightIndex = function () {
SelectDropdownComponent.prototype.highlightIndex = function () {
if (this.highlighted === null) {

@@ -126,3 +126,3 @@ return null;

**************************************************************************/
MdSelectDropdownComponent.prototype.filter = function (term) {
SelectDropdownComponent.prototype.filter = function (term) {
// Nothing to filter, set all options.

@@ -150,3 +150,3 @@ if (term.trim() === '') {

};
MdSelectDropdownComponent.prototype.handleKeyDown = function (event) {
SelectDropdownComponent.prototype.handleKeyDown = function (event) {
var key = event.which;

@@ -182,3 +182,3 @@ if (key === this.KEYS.ESC || key === this.KEYS.TAB ||

};
MdSelectDropdownComponent.prototype.handleOptionsWheel = function (event) {
SelectDropdownComponent.prototype.handleOptionsWheel = function (event) {
var element = this.optionsList.nativeElement;

@@ -203,3 +203,3 @@ var top = element.scrollTop;

**************************************************************************/
MdSelectDropdownComponent.prototype.getOptionClass = function (optionValue) {
SelectDropdownComponent.prototype.getOptionClass = function (optionValue) {
var result = {};

@@ -215,3 +215,3 @@ var hlValue = this.highlighted === null ? '' : this.highlighted.value;

**************************************************************************/
MdSelectDropdownComponent.prototype.filteredOptionsIndex = function (optionValue) {
SelectDropdownComponent.prototype.filteredOptionsIndex = function (optionValue) {
for (var i = 0; i < this.optionValuesFiltered.length; i++) {

@@ -227,46 +227,46 @@ if (this.optionValuesFiltered[i] === optionValue) {

__metadata('design:type', Boolean)
], MdSelectDropdownComponent.prototype, "isSingle", void 0);
], SelectDropdownComponent.prototype, "isSingle", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Array)
], MdSelectDropdownComponent.prototype, "optionValues", void 0);
], SelectDropdownComponent.prototype, "optionValues", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], MdSelectDropdownComponent.prototype, "optionsDict", void 0);
], SelectDropdownComponent.prototype, "optionsDict", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Array)
], MdSelectDropdownComponent.prototype, "selection", void 0);
], SelectDropdownComponent.prototype, "selection", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Number)
], MdSelectDropdownComponent.prototype, "width", void 0);
], SelectDropdownComponent.prototype, "width", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Number)
], MdSelectDropdownComponent.prototype, "top", void 0);
], SelectDropdownComponent.prototype, "top", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Number)
], MdSelectDropdownComponent.prototype, "left", void 0);
], SelectDropdownComponent.prototype, "left", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', Object)
], MdSelectDropdownComponent.prototype, "close", void 0);
], SelectDropdownComponent.prototype, "close", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', Object)
], MdSelectDropdownComponent.prototype, "toggleSelect", void 0);
], SelectDropdownComponent.prototype, "toggleSelect", void 0);
__decorate([
core_1.ViewChild('input'),
__metadata('design:type', Object)
], MdSelectDropdownComponent.prototype, "input", void 0);
], SelectDropdownComponent.prototype, "input", void 0);
__decorate([
core_1.ViewChild('optionsList'),
__metadata('design:type', Object)
], MdSelectDropdownComponent.prototype, "optionsList", void 0);
MdSelectDropdownComponent = __decorate([
], SelectDropdownComponent.prototype, "optionsList", void 0);
SelectDropdownComponent = __decorate([
core_1.Component({
selector: 'md-select-dropdown',
selector: 'select-dropdown',
template: "\n<span class=\"select2-container select2-container--default select2-container--open\"\n [ngStyle]=\"{position: 'absolute', top: top + 'px', left: left + 'px'}\">\n <span class=\"select2-dropdown select2-dropdown--below\"\n [ngStyle]=\"{width: width + 'px'}\">\n <span class=\"select2-search select2-search--dropdown\">\n <input class=\"select2-search__field\"\n #input\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (click)=\"onInputClick($event)\">\n </span>\n <span class=\"select2-results\">\n <ul class=\"select2-results__options\"\n #optionsList\n (mousemove)=\"onOptionsMouseMove($event)\"\n (wheel)=\"onOptionsWheel($event)\"\n (click)=\"onOptionsClick($event)\">\n <li\n *ngFor=\"let optionValue of optionValuesFiltered;\"\n [attr.aria-selected]=\"optionsDict[optionValue].selected\"\n [ngClass]=\"getOptionClass(optionValue)\"\n [attr.data-value]=\"optionValue\">\n {{optionsDict[optionValue].label}}\n </li>\n <li \n *ngIf=\"optionValuesFiltered.length === 0\"\n [ngClass]=\"getOptionClass(null)\">\n {{MSG_NOT_FOUND}}\n </li>\n </ul>\n </span>\n </span>\n</span>\n",

@@ -285,5 +285,5 @@ styleUrls: [

__metadata('design:paramtypes', [diacritics_service_1.DiacriticsService])
], MdSelectDropdownComponent);
return MdSelectDropdownComponent;
], SelectDropdownComponent);
return SelectDropdownComponent;
}());
exports.MdSelectDropdownComponent = MdSelectDropdownComponent;
exports.SelectDropdownComponent = SelectDropdownComponent;

2

src/select.component.d.ts
import { OnInit } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
export declare class MdSelectComponent implements ControlValueAccessor, OnInit {
export declare class SelectComponent implements ControlValueAccessor, OnInit {
private S2;

@@ -5,0 +5,0 @@ private S2_CONTAINER;

94

src/select.component.js

@@ -15,8 +15,8 @@ "use strict";

var select_dropdown_component_1 = require('./select-dropdown.component');
var MD_SELECT_VALUE_ACCESSOR = new core_1.Provider(forms_1.NG_VALUE_ACCESSOR, {
useExisting: core_1.forwardRef(function () { return MdSelectComponent; }),
var SELECT_VALUE_ACCESSOR = new core_1.Provider(forms_1.NG_VALUE_ACCESSOR, {
useExisting: core_1.forwardRef(function () { return SelectComponent; }),
multi: true
});
var MdSelectComponent = (function () {
function MdSelectComponent() {
var SelectComponent = (function () {
function SelectComponent() {
// Class names.

@@ -50,26 +50,26 @@ this.S2 = 'select2';

**************************************************************************/
MdSelectComponent.prototype.ngOnInit = function () {
SelectComponent.prototype.ngOnInit = function () {
this.init();
};
MdSelectComponent.prototype.onSelectionClick = function (event) {
SelectComponent.prototype.onSelectionClick = function (event) {
this.toggleDropdown();
event.stopPropagation();
};
MdSelectComponent.prototype.onClearClick = function (event) {
SelectComponent.prototype.onClearClick = function (event) {
this.clearSelected();
event.stopPropagation();
};
MdSelectComponent.prototype.onToggleSelect = function (optionValue) {
SelectComponent.prototype.onToggleSelect = function (optionValue) {
this.toggleSelect(optionValue);
};
MdSelectComponent.prototype.onClose = function (focus) {
SelectComponent.prototype.onClose = function (focus) {
this.close(focus);
};
MdSelectComponent.prototype.onWindowClick = function () {
SelectComponent.prototype.onWindowClick = function () {
this.close(false);
};
MdSelectComponent.prototype.onWindowResize = function () {
SelectComponent.prototype.onWindowResize = function () {
this.updateWidth();
};
MdSelectComponent.prototype.onKeydown = function (event) {
SelectComponent.prototype.onKeydown = function (event) {
this.handleKeyDown(event);

@@ -80,7 +80,7 @@ };

**************************************************************************/
MdSelectComponent.prototype.init = function () {
SelectComponent.prototype.init = function () {
this.initOptions();
this.initDefaults();
};
MdSelectComponent.prototype.initOptions = function () {
SelectComponent.prototype.initOptions = function () {
var values = [];

@@ -100,3 +100,3 @@ var opts = {};

};
MdSelectComponent.prototype.initDefaults = function () {
SelectComponent.prototype.initDefaults = function () {
if (typeof this.isSingle === 'undefined') {

@@ -115,3 +115,3 @@ this.isSingle = true;

**************************************************************************/
MdSelectComponent.prototype.toggleDropdown = function () {
SelectComponent.prototype.toggleDropdown = function () {
if (!this.isDisabled) {

@@ -121,3 +121,3 @@ this.isOpen ? this.close(true) : this.open();

};
MdSelectComponent.prototype.open = function () {
SelectComponent.prototype.open = function () {
this.updateWidth();

@@ -127,3 +127,3 @@ this.updatePosition();

};
MdSelectComponent.prototype.close = function (focus) {
SelectComponent.prototype.close = function (focus) {
this.isOpen = false;

@@ -137,3 +137,3 @@ if (focus) {

**************************************************************************/
MdSelectComponent.prototype.toggleSelect = function (value) {
SelectComponent.prototype.toggleSelect = function (value) {
if (this.isSingle && this.selection.length > 0) {

@@ -146,3 +146,3 @@ this.selection[0].selected = false;

};
MdSelectComponent.prototype.updateSelection = function () {
SelectComponent.prototype.updateSelection = function () {
var s = [];

@@ -163,3 +163,3 @@ var v = [];

};
MdSelectComponent.prototype.clearSelected = function () {
SelectComponent.prototype.clearSelected = function () {
for (var item in this.optionsDict) {

@@ -176,3 +176,3 @@ this.optionsDict[item].selected = false;

**************************************************************************/
MdSelectComponent.prototype.writeValue = function (value) {
SelectComponent.prototype.writeValue = function (value) {
if (typeof value === 'undefined' || value === null) {

@@ -190,9 +190,9 @@ value = [];

};
MdSelectComponent.prototype.registerOnChange = function (fn) {
SelectComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
MdSelectComponent.prototype.registerOnTouched = function (fn) {
SelectComponent.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
MdSelectComponent.prototype.handleKeyDown = function (event) {
SelectComponent.prototype.handleKeyDown = function (event) {
var key = event.which;

@@ -208,14 +208,14 @@ if (key === this.KEYS.ENTER || key === this.KEYS.SPACE ||

**************************************************************************/
MdSelectComponent.prototype.focus = function () {
SelectComponent.prototype.focus = function () {
this.hasFocus = true;
this.selectionSpan.nativeElement.focus();
};
MdSelectComponent.prototype.blur = function () {
SelectComponent.prototype.blur = function () {
this.hasFocus = false;
this.selectionSpan.nativeElement.blur();
};
MdSelectComponent.prototype.updateWidth = function () {
SelectComponent.prototype.updateWidth = function () {
this.width = this.container.nativeElement.offsetWidth;
};
MdSelectComponent.prototype.updatePosition = function () {
SelectComponent.prototype.updatePosition = function () {
var e = this.container.nativeElement;

@@ -225,3 +225,3 @@ this.left = e.offsetLeft;

};
MdSelectComponent.prototype.getContainerClass = function () {
SelectComponent.prototype.getContainerClass = function () {
var result = {};

@@ -237,3 +237,3 @@ result[this.S2] = true;

};
MdSelectComponent.prototype.getSelectionClass = function () {
SelectComponent.prototype.getSelectionClass = function () {
var result = {};

@@ -245,3 +245,3 @@ var s = this.S2_SELECTION;

};
MdSelectComponent.prototype.showPlaceholder = function () {
SelectComponent.prototype.showPlaceholder = function () {
return typeof this.placeholder !== 'undefined' &&

@@ -253,31 +253,31 @@ this.selection.length === 0;

__metadata('design:type', Array)
], MdSelectComponent.prototype, "options", void 0);
], SelectComponent.prototype, "options", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', String)
], MdSelectComponent.prototype, "theme", void 0);
], SelectComponent.prototype, "theme", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Boolean)
], MdSelectComponent.prototype, "isSingle", void 0);
], SelectComponent.prototype, "isSingle", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', String)
], MdSelectComponent.prototype, "placeholder", void 0);
], SelectComponent.prototype, "placeholder", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Boolean)
], MdSelectComponent.prototype, "allowClear", void 0);
], SelectComponent.prototype, "allowClear", void 0);
__decorate([
core_1.ViewChild('container'),
__metadata('design:type', Object)
], MdSelectComponent.prototype, "container", void 0);
], SelectComponent.prototype, "container", void 0);
__decorate([
core_1.ViewChild('selectionSpan'),
__metadata('design:type', Object)
], MdSelectComponent.prototype, "selectionSpan", void 0);
MdSelectComponent = __decorate([
], SelectComponent.prototype, "selectionSpan", void 0);
SelectComponent = __decorate([
core_1.Component({
selector: 'md-select',
template: "\n<div style=\"width:100%;position:relative;\">\n <span style=\"width:100%\"\n #container\n [ngClass]=\"getContainerClass()\"\n (window:resize)=\"onWindowResize()\"\n (window:click)=\"onWindowClick()\">\n <span class=\"selection\">\n <span tabindex=0\n #selectionSpan\n [ngClass]=\"getSelectionClass()\"\n (click)=\"onSelectionClick($event)\"\n (keydown)=\"onKeydown($event)\">\n\n <span class=\"select2-selection__rendered\"\n *ngIf=\"isSingle && showPlaceholder()\">\n <span class=\"select2-selection__placeholder\">\n {{placeholder}}\n </span>\n </span>\n \n <span class=\"select2-selection__rendered\"\n *ngIf=\"isSingle && selection.length > 0\">\n <span class=\"select2-selection__clear\"\n *ngIf=\"allowClear\"\n (click)=\"onClearClick($event)\">\n x\n </span>\n {{selection[0].label}}\n </span>\n\n <ul class=\"select2-selection__rendered\"\n *ngIf=\"!isSingle\">\n <li class=\"select2-selection__choice\" title=\"{{option.label}}\"\n *ngFor=\"let option of selection\">\n <span class=\"select2-selection__choice__remove\">\u00D7</span>\n {{option.label}}\n </li>\n <li class=\"select2-search select2-search--inline\">\n <input class=\"select2-search__field\" />\n </li>\n </ul>\n\n <span class=\"select2-selection__arrow\">\n <b></b>\n </span>\n </span>\n </span>\n </span>\n <md-select-dropdown\n *ngIf=\"isOpen\"\n #dropdown\n [isSingle]=\"isSingle\"\n [optionValues]=\"optionValues\"\n [optionsDict]=\"optionsDict\"\n [selection]=\"selection\"\n [width]=\"width\"\n [top]=\"top\"\n [left]=\"left\"\n (toggleSelect)=\"onToggleSelect($event)\"\n (close)=\"onClose($event)\">\n </md-select-dropdown>\n</div>\n",
selector: 'ng-select',
template: "\n<div style=\"width:100%;position:relative;\">\n <span style=\"width:100%\"\n #container\n [ngClass]=\"getContainerClass()\"\n (window:resize)=\"onWindowResize()\"\n (window:click)=\"onWindowClick()\">\n <span class=\"selection\">\n <span tabindex=0\n #selectionSpan\n [ngClass]=\"getSelectionClass()\"\n (click)=\"onSelectionClick($event)\"\n (keydown)=\"onKeydown($event)\">\n\n <span class=\"select2-selection__rendered\"\n *ngIf=\"isSingle && showPlaceholder()\">\n <span class=\"select2-selection__placeholder\">\n {{placeholder}}\n </span>\n </span>\n \n <span class=\"select2-selection__rendered\"\n *ngIf=\"isSingle && selection.length > 0\">\n <span class=\"select2-selection__clear\"\n *ngIf=\"allowClear\"\n (click)=\"onClearClick($event)\">\n x\n </span>\n {{selection[0].label}}\n </span>\n\n <ul class=\"select2-selection__rendered\"\n *ngIf=\"!isSingle\">\n <li class=\"select2-selection__choice\" title=\"{{option.label}}\"\n *ngFor=\"let option of selection\">\n <span class=\"select2-selection__choice__remove\">\u00D7</span>\n {{option.label}}\n </li>\n <li class=\"select2-search select2-search--inline\">\n <input class=\"select2-search__field\" />\n </li>\n </ul>\n\n <span class=\"select2-selection__arrow\">\n <b></b>\n </span>\n </span>\n </span>\n </span>\n <select-dropdown\n *ngIf=\"isOpen\"\n #dropdown\n [isSingle]=\"isSingle\"\n [optionValues]=\"optionValues\"\n [optionsDict]=\"optionsDict\"\n [selection]=\"selection\"\n [width]=\"width\"\n [top]=\"top\"\n [left]=\"left\"\n (toggleSelect)=\"onToggleSelect($event)\"\n (close)=\"onClose($event)\">\n </select-dropdown>\n</div>\n",
styleUrls: [

@@ -288,12 +288,12 @@ '../select2.css'

common_1.CORE_DIRECTIVES,
select_dropdown_component_1.MdSelectDropdownComponent
select_dropdown_component_1.SelectDropdownComponent
],
providers: [
MD_SELECT_VALUE_ACCESSOR
SELECT_VALUE_ACCESSOR
]
}),
__metadata('design:paramtypes', [])
], MdSelectComponent);
return MdSelectComponent;
], SelectComponent);
return SelectComponent;
}());
exports.MdSelectComponent = MdSelectComponent;
exports.SelectComponent = SelectComponent;