carbon-components-angular
Version:
Next generation components
146 lines • 12.6 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.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();
}
}
onChange(event) {
this.change.emit(event);
}
handleFocus(isFocused) {
if (this.selection) {
this.isFocused = isFocused;
if (this.isFocused) {
this.input.nativeElement.click();
}
}
}
}
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()" }, 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.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
class="cds--structured-list-input cds--visually-hidden"
type="radio"
[value]="value"
[name]="name"
[title]="label"
(focus)="handleFocus(true)"
(blur)="handleFocus(false)"
(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
class="cds--structured-list-input cds--visually-hidden"
type="radio"
[value]="value"
[name]="name"
[title]="label"
(focus)="handleFocus(true)"
(blur)="handleFocus(false)"
(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"]
}], role: [{
type: HostBinding,
args: ["attr.role"]
}], columns: [{
type: ContentChildren,
args: [ListColumn]
}], input: [{
type: ViewChild,
args: ["input"]
}], onclick: [{
type: HostListener,
args: ["click"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC1yb3cuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3N0cnVjdHVyZWQtbGlzdC9saXN0LXJvdy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFDVCxXQUFXLEVBQ1gsZUFBZSxFQUdmLEtBQUssRUFDTCxZQUFZLEVBQ1osU0FBUyxFQUVULFlBQVksRUFDWixNQUFNLEVBQ04sTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHlCQUF5QixDQUFDOzs7O0FBRXJEOzs7Ozs7Ozs7Ozs7Ozs7OztHQWlCRztBQXVCSCxNQUFNLE9BQU8sT0FBTztJQXRCcEI7UUEwQm1FLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFTbkY7O1dBRUc7UUFDTyxXQUFNLEdBQXdCLElBQUksWUFBWSxFQUFFLENBQUM7UUFFM0Q7O1dBRUc7UUFDSCxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBQ2xCOztXQUVHO1FBQ0gsU0FBSSxHQUFHLE1BQU0sQ0FBQztRQUVpQyxZQUFPLEdBQUcsSUFBSSxDQUFDO1FBQ3BDLFNBQUksR0FBRyxLQUFLLENBQUM7UUFNL0IsY0FBUyxHQUFHLEtBQUssQ0FBQztLQTRCMUI7SUE3REEsSUFBbUUsVUFBVTtRQUM1RSxPQUFPLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDdkIsQ0FBQztJQWlDRCxrQkFBa0I7UUFDakIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLEVBQUU7WUFDN0IsTUFBTSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7WUFDM0IsTUFBTSxDQUFDLGNBQWMsR0FBRyxLQUFLLENBQUM7UUFDL0IsQ0FBQyxDQUFDLENBQUM7SUFDSixDQUFDO0lBR0QsT0FBTztRQUNOLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNuQixJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUNqQztJQUNGLENBQUM7SUFFRCxRQUFRLENBQUMsS0FBSztRQUNiLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3pCLENBQUM7SUFFRCxXQUFXLENBQUMsU0FBUztRQUNwQixJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDbkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUM7WUFDM0IsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO2dCQUNuQixJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQzthQUNqQztTQUNEO0lBQ0YsQ0FBQzs7b0dBN0RXLE9BQU87d0ZBQVAsT0FBTyx5ZUE4QkYsVUFBVSw2SEFsRGpCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7RUFrQlQ7MkZBRVcsT0FBTztrQkF0Qm5CLFNBQVM7bUJBQUM7b0JBQ1YsUUFBUSxFQUFFLDRCQUE0QjtvQkFDdEMsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7RUFrQlQ7aUJBQ0Q7OEJBRW1FLFVBQVU7c0JBQTVFLFdBQVc7dUJBQUMsZ0RBQWdEO2dCQUdLLFFBQVE7c0JBQXpFLEtBQUs7O3NCQUFJLFdBQVc7dUJBQUMsMENBQTBDO2dCQUl2QixLQUFLO3NCQUE3QyxLQUFLOztzQkFBSSxXQUFXO3VCQUFDLGlCQUFpQjtnQkFJOUIsS0FBSztzQkFBYixLQUFLO2dCQUlJLE1BQU07c0JBQWYsTUFBTTtnQkFXd0MsT0FBTztzQkFBckQsV0FBVzt1QkFBQyxnQ0FBZ0M7Z0JBQ25CLElBQUk7c0JBQTdCLFdBQVc7dUJBQUMsV0FBVztnQkFFSyxPQUFPO3NCQUFuQyxlQUFlO3VCQUFDLFVBQVU7Z0JBRVAsS0FBSztzQkFBeEIsU0FBUzt1QkFBQyxPQUFPO2dCQVlsQixPQUFPO3NCQUROLFlBQVk7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0SG9zdEJpbmRpbmcsXG5cdENvbnRlbnRDaGlsZHJlbixcblx0UXVlcnlMaXN0LFxuXHRBZnRlckNvbnRlbnRJbml0LFxuXHRJbnB1dCxcblx0SG9zdExpc3RlbmVyLFxuXHRWaWV3Q2hpbGQsXG5cdEVsZW1lbnRSZWYsXG5cdEV2ZW50RW1pdHRlcixcblx0T3V0cHV0XG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBMaXN0Q29sdW1uIH0gZnJvbSBcIi4vbGlzdC1jb2x1bW4uY29tcG9uZW50XCI7XG5cbi8qKlxuICogYExpc3RSb3dgIHByb3ZpZGVzIGEgY29udGFpbmVyIGZvciB0aGUgYExpc3RDb2x1bW5gcyB0aGF0IG1ha2UgdXAgdGhlIGJvZHkgb2YgYSBzdHJ1Y3R1cmVkIGxpc3QuXG4gKlxuICogRXhhbXBsZTpcbiAqIGBgYGh0bWxcbiAqIFx0PGNkcy1saXN0LXJvdz5cbiAqXHRcdDxjZHMtbGlzdC1jb2x1bW4+Um93IDE8L2Nkcy1saXN0LWNvbHVtbj5cbiAqXHRcdDxjZHMtbGlzdC1jb2x1bW4gbm93cmFwPVwidHJ1ZVwiPlJvdyBPbmU8L2Nkcy1saXN0LWNvbHVtbj5cbiAqXHRcdDxjZHMtbGlzdC1jb2x1bW4+XG4gKlx0XHRcdExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LFxuICpcdFx0XHRjb25zZWN0ZXR1ciBhZGlwaXNjaW5nIGVsaXQuIE51bmMgZHVpIG1hZ25hLFxuICpcdFx0XHRmaW5pYnVzIGlkIHRvcnRvciBzZWQsIGFsaXF1ZXQgYmliZW5kdW0gYXVndWUuXG4gKlx0XHRcdEFlbmVhbiBwb3N1ZXJlIHNlbSB2ZWwgZXVpc21vZCBkaWduaXNzaW0uIE51bGxhIHV0IGN1cnN1cyBkb2xvci5cbiAqXHRcdFx0UGVsbGVudGVzcXVlIHZ1bHB1dGF0ZSBuaXNsIGEgcG9ydHRpdG9yIGludGVyZHVtLlxuICpcdFx0PC9jZHMtbGlzdC1jb2x1bW4+XG4gKlx0PC9jZHMtbGlzdC1yb3c+XG4gKiBgYGBcbiAqL1xuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiBcImNkcy1saXN0LXJvdywgaWJtLWxpc3Qtcm93XCIsXG5cdHRlbXBsYXRlOiBgXG5cdFx0PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuXHRcdDxuZy1jb250YWluZXIgKm5nSWY9XCJzZWxlY3Rpb25cIj5cblx0XHRcdDxpbnB1dFxuXHRcdFx0XHQjaW5wdXRcblx0XHRcdFx0Y2xhc3M9XCJjZHMtLXN0cnVjdHVyZWQtbGlzdC1pbnB1dCBjZHMtLXZpc3VhbGx5LWhpZGRlblwiXG5cdFx0XHRcdHR5cGU9XCJyYWRpb1wiXG5cdFx0XHRcdFt2YWx1ZV09XCJ2YWx1ZVwiXG5cdFx0XHRcdFtuYW1lXT1cIm5hbWVcIlxuXHRcdFx0XHRbdGl0bGVdPVwibGFiZWxcIlxuXHRcdFx0XHQoZm9jdXMpPVwiaGFuZGxlRm9jdXModHJ1ZSlcIlxuXHRcdFx0XHQoYmx1cik9XCJoYW5kbGVGb2N1cyhmYWxzZSlcIlxuXHRcdFx0XHQoY2hhbmdlKT1cIm9uQ2hhbmdlKCRldmVudClcIlxuXHRcdFx0XHRbY2hlY2tlZF09XCJzZWxlY3RlZFwiLz5cblx0XHRcdDxkaXYgY2xhc3M9XCJjZHMtLXN0cnVjdHVyZWQtbGlzdC10ZFwiPlxuXHRcdFx0XHQ8c3ZnIGNkc0ljb249XCJjaGVja21hcmstLWZpbGxlZFwiIHNpemU9XCIxNlwiIGNsYXNzPVwiY2RzLS1zdHJ1Y3R1cmVkLWxpc3Qtc3ZnXCI+PC9zdmc+XG5cdFx0XHQ8L2Rpdj5cblx0XHQ8L25nLWNvbnRhaW5lcj5cblx0YFxufSlcbmV4cG9ydCBjbGFzcyBMaXN0Um93IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tc3RydWN0dXJlZC1saXN0LXJvdy0tZm9jdXNlZC13aXRoaW5cIikgZ2V0IGZvY3VzQ2xhc3MoKSB7XG5cdFx0cmV0dXJuIHRoaXMuaXNGb2N1c2VkO1xuXHR9XG5cdEBJbnB1dCgpIEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tc3RydWN0dXJlZC1saXN0LXJvdy0tc2VsZWN0ZWRcIikgc2VsZWN0ZWQgPSBmYWxzZTtcblx0LyoqXG5cdCAqIEFwcGxpZXMgYW4gYWNjZXNzaWJsZSBsYWJlbCB0byB0aGUgcm93LiBEZWZhdWx0cyB0byBubyBsYWJlbC5cblx0ICovXG5cdEBJbnB1dCgpIEBIb3N0QmluZGluZyhcImF0dHIuYXJpYS1sYWJlbFwiKSBsYWJlbDtcblx0LyoqXG5cdCAqIFRoZSB2YWx1ZSBmb3IgdGhlIHJvdy4gUmV0dXJuZWQgdmlhIGBuZ01vZGVsYCBvciBgc2VsZWN0ZWRgIGV2ZW50IG9uIHRoZSBjb250YWluaW5nIGBTdHJ1Y3R1cmVkTGlzdGAuXG5cdCAqL1xuXHRASW5wdXQoKSB2YWx1ZTtcblx0LyoqXG5cdCAqIEludGVybmFsIGV2ZW50IHVzZWQgdG8gbm90aWZ5IHRoZSBjb250YWluaW5nIGBTdHJ1Y3R1cmVkTGlzdGAgb2YgY2hhbmdlcy5cblx0ICovXG5cdEBPdXRwdXQoKSBjaGFuZ2U6IEV2ZW50RW1pdHRlcjxFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cblx0LyoqXG5cdCAqIFNldCBieSB0aGUgY29udGFpbmluZyBgU3RydWN0dXJlZExpc3RgLiBFbmFibGVzIG9yIGRpc2FibGVzIHJvdyBsZXZlbCBzZWxlY3Rpb24gZmVhdHVyZXMuXG5cdCAqL1xuXHRzZWxlY3Rpb24gPSBmYWxzZTtcblx0LyoqXG5cdCAqIFNldCBieSB0aGUgY29udGFpbmluZyBgU3RydWN0dXJlZExpc3RgLiBXaGVuIGBzZWxlY3Rpb24gPSB0cnVlYCwgdXNlZCBmb3IgdGhlIGBuYW1lYCBwcm9wZXJ0eSBvbiB0aGUgcmFkaW8gaW5wdXQuXG5cdCAqL1xuXHRuYW1lID0gXCJsaXN0XCI7XG5cblx0QEhvc3RCaW5kaW5nKFwiY2xhc3MuY2RzLS1zdHJ1Y3R1cmVkLWxpc3Qtcm93XCIpIHdyYXBwZXIgPSB0cnVlO1xuXHRASG9zdEJpbmRpbmcoXCJhdHRyLnJvbGVcIikgcm9sZSA9IFwicm93XCI7XG5cblx0QENvbnRlbnRDaGlsZHJlbihMaXN0Q29sdW1uKSBjb2x1bW5zOiBRdWVyeUxpc3Q8TGlzdENvbHVtbj47XG5cblx0QFZpZXdDaGlsZChcImlucHV0XCIpIGlucHV0OiBFbGVtZW50UmVmO1xuXG5cdHByaXZhdGUgaXNGb2N1c2VkID0gZmFsc2U7XG5cblx0bmdBZnRlckNvbnRlbnRJbml0KCkge1xuXHRcdHRoaXMuY29sdW1ucy5mb3JFYWNoKGNvbHVtbiA9PiB7XG5cdFx0XHRjb2x1bW4uaXNCb2R5Q29sdW1uID0gdHJ1ZTtcblx0XHRcdGNvbHVtbi5pc0hlYWRlckNvbHVtbiA9IGZhbHNlO1xuXHRcdH0pO1xuXHR9XG5cblx0QEhvc3RMaXN0ZW5lcihcImNsaWNrXCIpXG5cdG9uY2xpY2soKSB7XG5cdFx0aWYgKHRoaXMuc2VsZWN0aW9uKSB7XG5cdFx0XHR0aGlzLmlucHV0Lm5hdGl2ZUVsZW1lbnQuY2xpY2soKTtcblx0XHR9XG5cdH1cblxuXHRvbkNoYW5nZShldmVudCkge1xuXHRcdHRoaXMuY2hhbmdlLmVtaXQoZXZlbnQpO1xuXHR9XG5cblx0aGFuZGxlRm9jdXMoaXNGb2N1c2VkKSB7XG5cdFx0aWYgKHRoaXMuc2VsZWN0aW9uKSB7XG5cdFx0XHR0aGlzLmlzRm9jdXNlZCA9IGlzRm9jdXNlZDtcblx0XHRcdGlmICh0aGlzLmlzRm9jdXNlZCkge1xuXHRcdFx0XHR0aGlzLmlucHV0Lm5hdGl2ZUVsZW1lbnQuY2xpY2soKTtcblx0XHRcdH1cblx0XHR9XG5cdH1cbn1cbiJdfQ==