@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
281 lines (275 loc) • 19.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ViewChild, NgModule } from '@angular/core';
import * as i4 from '@ngx-formly/core';
import { FieldType, FORMLY_CONFIG } from '@ngx-formly/core';
import { FormlyPresetModule } from '@ngx-formly/core/preset';
import { Mode } from '@c8y/ngx-components/protocol-lwm2m/model';
import * as i1 from '@c8y/ngx-components/protocol-lwm2m/services';
import * as i2 from '@c8y/ngx-components';
import { gettext, CommonModule, FormsModule, DynamicFormsModule, LegendFieldWrapper } from '@c8y/ngx-components';
import * as i3 from '@angular/forms';
class Lwm2mFilePickAndReplaceType extends FieldType {
constructor(service, fileService, alertService) {
super();
this.service = service;
this.fileService = fileService;
this.alertService = alertService;
this.fileReader = new FileReader();
}
onFocus() {
this.picker?.nativeElement.click();
this.field.focus = true;
}
onPick(event) {
this.formControl.setErrors(null);
this.fileService.getFileExtension(event?.target?.files[0]) === 'pem'
? this.fileReader.readAsDataURL(event?.target?.files[0])
: this.field?.formControl.setErrors({ invalidType: true });
if (this.props?.onPick instanceof Function && !this.formControl?.errors) {
this.fileReader.onload = () => this.onLoad(this.props.onPick, (error) => this.alertService.danger(error.message));
}
}
remove() {
if (this.props.remove instanceof Function) {
this.props.remove();
}
}
onLoad(resolve, reject) {
if (this.fileReader.readyState !== 2) {
return;
}
if (this.fileReader.error) {
reject(this.fileReader.error);
}
const result = this.service.cleanUpBase64Data(this.fileReader.result);
if (!result)
this.formControl.setErrors({ strReplaceError: true });
resolve(result);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Lwm2mFilePickAndReplaceType, deps: [{ token: i1.Lwm2mConfigurationService }, { token: i2.FilesService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: Lwm2mFilePickAndReplaceType, selector: "c8y-lwm2m-file-pick-replace-type", viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"input-group\">\n <input\n class=\"form-control\"\n [class.is-invalid]=\"showError\"\n [type]=\"'text'\"\n [formControl]=\"formControl\"\n [formlyAttributes]=\"field\"\n [required]=\"props.required\"\n [disabled]=\"props.disabled\"\n readonly\n />\n <div class=\"input-group-btn a-i-end\">\n <button\n class=\"btn btn-primary btn-block\"\n title=\"{{ 'Replace' | translate }}\"\n type=\"button\"\n (click)=\"onFocus()\"\n [disabled]=\"props.disabled\"\n >\n <i c8yIcon=\"replace\"></i>\n <input\n class=\"hidden\"\n id=\"file\"\n type=\"file\"\n accept=\".pem\"\n #picker\n (change)=\"onPick($event)\"\n />\n </button>\n <button\n class=\"btn btn-danger btn-block\"\n title=\"{{ 'Remove' | translate }}\"\n type=\"button\"\n (click)=\"remove()\"\n [disabled]=\"props.disabled\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Lwm2mFilePickAndReplaceType, decorators: [{
type: Component,
args: [{ selector: 'c8y-lwm2m-file-pick-replace-type', template: "<div class=\"input-group\">\n <input\n class=\"form-control\"\n [class.is-invalid]=\"showError\"\n [type]=\"'text'\"\n [formControl]=\"formControl\"\n [formlyAttributes]=\"field\"\n [required]=\"props.required\"\n [disabled]=\"props.disabled\"\n readonly\n />\n <div class=\"input-group-btn a-i-end\">\n <button\n class=\"btn btn-primary btn-block\"\n title=\"{{ 'Replace' | translate }}\"\n type=\"button\"\n (click)=\"onFocus()\"\n [disabled]=\"props.disabled\"\n >\n <i c8yIcon=\"replace\"></i>\n <input\n class=\"hidden\"\n id=\"file\"\n type=\"file\"\n accept=\".pem\"\n #picker\n (change)=\"onPick($event)\"\n />\n </button>\n <button\n class=\"btn btn-danger btn-block\"\n title=\"{{ 'Remove' | translate }}\"\n type=\"button\"\n (click)=\"remove()\"\n [disabled]=\"props.disabled\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1.Lwm2mConfigurationService }, { type: i2.FilesService }, { type: i2.AlertService }], propDecorators: { picker: [{
type: ViewChild,
args: ['picker', { static: false }]
}] } });
class Lwm2mInputGroupAddonType extends FieldType {
ngOnInit() {
this.props.addonLabel = this.props?.addonLabel || gettext('undefined');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Lwm2mInputGroupAddonType, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: Lwm2mInputGroupAddonType, selector: "c8y-lwm2m-input-group-addon", usesInheritance: true, ngImport: i0, template: "<div class=\"input-group\">\n <span class=\"input-group-addon\">{{ props?.addonLabel }}</span>\n <input\n class=\"form-control\"\n [class.is-invalid]=\"showError\"\n [type]=\"'text'\"\n [formControl]=\"formControl\"\n [formlyAttributes]=\"field\"\n [required]=\"props.required\"\n [disabled]=\"props.disabled\"\n />\n</div>\n", dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i4.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Lwm2mInputGroupAddonType, decorators: [{
type: Component,
args: [{ selector: 'c8y-lwm2m-input-group-addon', template: "<div class=\"input-group\">\n <span class=\"input-group-addon\">{{ props?.addonLabel }}</span>\n <input\n class=\"form-control\"\n [class.is-invalid]=\"showError\"\n [type]=\"'text'\"\n [formControl]=\"formControl\"\n [formlyAttributes]=\"field\"\n [required]=\"props.required\"\n [disabled]=\"props.disabled\"\n />\n</div>\n" }]
}] });
class Lwm2mUIThemeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Lwm2mUIThemeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: Lwm2mUIThemeModule, declarations: [Lwm2mFilePickAndReplaceType, Lwm2mInputGroupAddonType], imports: [CommonModule, FormsModule, DynamicFormsModule, FormlyPresetModule] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Lwm2mUIThemeModule, providers: [
{
provide: FORMLY_CONFIG,
multi: true,
useValue: {
wrappers: [
{
name: 'legend',
component: LegendFieldWrapper
}
],
presets: [
{
name: 'securityMode',
config: {
key: 'mode',
type: 'select',
defaultValue: Mode.NO_SEC,
props: {
label: gettext('Mode')
}
}
},
{
name: 'pskId',
config: {
key: 'pskId',
type: 'string',
props: {
label: gettext('PSK ID'),
required: true
},
expressions: {
'props.disabled': (field) => field?.options?.formState?.disabled,
hide: (field) => {
return field.model?.mode !== Mode.PSK;
}
}
}
},
{
name: 'pskKey',
config: {
key: 'pskKey',
type: 'string',
props: {
label: gettext('Pre-shared key'),
placeholder: '0123456789abcdef',
pattern: '^([a-fA-F0-9]{2})+$',
required: true
},
expressions: {
'props.disabled': (field) => field?.options?.formState?.disabled,
hide: (field) => {
return field.model?.mode !== Mode.PSK;
}
}
}
}
],
types: [
{
name: 'switch',
extends: 'checkbox',
defaultOptions: {
props: {
switchMode: true,
indeterminate: false
}
}
},
{
name: 'file-pick-replace',
component: Lwm2mFilePickAndReplaceType,
wrappers: ['c8y-form-field']
},
{
name: 'input-addon',
component: Lwm2mInputGroupAddonType,
wrappers: ['c8y-form-field']
}
],
validationMessages: [
{
name: 'invalidType',
message: gettext('The selected file is not supported.')
},
{
name: 'strReplaceError',
message: gettext('The selected file is not processable.')
}
]
}
}
], imports: [CommonModule, FormsModule, DynamicFormsModule, FormlyPresetModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Lwm2mUIThemeModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, FormsModule, DynamicFormsModule, FormlyPresetModule],
declarations: [Lwm2mFilePickAndReplaceType, Lwm2mInputGroupAddonType],
providers: [
{
provide: FORMLY_CONFIG,
multi: true,
useValue: {
wrappers: [
{
name: 'legend',
component: LegendFieldWrapper
}
],
presets: [
{
name: 'securityMode',
config: {
key: 'mode',
type: 'select',
defaultValue: Mode.NO_SEC,
props: {
label: gettext('Mode')
}
}
},
{
name: 'pskId',
config: {
key: 'pskId',
type: 'string',
props: {
label: gettext('PSK ID'),
required: true
},
expressions: {
'props.disabled': (field) => field?.options?.formState?.disabled,
hide: (field) => {
return field.model?.mode !== Mode.PSK;
}
}
}
},
{
name: 'pskKey',
config: {
key: 'pskKey',
type: 'string',
props: {
label: gettext('Pre-shared key'),
placeholder: '0123456789abcdef',
pattern: '^([a-fA-F0-9]{2})+$',
required: true
},
expressions: {
'props.disabled': (field) => field?.options?.formState?.disabled,
hide: (field) => {
return field.model?.mode !== Mode.PSK;
}
}
}
}
],
types: [
{
name: 'switch',
extends: 'checkbox',
defaultOptions: {
props: {
switchMode: true,
indeterminate: false
}
}
},
{
name: 'file-pick-replace',
component: Lwm2mFilePickAndReplaceType,
wrappers: ['c8y-form-field']
},
{
name: 'input-addon',
component: Lwm2mInputGroupAddonType,
wrappers: ['c8y-form-field']
}
],
validationMessages: [
{
name: 'invalidType',
message: gettext('The selected file is not supported.')
},
{
name: 'strReplaceError',
message: gettext('The selected file is not processable.')
}
]
}
}
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { Lwm2mUIThemeModule };
//# sourceMappingURL=c8y-ngx-components-protocol-lwm2m-formly.mjs.map