@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>
186 lines • 14.1 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';
var AccordionItem = /** @class */ (function () {
function AccordionItem(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 {?}
*/
AccordionItem.prototype.toggle = /**
* @return {?}
*/
function () {
if (!this.skeleton) {
if (!this.expanded) {
if (!this.accordion.multi) {
this.accordion.openCloseItems.next(true);
}
this.open();
}
else {
this.close();
}
}
};
/**
* @protected
* @return {?}
*/
AccordionItem.prototype.open = /**
* @protected
* @return {?}
*/
function () {
if (!this.expanded) {
this.opened.emit({ id: this.id });
}
this.expanded = true;
};
/**
* @protected
* @return {?}
*/
AccordionItem.prototype.close = /**
* @protected
* @return {?}
*/
function () {
if (this.expanded) {
this.closed.emit({ id: this.id });
}
this.expanded = false;
};
/**
* @return {?}
*/
AccordionItem.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.openSubscription = this.accordion.openCloseItems
.pipe(takeWhile((/**
* @return {?}
*/
function () { return _this.alive; })))
.subscribe((/**
* @param {?} collapsed
* @return {?}
*/
function (collapsed) {
if (!_this.skeleton) {
collapsed ? _this.close() : _this.open();
}
}));
this.skeletonSubscription = this.accordion.skeletons
.pipe(takeWhile((/**
* @return {?}
*/
function () { return _this.alive; })))
.subscribe((/**
* @param {?} skeletonValue
* @return {?}
*/
function (skeletonValue) { return _this.skeleton = skeletonValue; }));
this.skeleton = this.accordion.skeleton;
};
/**
* @return {?}
*/
AccordionItem.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.alive = false;
this.openSubscription.unsubscribe();
this.skeletonSubscription.unsubscribe();
};
AccordionItem.accordionItemCount = 0;
AccordionItem.decorators = [
{ type: Component, args: [{
selector: 'suka-accordion-item',
template: "\n <button\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id\"\n (click)=\"toggle()\"\n class=\"accordion__heading\">\n <suka-icon icon=\"chevron-down\" class=\"accordion__arrow\"></suka-icon>\n <p\n class=\"accordion__title\"\n [ngClass]=\"{\n 'skeleton__text': skeleton\n }\">\n {{!skeleton ? title : null}}\n </p>\n </button>\n <div [id]=\"id\" class=\"accordion__content\">\n <ng-content *ngIf=\"!skeleton; else skeletonTemplate\"></ng-content>\n <ng-template #skeletonTemplate>\n <p class=\"skeleton__text\" style=\"width: 90%\"></p>\n <p class=\"skeleton__text\" style=\"width: 80%\"></p>\n <p class=\"skeleton__text\" style=\"width: 95%\"></p>\n </ng-template>\n </div>\n "
}] }
];
/** @nocollapse */
AccordionItem.ctorParameters = function () { return [
{ 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 }]
};
return AccordionItem;
}());
export { AccordionItem };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL2FjY29yZGlvbi9hY2NvcmRpb24taXRlbS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFdBQVcsRUFDWCxNQUFNLEVBQ04sWUFBWSxFQUNaLElBQUksRUFHTCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFDbEQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRzNDO0lBNkNFLHVCQUE0QixTQUFvQjtRQUFwQixjQUFTLEdBQVQsU0FBUyxDQUFXO1FBaEJ2QyxVQUFLLEdBQUcsV0FBUyxhQUFhLENBQUMsa0JBQW9CLENBQUM7UUFDcEQsT0FBRSxHQUFHLG9CQUFrQixhQUFhLENBQUMsa0JBQW9CLENBQUM7UUFDMUQsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNoQixXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUM1QixXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVBLGNBQVMsR0FBRyxJQUFJLENBQUM7UUFDQSxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQzFDLGFBQVEsR0FBRyxXQUFXLENBQUM7UUFDM0IsU0FBSSxHQUFHLFNBQVMsQ0FBQztRQUNGLGNBQVMsR0FBRyxDQUFDLENBQUM7UUFFL0MsVUFBSyxHQUFHLElBQUksQ0FBQztRQUtuQixhQUFhLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztJQUNyQyxDQUFDOzs7O0lBRU0sOEJBQU07OztJQUFiO1FBQ0UsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbEIsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7Z0JBQ2xCLElBQUksQ0FBQyxJQUFJLENBQUMs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RTs7SUFDeEUsaUNBQXFEOztJQUNyRCw2QkFBMkM7O0lBQzNDLGtDQUF1RDs7Ozs7SUFFdkQsOEJBQXFCOzs7OztJQUNyQiw2Q0FBMkM7Ozs7O0lBQzNDLHlDQUF1Qzs7Ozs7SUFFM0Isa0NBQW9DIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgSG9zdEJpbmRpbmcsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyLFxuICBIb3N0LFxuICBPbkluaXQsXG4gIE9uRGVzdHJveVxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFjY29yZGlvbiB9IGZyb20gJy4vYWNjb3JkaW9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyB0YWtlV2hpbGUgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS1hY2NvcmRpb24taXRlbScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGJ1dHRvblxuICAgICAgW2F0dHIuYXJpYS1leHBhbmRlZF09XCJleHBhbmRlZFwiXG4gICAgICBbYXR0ci5hcmlhLWNvbnRyb2xzXT1cImlkXCJcbiAgICAgIChjbGljayk9XCJ0b2dnbGUoKVwiXG4gICAgICBjbGFzcz1cImFjY29yZGlvbl9faGVhZGluZ1wiPlxuICAgICAgPHN1a2EtaWNvbiBpY29uPVwiY2hldnJvbi1kb3duXCIgY2xhc3M9XCJhY2NvcmRpb25fX2Fycm93XCI+PC9zdWthLWljb24+XG4gICAgICA8cFxuICAgICAgICBjbGFzcz1cImFjY29yZGlvbl9fdGl0bGVcIlxuICAgICAgICBbbmdDbGFzc109XCJ7XG4gICAgICAgICAgJ3NrZWxldG9uX190ZXh0Jzogc2tlbGV0b25cbiAgICAgICAgfVwiPlxuICAgICAgICB7eyFza2VsZXRvbiA/IHRpdGxlIDogbnVsbH19XG4gICAgICA8L3A+XG4gICAgPC9idXR0b24+XG4gICAgPGRpdiBbaWRdPVwiaWRcIiBjbGFzcz1cImFjY29yZGlvbl9fY29udGVudFwiPlxuICAgICAgPG5nLWNvbnRlbnQgKm5nSWY9XCIhc2tlbGV0b247IGVsc2Ugc2tlbGV0b25UZW1wbGF0ZVwiPjwvbmctY29udGVudD5cbiAgICAgIDxuZy10ZW1wbGF0ZSAjc2tlbGV0b25UZW1wbGF0ZT5cbiAgICAgICAgPHAgY2xhc3M9XCJza2VsZXRvbl9fdGV4dFwiIHN0eWxlPVwid2lkdGg6IDkwJVwiPjwvcD5cbiAgICAgICAgPHAgY2xhc3M9XCJza2VsZXRvbl9fdGV4dFwiIHN0eWxlPVwid2lkdGg6IDgwJVwiPjwvcD5cbiAgICAgICAgPHAgY2xhc3M9XCJza2VsZXRvbl9fdGV4dFwiIHN0eWxlPVwid2lkdGg6IDk1JVwiPjwvcD5cbiAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPC9kaXY+XG4gIGAsXG59KVxuZXhwb3J0IGNsYXNzIEFjY29yZGlvbkl0ZW0gaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIHN0YXRpYyBhY2NvcmRpb25JdGVtQ291bnQgPSAwO1xuICBASW5wdXQoKSB0aXRsZSA9IGBUaXRsZSAke0FjY29yZGlvbkl0ZW0uYWNjb3JkaW9uSXRlbUNvdW50fWA7XG4gIEBJbnB1dCgpIGlkID0gYGFjY29yZGlvbi1pdGVtLSR7QWNjb3JkaW9uSXRlbS5hY2NvcmRpb25JdGVtQ291bnR9YDtcbiAgQElucHV0KCkgc2tlbGV0b24gPSBmYWxzZTtcbiAgQE91dHB1dCgpIG9wZW5lZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQE91dHB1dCgpIGNsb3NlZCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmFjY29yZGlvbl9faXRlbScpIGl0ZW1DbGFzcyA9IHRydWU7XG4gIEBIb3N0QmluZGluZygnY2xhc3MuYWNjb3JkaW9uX19pdGVtLS1hY3RpdmUnKSBASW5wdXQoKSBleHBhbmRlZCA9IGZhbHNlO1xuICBASG9zdEJpbmRpbmcoJ3N0eWxlLmRpc3BsYXknKSBpdGVtVHlwZSA9ICdsaXN0LWl0ZW0nO1xuICBASG9zdEJpbmRpbmcoJ2F0dHIucm9sZScpIHJvbGUgPSAnaGVhZGluZyc7XG4gIEBIb3N0QmluZGluZygnYXR0ci5hcmlhLWxldmVsJykgQElucHV0KCkgYXJpYUxldmVsID0gMztcblxuICBwcml2YXRlIGFsaXZlID0gdHJ1ZTtcbiAgcHJpdmF0ZSBza2VsZXRvblN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uO1xuICBwcml2YXRlIG9wZW5TdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcblxuICBjb25zdHJ1Y3RvcihASG9zdCgpIHByaXZhdGUgYWNjb3JkaW9uOiBBY2NvcmRpb24pIHtcbiAgICBBY2NvcmRpb25JdGVtLmFjY29yZGlvbkl0ZW1Db3VudCsrO1xuICB9XG5cbiAgcHVibGljIHRvZ2dsZSgpIHtcbiAgICBpZiAoIXRoaXMuc2tlbGV0b24pIHtcbiAgICAgIGlmICghdGhpcy5leHBhbmRlZCkge1xuICAgICAgICBpZiAoIXRoaXMuYWNjb3JkaW9uLm11bHRpKSB7XG4gICAgICAgICAgdGhpcy5hY2NvcmRpb24ub3BlbkNsb3NlSXRlbXMubmV4dCh0cnVlKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMub3BlbigpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgdGhpcy5jbG9zZSgpO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBvcGVuKCkge1xuICAgIGlmICghdGhpcy5leHBhbmRlZCkge1xuICAgICAgdGhpcy5vcGVuZWQuZW1pdCh7IGlkOiB0aGlzLmlkIH0pO1xuICAgIH1cblxuICAgIHRoaXMuZXhwYW5kZWQgPSB0cnVlO1xuICB9XG5cbiAgcHJvdGVjdGVkIGNsb3NlKCkge1xuICAgIGlmICh0aGlzLmV4cGFuZGVkKSB7XG4gICAgICB0aGlzLmNsb3NlZC5lbWl0KHsgaWQ6IHRoaXMuaWQgfSk7XG4gICAgfVxuXG4gICAgdGhpcy5leHBhbmRlZCA9IGZhbHNlO1xuICB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5vcGVuU3Vic2NyaXB0aW9uID0gdGhpcy5hY2NvcmRpb24ub3BlbkNsb3NlSXRlbXNcbiAgICAgIC5waXBlKHRha2VXaGlsZSgoKSA9PiB0aGlzLmFsaXZlKSlcbiAgICAgIC5zdWJzY3JpYmUoY29sbGFwc2VkID0+IHtcbiAgICAgICAgaWYgKCF0aGlzLnNrZWxldG9uKSB7XG4gICAgICAgICAgY29sbGFwc2VkID8gdGhpcy5jbG9zZSgpIDogdGhpcy5vcGVuKCk7XG4gICAgICAgIH1cbiAgICAgIH0pO1xuXG4gICAgdGhpcy5za2VsZXRvblN1YnNjcmlwdGlvbiA9IHRoaXMuYWNjb3JkaW9uLnNrZWxldG9uc1xuICAgICAgLnBpcGUodGFrZVdoaWxlKCgpID0+IHRoaXMuYWxpdmUpKVxuICAgICAgLnN1YnNjcmliZShza2VsZXRvblZhbHVlID0+IHRoaXMuc2tlbGV0b24gPSBza2VsZXRvblZhbHVlKTtcblxuICAgIHRoaXMuc2tlbGV0b24gPSB0aGlzLmFjY29yZGlvbi5za2VsZXRvbjtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuYWxpdmUgPSBmYWxzZTtcbiAgICB0aGlzLm9wZW5TdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgICB0aGlzLnNrZWxldG9uU3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gIH1cbn1cbiJdfQ==