carbon-components-angular
Version:
Next generation components
249 lines (243 loc) • 9.98 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, TemplateRef, Component, Input, Output, HostBinding, ContentChildren, 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';
class AccordionItem {
constructor() {
this.context = null;
this.id = `accordion-item-${AccordionItem.accordionItemCount++}`;
this.skeleton = false;
this.selected = new EventEmitter();
this.itemClass = true;
this.expanded = false;
this.disabled = false;
this.role = "listitem";
}
toggleExpanded() {
if (!this.skeleton) {
this.expanded = !this.expanded;
this.selected.emit({ id: this.id, expanded: this.expanded });
}
}
isTemplate(value) {
return value instanceof TemplateRef;
}
}
AccordionItem.accordionItemCount = 0;
AccordionItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
AccordionItem.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AccordionItem, selector: "cds-accordion-item, ibm-accordion-item", inputs: { title: "title", context: "context", id: "id", skeleton: "skeleton", expanded: "expanded", disabled: "disabled" }, outputs: { selected: "selected" }, host: { properties: { "class.cds--accordion__item": "this.itemClass", "class.cds--accordion__item--active": "this.expanded", "class.cds--accordion__item--disabled": "this.disabled", "attr.role": "this.role" } }, ngImport: i0, template: `
<button
type="button"
[disabled]="disabled"
[attr.aria-expanded]="expanded"
[attr.aria-controls]="id"
(click)="toggleExpanded()"
class="cds--accordion__heading">
<svg cdsIcon="chevron--right" size="16" class="cds--accordion__arrow"></svg>
<p *ngIf="!isTemplate(title)"
class="cds--accordion__title"
[ngClass]="{
'cds--skeleton__text': skeleton
}">
{{!skeleton ? title : null}}
</p>
<ng-template
*ngIf="isTemplate(title)"
[ngTemplateOutlet]="title"
[ngTemplateOutletContext]="context">
</ng-template>
</button>
<div class="cds--accordion__wrapper">
<div [id]="id" class="cds--accordion__content">
<ng-content *ngIf="!skeleton; else skeletonTemplate"></ng-content>
<ng-template #skeletonTemplate>
<p class="cds--skeleton__text" style="width: 90%"></p>
<p class="cds--skeleton__text" style="width: 80%"></p>
<p class="cds--skeleton__text" style="width: 95%"></p>
</ng-template>
</div>
</div>
`, isInline: true, styles: [":host{display:list-item}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: AccordionItem, decorators: [{
type: Component,
args: [{ selector: "cds-accordion-item, ibm-accordion-item", template: `
<button
type="button"
[disabled]="disabled"
[attr.aria-expanded]="expanded"
[attr.aria-controls]="id"
(click)="toggleExpanded()"
class="cds--accordion__heading">
<svg cdsIcon="chevron--right" size="16" class="cds--accordion__arrow"></svg>
<p *ngIf="!isTemplate(title)"
class="cds--accordion__title"
[ngClass]="{
'cds--skeleton__text': skeleton
}">
{{!skeleton ? title : null}}
</p>
<ng-template
*ngIf="isTemplate(title)"
[ngTemplateOutlet]="title"
[ngTemplateOutletContext]="context">
</ng-template>
</button>
<div class="cds--accordion__wrapper">
<div [id]="id" class="cds--accordion__content">
<ng-content *ngIf="!skeleton; else skeletonTemplate"></ng-content>
<ng-template #skeletonTemplate>
<p class="cds--skeleton__text" style="width: 90%"></p>
<p class="cds--skeleton__text" style="width: 80%"></p>
<p class="cds--skeleton__text" style="width: 95%"></p>
</ng-template>
</div>
</div>
`, styles: [":host{display:list-item}\n"] }]
}], propDecorators: { title: [{
type: Input
}], context: [{
type: Input
}], id: [{
type: Input
}], skeleton: [{
type: Input
}], selected: [{
type: Output
}], itemClass: [{
type: HostBinding,
args: ["class.cds--accordion__item"]
}], expanded: [{
type: HostBinding,
args: ["class.cds--accordion__item--active"]
}, {
type: Input
}], disabled: [{
type: HostBinding,
args: ["class.cds--accordion__item--disabled"]
}, {
type: Input
}], role: [{
type: HostBinding,
args: ["attr.role"]
}] } });
/**
* Get started with importing the module:
*
* ```typescript
* import { AccordionModule } from 'carbon-components-angular';
* ```
*
* [See demo](../../?path=/story/components-accordion--basic)
*/
class Accordion {
constructor() {
/**
* Sets the alignment of the chevron icon
*/
this.align = "end";
/**
* @todo remove `cds--accordion--${size}` classes in v12
*/
/**
* Sets the size of all accordian items
*/
this.size = "md";
this._skeleton = false;
}
set skeleton(value) {
this._skeleton = value;
this.updateChildren();
}
get skeleton() {
return this._skeleton;
}
ngAfterContentInit() {
this.updateChildren();
}
updateChildren() {
if (this.children) {
this.children.toArray().forEach(child => child.skeleton = this.skeleton);
}
}
}
Accordion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: Accordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
Accordion.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: Accordion, selector: "cds-accordion, ibm-accordion", inputs: { align: "align", size: "size", skeleton: "skeleton" }, queries: [{ propertyName: "children", predicate: AccordionItem }], ngImport: i0, template: `
<div class="cds--accordion"
[ngClass]="{
'cds--accordion--end': align === 'end',
'cds--accordion--start': align === 'start',
'cds--accordion--sm': size === 'sm',
'cds--accordion--md': size ==='md',
'cds--accordion--lg': size === 'lg',
'cds--layout--size-sm': size === 'sm',
'cds--layout--size-md': size === 'md',
'cds--layout--size-lg': size === 'lg'
}"
role="list">
<ng-content></ng-content>
</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: Accordion, decorators: [{
type: Component,
args: [{
selector: "cds-accordion, ibm-accordion",
template: `
<div class="cds--accordion"
[ngClass]="{
'cds--accordion--end': align === 'end',
'cds--accordion--start': align === 'start',
'cds--accordion--sm': size === 'sm',
'cds--accordion--md': size ==='md',
'cds--accordion--lg': size === 'lg',
'cds--layout--size-sm': size === 'sm',
'cds--layout--size-md': size === 'md',
'cds--layout--size-lg': size === 'lg'
}"
role="list">
<ng-content></ng-content>
</div>
`
}]
}], propDecorators: { align: [{
type: Input
}], size: [{
type: Input
}], children: [{
type: ContentChildren,
args: [AccordionItem]
}], skeleton: [{
type: Input
}] } });
class AccordionModule {
}
AccordionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
AccordionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: AccordionModule, declarations: [Accordion,
AccordionItem], imports: [CommonModule,
IconModule], exports: [Accordion,
AccordionItem] });
AccordionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccordionModule, imports: [CommonModule,
IconModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AccordionModule, decorators: [{
type: NgModule,
args: [{
declarations: [
Accordion,
AccordionItem
],
exports: [
Accordion,
AccordionItem
],
imports: [
CommonModule,
IconModule
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Accordion, AccordionItem, AccordionModule };
//# sourceMappingURL=carbon-components-angular-accordion.mjs.map