@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
80 lines • 8.9 kB
JavaScript
import { ChangeDetectorRef, Component, DestroyRef, Inject, forwardRef, inject } from '@angular/core';
import { CellRendererContext } from '../cell-renderer';
import { DataGridComponent } from '../../data-grid.component';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { gettext } from '../../../i18n/gettext';
import * as i0 from "@angular/core";
import * as i1 from "../cell-renderer";
import * as i2 from "@angular/common";
import * as i3 from "../../../common/icon.directive";
import * as i4 from "../../../i18n/c8y-translate.pipe";
import * as i5 from "../../data-grid.component";
export class ExpandableCellRendererComponent {
constructor(context, dataGridComponent, // forwardRef is needed because of circular dependency
cd) {
this.context = context;
this.dataGridComponent = dataGridComponent;
this.cd = cd;
this.collapse = gettext('Collapse');
this.expand = gettext('Expand');
this.isExpanded = false;
this.loading = false;
this.destroyRef = inject(DestroyRef);
}
toggleExpand() {
if (this.isExpanded) {
this.dataGridComponent.collapse(this.context.item);
this.isExpanded = false;
}
else {
this.loading = true;
this.dataGridComponent
.expand(this.context.item)
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((isExpanded) => {
this.loading = false;
this.isExpanded = isExpanded;
this.cd.detectChanges();
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExpandableCellRendererComponent, deps: [{ token: i1.CellRendererContext }, { token: forwardRef(() => DataGridComponent) }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ExpandableCellRendererComponent, selector: "c8y-expandable-cell-renderer", ngImport: i0, template: `
<button
class="btn btn-dot collapse-btn"
title="{{ (isExpanded ? collapse : expand) | translate }}"
[attr.aria-label]="(isExpanded ? collapse : expand) | translate"
[attr.aria-controls]="context.item.id"
[attr.aria-expanded]="isExpanded"
[ngClass]="{ active: isExpanded }"
(click)="toggleExpand()"
>
<i c8yIcon="chevron-right" *ngIf="!loading"></i>
<i class="icon-spin" c8yIcon="circle-o-notch" *ngIf="loading"></i>
</button>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExpandableCellRendererComponent, decorators: [{
type: Component,
args: [{
template: `
<button
class="btn btn-dot collapse-btn"
title="{{ (isExpanded ? collapse : expand) | translate }}"
[attr.aria-label]="(isExpanded ? collapse : expand) | translate"
[attr.aria-controls]="context.item.id"
[attr.aria-expanded]="isExpanded"
[ngClass]="{ active: isExpanded }"
(click)="toggleExpand()"
>
<i c8yIcon="chevron-right" *ngIf="!loading"></i>
<i class="icon-spin" c8yIcon="circle-o-notch" *ngIf="loading"></i>
</button>
`,
selector: 'c8y-expandable-cell-renderer'
}]
}], ctorParameters: () => [{ type: i1.CellRendererContext }, { type: i5.DataGridComponent, decorators: [{
type: Inject,
args: [forwardRef(() => DataGridComponent)]
}] }, { type: i0.ChangeDetectorRef }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXhwYW5kYWJsZS5jZWxsLXJlbmRlcmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2NvcmUvZGF0YS1ncmlkL2NvbHVtbi9leHBhbmRhYmxlLXJvdy1jb2x1bW4vZXhwYW5kYWJsZS5jZWxsLXJlbmRlcmVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsTUFBTSxFQUNOLFVBQVUsRUFDVixNQUFNLEVBQ1AsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDdkQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDOUQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDaEUsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLHVCQUF1QixDQUFDOzs7Ozs7O0FBbUJoRCxNQUFNLE9BQU8sK0JBQStCO0lBTzFDLFlBQ1MsT0FBNEIsRUFDaUIsaUJBQW9DLEVBQUUsc0RBQXNEO0lBQ3hJLEVBQXFCO1FBRnRCLFlBQU8sR0FBUCxPQUFPLENBQXFCO1FBQ2lCLHNCQUFpQixHQUFqQixpQkFBaUIsQ0FBbUI7UUFDaEYsT0FBRSxHQUFGLEVBQUUsQ0FBbUI7UUFUdEIsYUFBUSxHQUFHLE9BQU8sQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUMvQixXQUFNLEdBQUcsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3BDLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUNoQixlQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBTTdCLENBQUM7SUFFSixZQUFZO1FBQ1YsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDcEIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ25ELElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO1FBQzFCLENBQUM7YUFBTSxDQUFDO1lBQ04sSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7WUFDcEIsSUFBSSxDQUFDLGlCQUFpQjtpQkFDbkIsTUFBTSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDO2lCQUN6QixJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDO2lCQUN6QyxTQUFTLENBQUMsQ0FBQyxVQUFtQixFQUFFLEVBQUU7Z0JBQ2pDLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO2dCQUNyQixJQUFJLENBQUMsVUFBVSxHQUFHLFVBQVUsQ0FBQztnQkFDN0IsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUMxQixDQUFDLENBQUMsQ0FBQztRQUNQLENBQUM7SUFDSCxDQUFDOytHQTVCVSwrQkFBK0IscURBU2hDLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQzttR0FUbEMsK0JBQStCLG9FQWhCaEM7Ozs7Ozs7Ozs7Ozs7R0FhVDs7NEZBR1UsK0JBQStCO2tCQWpCM0MsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7R0FhVDtvQkFDRCxRQUFRLEVBQUUsOEJBQThCO2lCQUN6Qzs7MEJBVUksTUFBTTsyQkFBQyxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsaUJBQWlCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBEZXN0cm95UmVmLFxuICBJbmplY3QsXG4gIGZvcndhcmRSZWYsXG4gIGluamVjdFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENlbGxSZW5kZXJlckNvbnRleHQgfSBmcm9tICcuLi9jZWxsLXJlbmRlcmVyJztcbmltcG9ydCB7IERhdGFHcmlkQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vZGF0YS1ncmlkLmNvbXBvbmVudCc7XG5pbXBvcnQgeyB0YWtlVW50aWxEZXN0cm95ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQgeyBnZXR0ZXh0IH0gZnJvbSAnLi4vLi4vLi4vaTE4bi9nZXR0ZXh0JztcblxuQENvbXBvbmVudCh7XG4gIHRlbXBsYXRlOiBgXG4gICAgPGJ1dHRvblxuICAgICAgY2xhc3M9XCJidG4gYnRuLWRvdCBjb2xsYXBzZS1idG5cIlxuICAgICAgdGl0bGU9XCJ7eyAoaXNFeHBhbmRlZCA/IGNvbGxhcHNlIDogZXhwYW5kKSB8IHRyYW5zbGF0ZSB9fVwiXG4gICAgICBbYXR0ci5hcmlhLWxhYmVsXT1cIihpc0V4cGFuZGVkID8gY29sbGFwc2UgOiBleHBhbmQpIHwgdHJhbnNsYXRlXCJcbiAgICAgIFthdHRyLmFyaWEtY29udHJvbHNdPVwiY29udGV4dC5pdGVtLmlkXCJcbiAgICAgIFthdHRyLmFyaWEtZXhwYW5kZWRdPVwiaXNFeHBhbmRlZFwiXG4gICAgICBbbmdDbGFzc109XCJ7IGFjdGl2ZTogaXNFeHBhbmRlZCB9XCJcbiAgICAgIChjbGljayk9XCJ0b2dnbGVFeHBhbmQoKVwiXG4gICAgPlxuICAgICAgPGkgYzh5SWNvbj1cImNoZXZyb24tcmlnaHRcIiAqbmdJZj1cIiFsb2FkaW5nXCI+PC9pPlxuICAgICAgPGkgY2xhc3M9XCJpY29uLXNwaW5cIiBjOHlJY29uPVwiY2lyY2xlLW8tbm90Y2hcIiAqbmdJZj1cImxvYWRpbmdcIj48L2k+XG4gICAgPC9idXR0b24+XG4gIGAsXG4gIHNlbGVjdG9yOiAnYzh5LWV4cGFuZGFibGUtY2VsbC1yZW5kZXJlcidcbn0pXG5leHBvcnQgY2xhc3MgRXhwYW5kYWJsZUNlbGxSZW5kZXJlckNvbXBvbmVudCB7XG4gIHJlYWRvbmx5IGNvbGxhcHNlID0gZ2V0dGV4dCgnQ29sbGFwc2UnKTtcbiAgcmVhZG9ubHkgZXhwYW5kID0gZ2V0dGV4dCgnRXhwYW5kJyk7XG4gIGlzRXhwYW5kZWQgPSBmYWxzZTtcbiAgbG9hZGluZyA9IGZhbHNlO1xuICBkZXN0cm95UmVmID0gaW5qZWN0KERlc3Ryb3lSZWYpO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHB1YmxpYyBjb250ZXh0OiBDZWxsUmVuZGVyZXJDb250ZXh0LFxuICAgIEBJbmplY3QoZm9yd2FyZFJlZigoKSA9PiBEYXRhR3JpZENvbXBvbmVudCkpIHB1YmxpYyBkYXRhR3JpZENvbXBvbmVudDogRGF0YUdyaWRDb21wb25lbnQsIC8vIGZvcndhcmRSZWYgaXMgbmVlZGVkIGJlY2F1c2Ugb2YgY2lyY3VsYXIgZGVwZW5kZW5jeVxuICAgIHByaXZhdGUgY2Q6IENoYW5nZURldGVjdG9yUmVmXG4gICkge31cblxuICB0b2dnbGVFeHBhbmQoKSB7XG4gICAgaWYgKHRoaXMuaXNFeHBhbmRlZCkge1xuICAgICAgdGhpcy5kYXRhR3JpZENvbXBvbmVudC5jb2xsYXBzZSh0aGlzLmNvbnRleHQuaXRlbSk7XG4gICAgICB0aGlzLmlzRXhwYW5kZWQgPSBmYWxzZTtcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy5sb2FkaW5nID0gdHJ1ZTtcbiAgICAgIHRoaXMuZGF0YUdyaWRDb21wb25lbnRcbiAgICAgICAgLmV4cGFuZCh0aGlzLmNvbnRleHQuaXRlbSlcbiAgICAgICAgLnBpcGUodGFrZVVudGlsRGVzdHJveWVkKHRoaXMuZGVzdHJveVJlZikpXG4gICAgICAgIC5zdWJzY3JpYmUoKGlzRXhwYW5kZWQ6IGJvb2xlYW4pID0+IHtcbiAgICAgICAgICB0aGlzLmxvYWRpbmcgPSBmYWxzZTtcbiAgICAgICAgICB0aGlzLmlzRXhwYW5kZWQgPSBpc0V4cGFuZGVkO1xuICAgICAgICAgIHRoaXMuY2QuZGV0ZWN0Q2hhbmdlcygpO1xuICAgICAgICB9KTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==