@kushki/ng-suka
Version:
<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>
192 lines • 13.4 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, HostBinding, Output, EventEmitter, Host } from '@angular/core';
import { Accordion } from './accordion.component';
import { takeWhile } from 'rxjs/operators';
export class AccordionItem {
/**
* @param {?} accordion
*/
constructor(accordion) {
this.accordion = accordion;
this.title = `Title ${AccordionItem.accordionItemCount}`;
this.id = `accordion-item-${AccordionItem.accordionItemCount}`;
this.skeleton = false;
this.opened = new EventEmitter();
this.closed = new EventEmitter();
this.itemClass = true;
this.expanded = false;
this.itemType = 'list-item';
this.role = 'heading';
this.ariaLevel = 3;
this.alive = true;
AccordionItem.accordionItemCount++;
}
/**
* @return {?}
*/
toggle() {
if (!this.skeleton) {
if (!this.expanded) {
if (!this.accordion.multi) {
this.accordion.openCloseItems.next(true);
}
this.open();
}
else {
this.close();
}
}
}
/**
* @protected
* @return {?}
*/
open() {
if (!this.expanded) {
this.opened.emit({ id: this.id });
}
this.expanded = true;
}
/**
* @protected
* @return {?}
*/
close() {
if (this.expanded) {
this.closed.emit({ id: this.id });
}
this.expanded = false;
}
/**
* @return {?}
*/
ngOnInit() {
this.openSubscription = this.accordion.openCloseItems
.pipe(takeWhile((/**
* @return {?}
*/
() => this.alive)))
.subscribe((/**
* @param {?} collapsed
* @return {?}
*/
collapsed => {
if (!this.skeleton) {
collapsed ? this.close() : this.open();
}
}));
this.skeletonSubscription = this.accordion.skeletons
.pipe(takeWhile((/**
* @return {?}
*/
() => this.alive)))
.subscribe((/**
* @param {?} skeletonValue
* @return {?}
*/
skeletonValue => this.skeleton = skeletonValue));
this.skeleton = this.accordion.skeleton;
}
/**
* @return {?}
*/
ngOnDestroy() {
this.alive = false;
this.openSubscription.unsubscribe();
this.skeletonSubscription.unsubscribe();
}
}
AccordionItem.accordionItemCount = 0;
AccordionItem.decorators = [
{ type: Component, args: [{
selector: 'suka-accordion-item',
template: `
<button
[attr.aria-expanded]="expanded"
[attr.aria-controls]="id"
(click)="toggle()"
class="accordion__heading">
<suka-icon icon="chevron-down" class="accordion__arrow"></suka-icon>
<p
class="accordion__title"
[ngClass]="{
'skeleton__text': skeleton
}">
{{!skeleton ? title : null}}
</p>
</button>
<div [id]="id" class="accordion__content">
<ng-content *ngIf="!skeleton; else skeletonTemplate"></ng-content>
<ng-template #skeletonTemplate>
<p class="skeleton__text" style="width: 90%"></p>
<p class="skeleton__text" style="width: 80%"></p>
<p class="skeleton__text" style="width: 95%"></p>
</ng-template>
</div>
`
}] }
];
/** @nocollapse */
AccordionItem.ctorParameters = () => [
{ type: Accordion, decorators: [{ type: Host }] }
];
AccordionItem.propDecorators = {
title: [{ type: Input }],
id: [{ type: Input }],
skeleton: [{ type: Input }],
opened: [{ type: Output }],
closed: [{ type: Output }],
itemClass: [{ type: HostBinding, args: ['class.accordion__item',] }],
expanded: [{ type: HostBinding, args: ['class.accordion__item--active',] }, { type: Input }],
itemType: [{ type: HostBinding, args: ['style.display',] }],
role: [{ type: HostBinding, args: ['attr.role',] }],
ariaLevel: [{ type: HostBinding, args: ['attr.aria-level',] }, { type: Input }]
};
if (false) {
/** @type {?} */
AccordionItem.accordionItemCount;
/** @type {?} */
AccordionItem.prototype.title;
/** @type {?} */
AccordionItem.prototype.id;
/** @type {?} */
AccordionItem.prototype.skeleton;
/** @type {?} */
AccordionItem.prototype.opened;
/** @type {?} */
AccordionItem.prototype.closed;
/** @type {?} */
AccordionItem.prototype.itemClass;
/** @type {?} */
AccordionItem.prototype.expanded;
/** @type {?} */
AccordionItem.prototype.itemType;
/** @type {?} */
AccordionItem.prototype.role;
/** @type {?} */
AccordionItem.prototype.ariaLevel;
/**
* @type {?}
* @private
*/
AccordionItem.prototype.alive;
/**
* @type {?}
* @private
*/
AccordionItem.prototype.skeletonSubscription;
/**
* @type {?}
* @private
*/
AccordionItem.prototype.openSubscription;
/**
* @type {?}
* @private
*/
AccordionItem.prototype.accordion;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL2FjY29yZGlvbi9hY2NvcmRpb24taXRlbS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFdBQVcsRUFDWCxNQUFNLEVBQ04sWUFBWSxFQUNaLElBQUksRUFHTCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBOEIzQyxNQUFNLE9BQU8sYUFBYTs7OztJQWtCeEIsWUFBNEIsU0FBb0I7UUFBcEIsY0FBUyxHQUFULFNBQVMsQ0FBVztRQWhCdkMsVUFBSyxHQUFHLFNBQVMsYUFBYSxDQUFDLGtCQUFrQixFQUFFLENBQUM7UUFDcEQsT0FBRSxHQUFHLGtCQUFrQixhQUFhLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztRQUMxRCxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2hCLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQzVCLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRUEsY0FBUyxHQUFHLElBQUksQ0FBQztRQUNBLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDMUMsYUFBUSxHQUFHLFdBQVcsQ0FBQztRQUMzQixTQUFJLEdBQUcsU0FBUyxDQUFDO1FBQ0YsY0FBUyxHQUFHLENBQUMsQ0FBQztRQUUvQyxVQUFLLEdBQUcsSUFBSSxDQUFDO1FBS25CLGFBQWEsQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO0lBQ3JDLENBQUM7Ozs7SUFFTSxNQUFNO1FBQ1gsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7Z0JBQ2xC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O0lBQ3JCLDZDQUEyQzs7Ozs7SUFDM0MseUNBQXVDOzs7OztJQUUzQixrQ0FBb0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBIb3N0QmluZGluZyxcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3QsXG4gIE9uSW5pdCxcbiAgT25EZXN0cm95XG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQWNjb3JkaW9uIH0gZnJvbSAnLi9hY2NvcmRpb24uY29tcG9uZW50JztcbmltcG9ydCB7IHRha2VXaGlsZSB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWthLWFjY29yZGlvbi1pdGVtJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8YnV0dG9uXG4gICAgICBbYXR0ci5hcmlhLWV4cGFuZGVkXT1cImV4cGFuZGVkXCJcbiAgICAgIFthdHRyLmFyaWEtY29udHJvbHNdPVwiaWRcIlxuICAgICAgKGNsaWNrKT1cInRvZ2dsZSgpXCJcbiAgICAgIGNsYXNzPVwiYWNjb3JkaW9uX19oZWFkaW5nXCI+XG4gICAgICA8c3VrYS1pY29uIGljb249XCJjaGV2cm9uLWRvd25cIiBjbGFzcz1cImFjY29yZGlvbl9fYXJyb3dcIj48L3N1a2EtaWNvbj5cbiAgICAgIDxwXG4gICAgICAgIGNsYXNzPVwiYWNjb3JkaW9uX190aXRsZVwiXG4gICAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAgICAgICAnc2tlbGV0b25fX3RleHQnOiBza2VsZXRvblxuICAgICAgICB9XCI+XG4gICAgICAgIHt7IXNrZWxldG9uID8gdGl0bGUgOiBudWxsfX1cbiAgICAgIDwvcD5cbiAgICA8L2J1dHRvbj5cbiAgICA8ZGl2IFtpZF09XCJpZFwiIGNsYXNzPVwiYWNjb3JkaW9uX19jb250ZW50XCI+XG4gICAgICA8bmctY29udGVudCAqbmdJZj1cIiFza2VsZXRvbjsgZWxzZSBza2VsZXRvblRlbXBsYXRlXCI+PC9uZy1jb250ZW50PlxuICAgICAgPG5nLXRlbXBsYXRlICNza2VsZXRvblRlbXBsYXRlPlxuICAgICAgICA8cCBjbGFzcz1cInNrZWxldG9uX190ZXh0XCIgc3R5bGU9XCJ3aWR0aDogOTAlXCI+PC9wPlxuICAgICAgICA8cCBjbGFzcz1cInNrZWxldG9uX190ZXh0XCIgc3R5bGU9XCJ3aWR0aDogODAlXCI+PC9wPlxuICAgICAgICA8cCBjbGFzcz1cInNrZWxldG9uX190ZXh0XCIgc3R5bGU9XCJ3aWR0aDogOTUlXCI+PC9wPlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L2Rpdj5cbiAgYCxcbn0pXG5leHBvcnQgY2xhc3MgQWNjb3JkaW9uSXRlbSBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgc3RhdGljIGFjY29yZGlvbkl0ZW1Db3VudCA9IDA7XG4gIEBJbnB1dCgpIHRpdGxlID0gYFRpdGxlICR7QWNjb3JkaW9uSXRlbS5hY2NvcmRpb25JdGVtQ291bnR9YDtcbiAgQElucHV0KCkgaWQgPSBgYWNjb3JkaW9uLWl0ZW0tJHtBY2NvcmRpb25JdGVtLmFjY29yZGlvbkl0ZW1Db3VudH1gO1xuICBASW5wdXQoKSBza2VsZXRvbiA9IGZhbHNlO1xuICBAT3V0cHV0KCkgb3BlbmVkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuICBAT3V0cHV0KCkgY2xvc2VkID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MuYWNjb3JkaW9uX19pdGVtJykgaXRlbUNsYXNzID0gdHJ1ZTtcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5hY2NvcmRpb25fX2l0ZW0tLWFjdGl2ZScpIEBJbnB1dCgpIGV4cGFuZGVkID0gZmFsc2U7XG4gIEBIb3N0QmluZGluZygnc3R5bGUuZGlzcGxheScpIGl0ZW1UeXBlID0gJ2xpc3QtaXRlbSc7XG4gIEBIb3N0QmluZGluZygnYXR0ci5yb2xlJykgcm9sZSA9ICdoZWFkaW5nJztcbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmFyaWEtbGV2ZWwnKSBASW5wdXQoKSBhcmlhTGV2ZWwgPSAzO1xuXG4gIHByaXZhdGUgYWxpdmUgPSB0cnVlO1xuICBwcml2YXRlIHNrZWxldG9uU3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb247XG4gIHByaXZhdGUgb3BlblN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uO1xuXG4gIGNvbnN0cnVjdG9yKEBIb3N0KCkgcHJpdmF0ZSBhY2NvcmRpb246IEFjY29yZGlvbikge1xuICAgIEFjY29yZGlvbkl0ZW0uYWNjb3JkaW9uSXRlbUNvdW50Kys7XG4gIH1cblxuICBwdWJsaWMgdG9nZ2xlKCkge1xuICAgIGlmICghdGhpcy5za2VsZXRvbikge1xuICAgICAgaWYgKCF0aGlzLmV4cGFuZGVkKSB7XG4gICAgICAgIGlmICghdGhpcy5hY2NvcmRpb24ubXVsdGkpIHtcbiAgICAgICAgICB0aGlzLmFjY29yZGlvbi5vcGVuQ2xvc2VJdGVtcy5uZXh0KHRydWUpO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5vcGVuKCk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLmNsb3NlKCk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgcHJvdGVjdGVkIG9wZW4oKSB7XG4gICAgaWYgKCF0aGlzLmV4cGFuZGVkKSB7XG4gICAgICB0aGlzLm9wZW5lZC5lbWl0KHsgaWQ6IHRoaXMuaWQgfSk7XG4gICAgfVxuXG4gICAgdGhpcy5leHBhbmRlZCA9IHRydWU7XG4gIH1cblxuICBwcm90ZWN0ZWQgY2xvc2UoKSB7XG4gICAgaWYgKHRoaXMuZXhwYW5kZWQpIHtcbiAgICAgIHRoaXMuY2xvc2VkLmVtaXQoeyBpZDogdGhpcy5pZCB9KTtcbiAgICB9XG5cbiAgICB0aGlzLmV4cGFuZGVkID0gZmFsc2U7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLm9wZW5TdWJzY3JpcHRpb24gPSB0aGlzLmFjY29yZGlvbi5vcGVuQ2xvc2VJdGVtc1xuICAgICAgLnBpcGUodGFrZVdoaWxlKCgpID0+IHRoaXMuYWxpdmUpKVxuICAgICAgLnN1YnNjcmliZShjb2xsYXBzZWQgPT4ge1xuICAgICAgICBpZiAoIXRoaXMuc2tlbGV0b24pIHtcbiAgICAgICAgICBjb2xsYXBzZWQgPyB0aGlzLmNsb3NlKCkgOiB0aGlzLm9wZW4oKTtcbiAgICAgICAgfVxuICAgICAgfSk7XG5cbiAgICB0aGlzLnNrZWxldG9uU3Vic2NyaXB0aW9uID0gdGhpcy5hY2NvcmRpb24uc2tlbGV0b25zXG4gICAgICAucGlwZSh0YWtlV2hpbGUoKCkgPT4gdGhpcy5hbGl2ZSkpXG4gICAgICAuc3Vic2NyaWJlKHNrZWxldG9uVmFsdWUgPT4gdGhpcy5za2VsZXRvbiA9IHNrZWxldG9uVmFsdWUpO1xuXG4gICAgdGhpcy5za2VsZXRvbiA9IHRoaXMuYWNjb3JkaW9uLnNrZWxldG9uO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5hbGl2ZSA9IGZhbHNlO1xuICAgIHRoaXMub3BlblN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgIHRoaXMuc2tlbGV0b25TdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgfVxufVxuIl19