select2-component
Advanced tools
Comparing version 3.0.1 to 3.1.0
"use strict"; | ||
export var angularTemplateHtml = "<div [class]=\"containerStyle\"><div class=\"selection\" (click)=\"toggleOpenAndClose()\"><div [class]=\"selectionStyle\" role=\"combobox\"><span *ngIf=\"!multiple\" class=\"select2-selection__rendered\" [title]=\"option ? option.label : ''\"><ng-container *ngIf=\"option\">{{option.label}}</ng-container><span *ngIf=\"!option\" class=\"select2-selection__placeholder\">{{placeholder}}</span></span><span *ngIf=\"!multiple\" class=\"select2-selection__arrow\" role=\"presentation\"><b role=\"presentation\"></b></span><ul *ngIf=\"multiple\" class=\"select2-selection__rendered\"><li *ngFor=\"let op of option\" class=\"select2-selection__choice\" [title]=\"op.label\"><span (click)=\"removeSelection($event, op)\" class=\"select2-selection__choice__remove\" role=\"presentation\">\u00D7</span>{{op.label}}</li></ul></div></div><div [class]=\"dropdownStyle\"><div class=\"select2-dropdown select2-dropdown--below\"><div [class]=\"searchStyle\"><input #searchInput [(ngModel)]=\"searchText\" (keydown)=\"keyDown($event)\" (focusout)=\"focusout()\" class=\"select2-search__field\" type=\"search\" role=\"textbox\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\"></div><div class=\"select2-results\"><ul #results class=\"select2-results__options\" role=\"tree\" tabindex=\"-1\" (keydown)=\"keyDown($event)\" (focusout)=\"focusout()\"><ng-container *ngFor=\"let groupOrOption of filteredData\"><li *ngIf=\"groupOrOption.options\" class=\"select2-results__option\" role=\"group\"><strong class=\"select2-results__group\">{{groupOrOption.label}}</strong><ul class=\"select2-results__options select2-results__options--nested\"><li *ngFor=\"let option of groupOrOption.options\" [class]=\"getOptionStyle(option.value)\" role=\"treeitem\" [attr.aria-selected]=\"isSelected(option)\" [attr.aria-disabled]=\"isDisabled(option)\" (mouseenter)=\"mouseenter(option)\" (click)=\"click(option)\">{{option.label}}</li></ul></li><li *ngIf=\"!groupOrOption.options\" [class]=\"getOptionStyle(groupOrOption.value)\" role=\"treeitem\" [attr.aria-selected]=\"isSelected(groupOrOption)\" [attr.aria-disabled]=\"isDisabled(groupOrOption)\" (mouseenter)=\"mouseenter(groupOrOption)\" (click)=\"click(groupOrOption)\">{{groupOrOption.label}}</li></ng-container></ul></div></div></div></div>"; | ||
export var angularTemplateHtml = "<div [class]=\"containerStyle\"><div class=\"selection\" #selection [attr.tabindex]=\"!this.isOpen ? tabIndex : '-1'\" (click)=\"toggleOpenAndClose()\" (focus)=\"focusin()\" (blur)=\"focusout()\" (keydown)=\"openKey($event)\" [class.select2-focused]=\"focused\"><div [class]=\"selectionStyle\" role=\"combobox\"><span *ngIf=\"!multiple\" class=\"select2-selection__rendered\" [title]=\"option ? option.label : ''\"><span *ngIf=\"!option\"> </span><ng-container *ngIf=\"option\">{{option.label}}</ng-container><span [class.select2-selection__placeholder__option]=\"option\" class=\"select2-selection__placeholder\">{{placeholder}}</span></span><span *ngIf=\"!multiple\" class=\"select2-selection__arrow\" role=\"presentation\"><b role=\"presentation\"></b></span><ul *ngIf=\"multiple\" class=\"select2-selection__rendered\"><span [class.select2-selection__placeholder__option]=\"option?.length > 0\" class=\"select2-selection__placeholder\">{{placeholder}}</span><li *ngFor=\"let op of option\" class=\"select2-selection__choice\" [title]=\"op.label\"><span (click)=\"removeSelection($event, op)\" class=\"select2-selection__choice__remove\" role=\"presentation\">\u00D7</span>{{op.label}}</li></ul></div><div class=\"select2-subscript-wrapper\"><ng-content select=\"select2-hint\"></ng-content></div></div><div [class]=\"dropdownStyle\"><div class=\"select2-dropdown select2-dropdown--below\"><div [class]=\"searchStyle\"><input #searchInput [id]=\"id + '-search-field'\" [(value)]=\"searchText\" (keydown)=\"keyDown($event)\" (keyup)=\"searchUpdate($event)\" class=\"select2-search__field\" type=\"search\" role=\"textbox\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\" [attr.tabindex]=\"this.isOpen ? tabIndex : '-1'\"></div><div class=\"select2-results\"><ul #results class=\"select2-results__options\" role=\"tree\" tabindex=\"-1\" (keydown)=\"keyDown($event)\"><ng-template ngFor [ngForOf]=\"filteredData\" let-groupOrOption><li *ngIf=\"groupOrOption.options\" class=\"select2-results__option\" role=\"group\"><strong [attr.class]=\"'select2-results__group' + (groupOrOption.classes ? ' ' + groupOrOption.classes : '')\">{{groupOrOption.label}}</strong><ul class=\"select2-results__options select2-results__options--nested\"><li *ngFor=\"let option of groupOrOption.options\" [class]=\"getOptionStyle(option)\" role=\"treeitem\" [attr.aria-selected]=\"isSelected(option)\" [attr.aria-disabled]=\"isDisabled(option)\" (mouseenter)=\"mouseenter(option)\" (click)=\"click(option)\">{{option.label}}</li></ul></li><li *ngIf=\"!groupOrOption.options\" [class]=\"getOptionStyle(groupOrOption)\" role=\"treeitem\" [attr.aria-selected]=\"isSelected(groupOrOption)\" [attr.aria-disabled]=\"isDisabled(groupOrOption)\" (mouseenter)=\"mouseenter(groupOrOption)\" (click)=\"click(groupOrOption)\">{{groupOrOption.label}}</li></ng-template></ul></div></div></div></div>"; |
@@ -1,50 +0,4 @@ | ||
/// <reference types="node" /> | ||
import { EventEmitter, ElementRef, ChangeDetectorRef } from "@angular/core"; | ||
import * as common from "./common"; | ||
export declare class Select2Module { | ||
} | ||
export * from "./angular.component"; | ||
export * from "./common"; | ||
export declare class Select2Component { | ||
private cdr; | ||
data: common.Select2Data; | ||
value?: common.Select2UpdateValue; | ||
disabled?: boolean; | ||
minCountForSearch?: number; | ||
placeholder?: string; | ||
customSearchEnabled?: boolean; | ||
multiple?: boolean; | ||
update: EventEmitter<{}>; | ||
open: EventEmitter<{}>; | ||
search: EventEmitter<{}>; | ||
hoveringValue: common.Select2Value | null | undefined; | ||
option: common.Select2Option | common.Select2Option[] | null; | ||
isOpen: boolean; | ||
focusoutTimer?: NodeJS.Timer; | ||
innerSearchText: string; | ||
lastScrollTopIndex: number; | ||
isSearchboxHidden: boolean; | ||
searchStyle: string; | ||
searchInputElement: HTMLElement; | ||
resultsElement: HTMLElement; | ||
searchInput: ElementRef; | ||
results: ElementRef; | ||
constructor(cdr: ChangeDetectorRef); | ||
searchText: string; | ||
readonly dropdownStyle: string; | ||
readonly filteredData: (common.Select2Option | common.Select2Group)[]; | ||
readonly containerStyle: string; | ||
readonly selectionStyle: string; | ||
ngOnInit(): void; | ||
ngAfterViewInit(): void; | ||
getOptionStyle(value: string): "select2-results__option select2-results__option--highlighted" | "select2-results__option"; | ||
mouseenter(option: common.Select2Option): void; | ||
click(option: common.Select2Option): void; | ||
toggleOpenAndClose(): void; | ||
focusout(): void; | ||
moveUp(): void; | ||
moveDown(): void; | ||
selectByEnter(): void; | ||
select(option: common.Select2Option | null): void; | ||
keyDown(e: KeyboardEvent): void; | ||
isSelected(option: common.Select2Option): "true" | "false"; | ||
isDisabled(option: common.Select2Option): "true" | "false"; | ||
removeSelection(e: MouseEvent, option: common.Select2Option): void; | ||
} |
309
angular.js
"use strict"; | ||
import * as tslib_1 from "tslib"; | ||
import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, ChangeDetectorRef } from "@angular/core"; | ||
import * as common from "./common"; | ||
export * from "./common"; | ||
import { angularTemplateHtml } from "./angular-variables"; | ||
var Select2Component = (function () { | ||
function Select2Component(cdr) { | ||
this.cdr = cdr; | ||
this.update = new EventEmitter(); | ||
this.open = new EventEmitter(); | ||
this.search = new EventEmitter(); | ||
this.hoveringValue = null; | ||
this.option = null; | ||
this.isOpen = false; | ||
this.innerSearchText = ""; | ||
this.lastScrollTopIndex = 0; | ||
import { NgModule } from "@angular/core"; | ||
import { CommonModule } from "@angular/common"; | ||
import { Select2, Select2Hint } from "./angular.component"; | ||
var Select2Module = (function () { | ||
function Select2Module() { | ||
} | ||
Object.defineProperty(Select2Component.prototype, "searchText", { | ||
get: function () { | ||
return this.innerSearchText; | ||
}, | ||
set: function (text) { | ||
if (this.customSearchEnabled) { | ||
this.search.emit(text); | ||
} | ||
this.innerSearchText = text; | ||
}, | ||
enumerable: true, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Select2Component.prototype, "dropdownStyle", { | ||
get: function () { | ||
return common.getDropdownStyle(this.isOpen); | ||
}, | ||
enumerable: true, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Select2Component.prototype, "filteredData", { | ||
get: function () { | ||
var result = this.customSearchEnabled | ||
? this.data | ||
: common.getFilteredData(this.data, this.searchText); | ||
if (common.valueIsNotInFilteredData(result, this.hoveringValue)) { | ||
this.hoveringValue = common.getFirstAvailableOption(result); | ||
if (this.resultsElement) { | ||
var lastScrollTopIndex = common.getLastScrollTopIndex(this.hoveringValue, this.resultsElement, result, this.lastScrollTopIndex); | ||
if (lastScrollTopIndex !== null) { | ||
this.lastScrollTopIndex = lastScrollTopIndex; | ||
} | ||
} | ||
} | ||
return result; | ||
}, | ||
enumerable: true, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Select2Component.prototype, "containerStyle", { | ||
get: function () { | ||
return common.getContainerStyle(this.disabled, this.isOpen); | ||
}, | ||
enumerable: true, | ||
configurable: true | ||
}); | ||
Object.defineProperty(Select2Component.prototype, "selectionStyle", { | ||
get: function () { | ||
return common.getSelectionStyle(this.multiple); | ||
}, | ||
enumerable: true, | ||
configurable: true | ||
}); | ||
Select2Component.prototype.ngOnInit = function () { | ||
var option = common.getOptionsByValue(this.data, this.value, this.multiple); | ||
if (option !== null) { | ||
this.option = option; | ||
} | ||
if (!Array.isArray(option)) { | ||
this.hoveringValue = this.value; | ||
} | ||
this.isSearchboxHidden = this.customSearchEnabled | ||
? false | ||
: common.isSearchboxHiddex(this.data, this.minCountForSearch); | ||
this.searchStyle = common.getSearchStyle(this.isSearchboxHidden); | ||
}; | ||
Select2Component.prototype.ngAfterViewInit = function () { | ||
this.searchInputElement = this.searchInput.nativeElement; | ||
this.resultsElement = this.results.nativeElement; | ||
}; | ||
Select2Component.prototype.getOptionStyle = function (value) { | ||
return common.getOptionStyle(value, this.hoveringValue); | ||
}; | ||
Select2Component.prototype.mouseenter = function (option) { | ||
if (!option.disabled) { | ||
this.hoveringValue = option.value; | ||
} | ||
}; | ||
Select2Component.prototype.click = function (option) { | ||
if (!option.disabled) { | ||
this.select(option); | ||
} | ||
if (this.focusoutTimer) { | ||
clearTimeout(this.focusoutTimer); | ||
} | ||
}; | ||
Select2Component.prototype.toggleOpenAndClose = function () { | ||
if (this.disabled) { | ||
return; | ||
} | ||
this.isOpen = !this.isOpen; | ||
if (this.isOpen) { | ||
this.innerSearchText = ""; | ||
if (!this.isSearchboxHidden) { | ||
if (this.searchInputElement) { | ||
this.searchInputElement.focus(); | ||
} | ||
} | ||
else { | ||
if (this.resultsElement) { | ||
this.resultsElement.focus(); | ||
} | ||
} | ||
if (this.resultsElement) { | ||
var lastScrollTopIndex = common.getLastScrollTopIndex(this.hoveringValue, this.resultsElement, this.data, this.lastScrollTopIndex); | ||
if (lastScrollTopIndex !== null) { | ||
this.lastScrollTopIndex = lastScrollTopIndex; | ||
} | ||
} | ||
this.open.emit(); | ||
} | ||
if (this.focusoutTimer) { | ||
clearTimeout(this.focusoutTimer); | ||
} | ||
}; | ||
Select2Component.prototype.focusout = function () { | ||
var _this = this; | ||
this.focusoutTimer = setTimeout(function () { | ||
_this.isOpen = false; | ||
_this.focusoutTimer = undefined; | ||
_this.cdr.markForCheck(); | ||
}, common.timeout); | ||
}; | ||
Select2Component.prototype.moveUp = function () { | ||
this.hoveringValue = common.getPreviousOption(this.filteredData, this.hoveringValue); | ||
if (this.resultsElement) { | ||
var lastScrollTopIndex = common.getLastScrollTopIndex(this.hoveringValue, this.resultsElement, this.filteredData, this.lastScrollTopIndex); | ||
if (lastScrollTopIndex !== null) { | ||
this.lastScrollTopIndex = lastScrollTopIndex; | ||
} | ||
} | ||
}; | ||
Select2Component.prototype.moveDown = function () { | ||
this.hoveringValue = common.getNextOption(this.filteredData, this.hoveringValue); | ||
if (this.resultsElement) { | ||
var lastScrollTopIndex = common.getLastScrollTopIndex(this.hoveringValue, this.resultsElement, this.filteredData, this.lastScrollTopIndex); | ||
if (lastScrollTopIndex !== null) { | ||
this.lastScrollTopIndex = lastScrollTopIndex; | ||
} | ||
} | ||
}; | ||
Select2Component.prototype.selectByEnter = function () { | ||
if (this.hoveringValue) { | ||
var option = common.getOptionByValue(this.data, this.hoveringValue); | ||
this.select(option); | ||
} | ||
}; | ||
Select2Component.prototype.select = function (option) { | ||
if (option !== null) { | ||
if (this.multiple) { | ||
var options = this.option; | ||
var index = -1; | ||
for (var i = 0; i < options.length; i++) { | ||
if (options[i].value === option.value) { | ||
index = i; | ||
break; | ||
} | ||
} | ||
if (index === -1) { | ||
options.push(option); | ||
} | ||
else { | ||
options.splice(index, 1); | ||
} | ||
} | ||
else { | ||
this.option = option; | ||
this.isOpen = false; | ||
} | ||
} | ||
this.update.emit(this.multiple ? this.option.map(function (op) { return op.value; }) : this.option.value); | ||
}; | ||
Select2Component.prototype.keyDown = function (e) { | ||
if (e.keyCode === 40) { | ||
this.moveDown(); | ||
e.preventDefault(); | ||
} | ||
else if (e.keyCode === 38) { | ||
this.moveUp(); | ||
e.preventDefault(); | ||
} | ||
else if (e.keyCode === 13) { | ||
this.selectByEnter(); | ||
e.preventDefault(); | ||
} | ||
}; | ||
Select2Component.prototype.isSelected = function (option) { | ||
return common.isSelected(this.option, option, this.multiple); | ||
}; | ||
Select2Component.prototype.isDisabled = function (option) { | ||
return option.disabled ? "true" : "false"; | ||
}; | ||
Select2Component.prototype.removeSelection = function (e, option) { | ||
common.removeSelection(this.option, option); | ||
this.update.emit(this.option.map(function (op) { return op.value; })); | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
if (this.isOpen) { | ||
if (!this.isSearchboxHidden) { | ||
if (this.searchInputElement) { | ||
this.searchInputElement.focus(); | ||
} | ||
} | ||
else { | ||
if (this.resultsElement) { | ||
this.resultsElement.focus(); | ||
} | ||
} | ||
} | ||
if (this.focusoutTimer) { | ||
clearTimeout(this.focusoutTimer); | ||
} | ||
}; | ||
tslib_1.__decorate([ | ||
Input(), | ||
tslib_1.__metadata("design:type", Array) | ||
], Select2Component.prototype, "data", void 0); | ||
tslib_1.__decorate([ | ||
Input(), | ||
tslib_1.__metadata("design:type", Object) | ||
], Select2Component.prototype, "value", void 0); | ||
tslib_1.__decorate([ | ||
Input(), | ||
tslib_1.__metadata("design:type", Boolean) | ||
], Select2Component.prototype, "disabled", void 0); | ||
tslib_1.__decorate([ | ||
Input(), | ||
tslib_1.__metadata("design:type", Number) | ||
], Select2Component.prototype, "minCountForSearch", void 0); | ||
tslib_1.__decorate([ | ||
Input(), | ||
tslib_1.__metadata("design:type", String) | ||
], Select2Component.prototype, "placeholder", void 0); | ||
tslib_1.__decorate([ | ||
Input(), | ||
tslib_1.__metadata("design:type", Boolean) | ||
], Select2Component.prototype, "customSearchEnabled", void 0); | ||
tslib_1.__decorate([ | ||
Input(), | ||
tslib_1.__metadata("design:type", Boolean) | ||
], Select2Component.prototype, "multiple", void 0); | ||
tslib_1.__decorate([ | ||
Output(), | ||
tslib_1.__metadata("design:type", Object) | ||
], Select2Component.prototype, "update", void 0); | ||
tslib_1.__decorate([ | ||
Output(), | ||
tslib_1.__metadata("design:type", Object) | ||
], Select2Component.prototype, "open", void 0); | ||
tslib_1.__decorate([ | ||
Output(), | ||
tslib_1.__metadata("design:type", Object) | ||
], Select2Component.prototype, "search", void 0); | ||
tslib_1.__decorate([ | ||
ViewChild("searchInput"), | ||
tslib_1.__metadata("design:type", ElementRef) | ||
], Select2Component.prototype, "searchInput", void 0); | ||
tslib_1.__decorate([ | ||
ViewChild("results"), | ||
tslib_1.__metadata("design:type", ElementRef) | ||
], Select2Component.prototype, "results", void 0); | ||
Select2Component = tslib_1.__decorate([ | ||
Component({ | ||
selector: "select2", | ||
template: angularTemplateHtml, | ||
}), | ||
tslib_1.__metadata("design:paramtypes", [ChangeDetectorRef]) | ||
], Select2Component); | ||
return Select2Component; | ||
Select2Module = tslib_1.__decorate([ | ||
NgModule({ | ||
declarations: [ | ||
Select2Hint, | ||
Select2, | ||
], | ||
imports: [ | ||
CommonModule, | ||
], | ||
exports: [ | ||
Select2Hint, | ||
Select2, | ||
], | ||
}) | ||
], Select2Module); | ||
return Select2Module; | ||
}()); | ||
export { Select2Component }; | ||
export { Select2Module }; | ||
export * from "./angular.component"; | ||
export * from "./common"; |
export declare type Select2Group = { | ||
label: string; | ||
options: Select2Option[]; | ||
classes?: string; | ||
}; | ||
@@ -10,2 +11,3 @@ export declare type Select2Option = { | ||
component?: string | Function; | ||
classes?: string; | ||
}; | ||
@@ -17,2 +19,6 @@ export declare type Select2Value = string | number; | ||
export declare const height = 28; | ||
export declare const unicodePatterns: { | ||
l: string; | ||
s: RegExp; | ||
}[]; | ||
export declare function getOptionByValue(data: Select2Data, value: Select2Value | null | undefined): Select2Option | null; | ||
@@ -25,3 +31,6 @@ export declare function getOptionsByValue(data: Select2Data, value: Select2UpdateValue | null | undefined, multiple: boolean | null | undefined): Select2Option | Select2Option[] | null; | ||
export declare function getLastScrollTopIndex(hoveringValue: Select2Value | null | undefined, results: HTMLElement, filteredData: Select2Data, lastScrollTopIndex: number): number | null; | ||
export declare function getFilteredData(data: Select2Data, searchText: string | null): (Select2Option | Select2Group)[]; | ||
export declare function protectPattern(str: string): string; | ||
export declare function formatSansUnicode(str: string): string; | ||
export declare function formatPattern(str: string, editPattern: ((str: string) => string) | undefined): string; | ||
export declare function getFilteredData(data: Select2Data, searchText: string | null, editPattern?: (str: string) => string): (Select2Option | Select2Group)[]; | ||
export declare function getOptionStyle(value: Select2Value, hoveringValue: Select2Value | null | undefined): "select2-results__option select2-results__option--highlighted" | "select2-results__option"; | ||
@@ -28,0 +37,0 @@ export declare function getDropdownStyle(isOpen: boolean): "select2-container select2-container--default select2-container-dropdown select2-container--open" | "select2-container select2-container--default select2-container-dropdown"; |
"use strict"; | ||
export var timeout = 200; | ||
export var height = 28; | ||
export var unicodePatterns = [ | ||
{ l: "a", s: /[ⓐaẚàáâầấẫẩãāăằắẵẳȧǡäǟảåǻǎȁȃạậặḁąⱥɐ]/gi }, | ||
{ l: "aa", s: /ꜳ/gi }, | ||
{ l: "ae", s: /[æǽǣ]/gi }, | ||
{ l: "ao", s: /ꜵ/gi }, | ||
{ l: "au", s: /ꜷ/gi }, | ||
{ l: "av", s: /[ꜹꜻ]/gi }, | ||
{ l: "ay", s: /ꜽ/gi }, | ||
{ l: "b", s: /[ⓑbḃḅḇƀƃɓ]/gi }, | ||
{ l: "c", s: /[ⓒcćĉċčçḉƈȼꜿↄ]/gi }, | ||
{ l: "d", s: /[ⓓdḋďḍḑḓḏđƌɖɗꝺ]/gi }, | ||
{ l: "dz", s: /[dzdž]/gi }, | ||
{ l: "e", s: /[ⓔeèéêềếễểẽēḕḗĕėëẻěȅȇẹệȩḝęḙḛɇɛǝ]/gi }, | ||
{ l: "f", s: /[ⓕfḟƒꝼ]/gi }, | ||
{ l: "g", s: /[ⓖgǵĝḡğġǧģǥɠꞡᵹꝿ]/gi }, | ||
{ l: "h", s: /[ⓗhĥḣḧȟḥḩḫẖħⱨⱶɥ]/gi }, | ||
{ l: "hv", s: /ƕ/gi }, | ||
{ l: "i", s: /[ⓘiìíîĩīĭİïḯỉǐȉȋịįḭɨı]/gi }, | ||
{ l: "j", s: /[ⓙjĵǰɉ]/gi }, | ||
{ l: "k", s: /[ⓚkḱǩḳķḵƙⱪꝁꝃꝅꞣ]/gi }, | ||
{ l: "l", s: /[ⓛlŀĺľḷḹļḽḻſłƚɫⱡꝉꞁꝇꝆ]/gi }, | ||
{ l: "lj", s: /lj/gi }, | ||
{ l: "m", s: /[ⓜmḿṁṃɱɯ]/gi }, | ||
{ l: "n", s: /[ⓝnǹńñṅňṇņṋṉƞɲʼnꞑꞥ]/gi }, | ||
{ l: "nj", s: /nj/gi }, | ||
{ l: "o", s: /[ⓞoòóôồốỗổõṍȭṏōṑṓŏȯȱöȫỏőǒȍȏơờớỡởợọộǫǭøǿɔƟꝋꝍɵ]/gi }, | ||
{ l: "oi", s: /ƣ/gi }, | ||
{ l: "oe", s: /œ/gi }, | ||
{ l: "oo", s: /ꝏ/gi }, | ||
{ l: "ou", s: /ȣ/gi }, | ||
{ l: "p", s: /[ⓟpṕṗƥᵽꝑꝓꝕ]/gi }, | ||
{ l: "q", s: /[ⓠqɋꝗꝙ]/gi }, | ||
{ l: "r", s: /[ⓡrŕṙřȑȓṛṝŗṟɍɽꝛꞧꞃ]/gi }, | ||
{ l: "s", s: /[ⓢsßẞśṥŝṡšṧṣṩșşȿꞩꞅẛ]/gi }, | ||
{ l: "t", s: /[ⓣtṫẗťṭțţṱṯŧƭʈⱦꞇ]/gi }, | ||
{ l: "tz", s: /ꜩ/gi }, | ||
{ l: "u", s: /[ⓤuùúûũṹūṻŭüǜǘǖǚủůűǔȕȗưừứữửựụṳųṷṵʉ]/gi }, | ||
{ l: "v", s: /[ⓥvṽṿʋꝟʌ]/gi }, | ||
{ l: "vy", s: /ꝡ/gi }, | ||
{ l: "w", s: /[ⓦwẁẃŵẇẅẘẉⱳ]/gi }, | ||
{ l: "x", s: /[ⓧxẋẍ]/gi }, | ||
{ l: "y", s: /[ⓨyỳýŷỹȳẏÿỷẙỵƴɏỿ]/gi }, | ||
{ l: "z", s: /[ⓩzźẑżžẓẕƶȥɀⱬꝣ]/gi }, | ||
]; | ||
function getScrollUpIndex(data, value) { | ||
@@ -205,6 +249,25 @@ var index = 0; | ||
} | ||
function containSearchText(label, searchText) { | ||
return searchText ? label.toLowerCase().indexOf(searchText.toLowerCase()) > -1 : true; | ||
function containSearchText(label, searchText, editPattern) { | ||
return searchText | ||
? formatSansUnicode(label).match(new RegExp(formatPattern(searchText, editPattern), "i")) !== null | ||
: true; | ||
} | ||
export function getFilteredData(data, searchText) { | ||
export function protectPattern(str) { | ||
return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); | ||
} | ||
export function formatSansUnicode(str) { | ||
for (var _i = 0, unicodePatterns_1 = unicodePatterns; _i < unicodePatterns_1.length; _i++) { | ||
var unicodePattern = unicodePatterns_1[_i]; | ||
str = str.replace(unicodePattern.s, unicodePattern.l); | ||
} | ||
return str; | ||
} | ||
export function formatPattern(str, editPattern) { | ||
str = formatSansUnicode(protectPattern(str)); | ||
if (editPattern && typeof editPattern === "function") { | ||
str = editPattern(str); | ||
} | ||
return str; | ||
} | ||
export function getFilteredData(data, searchText, editPattern) { | ||
if (searchText) { | ||
@@ -216,4 +279,4 @@ var result = []; | ||
if (options) { | ||
if (options.some(function (group) { return containSearchText(group.label, searchText); })) { | ||
var filteredOptions = options.filter(function (group) { return containSearchText(group.label, searchText); }); | ||
if (options.some(function (group) { return containSearchText(group.label, searchText, editPattern); })) { | ||
var filteredOptions = options.filter(function (group) { return containSearchText(group.label, searchText, editPattern); }); | ||
result.push({ | ||
@@ -225,3 +288,3 @@ label: groupOrOption.label, | ||
} | ||
else if (containSearchText(groupOrOption.label, searchText)) { | ||
else if (containSearchText(groupOrOption.label, searchText, editPattern)) { | ||
result.push(groupOrOption); | ||
@@ -247,3 +310,4 @@ } | ||
export function getContainerStyle(disabled, isOpen) { | ||
return "select2 select2-container select2-container--default " + (disabled ? "select2-container--disabled" : "") + " " + (isOpen ? "select2-container--open" : "") + " select2-container--below select2-container--focus"; | ||
return "select2 select2-container select2-container--default " + (disabled ? "select2-container--disabled" : "") + " " | ||
+ ((isOpen ? "select2-container--open" : "") + " select2-container--below select2-container--focus"); | ||
} | ||
@@ -250,0 +314,0 @@ export function getSelectionStyle(multiple) { |
{ | ||
"name": "select2-component", | ||
"version": "3.0.1", | ||
"version": "3.1.0", | ||
"description": "A vuejs, reactjs and angular select component.", | ||
@@ -24,8 +24,8 @@ "main": "index.js", | ||
"devDependencies": { | ||
"@angular/common": "4.3.2", | ||
"@angular/compiler": "4.3.2", | ||
"@angular/core": "4.3.2", | ||
"@angular/forms": "4.3.2", | ||
"@angular/platform-browser": "4.3.2", | ||
"@angular/platform-browser-dynamic": "4.3.2", | ||
"@angular/common": "4.3.3", | ||
"@angular/compiler": "4.3.3", | ||
"@angular/core": "4.3.3", | ||
"@angular/forms": "4.3.3", | ||
"@angular/platform-browser": "4.3.3", | ||
"@angular/platform-browser-dynamic": "4.3.3", | ||
"@types/jasmine": "2.5.53", | ||
@@ -32,0 +32,0 @@ "@types/react": "15.6.0", |
@@ -27,2 +27,4 @@ [![Dependency Status](https://david-dm.org/plantain-00/select2-component.svg)](https://david-dm.org/plantain-00/select2-component) | ||
+ multiple selection | ||
+ material style(angular only) | ||
+ form binding(angular only) | ||
@@ -104,2 +106,5 @@ #### install | ||
multiple | boolean? | select multiple options | ||
material | `""` or `true` | enable material style(angular only) | ||
editPattern | (str: string) => string | use it for change the pattern of the filter search(angular only) | ||
ngModel/id/required/disabled/readonly/tabIndex | just like a `select` control | (angular only) | ||
update | (value: [Select2UpdateValue](#select2-data-structure)) => void | triggered when user select an option | ||
@@ -117,2 +122,3 @@ open | () => void | triggered when user open the options | ||
options: Select2Option[]; | ||
classes?: string; | ||
}; | ||
@@ -125,2 +131,3 @@ | ||
component?: string | Function; // the component | ||
classes?: string; | ||
}; | ||
@@ -127,0 +134,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
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
110686
19
2245
165