ngx-choices

Version:

Angular 4+ typehead to search and select multiple tags.

1 lines • 17 kB

JSON

{"__symbolic":"module","version":4,"metadata":{"NgxChoicesModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":16,"character":4},{"__symbolic":"reference","module":"ngx-autosize-input","name":"autoSizeInputModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":18,"character":4}],"declarations":[{"__symbolic":"reference","name":"NgxChoicesComponent"}],"exports":[{"__symbolic":"reference","name":"NgxChoicesComponent"}]}]}],"members":{}},"NgxChoicesComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"ngx-choices","template":"<div class=\"choice-selector\" (click)=\"focusInput()\">  <ng-container *ngIf=\"config.mode == _NGX_CHOICES_MODE.NORMAL\"> <div class=\"choice\" *ngFor=\"let value of values; let index = index;\" [style.lineHeight]=\"config.style.choiceElementHeight\" [style.height]=\"config.style.choiceElementHeight\" [style.borderRadius]=\"config.style.choiceBorderRadius\"> <div class=\"content\" > <div class=\"choice-text\" [style.lineHeight]=\"config.style.choiceElementHeight\">{{ value }}</div> </div> <div class=\"divider\"></div> <div class=\"delete\" (click)=\"removeValue(value, index)\">✕</div> </div> </ng-container>  <ng-container *ngIf=\"config.mode == _NGX_CHOICES_MODE.ABSTRACT\"> <div class=\"choice\" *ngFor=\"let value of values; let index = index;\" [style.height]=\"config.style.choiceElementHeight\" [style.borderRadius]=\"config.style.choiceBorderRadius\"> <div class=\"content\"> <div class=\"choice-avatar\" *ngIf=\"config.avatar && value[config.avatar]\"> <img [src]=\"value[config.avatar]\" [alt]=\"value[config.label]\" [style.width]=\"config.style.choiceElementHeight\" [style.height]=\"config.style.choiceElementHeight\" [style.borderRadius]=\"config.style.choiceElementHeight\" [class.circular]=\"isSingleSelector\" /> </div> <div class=\"choice-avatar\" *ngIf=\"config.avatar_url && config.avatar && !value[config.avatar]\"> <img [src]=\"config.avatar_url\" [alt]=\"value[config.label]\" [style.width]=\"config.style.choiceElementHeight\" [style.height]=\"config.style.choiceElementHeight\" [style.borderRadius]=\"config.style.choiceElementHeight\" /> </div> <div class=\"choice-text\" [style.lineHeight]=\"config.style.choiceElementHeight\">{{ value[config.label] }}</div> </div> <div class=\"divider\"></div> <div class=\"delete\" (click)=\"removeValue(value, index)\">✕</div> </div> </ng-container>  <div class=\"query-input\" [class.hidden]=\"(isSingleSelector && values.length >= 1) || (config.hideInputOnMaxSelections && isAtMaxSelections)\"> <input name=\"query\" type=\"text\" autocomplete=\"off\" [pattern]=\"config.pattern\" [placeholder]=\"config.placeholder\" [style.height]=\"config.style.choiceElementHeight\" [style.minWidth]=\"config.style.minInputWidth\" [formControl]=\"inputCtrl\" [class.extraPadding]=\"values.length == 0 && isSingleSelector\" (input)=\"onQueryType()\" #input appAutoSizeInput/>  <span class=\"choices-spinner\" *ngIf=\"loading\"> <span class=\"loader\"></span> </span> </div> </div> <div class=\"items-dropdown\" *ngIf=\"isDropdownOpened\">  <div *ngIf=\"isAtMaxSelectionss\" class=\"items-dropdown-alert\"> You can not select more than {{ config.maxSelections }} items. </div>  <ng-container *ngFor=\"let item of filteredItems; let index = index;\"> <div *ngIf=\"!isItemSelected(item)\" class=\"items-dropdown-item\" (click)=\"itemClicked(item, $event)\"> <div class=\"choice-item-avatar\" *ngIf=\"config.avatar && item[config.avatar]\"> <img [src]=\"item[config.avatar]\" [alt]=\"item[config.label]\"> </div> <div class=\"choice-item-avatar\" *ngIf=\"config.avatar_url && config.avatar && !item[config.avatar]\"> <img [src]=\"config.avatar_url\" [alt]=\"item[config.label]\"> </div> <div class=\"choice-item-text\"> {{ item[config.label] }} <div class=\"choice-item-meta\" *ngIf=\"config.meta && item[config.meta]\">{{ item[config.meta] }}</div> </div> </div> </ng-container> </div>","styles":["@keyframes load { 0%, 80%, 100% { box-shadow: 0 0; height: 10px; } 40% { box-shadow: 0 -5px; height: 15px; } } :host { display: block; position: relative; } :host > .choice-selector { display: flex; align-content: center; align-items: center; flex-wrap: wrap; width: 100%; background-color: #eee; border-radius: 3px; border: 1px solid #ddd; padding: 0 12px; position: relative; } :host > .choice-selector > .choice { user-drag: none; -webkit-user-drag: none; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); font-size: 13px; padding: 0 4px; margin: 6px 0; background-color: #f5f5f5; display: flex; align-items: center; cursor: pointer; max-width: 100%; } :host > .choice-selector > .choice img { user-drag: none; -webkit-user-drag: none; } :host > .choice-selector > .choice > div.content { flex: 1; display: flex; align-items: center; font-size: 0; } :host > .choice-selector > .choice > div.content > .choice-avatar { flex: 0; margin-left: -6px; } :host > .choice-selector > .choice > div.content > .choice-avatar > img { border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; } :host > .choice-selector > .choice > div.content > .choice-avatar > img.circular { border-radius: 100% !important; } :host > .choice-selector > .choice > div.content > .choice-text { flex: 1; font-size: 13px; color: #000; line-height: 1; text-overflow: ellipsis; overflow: hidden; padding: 0 6px; } :host > .choice-selector > .choice > div.divider { flex: none; width: 1px; height: 50%; margin-left: 4px; background: rgba(0, 0, 0, 0.1); box-shadow: 1px 0px 0 0px rgba(255, 255, 255, 0.6); } :host > .choice-selector > .choice > div.delete { flex: none; cursor: pointer; font-size: 10px; color: #777; padding: 0 6px; } :host > .choice-selector > .choice > div.delete:hover { color: #007cbb; } :host > .choice-selector > .choice:not(:last-of-type) { margin-right: 8px; } :host > .choice-selector > .query-input.hidden { display: none !important; } :host > .choice-selector > .query-input > input { flex: none; border: none !important; outline: none !important; box-shadow: none !important; background: transparent !important; background-color: transparent !important; box-sizing: content-box !important; font-size: 13px !important; padding: 0 6px; margin: 6px 0; } :host > .choice-selector > .query-input > input.extraPadding { padding: 0 15px; } :host > .choice-selector > .query-input > .choices-spinner { position: absolute; z-index: 10; right: 20px; top: 50%; transform: translateY(-50%); display: block; } :host > .choice-selector > .query-input > .choices-spinner .loader, :host > .choice-selector > .query-input > .choices-spinner .loader:before, :host > .choice-selector > .query-input > .choices-spinner .loader:after { display: block; background-color: #007cbb; animation: load 1s infinite ease-in-out; width: 3px; height: 10px; } :host > .choice-selector > .query-input > .choices-spinner .loader { color: #007cbb; position: relative; transform: translateZ(0); animation-delay: -0.16s; } :host > .choice-selector > .query-input > .choices-spinner .loader:before, :host > .choice-selector > .query-input > .choices-spinner .loader:after { position: absolute; top: 0; content: ''; } :host > .choice-selector > .query-input > .choices-spinner .loader:before { left: 6px; animation-delay: -0.32s; } :host > .choice-selector > .query-input > .choices-spinner .loader:after { left: 12px; } :host > .items-dropdown { user-drag: none; -webkit-user-drag: none; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ position: absolute; z-index: 10; left: 0; top: auto; right: 0; max-height: 200px; background-color: #fff; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; overflow-x: hidden; overflow-y: auto; border-radius: 0 0 3px 3px; } :host > .items-dropdown img { user-drag: none; -webkit-user-drag: none; } :host > .items-dropdown::-webkit-scrollbar { width: 8px; } :host > .items-dropdown::-webkit-scrollbar-track { border-radius: 0px; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); } :host > .items-dropdown::-webkit-scrollbar-thumb { border-radius: 0; background-color: #999; cursor: pointer; border-radius: 4px; } :host > .items-dropdown > .items-dropdown-alert { padding: 8px 15px; font-size: 13px; color: #fff; background-color: #007cbb; font-weight: 400; box-shadow: 0 0 3px rgba(0, 0, 0, 0.41); } :host > .items-dropdown > .items-dropdown-item { padding: 10px 15px; cursor: pointer; display: flex; align-items: center; } :host > .items-dropdown > .items-dropdown-item:hover { background-color: #f5f5f5; } :host > .items-dropdown > .items-dropdown-item.active { background-color: #eee; } :host > .items-dropdown > .items-dropdown-item > .choice-item-avatar { flex: 0; margin-right: 12px; } :host > .items-dropdown > .items-dropdown-item > .choice-item-avatar > img { width: 26px; height: 26px; border-radius: 100%; } :host > .items-dropdown > .items-dropdown-item > .choice-item-text { flex: 1; font-size: 13px; color: #000; line-height: 1; } :host > .items-dropdown > .items-dropdown-item > .choice-item-text > .choice-item-meta { font-size: 9px; color: #888; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; } :host.__disabled { user-drag: none; -webkit-user-drag: none; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } :host.__disabled img { user-drag: none; -webkit-user-drag: none; } :host.__disabled:before { content: \"\"; display: block; background-color: #fff; opacity: 0.5; position: absolute; z-index: 100; left: 0; top: 0; right: 0; bottom: 0; } :host.__disabled .query-input { display: none !important; } :host.__dropdown_open > .choice-selector { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } :host.__singular > .choice-selector > .choice { border: none; box-shadow: none; background-color: transparent; flex: 1; } :host.__singular > .choice-selector > .choice > .divider { display: none; } :host.__singular > .choice-selector > .choice > .delete { color: #000; font-size: 14px; } :host.__singular > .choice-selector > .query-input { width: 100% !important; margin-left: -12px !important; } "],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":16,"character":15},"useExisting":{"__symbolic":"reference","name":"NgxChoicesComponent"},"multi":true}]}]}],"members":{"inputElem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":27,"character":3},"arguments":["input"]}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":33,"character":3},"arguments":["class.__disabled"]}]}],"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}}]}],"userConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":3},"arguments":["config"]}]}],"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":3}}]}],"onType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":3}}]}],"onError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":60,"character":3}}]}],"isSingleSelector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":98,"character":3},"arguments":["class.__singular"]}]}],"isItemSelected":[{"__symbolic":"method"}],"isDropdownOpened":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":119,"character":3},"arguments":["class.__dropdown_open"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Attribute","line":135,"character":5},"arguments":["multiple"]}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":132,"character":18},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":133,"character":22},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":134,"character":18},{"__symbolic":"reference","name":"string"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":158,"character":3},"arguments":["keydown",["$event"]]}]}],"onClickInside":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":183,"character":3},"arguments":["click",["$event"]]}]}],"onClickOutside":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":188,"character":3},"arguments":["document:click",["$event"]]}]}],"configInit":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"blur":[{"__symbolic":"method"}],"focusInput":[{"__symbolic":"method"}],"blurInput":[{"__symbolic":"method"}],"addValue":[{"__symbolic":"method"}],"removeValue":[{"__symbolic":"method"}],"itemClicked":[{"__symbolic":"method"}],"onQueryType":[{"__symbolic":"method"}],"filterItems":[{"__symbolic":"method"}],"resetFilteredItems":[{"__symbolic":"method"}],"emitChanges":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}},"NGX_CHOICES_CONF":{"__symbolic":"interface"},"NGX_CHOICES_ERROR":{"__symbolic":"interface"},"REGEX_TYPES":{"__symbolic":"error","message":"Expression form not supported","line":4,"character":9,"module":"./ngx-choices.constants"},"KEY_CODES":{"backspace":8,"enter":13,"up":38,"down":40},"DEFAULT_CONF":{"mode":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"NGX_CHOICES_MODE"},"member":"NORMAL"},"value":"id","label":"name","meta":null,"avatar":null,"avatar_url":null,"unique":true,"filter":false,"remoteFilter":null,"placeholder":"Type to enter value","pattern":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"REGEX_TYPES"},"member":"ALL"},"minLength":1,"maxLength":100,"maxSelections":100,"hideInputOnMaxSelections":false,"acceptUserInput":true,"style":{"minInputWidth":"150px","choiceElementHeight":"22px","choiceBorderRadius":"12px"}},"NGX_CHOICES_MODE":{"NORMAL":0,"ABSTRACT":1}},"origins":{"NgxChoicesModule":"./index","NgxChoicesComponent":"./ngx-choices.component","NGX_CHOICES_CONF":"./ngx-choices.interface","NGX_CHOICES_ERROR":"./ngx-choices.interface","REGEX_TYPES":"./ngx-choices.constants","KEY_CODES":"./ngx-choices.constants","DEFAULT_CONF":"./ngx-choices.constants","NGX_CHOICES_MODE":"./ngx-choices.enum"},"importAs":"ngx-choices"}