carbon-components-angular
Version:
Next generation components
64 lines • 5.98 kB
JavaScript
import { Directive, HostBinding, Input } from "@angular/core";
import * as i0 from "@angular/core";
/**
* Applies either ordered or unordered styling to the list container it is applied to.
*
* For `ul`s it will apply unordered list styles, and for `ol`s it will apply ordered list styles.
*
* If a `ul` or `ol` is nested within a `li` the directive will apply nested list styling.
*
* Get started with importing the module:
*
* ```typescript
* import { ListModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-list--basic)
*/
export class List {
constructor(elementRef) {
this.elementRef = elementRef;
/**
* Set to `true` to make list expressive
*/
this.isExpressive = false;
}
get ordered() {
if (this.nested) {
return false;
}
return this.elementRef.nativeElement.tagName === "OL";
}
get unordered() {
if (this.nested) {
return false;
}
return this.elementRef.nativeElement.tagName === "UL";
}
get nested() {
return !!(this.elementRef.nativeElement.parentElement && this.elementRef.nativeElement.parentElement.tagName === "LI");
}
}
List.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: List, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
List.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: List, selector: "[cdsList], [ibmList]", inputs: { isExpressive: "isExpressive" }, host: { properties: { "class.cds--list--ordered": "this.ordered", "class.cds--list--unordered": "this.unordered", "class.cds--list--nested": "this.nested", "class.cds--list--expressive": "this.isExpressive" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: List, decorators: [{
type: Directive,
args: [{
selector: "[cdsList], [ibmList]"
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { ordered: [{
type: HostBinding,
args: ["class.cds--list--ordered"]
}], unordered: [{
type: HostBinding,
args: ["class.cds--list--unordered"]
}], nested: [{
type: HostBinding,
args: ["class.cds--list--nested"]
}], isExpressive: [{
type: Input
}, {
type: HostBinding,
args: ["class.cds--list--expressive"]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGlzdC9saXN0LmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ04sU0FBUyxFQUVULFdBQVcsRUFDWCxLQUFLLEVBQ0wsTUFBTSxlQUFlLENBQUM7O0FBRXZCOzs7Ozs7Ozs7Ozs7OztHQWNHO0FBSUgsTUFBTSxPQUFPLElBQUk7SUFvQmhCLFlBQXNCLFVBQXNCO1FBQXRCLGVBQVUsR0FBVixVQUFVLENBQVk7UUFMNUM7O1dBRUc7UUFDa0QsaUJBQVksR0FBRyxLQUFLLENBQUM7SUFFM0IsQ0FBQztJQW5CaEQsSUFBNkMsT0FBTztRQUNuRCxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFBRSxPQUFPLEtBQUssQ0FBQztTQUFFO1FBQ2xDLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQztJQUN2RCxDQUFDO0lBRUQsSUFBK0MsU0FBUztRQUN2RCxJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFBRSxPQUFPLEtBQUssQ0FBQztTQUFFO1FBQ2xDLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQztJQUN2RCxDQUFDO0lBRUQsSUFBNEMsTUFBTTtRQUNqRCxPQUFPLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGFBQWEsSUFBSSxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsT0FBTyxLQUFLLElBQUksQ0FBQyxDQUFDO0lBQ3hILENBQUM7O2lHQWJXLElBQUk7cUZBQUosSUFBSTsyRkFBSixJQUFJO2tCQUhoQixTQUFTO21CQUFDO29CQUNWLFFBQVEsRUFBRSxzQkFBc0I7aUJBQ2hDO2lHQUU2QyxPQUFPO3NCQUFuRCxXQUFXO3VCQUFDLDBCQUEwQjtnQkFLUSxTQUFTO3NCQUF2RCxXQUFXO3VCQUFDLDRCQUE0QjtnQkFLRyxNQUFNO3NCQUFqRCxXQUFXO3VCQUFDLHlCQUF5QjtnQkFPZSxZQUFZO3NCQUFoRSxLQUFLOztzQkFBSSxXQUFXO3VCQUFDLDZCQUE2QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdERpcmVjdGl2ZSxcblx0RWxlbWVudFJlZixcblx0SG9zdEJpbmRpbmcsXG5cdElucHV0XG59IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5cbi8qKlxuICogQXBwbGllcyBlaXRoZXIgb3JkZXJlZCBvciB1bm9yZGVyZWQgc3R5bGluZyB0byB0aGUgbGlzdCBjb250YWluZXIgaXQgaXMgYXBwbGllZCB0by5cbiAqXG4gKiBGb3IgYHVsYHMgaXQgd2lsbCBhcHBseSB1bm9yZGVyZWQgbGlzdCBzdHlsZXMsIGFuZCBmb3IgYG9sYHMgaXQgd2lsbCBhcHBseSBvcmRlcmVkIGxpc3Qgc3R5bGVzLlxuICpcbiAqIElmIGEgYHVsYCBvciBgb2xgIGlzIG5lc3RlZCB3aXRoaW4gYSBgbGlgIHRoZSBkaXJlY3RpdmUgd2lsbCBhcHBseSBuZXN0ZWQgbGlzdCBzdHlsaW5nLlxuICpcbiAqIEdldCBzdGFydGVkIHdpdGggaW1wb3J0aW5nIHRoZSBtb2R1bGU6XG4gKlxuICogYGBgdHlwZXNjcmlwdFxuICogaW1wb3J0IHsgTGlzdE1vZHVsZSB9IGZyb20gJ2NhcmJvbi1jb21wb25lbnRzLWFuZ3VsYXInO1xuICogYGBgXG4gKlxuICogW1NlZSBkZW1vXSguLi8uLi8/cGF0aD0vc3RvcnkvY29tcG9uZW50cy1saXN0LS1iYXNpYylcbiAqL1xuQERpcmVjdGl2ZSh7XG5cdHNlbGVjdG9yOiBcIltjZHNMaXN0XSwgW2libUxpc3RdXCJcbn0pXG5leHBvcnQgY2xhc3MgTGlzdCB7XG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tbGlzdC0tb3JkZXJlZFwiKSBnZXQgb3JkZXJlZCgpIHtcblx0XHRpZiAodGhpcy5uZXN0ZWQpIHsgcmV0dXJuIGZhbHNlOyB9XG5cdFx0cmV0dXJuIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnRhZ05hbWUgPT09IFwiT0xcIjtcblx0fVxuXG5cdEBIb3N0QmluZGluZyhcImNsYXNzLmNkcy0tbGlzdC0tdW5vcmRlcmVkXCIpIGdldCB1bm9yZGVyZWQoKSB7XG5cdFx0aWYgKHRoaXMubmVzdGVkKSB7IHJldHVybiBmYWxzZTsgfVxuXHRcdHJldHVybiB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC50YWdOYW1lID09PSBcIlVMXCI7XG5cdH1cblxuXHRASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLWxpc3QtLW5lc3RlZFwiKSBnZXQgbmVzdGVkKCkge1xuXHRcdHJldHVybiAhISh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5wYXJlbnRFbGVtZW50ICYmIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnBhcmVudEVsZW1lbnQudGFnTmFtZSA9PT0gXCJMSVwiKTtcblx0fVxuXG5cdC8qKlxuXHQgKiBTZXQgdG8gYHRydWVgIHRvIG1ha2UgbGlzdCBleHByZXNzaXZlXG5cdCAqL1xuXHRASW5wdXQoKSBASG9zdEJpbmRpbmcoXCJjbGFzcy5jZHMtLWxpc3QtLWV4cHJlc3NpdmVcIikgaXNFeHByZXNzaXZlID0gZmFsc2U7XG5cblx0Y29uc3RydWN0b3IocHJvdGVjdGVkIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYpIHt9XG59XG4iXX0=