@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
92 lines • 13.9 kB
JavaScript
import { Location } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { pipe } from 'rxjs';
import { tap } from 'rxjs/operators';
import { gettext } from '../i18n/gettext';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "../i18n/c8y-translate.pipe";
export class ListDisplaySwitchComponent {
set listLength(val) {
this._listLength = val;
this.loadSelectedOption();
}
constructor(location) {
this.location = location;
this.filterPipe = pipe(tap());
this.onListClassChange = new EventEmitter();
this.DISPLAY_OPTIONS = [
{
name: 'AUTO',
value: 'auto',
label: gettext('Auto'),
default: true,
getListClass: () => {
const option = this._listLength > this.AUTO_GRID_ITEMS_LIMIT
? this.DISPLAY_OPTIONS.find(opt => opt.name === 'LIST')
: this.DISPLAY_OPTIONS.find(opt => opt.name === 'GRID');
return option.getListClass();
}
},
{
name: 'GRID',
value: 'grid',
label: gettext('Grid'),
getListClass: () => 'interact-grid'
},
{
name: 'LIST',
value: 'list',
label: gettext('List'),
getListClass: () => 'interact-list'
}
];
this.AUTO_GRID_ITEMS_LIMIT = 12;
}
ngOnInit() {
this.loadSelectedOption();
}
onOptionSelect(option) {
const localStorageKey = this.getLocalStorageKey();
if (option.default) {
localStorage.removeItem(localStorageKey);
}
else {
localStorage.setItem(localStorageKey, option.value);
}
this.loadSelectedOption();
}
loadSelectedOption() {
this.selectedOption = this.getLocalStorageOption() || this.getDefaultOption();
this.onListClassChange.emit(this.selectedOption.getListClass());
}
getLocalStorageOption() {
return this.DISPLAY_OPTIONS.find(option => option.value === localStorage.getItem(this.getLocalStorageKey()));
}
getDefaultOption() {
return this.DISPLAY_OPTIONS.find(option => option.default);
}
getLocalStorageKey() {
return `list-display-option[${this.getListKey()}]`;
}
getListKey() {
return this.listKey || this.location.path();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListDisplaySwitchComponent, deps: [{ token: i1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: { listKey: "listKey", listLength: "listLength", filterPipe: "filterPipe" }, outputs: { onListClassChange: "onListClassChange" }, ngImport: i0, template: "<div class=\"d-flex\">\n <label class=\"m-r-8\" id=\"listLabel\">\n {{ 'Display as' | translate }}\n </label>\n <div class=\"c8y-select-wrapper\">\n <select\n aria-labelledby=\"listLabel\"\n name=\"listLabel\"\n class=\"form-control\"\n [ngModel]=\"selectedOption\"\n (ngModelChange)=\"onOptionSelect($event)\"\n [attr.aria-label]=\"'Display mode' | translate\"\n >\n <option *ngFor=\"let option of DISPLAY_OPTIONS\" [ngValue]=\"option\">\n {{ option.label | translate }}\n </option>\n </select>\n <span></span>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListDisplaySwitchComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-list-display-switch', template: "<div class=\"d-flex\">\n <label class=\"m-r-8\" id=\"listLabel\">\n {{ 'Display as' | translate }}\n </label>\n <div class=\"c8y-select-wrapper\">\n <select\n aria-labelledby=\"listLabel\"\n name=\"listLabel\"\n class=\"form-control\"\n [ngModel]=\"selectedOption\"\n (ngModelChange)=\"onOptionSelect($event)\"\n [attr.aria-label]=\"'Display mode' | translate\"\n >\n <option *ngFor=\"let option of DISPLAY_OPTIONS\" [ngValue]=\"option\">\n {{ option.label | translate }}\n </option>\n </select>\n <span></span>\n </div>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1.Location }], propDecorators: { listKey: [{
type: Input
}], listLength: [{
type: Input,
args: ['listLength']
}], filterPipe: [{
type: Input
}], onListClassChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlzdC1kaXNwbGF5LXN3aXRjaC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb3JlL2xpc3QtZGlzcGxheS1zd2l0Y2gvbGlzdC1kaXNwbGF5LXN3aXRjaC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9jb3JlL2xpc3QtZGlzcGxheS1zd2l0Y2gvbGlzdC1kaXNwbGF5LXN3aXRjaC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDM0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzVCLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNyQyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7O0FBTzFDLE1BQU0sT0FBTywwQkFBMEI7SUFFckMsSUFDSSxVQUFVLENBQUMsR0FBVztRQUN4QixJQUFJLENBQUMsV0FBVyxHQUFHLEdBQUcsQ0FBQztRQUN2QixJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBa0NELFlBQW9CLFFBQWtCO1FBQWxCLGFBQVEsR0FBUixRQUFRLENBQVU7UUFqQzdCLGVBQVUsR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQztRQUN4QixzQkFBaUIsR0FBeUIsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUd0RSxvQkFBZSxHQUFvQjtZQUMxQztnQkFDRSxJQUFJLEVBQUUsTUFBTTtnQkFDWixLQUFLLEVBQUUsTUFBTTtnQkFDYixLQUFLLEVBQUUsT0FBTyxDQUFDLE1BQU0sQ0FBQztnQkFDdEIsT0FBTyxFQUFFLElBQUk7Z0JBQ2IsWUFBWSxFQUFFLEdBQUcs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ci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgcGlwZSB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgdGFwIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgZ2V0dGV4dCB9IGZyb20gJy4uL2kxOG4vZ2V0dGV4dCc7XG5pbXBvcnQgeyBEaXNwbGF5T3B0aW9uIH0gZnJvbSAnLi9saXN0LWRpc3BsYXktc3dpdGNoLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LWxpc3QtZGlzcGxheS1zd2l0Y2gnLFxuICB0ZW1wbGF0ZVVybDogJy4vbGlzdC1kaXNwbGF5LXN3aXRjaC5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgTGlzdERpc3BsYXlTd2l0Y2hDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBsaXN0S2V5OiBzdHJpbmc7XG4gIEBJbnB1dCgnbGlzdExlbmd0aCcpXG4gIHNldCBsaXN0TGVuZ3RoKHZhbDogbnVtYmVyKSB7XG4gICAgdGhpcy5fbGlzdExlbmd0aCA9IHZhbDtcbiAgICB0aGlzLmxvYWRTZWxlY3RlZE9wdGlvbigpO1xuICB9XG4gIEBJbnB1dCgpIGZpbHRlclBpcGUgPSBwaXBlKHRhcCgpKTtcbiAgQE91dHB1dCgpIG9uTGlzdENsYXNzQ2hhbmdlOiBFdmVudEVtaXR0ZXI8c3RyaW5nPiA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuICBzZWxlY3RlZE9wdGlvbjogRGlzcGxheU9wdGlvbjtcblxuICByZWFkb25seSBESVNQTEFZX09QVElPTlM6IERpc3BsYXlPcHRpb25bXSA9IFtcbiAgICB7XG4gICAgICBuYW1lOiAnQVVUTycsXG4gICAgICB2YWx1ZTogJ2F1dG8nLFxuICAgICAgbGFiZWw6IGdldHRleHQoJ0F1dG8nKSxcbiAgICAgIGRlZmF1bHQ6IHRydWUsXG4gICAgICBnZXRMaXN0Q2xhc3M6ICgpID0+IHtcbiAgICAgICAgY29uc3Qgb3B0aW9uID1cbiAgICAgICAgICB0aGlzLl9saXN0TGVuZ3RoID4gdGhpcy5BVVRPX0dSSURfSVRFTVNfTElNSVRcbiAgICAgICAgICAgID8gdGhpcy5ESVNQTEFZX09QVElPTlMuZmluZChvcHQgPT4gb3B0Lm5hbWUgPT09ICdMSVNUJylcbiAgICAgICAgICAgIDogdGhpcy5ESVNQTEFZX09QVElPTlMuZmluZChvcHQgPT4gb3B0Lm5hbWUgPT09ICdHUklEJyk7XG4gICAgICAgIHJldHVybiBvcHRpb24uZ2V0TGlzdENsYXNzKCk7XG4gICAgICB9XG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiAnR1JJRCcsXG4gICAgICB2YWx1ZTogJ2dyaWQnLFxuICAgICAgbGFiZWw6IGdldHRleHQoJ0dyaWQnKSxcbiAgICAgIGdldExpc3RDbGFzczogKCkgPT4gJ2ludGVyYWN0LWdyaWQnXG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiAnTElTVCcsXG4gICAgICB2YWx1ZTogJ2xpc3QnLFxuICAgICAgbGFiZWw6IGdldHRleHQoJ0xpc3QnKSxcbiAgICAgIGdldExpc3RDbGFzczogKCkgPT4gJ2ludGVyYWN0LWxpc3QnXG4gICAgfVxuICBdO1xuICBwcml2YXRlIHJlYWRvbmx5IEFVVE9fR1JJRF9JVEVNU19MSU1JVCA9IDEyO1xuICBwcml2YXRlIF9saXN0TGVuZ3RoOiBudW1iZXI7XG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgbG9jYXRpb246IExvY2F0aW9uKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMubG9hZFNlbGVjdGVkT3B0aW9uKCk7XG4gIH1cblxuICBvbk9wdGlvblNlbGVjdChvcHRpb246IERpc3BsYXlPcHRpb24pIHtcbiAgICBjb25zdCBsb2NhbFN0b3JhZ2VLZXkgPSB0aGlzLmdldExvY2FsU3RvcmFnZUtleSgpO1xuICAgIGlmIChvcHRpb24uZGVmYXVsdCkge1xuICAgICAgbG9jYWxTdG9yYWdlLnJlbW92ZUl0ZW0obG9jYWxTdG9yYWdlS2V5KTtcbiAgICB9IGVsc2Uge1xuICAgICAgbG9jYWxTdG9yYWdlLnNldEl0ZW0obG9jYWxTdG9yYWdlS2V5LCBvcHRpb24udmFsdWUpO1xuICAgIH1cbiAgICB0aGlzLmxvYWRTZWxlY3RlZE9wdGlvbigpO1xuICB9XG5cbiAgcHJpdmF0ZSBsb2FkU2VsZWN0ZWRPcHRpb24oKSB7XG4gICAgdGhpcy5zZWxlY3RlZE9wdGlvbiA9IHRoaXMuZ2V0TG9jYWxTdG9yYWdlT3B0aW9uKCkgfHwgdGhpcy5nZXREZWZhdWx0T3B0aW9uKCk7XG4gICAgdGhpcy5vbkxpc3RDbGFzc0NoYW5nZS5lbWl0KHRoaXMuc2VsZWN0ZWRPcHRpb24uZ2V0TGlzdENsYXNzKCkpO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXRMb2NhbFN0b3JhZ2VPcHRpb24oKTogRGlzcGxheU9wdGlvbiB7XG4gICAgcmV0dXJuIHRoaXMuRElTUExBWV9PUFRJT05TLmZpbmQoXG4gICAgICBvcHRpb24gPT4gb3B0aW9uLnZhbHVlID09PSBsb2NhbFN0b3JhZ2UuZ2V0SXRlbSh0aGlzLmdldExvY2FsU3RvcmFnZUtleSgpKVxuICAgICk7XG4gIH1cblxuICBwcml2YXRlIGdldERlZmF1bHRPcHRpb24oKTogRGlzcGxheU9wdGlvbiB7XG4gICAgcmV0dXJuIHRoaXMuRElTUExBWV9PUFRJT05TLmZpbmQob3B0aW9uID0+IG9wdGlvbi5kZWZhdWx0KTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0TG9jYWxTdG9yYWdlS2V5KCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGBsaXN0LWRpc3BsYXktb3B0aW9uWyR7dGhpcy5nZXRMaXN0S2V5KCl9XWA7XG4gIH1cblxuICBwcml2YXRlIGdldExpc3RLZXkoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5saXN0S2V5IHx8IHRoaXMubG9jYXRpb24ucGF0aCgpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZC1mbGV4XCI+XG4gIDxsYWJlbCBjbGFzcz1cIm0tci04XCIgaWQ9XCJsaXN0TGFiZWxcIj5cbiAgICB7eyAnRGlzcGxheSBhcycgfCB0cmFuc2xhdGUgfX1cbiAgPC9sYWJlbD5cbiAgPGRpdiBjbGFzcz1cImM4eS1zZWxlY3Qtd3JhcHBlclwiPlxuICAgIDxzZWxlY3RcbiAgICAgIGFyaWEtbGFiZWxsZWRieT1cImxpc3RMYWJlbFwiXG4gICAgICBuYW1lPVwibGlzdExhYmVsXCJcbiAgICAgIGNsYXNzPVwiZm9ybS1jb250cm9sXCJcbiAgICAgIFtuZ01vZGVsXT1cInNlbGVjdGVkT3B0aW9uXCJcbiAgICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uT3B0aW9uU2VsZWN0KCRldmVudClcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCInRGlzcGxheSBtb2RlJyB8IHRyYW5zbGF0ZVwiXG4gICAgPlxuICAgICAgPG9wdGlvbiAqbmdGb3I9XCJsZXQgb3B0aW9uIG9mIERJU1BMQVlfT1BUSU9OU1wiIFtuZ1ZhbHVlXT1cIm9wdGlvblwiPlxuICAgICAgICB7eyBvcHRpb24ubGFiZWwgfCB0cmFuc2xhdGUgfX1cbiAgICAgIDwvb3B0aW9uPlxuICAgIDwvc2VsZWN0PlxuICAgIDxzcGFuPjwvc3Bhbj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==