carbon-components-angular
Version:
Next generation components
118 lines (115 loc) • 4.35 kB
JavaScript
/*!
*
* Neutrino v0.0.0 | list-group.component.js
*
* Copyright 2014, 2018 IBM
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, Input, Output, EventEmitter } from "@angular/core";
import { findNextElem, findPrevElem } from "../utils/a11y";
/**
* `listTpl` binds `item` to the template context
*
* `items` expects an array of objects where the objects follow the format:
* ```javascript
* {
* content: "string",
* selected: false,
* disabled: false //optional
* }
* ```
*
* @export
* @class ListGroup
*/
var ListGroup = /** @class */ (function () {
function ListGroup() {
/**
* The list items belonging to the `ListGroup`.
* @type {Array<Object>}
* @memberof ListGroup
*/
this.items = [];
/**
* Template to bind to items in the `ListGroup` (optional).
* @type {(string | TemplateRef<any>)}
* @memberof ListGroup
*/
this.listTpl = null;
/**
* Set to `true` for the `ListGroup` to have checkmark selection.
* @type {boolean}
* @memberof ListGroup
*/
this.checkMark = true;
/**
* Event to emit selection of a list item within the `ListGroup`.
* @type {EventEmitter<Object>}
* @memberof ListGroup
*/
this.selected = new EventEmitter();
}
/**
* Controls keyboard navigation and selection within the `ListGroup`.
* @param {any} ev
* @param {any} item
* @memberof ListGroup
*/
ListGroup.prototype.doKeyDown = function (ev, item) {
if (ev.key && (ev.key === "Enter" || ev.key === " ")) {
ev.preventDefault();
this.doClick(ev, item);
}
else if (ev.key === "ArrowDown" || ev.key === "ArrowUp") {
if (ev.key === "ArrowDown" && findNextElem(ev.target)) {
ev.preventDefault();
findNextElem(ev.target).focus();
}
else if (ev.key === "ArrowUp" && findPrevElem(ev.target)) {
ev.preventDefault();
findPrevElem(ev.target).focus();
}
if (ev.shiftKey) {
ev.target.click();
}
}
};
/**
* Selects the `item` parameter from the `ListGroup` if it is not disabled and emits the selection event.
* @param {any} ev
* @param {any} item
* @memberof ListGroup
*/
ListGroup.prototype.doClick = function (ev, item) {
if (!item.disabled) {
this.selected.emit({
item: item
});
}
};
ListGroup.decorators = [
{ type: Component, args: [{
selector: "ibm-list-group",
template: "\n\t\t<ul\n\t\t#listGroup\n\t\tclass=\"list-group\"\n\t\trole=\"listbox\"\n\t\t[attr.aria-multiselectable]=\"checkMark ? true : false\">\n\t\t\t<li\n\t\t\t*ngFor=\"let item of items\"\n\t\t\t(click)=\"doClick($event, item)\"\n\t\t\t(keydown)=\"doKeyDown($event, item)\"\n\t\t\t[tabindex]=\"item.disabled ? -1 : 0\"\n\t\t\trole=\"option\"\n\t\t\t[attr.aria-selected]=\"item.selected ? true : false\"\n\t\t\t[attr.aria-disabled]=\"item.disabled ? 'true' : null\">\n\t\t\t\t<ng-container *ngIf=\"!listTpl\">{{item.content}}</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"listTpl\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{item: item}\"\n\t\t\t\t\t[ngTemplateOutlet]=\"listTpl\">\n\t\t\t\t</ng-template>\n\t\t\t\t</li>\n\t\t</ul>\n\t\t"
},] },
];
ListGroup.propDecorators = {
items: [{ type: Input }],
listTpl: [{ type: Input }],
checkMark: [{ type: Input }],
selected: [{ type: Output }]
};
return ListGroup;
}());
export { ListGroup };
//# sourceMappingURL=list-group.component.js.map