carbon-components-angular
Version:
Next generation components
537 lines (529 loc) • 20.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, HostBinding, ContentChildren, EventEmitter, Output, ViewChild, HostListener, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'carbon-components-angular/icon';
import { IconModule } from 'carbon-components-angular/icon';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
/**
* `ListColumn` represents a single column in a `StructuredList`.
*
* `ListColumn`s can be used in a `ListHeader` to specify the column headers, or in `ListRow`s to specify the column data.
*
* Example:
* ```html
* <cds-list-column nowrap="true">Column 1</cds-list-column>
* ```
*/
class ListColumn {
constructor() {
this.skeleton = false;
this.role = "cell";
this.isHeaderColumn = true;
this.isBodyColumn = true;
/**
* Applies `white-space: nowrap` to the content of this `ListColumn`
*/
this.nowrap = false;
}
}
ListColumn.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ListColumn, deps: [], target: i0.ɵɵFactoryTarget.Component });
ListColumn.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ListColumn, selector: "cds-list-column, ibm-list-column", inputs: { skeleton: "skeleton", nowrap: "nowrap" }, host: { properties: { "attr.role": "this.role", "class.cds--structured-list-th": "this.isHeaderColumn", "class.cds--structured-list-td": "this.isBodyColumn", "class.cds--structured-list-content--nowrap": "this.nowrap" } }, ngImport: i0, template: `
<span *ngIf="skeleton"></span>
<ng-content></ng-content>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ListColumn, decorators: [{
type: Component,
args: [{
selector: "cds-list-column, ibm-list-column",
template: `
<span *ngIf="skeleton"></span>
<ng-content></ng-content>
`
}]
}], propDecorators: { skeleton: [{
type: Input
}], role: [{
type: HostBinding,
args: ["attr.role"]
}], isHeaderColumn: [{
type: HostBinding,
args: ["class.cds--structured-list-th"]
}], isBodyColumn: [{
type: HostBinding,
args: ["class.cds--structured-list-td"]
}], nowrap: [{
type: HostBinding,
args: ["class.cds--structured-list-content--nowrap"]
}, {
type: Input
}] } });
/**
* `ListHeader` provides a container for the `ListColumn`s that make up the header of a structured list.
*
* Example:
* ```html
* <cds-list-header>
* <cds-list-column nowrap="true">Column 1</cds-list-column>
* <cds-list-column nowrap="true">Column 2</cds-list-column>
* <cds-list-column>Column 3</cds-list-column>
* </cds-list-header>
* ```
*/
class ListHeader {
constructor() {
this.wrapper = true;
this.role = "rowgroup";
/**
* Set by the containing `StructuredList`. Adds a dummy header for the selection column when set to true.
*/
this.selection = false;
this._skeleton = false;
}
set skeleton(value) {
this._skeleton = value;
this.updateChildren();
}
get skeleton() {
return this._skeleton;
}
ngAfterContentInit() {
this.columns.forEach(column => {
column.isBodyColumn = false;
column.isHeaderColumn = true;
});
this.updateChildren();
}
updateChildren() {
if (this.columns) {
this.columns.toArray().forEach(child => child.skeleton = this.skeleton);
}
}
}
ListHeader.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ListHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
ListHeader.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ListHeader, selector: "cds-list-header, ibm-list-header", inputs: { skeleton: "skeleton" }, host: { properties: { "class.cds--structured-list-thead": "this.wrapper", "attr.role": "this.role" } }, queries: [{ propertyName: "columns", predicate: ListColumn }], ngImport: i0, template: `
<div class="cds--structured-list-row cds--structured-list-row--header-row" role="row">
<ng-content></ng-content>
<div *ngIf="selection" class="cds--structured-list-th"></div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ListHeader, decorators: [{
type: Component,
args: [{
selector: "cds-list-header, ibm-list-header",
template: `
<div class="cds--structured-list-row cds--structured-list-row--header-row" role="row">
<ng-content></ng-content>
<div *ngIf="selection" class="cds--structured-list-th"></div>
</div>
`
}]
}], propDecorators: { wrapper: [{
type: HostBinding,
args: ["class.cds--structured-list-thead"]
}], role: [{
type: HostBinding,
args: ["attr.role"]
}], skeleton: [{
type: Input
}], columns: [{
type: ContentChildren,
args: [ListColumn]
}] } });
/**
* `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>
* ```
*/
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"]
}] } });
/**
* Structured Lists represent related tabular data. For larger datasets consider a full `Table`.
*
* See [structured-list/usage](https://www.carbondesignsystem.com/components/structured-list/usage) for usage guidance.
*
* Get started with importing the module:
*
* ```typescript
* import { StructuredListModule } from 'carbon-components-angular';
* ```
*
* ```html
* <cds-structured-list>
* <cds-list-header>
* <cds-list-column nowrap="true">Column 1</cds-list-column>
* <cds-list-column nowrap="true">Column 2</cds-list-column>
* <cds-list-column>Column 3</cds-list-column>
* </cds-list-header>
* <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>
* <cds-list-row>
* <cds-list-column>Row 2</cds-list-column>
* <cds-list-column nowrap="true">Row Two</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>
* </cds-structured-list>
* ```
*
* [See demo](../../?path=/story/components-structured-list--basic)
*/
class StructuredList {
constructor() {
/**
* Set to `true` to enable radio like selection of the rows.
*/
this.selection = false;
/**
* Set to `true` to align content with margin
*/
this.flushed = false;
/**
* Set to `true` to apply a condensed style to the headers and rows.
*/
this.condensed = false;
/**
* Used when `selection = true` as the row radio group `name`
*/
this.name = `structured-list-${StructuredList.listCount++}`;
/**
* Emits an event when the row selection changes.
*
* Emits an object that looks like:
* ```javascript
* {
* value: "something",
* selected: true,
* name: "structured-list-1"
* }
* ```
*/
this.selected = new EventEmitter();
this._skeleton = false;
this.onChange = (_) => { };
this.onTouched = () => { };
}
/**
* Sets the skeleton value for all `ListHeader` to the skeleton value of `StructuredList`.
*/
set skeleton(value) {
this._skeleton = value;
this.updateChildren();
}
/**
* Returns the skeleton value in the `StructuredList` if there is one.
*/
get skeleton() {
return this._skeleton;
}
ngAfterContentInit() {
const setSelection = (rowOrHeader) => {
rowOrHeader.selection = this.selection;
};
this.headers.forEach(setSelection);
this.rows.forEach(row => {
setSelection(row);
row.name = this.name;
row.tabindex = this.selection ? "0" : null;
row.change.subscribe(() => {
this.selected.emit({
value: row.value,
selected: row.selected,
name: this.name
});
this.onChange(row.value);
});
});
this.updateChildren();
}
writeValue(value) {
if (!this.rows) {
return;
}
this.rows.forEach(row => {
if (row.value === value) {
row.selected = true;
}
else {
row.selected = false;
}
});
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
updateChildren() {
if (this.headers) {
this.headers.toArray().forEach(child => child.skeleton = this.skeleton);
}
}
}
/**
* A counter to provide unique default values.
*/
StructuredList.listCount = 0;
StructuredList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StructuredList, deps: [], target: i0.ɵɵFactoryTarget.Component });
StructuredList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StructuredList, selector: "cds-structured-list, ibm-structured-list", inputs: { selection: "selection", flushed: "flushed", condensed: "condensed", name: "name", skeleton: "skeleton" }, outputs: { selected: "selected" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: StructuredList,
multi: true
}
], queries: [{ propertyName: "rows", predicate: ListRow }, { propertyName: "headers", predicate: ListHeader }], ngImport: i0, template: `
<div
class="cds--structured-list"
role="table"
[ngClass]="{
'cds--structured-list--flush': flushed,
'cds--structured-list--selection': selection,
'cds--structured-list--condensed': condensed,
'cds--skeleton': skeleton
}">
<ng-content select="cds-list-header,ibm-list-header"></ng-content>
<div class="cds--structured-list-tbody" role="rowgroup">
<ng-content></ng-content>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StructuredList, decorators: [{
type: Component,
args: [{
selector: "cds-structured-list, ibm-structured-list",
template: `
<div
class="cds--structured-list"
role="table"
[ngClass]="{
'cds--structured-list--flush': flushed,
'cds--structured-list--selection': selection,
'cds--structured-list--condensed': condensed,
'cds--skeleton': skeleton
}">
<ng-content select="cds-list-header,ibm-list-header"></ng-content>
<div class="cds--structured-list-tbody" role="rowgroup">
<ng-content></ng-content>
</div>
</div>
`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: StructuredList,
multi: true
}
]
}]
}], propDecorators: { selection: [{
type: Input
}], flushed: [{
type: Input
}], condensed: [{
type: Input
}], name: [{
type: Input
}], skeleton: [{
type: Input
}], selected: [{
type: Output
}], rows: [{
type: ContentChildren,
args: [ListRow]
}], headers: [{
type: ContentChildren,
args: [ListHeader]
}] } });
class StructuredListModule {
}
StructuredListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StructuredListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
StructuredListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: StructuredListModule, declarations: [StructuredList,
ListRow,
ListHeader,
ListColumn], imports: [CommonModule,
IconModule], exports: [StructuredList,
ListRow,
ListHeader,
ListColumn] });
StructuredListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StructuredListModule, imports: [CommonModule,
IconModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StructuredListModule, decorators: [{
type: NgModule,
args: [{
declarations: [
StructuredList,
ListRow,
ListHeader,
ListColumn
],
exports: [
StructuredList,
ListRow,
ListHeader,
ListColumn
],
imports: [
CommonModule,
IconModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ListColumn, ListHeader, ListRow, StructuredList, StructuredListModule };
//# sourceMappingURL=carbon-components-angular-structured-list.mjs.map