carbon-components-angular
Version:
Next generation components
152 lines • 13 kB
JavaScript
import { Component, HostBinding, ContentChildren, Input, HostListener, ViewChild, EventEmitter, Output } from "@angular/core";
import { ListColumn } from "./list-column.component";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "carbon-components-angular/icon";
/**
* `ListRow` provides a container for the `ListColumn`s that make up the body of a structured list.
*
* Example:
* ```html
* <cds-list-row>
* <cds-list-column>Row 1</cds-list-column>
* <cds-list-column nowrap="true">Row One</cds-list-column>
* <cds-list-column>
* Lorem ipsum dolor sit amet,
* consectetur adipiscing elit. Nunc dui magna,
* finibus id tortor sed, aliquet bibendum augue.
* Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor.
* Pellentesque vulputate nisl a porttitor interdum.
* </cds-list-column>
* </cds-list-row>
* ```
*/
export class ListRow {
constructor() {
this.selected = false;
/**
* Internal event used to notify the containing `StructuredList` of changes.
*/
this.change = new EventEmitter();
/**
* Set by the containing `StructuredList`. Enables or disables row level selection features.
*/
this.selection = false;
/**
* Set by the containing `StructuredList`. When `selection = true`, used for the `name` property on the radio input.
*/
this.name = "list";
this.wrapper = true;
this.tabindex = this.selection ? "0" : null;
this.role = "row";
this.isFocused = false;
}
get focusClass() {
return this.isFocused;
}
ngAfterContentInit() {
this.columns.forEach(column => {
column.isBodyColumn = true;
column.isHeaderColumn = false;
});
}
onclick() {
if (this.selection) {
this.input.nativeElement.click();
}
}
onfocus() {
this.isFocused = true;
}
onblur() {
this.isFocused = false;
}
onChange(event) {
this.change.emit(event);
}
}
ListRow.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ListRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
ListRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ListRow, selector: "cds-list-row, ibm-list-row", inputs: { selected: "selected", label: "label", value: "value" }, outputs: { change: "change" }, host: { listeners: { "click": "onclick()", "focus": "onfocus()", "blur": "onblur()" }, properties: { "class.cds--structured-list-row--focused-within": "this.focusClass", "class.cds--structured-list-row--selected": "this.selected", "attr.aria-label": "this.label", "class.cds--structured-list-row": "this.wrapper", "attr.tabindex": "this.tabindex", "attr.role": "this.role" } }, queries: [{ propertyName: "columns", predicate: ListColumn }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: `
<ng-content></ng-content>
<ng-container *ngIf="selection">
<input
#input
tabindex="-1"
class="cds--structured-list-input cds--visually-hidden"
type="radio"
[value]="value"
[name]="name"
[title]="label"
(change)="onChange($event)"
[checked]="selected"/>
<div class="cds--structured-list-td">
<svg cdsIcon="checkmark--filled" size="16" class="cds--structured-list-svg"></svg>
</div>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ListRow, decorators: [{
type: Component,
args: [{
selector: "cds-list-row, ibm-list-row",
template: `
<ng-content></ng-content>
<ng-container *ngIf="selection">
<input
#input
tabindex="-1"
class="cds--structured-list-input cds--visually-hidden"
type="radio"
[value]="value"
[name]="name"
[title]="label"
(change)="onChange($event)"
[checked]="selected"/>
<div class="cds--structured-list-td">
<svg cdsIcon="checkmark--filled" size="16" class="cds--structured-list-svg"></svg>
</div>
</ng-container>
`
}]
}], propDecorators: { focusClass: [{
type: HostBinding,
args: ["class.cds--structured-list-row--focused-within"]
}], selected: [{
type: Input
}, {
type: HostBinding,
args: ["class.cds--structured-list-row--selected"]
}], label: [{
type: Input
}, {
type: HostBinding,
args: ["attr.aria-label"]
}], value: [{
type: Input
}], change: [{
type: Output
}], wrapper: [{
type: HostBinding,
args: ["class.cds--structured-list-row"]
}], tabindex: [{
type: HostBinding,
args: ["attr.tabindex"]
}], role: [{
type: HostBinding,
args: ["attr.role"]
}], columns: [{
type: ContentChildren,
args: [ListColumn]
}], input: [{
type: ViewChild,
args: ["input"]
}], onclick: [{
type: HostListener,
args: ["click"]
}], onfocus: [{
type: HostListener,
args: ["focus"]
}], onblur: [{
type: HostListener,
args: ["blur"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC1yb3cuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3N0cnVjdHVyZWQtbGlzdC9saXN0LXJvdy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFDVCxXQUFXLEVBQ1gsZUFBZSxFQUdmLEtBQUssRUFDTCxZQUFZLEVBQ1osU0FBUyxFQUVULFlBQVksRUFDWixNQUFNLEVBQ04sTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHlCQUF5QixDQUFDOzs7O0FBRXJEOzs7Ozs7Ozs7Ozs7Ozs7OztHQWlCRztBQXNCSCxNQUFNLE9BQU8sT0FBTztJQXJCcEI7UUF5Qm1FLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFTbkY7O1dBRUc7UUFDTyxXQUFNLEdBQXdCLElBQUksWUFBWSxFQUFFLENBQUM7UUFFM0Q7O1dBRUc7UUFDSCxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ2xCOztXQUVHO1FBQ0gsU0FBSSxHQUFHLE1BQU0sQ0FBQztRQUVpQyxZQUFPLEdBQUcsSUFBSSxDQUFDO1FBQ2hDLGFBQVEsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztRQUMzQyxTQUFJLEdBQUcsS0FBSyxDQUFDO1FBTS9CLGNBQVMsR0FBRyxLQUFLLENBQUM7S0E2QjFCO0lBL0RBLElBQW1FLFVBQVU7UUFDNUUsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3ZCLENBQUM7SUFrQ0Qsa0JBQWtCO1FBQ2pCLElBQUksQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxFQUFFO1lBQzdCLE1BQU0sQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDO1lBQzNCLE1BQU0sQ0FBQyxjQUFjLEdBQUcsS0FBSyxDQUFDO1FBQy9CLENBQUMsQ0FBQyxDQUFDO0lBQ0osQ0FBQztJQUdELE9BQU87UUFDTixJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDbkIsSUFBSSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsS0FBSyxFQUFFLENBQUM7U0FDakM7SUFDRixDQUFDO0lBR0QsT0FBTztRQUNOLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO0lBQ3ZCLENBQUM7SUFHRCxNQUFNO1FBQ0wsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7SUFDeEIsQ0FBQztJQUVELFFBQVEsQ0FBQyxLQUFLO1FBQ2IsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekIsQ0FBQzs7b0dBL0RXLE9BQU87d0ZBQVAsT0FBTyxxakJBK0JGLFVBQVUsNkhBbERqQjs7Ozs7Ozs7Ozs7Ozs7Ozs7RUFpQlQ7MkZBRVcsT0FBTztrQkFyQm5CLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLDRCQUE0QjtvQkFDdEMsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7OztFQWlCVDtpQkFDRDs4QkFFbUUsVUFBVTtzQkFBNUUsV0FBVzt1QkFBQyxnREFBZ0Q7Z0JBR0ssUUFBUTtzQkFBekUsS0FBSzs7c0JBQUksV0FBVzt1QkFBQywwQ0FBMEM7Z0JBSXZCLEtBQUs7c0JBQTdDLEtBQUs7O3NCQUFJLFdBQVc7dUJBQUMsaUJBQWlCO2dCQUk5QixLQUFLO3NCQUFiLEtBQUs7Z0JBSUksTUFBTTtzQkFBZixNQUFNO2dCQVd3QyxPQUFPO3NCQUFyRCxXQUFXO3VCQUFDLGdDQUFnQztnQkFDZixRQUFRO3NCQUFyQyxXQUFXO3VCQUFDLGVBQWU7Z0JBQ0YsSUFBSTtzQkFBN0IsV0FBVzt1QkFBQyxXQUFXO2dCQUVLLE9BQU87c0JBQW5DLGVBQWU7dUJBQUMsVUFBVTtnQkFFUCxLQUFLO3NCQUF4QixTQUFTO3VCQUFDLE9BQU87Z0JBWWxCLE9BQU87c0JBRE4sWUFBWTt1QkFBQyxPQUFPO2dCQVFyQixPQUFPO3NCQUROLFlBQVk7dUJBQUMsT0FBTztnQkFNckIsTUFBTTtzQkFETCxZQUFZO3VCQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuXHRDb21wb25lbnQsXG5cdEhvc3RCaW5kaW5nLFxuXHRDb250ZW50Q2hpbGRyZW4sXG5cdFF1ZXJ5TGlzdCxcblx0QWZ0ZXJDb250ZW50SW5pdCxcblx0SW5wdXQsXG5cdEhvc3RMaXN0ZW5lcixcblx0Vmlld0NoaWxkLFxuXHRFbGVtZW50UmVmLFxuXHRFdmVudEVtaXR0ZXIsXG5cdE91dHB1dFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgTGlzdENvbHVtbiB9IGZyb20gXCIuL2xpc3QtY29sdW1uLmNvbXBvbmVudFwiO1xuXG4vKipcbiAqIGBMaXN0Um93YCBwcm92aWRlcyBhIGNvbnRhaW5lciBmb3IgdGhlIGBMaXN0Q29sdW1uYHMgdGhhdCBtYWtlIHVwIHRoZSBib2R5IG9mIGEgc3RydWN0dXJlZCBsaXN0LlxuICpcbiAqIEV4YW1wbGU6XG4gKiBgYGBodG1sXG4gKiBcdDxjZHMtbGlzdC1yb3c+XG4gKlx0XHQ8Y2RzLWxpc3QtY29sdW1uPlJvdyAxPC9jZHMtbGlzdC1jb2x1bW4+XG4gKlx0XHQ8Y2RzLWxpc3QtY29sdW1uIG5vd3JhcD1cInRydWVcIj5Sb3cgT25lPC9jZHMtbGlzdC1jb2x1bW4+XG4gKlx0XHQ8Y2RzLWxpc3QtY29sdW1uPlxuICpcdFx0XHRMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCxcbiAqXHRcdFx0Y29uc2VjdGV0dXIgYWRpcGlzY2luZyBlbGl0LiBOdW5jIGR1aSBtYWduYSxcbiAqXHRcdFx0ZmluaWJ1cyBpZCB0b3J0b3Igc2VkLCBhbGlxdWV0IGJpYmVuZHVtIGF1Z3VlLlxuICpcdFx0XHRBZW5lYW4gcG9zdWVyZSBzZW0gdmVsIGV1aXNtb2QgZGlnbmlzc2ltLiBOdWxsYSB1dCBjdXJzdXMgZG9sb3IuXG4gKlx0XHRcdFBlbGxlbnRlc3F1ZSB2dWxwdXRhdGUgbmlzbCBhIHBvcnR0aXRvciBpbnRlcmR1bS5cbiAqXHRcdDwvY2RzLWxpc3QtY29sdW1uPlxuICpcdDwvY2RzLWxpc3Qtcm93PlxuICogYGBgXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtbGlzdC1yb3csIGlibS1saXN0LXJvd1wiLFxuXHR0ZW1wbGF0ZTogYFxuXHRcdDxuZy1jb250ZW50PjwvbmctY29udGVudD5cblx0XHQ8bmctY29udGFpbmVyICpuZ0lmPVwic2VsZWN0aW9uXCI+XG5cdFx0XHQ8aW5wdXRcblx0XHRcdFx0I2lucHV0XG5cdFx0XHRcdHRhYmluZGV4PVwiLTFcIlxuXHRcdFx0XHRjbGFzcz1cImNkcy0tc3RydWN0dXJlZC1saXN0LWlucHV0IGNkcy0tdmlzdWFsbHktaGlkZGVuXCJcblx0XHRcdFx0dHlwZT1cInJhZGlvXCJcblx0XHRcdFx0W3ZhbHVlXT1cInZhbHVlXCJcblx0XHRcdFx0W25hbWVdPVwibmFtZVwiXG5cdFx0XHRcdFt0aXRsZV09XCJsYWJlbFwiXG5cdFx0XHRcdChjaGFuZ2UpPVwib25DaGFuZ2UoJGV2ZW50KVwiXG5cdFx0XHRcdFtjaGVja2VkXT1cInNlbGVjdGVkXCIvPlxuXHRcdFx0PGRpdiBjbGFzcz1cImNkcy0tc3RydWN0dXJlZC1saXN0LXRkXCI+XG5cdFx0XHRcdDxzdmcgY2RzSWNvbj1cImNoZWNrbWFyay0tZmlsbGVkXCIgc2l6ZT1cIjE2XCIgY2xhc3M9XCJjZHMtLXN0cnVjdHVyZWQtbGlzdC1zdmdcIj48L3N2Zz5cblx0XHRcdDwvZGl2PlxuXHRcdDwvbmctY29udGFpbmVyPlxuXHRgXG59KVxuZXhwb3J0IGNsYXNzIExpc3RSb3cgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1zdHJ1Y3R1cmVkLWxpc3Qtcm93LS1mb2N1c2VkLXdpdGhpblwiKSBnZXQgZm9jdXNDbGFzcygpIHtcblx0XHRyZXR1cm4gdGhpcy5pc0ZvY3VzZWQ7XG5cdH1cblx0QElucHV0KCkgQEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1zdHJ1Y3R1cmVkLWxpc3Qtcm93LS1zZWxlY3RlZFwiKSBzZWxlY3RlZCA9IGZhbHNlO1xuXHQvKipcblx0ICogQXBwbGllcyBhbiBhY2Nlc3NpYmxlIGxhYmVsIHRvIHRoZSByb3cuIERlZmF1bHRzIHRvIG5vIGxhYmVsLlxuXHQgKi9cblx0QElucHV0KCkgQEhvc3RCaW5kaW5nKFwiYXR0ci5hcmlhLWxhYmVsXCIpIGxhYmVsO1xuXHQvKipcblx0ICogVGhlIHZhbHVlIGZvciB0aGUgcm93LiBSZXR1cm5lZCB2aWEgYG5nTW9kZWxgIG9yIGBzZWxlY3RlZGAgZXZlbnQgb24gdGhlIGNvbnRhaW5pbmcgYFN0cnVjdHVyZWRMaXN0YC5cblx0ICovXG5cdEBJbnB1dCgpIHZhbHVlO1xuXHQvKipcblx0ICogSW50ZXJuYWwgZXZlbnQgdXNlZCB0byBub3RpZnkgdGhlIGNvbnRhaW5pbmcgYFN0cnVjdHVyZWRMaXN0YCBvZiBjaGFuZ2VzLlxuXHQgKi9cblx0QE91dHB1dCgpIGNoYW5nZTogRXZlbnRFbWl0dGVyPEV2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuXHQvKipcblx0ICogU2V0IGJ5IHRoZSBjb250YWluaW5nIGBTdHJ1Y3R1cmVkTGlzdGAuIEVuYWJsZXMgb3IgZGlzYWJsZXMgcm93IGxldmVsIHNlbGVjdGlvbiBmZWF0dXJlcy5cblx0ICovXG5cdHNlbGVjdGlvbiA9IGZhbHNlO1xuXHQvKipcblx0ICogU2V0IGJ5IHRoZSBjb250YWluaW5nIGBTdHJ1Y3R1cmVkTGlzdGAuIFdoZW4gYHNlbGVjdGlvbiA9IHRydWVgLCB1c2VkIGZvciB0aGUgYG5hbWVgIHByb3BlcnR5IG9uIHRoZSByYWRpbyBpbnB1dC5cblx0ICovXG5cdG5hbWUgPSBcImxpc3RcIjtcblxuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLXN0cnVjdHVyZWQtbGlzdC1yb3dcIikgd3JhcHBlciA9IHRydWU7XG5cdEBIb3N0QmluZGluZyhcImF0dHIudGFiaW5kZXhcIikgdGFiaW5kZXggPSB0aGlzLnNlbGVjdGlvbiA/IFwiMFwiIDogbnVsbDtcblx0QEhvc3RCaW5kaW5nKFwiYXR0ci5yb2xlXCIpIHJvbGUgPSBcInJvd1wiO1xuXG5cdEBDb250ZW50Q2hpbGRyZW4oTGlzdENvbHVtbikgY29sdW1uczogUXVlcnlMaXN0PExpc3RDb2x1bW4+O1xuXG5cdEBWaWV3Q2hpbGQoXCJpbnB1dFwiKSBpbnB1dDogRWxlbWVudFJlZjtcblxuXHRwcml2YXRlIGlzRm9jdXNlZCA9IGZhbHNlO1xuXG5cdG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcblx0XHR0aGlzLmNvbHVtbnMuZm9yRWFjaChjb2x1bW4gPT4ge1xuXHRcdFx0Y29sdW1uLmlzQm9keUNvbHVtbiA9IHRydWU7XG5cdFx0XHRjb2x1bW4uaXNIZWFkZXJDb2x1bW4gPSBmYWxzZTtcblx0XHR9KTtcblx0fVxuXG5cdEBIb3N0TGlzdGVuZXIoXCJjbGlja1wiKVxuXHRvbmNsaWNrKCkge1xuXHRcdGlmICh0aGlzLnNlbGVjdGlvbikge1xuXHRcdFx0dGhpcy5pbnB1dC5uYXRpdmVFbGVtZW50LmNsaWNrKCk7XG5cdFx0fVxuXHR9XG5cblx0QEhvc3RMaXN0ZW5lcihcImZvY3VzXCIpXG5cdG9uZm9jdXMoKSB7XG5cdFx0dGhpcy5pc0ZvY3VzZWQgPSB0cnVlO1xuXHR9XG5cblx0QEhvc3RMaXN0ZW5lcihcImJsdXJcIilcblx0b25ibHVyKCkge1xuXHRcdHRoaXMuaXNGb2N1c2VkID0gZmFsc2U7XG5cdH1cblxuXHRvbkNoYW5nZShldmVudCkge1xuXHRcdHRoaXMuY2hhbmdlLmVtaXQoZXZlbnQpO1xuXHR9XG59XG4iXX0=