carbon-components-angular
Version:
Next generation components
130 lines (126 loc) • 4.53 kB
TypeScript
/**
*
* carbon-angular v0.0.0 | structured-list.component.d.ts
*
* Copyright 2014, 2025 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 { QueryList, AfterContentInit, EventEmitter } from "@angular/core";
import { ListRow } from "./list-row.component";
import { ListHeader } from "./list-header.component";
import { ControlValueAccessor } from "@angular/forms";
import * as i0 from "@angular/core";
/**
* 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)
*/
export declare class StructuredList implements AfterContentInit, ControlValueAccessor {
/**
* A counter to provide unique default values.
*/
static listCount: number;
/**
* Set to `true` to enable radio like selection of the rows.
*/
selection: boolean;
/**
* Set to `true` to align content with margin
*/
flushed: boolean;
/**
* Set to `true` to apply a condensed style to the headers and rows.
*/
condensed: boolean;
/**
* Used when `selection = true` as the row radio group `name`
*/
name: string;
/**
* Sets the skeleton value for all `ListHeader` to the skeleton value of `StructuredList`.
*/
set skeleton(value: any);
/**
* Returns the skeleton value in the `StructuredList` if there is one.
*/
get skeleton(): any;
/**
* Emits an event when the row selection changes.
*
* Emits an object that looks like:
* ```javascript
* {
* value: "something",
* selected: true,
* name: "structured-list-1"
* }
* ```
*/
selected: EventEmitter<{
value: string;
selected: boolean;
name: string;
}>;
rows: QueryList<ListRow>;
headers: QueryList<ListHeader>;
protected _skeleton: boolean;
onChange: (_: any) => void;
onTouched: () => void;
ngAfterContentInit(): void;
writeValue(value: any): void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
protected updateChildren(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<StructuredList, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<StructuredList, "cds-structured-list, ibm-structured-list", never, { "selection": "selection"; "flushed": "flushed"; "condensed": "condensed"; "name": "name"; "skeleton": "skeleton"; }, { "selected": "selected"; }, ["rows", "headers"], ["cds-list-header,ibm-list-header", "*"], false>;
}