fundamental-ngx
Version:
SAP Fiori Fundamentals, implemented in Angular
81 lines • 10.6 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import * as tslib_1 from "tslib";
import { Component, HostBinding, Input } from '@angular/core';
import { SearchInputComponent } from '../search-input/search-input.component';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
var ComboboxInputComponent = /** @class */ (function (_super) {
tslib_1.__extends(ComboboxInputComponent, _super);
function ComboboxInputComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.comboboxClass = true;
return _this;
}
/**
* @param {?} event
* @return {?}
*/
ComboboxInputComponent.prototype.newItemKeydownHandler = /**
* @param {?} event
* @return {?}
*/
function (event) {
var _this = this;
if (event.code === 'Enter' && this.newItemCallback) {
this.newItemCallback(event);
}
else if (event.code === 'ArrowUp') {
event.preventDefault();
/** @type {?} */
var foundItem_1 = false;
/** @type {?} */
var menuItemsArray_1 = this.menuItems.toArray();
menuItemsArray_1.forEach((/**
* @param {?} item
* @param {?} index
* @return {?}
*/
function (item, index) {
if (!foundItem_1) {
if (document.activeElement === item.itemEl.nativeElement.children[0] && index === 0) {
_this.searchInputElement.nativeElement.focus();
foundItem_1 = true;
}
else if (document.activeElement === item.itemEl.nativeElement.children[0]) {
if (menuItemsArray_1[index - 1]) {
menuItemsArray_1[index - 1].itemEl.nativeElement.children[0].focus();
}
foundItem_1 = true;
}
}
}));
}
};
ComboboxInputComponent.decorators = [
{ type: Component, args: [{
selector: 'fd-combobox-input',
template: "<div class=\"fd-combobox-input\">\n <fd-popover [(isOpen)]=\"isOpen\"\n [fillControl]=\"true\"\n class=\"fd-combobox-popover-custom\"\n [ngClass]=\"{'fd-popover-body--display-none': displayedValues && !displayedValues.length}\">\n <fd-popover-control>\n <div class=\"fd-combobox-control\">\n <div class=\"fd-input-group fd-input-group--after\" [ngClass]=\"{'fd-input-group--compact': compact}\">\n <input #searchInputElement type=\"text\" class=\"fd-input\" [ngClass]=\"{'fd-input--compact': compact}\"\n (keydown)=\"onInputKeydownHandler($event)\"\n (keyup)=\"onInputKeyupHandler()\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"inputText\"\n (ngModelChange)=\"handleSearchTermChange()\"\n placeholder=\"{{placeholder}}\">\n <span class=\"fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button\">\n <button class=\"fd-button--light sap-icon--navigation-down-arrow\"\n type=\"button\"\n [disabled]=\"disabled\">\n </button>\n </span>\n </div>\n </div>\n </fd-popover-control>\n <fd-popover-body>\n <fd-menu>\n <ul fd-menu-list>\n <li fd-menu-item *ngFor=\"let term of displayedValues\"\n (click)=\"onMenuClickHandler($event, term)\"\n (keydown)=\"onMenuKeydownHandler($event, term)\">\n <a tabindex=\"0\">\n <div *ngIf=\"highlight && inputTextValue && inputTextValue.toLocaleLowerCase\">\n {{ term.text.substr(0, term.text.toLocaleLowerCase().indexOf(inputText.toLocaleLowerCase())) }}<strong>{{term.text.substr(term.text.toLocaleLowerCase().indexOf(inputText.toLocaleLowerCase()), inputText.length)}}</strong>{{ term.text.substring(term.text.toLocaleLowerCase().indexOf(inputText.toLocaleLowerCase()) + inputText.length, term.text.length) }}\n </div>\n <div *ngIf=\"!highlight || !inputTextValue\">\n {{ term.text }}\n </div>\n </a>\n </li>\n\n <li fd-menu-item\n (click)=\"newItemCallback($event)\"\n (keydown)=\"newItemKeydownHandler($event)\">\n <a tabindex=\"0\" class=\"fd-menu__item fd-menu__link\">+ New Item</a>\n </li>\n </ul>\n </fd-menu>\n </fd-popover-body>\n </fd-popover>\n</div>\n\n",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: ComboboxInputComponent,
multi: true
}],
styles: [":host{display:block}.fd-popover-body--display-none ::ng-deep .fd-popover__body{display:none}.fd-combobox-popover-custom{display:block}"]
}] }
];
ComboboxInputComponent.propDecorators = {
comboboxClass: [{ type: HostBinding, args: ['class.fd-combobox-input',] }],
newItemCallback: [{ type: Input }]
};
return ComboboxInputComponent;
}(SearchInputComponent));
export { ComboboxInputComponent };
if (false) {
/** @type {?} */
ComboboxInputComponent.prototype.comboboxClass;
/** @type {?} */
ComboboxInputComponent.prototype.newItemCallback;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tYm9ib3gtaW5wdXQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vZnVuZGFtZW50YWwtbmd4LyIsInNvdXJjZXMiOlsibGliL2NvbWJvYm94LWlucHV0L2NvbWJvYm94LWlucHV0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM5RCxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUM5RSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUVuRDtJQVU0QyxrREFBb0I7SUFWaEU7UUFBQSxxRUF5Q0M7UUE1QkcsbUJBQWEsR0FBRyxJQUFJLENBQUM7O0lBNEJ6QixDQUFDOzs7OztJQXZCRyxzREFBcUI7Ozs7SUFBckIsVUFBc0IsS0FBSztRQUEzQixpQkFxQkM7UUFwQkcsSUFBSSxLQUFLLENBQUMsSUFBSSxLQUFLLE9BQU8sSUFBSSxJQUFJLENBQUMsZUFBZSxFQUFFO1lBQ2hELElBQUksQ0FBQyxlQUFlLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDL0I7YUFBTSxJQUFJLEtBQUssQ0FBQyxJQUFJLEtBQUssU0FBUyxFQUFFO1lBQ2pDLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQzs7Z0JBQ25CLFdBQVMsR0FBRyxLQUFLOztnQkFDZixnQkFBYyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxFQUFFO1lBQy9DLGdCQUFjLENBQUMsT0FBTzs7Ozs7WUFBQyxVQUFDLElBQUksRUFBRSxLQUFLO2dCQUMvQixJQUFJLENBQUMsV0FBUyxFQUFFO29CQUNaLElBQUksUUFBUSxDQUFDLGFBQWEsS0FBSyxJQUFJLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksS0FBSyxLQUFLLENBQUMsRUFBRTt3QkFDakYsS0FBSSxDQUFDLGtCQUFrQixDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQzt3QkFDOUMsV0FBUyxHQUFHLElBQUksQ0FBQztxQkFDcEI7eUJBQU0sSUFBSSxRQUFRLENBQUMsYUFBYSxLQUFLLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsRUFBRTt3QkFDekUsSUFBSSxnQkFBYyxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsRUFBRTs0QkFDM0IsZ0JBQWMsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUM7eUJBQ3RFO3dCQUNELFdBQVMsR0FBRyxJQUFJLENBQUM7cUJBQ3BCO2lCQUNKO1lBQ0wsQ0FBQyxFQUFDLENBQUM7U0FDTjtJQUNMLENBQUM7O2dCQXZDSixTQUFTLFNBQUM7b0JBQ1AsUUFBUSxFQUFFLG1CQUFtQjtvQkFDN0IsZzRGQUE4QztvQkFFOUMsU0FBUyxFQUFFLENBQUM7NEJBQ1IsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLHNCQUFzQjs0QkFDbkMsS0FBSyxFQUFFLElBQUk7eUJBQ2QsQ0FBQzs7aUJBQ0w7OztnQ0FHSSxXQUFXLFNBQUMseUJBQXlCO2tDQUdyQyxLQUFLOztJQTBCViw2QkFBQztDQUFBLEFBekNELENBVTRDLG9CQUFvQixHQStCL0Q7U0EvQlksc0JBQXNCOzs7SUFFL0IsK0NBQ3FCOztJQUVyQixpREFDMEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEhvc3RCaW5kaW5nLCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU2VhcmNoSW5wdXRDb21wb25lbnQgfSBmcm9tICcuLi9zZWFyY2gtaW5wdXQvc2VhcmNoLWlucHV0LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdmZC1jb21ib2JveC1pbnB1dCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2NvbWJvYm94LWlucHV0LmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9jb21ib2JveC1pbnB1dC5jb21wb25lbnQuc2NzcyddLFxuICAgIHByb3ZpZGVyczogW3tcbiAgICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICAgIHVzZUV4aXN0aW5nOiBDb21ib2JveElucHV0Q29tcG9uZW50LFxuICAgICAgICBtdWx0aTogdHJ1ZVxuICAgIH1dXG59KVxuZXhwb3J0IGNsYXNzIENvbWJvYm94SW5wdXRDb21wb25lbnQgZXh0ZW5kcyBTZWFyY2hJbnB1dENvbXBvbmVudCB7XG5cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLmZkLWNvbWJvYm94LWlucHV0JylcbiAgICBjb21ib2JveENsYXNzID0gdHJ1ZTtcblxuICAgIEBJbnB1dCgpXG4gICAgbmV3SXRlbUNhbGxiYWNrOiBGdW5jdGlvbjtcblxuICAgIG5ld0l0ZW1LZXlkb3duSGFuZGxlcihldmVudCkge1xuICAgICAgICBpZiAoZXZlbnQuY29kZSA9PT0gJ0VudGVyJyAmJiB0aGlzLm5ld0l0ZW1DYWxsYmFjaykge1xuICAgICAgICAgICAgdGhpcy5uZXdJdGVtQ2FsbGJhY2soZXZlbnQpO1xuICAgICAgICB9IGVsc2UgaWYgKGV2ZW50LmNvZGUgPT09ICdBcnJvd1VwJykge1xuICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgICAgICAgIGxldCBmb3VuZEl0ZW0gPSBmYWxzZTtcbiAgICAgICAgICAgIGNvbnN0IG1lbnVJdGVtc0FycmF5ID0gdGhpcy5tZW51SXRlbXMudG9BcnJheSgpO1xuICAgICAgICAgICAgbWVudUl0ZW1zQXJyYXkuZm9yRWFjaCgoaXRlbSwgaW5kZXgpID0+IHtcbiAgICAgICAgICAgICAgICBpZiAoIWZvdW5kSXRlbSkge1xuICAgICAgICAgICAgICAgICAgICBpZiAoZG9jdW1lbnQuYWN0aXZlRWxlbWVudCA9PT0gaXRlbS5pdGVtRWwubmF0aXZlRWxlbWVudC5jaGlsZHJlblswXSAmJiBpbmRleCA9PT0gMCkge1xuICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5zZWFyY2hJbnB1dEVsZW1lbnQubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICAgICAgICAgICAgICAgICAgICAgICAgZm91bmRJdGVtID0gdHJ1ZTtcbiAgICAgICAgICAgICAgICAgICAgfSBlbHNlIGlmIChkb2N1bWVudC5hY3RpdmVFbGVtZW50ID09PSBpdGVtLml0ZW1FbC5uYXRpdmVFbGVtZW50LmNoaWxkcmVuWzBdKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICBpZiAobWVudUl0ZW1zQXJyYXlbaW5kZXggLSAxXSkge1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1lbnVJdGVtc0FycmF5W2luZGV4IC0gMV0uaXRlbUVsLm5hdGl2ZUVsZW1lbnQuY2hpbGRyZW5bMF0uZm9jdXMoKTtcbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICAgIGZvdW5kSXRlbSA9IHRydWU7XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9KTtcbiAgICAgICAgfVxuICAgIH1cblxufVxuIl19