@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
139 lines (134 loc) • 14.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, forwardRef, Input } from '@angular/core';
import * as i1 from '@angular/forms';
import { Validators, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i2 from '@c8y/ngx-components';
import { gettext, CoreModule, C8yTranslatePipe, DropAreaComponent } from '@c8y/ngx-components';
import { NgIf } from '@angular/common';
class RemoteAccessBasicEndpointModalComponent {
constructor(formBuilder) {
this.formBuilder = formBuilder;
this.title = gettext('Remote access endpoint');
this.result = new Promise((resolve, reject) => {
this._resolve = resolve;
this._reject = reject;
});
this.form = this.initForm();
}
ngOnInit() {
if (this.currentValue) {
const { credentials, ...rest } = this.currentValue;
const credentialsType = credentials?.type || 'NONE';
const patchedValue = { ...rest, credentialsType };
this.form.patchValue(patchedValue);
}
}
initForm() {
return this.formBuilder.group({
id: ['', []],
name: ['', [Validators.required, Validators.minLength(1)]],
hostname: ['', [Validators.required, Validators.minLength(1)]],
port: [undefined, [Validators.required, Validators.min(1), Validators.max(65535)]],
protocol: ['', [Validators.required, Validators.minLength(1)]],
credentialsType: ['NONE', [Validators.required]],
attrs: [undefined]
});
}
cancel() {
this._reject();
}
save() {
this._resolve(this.form.value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RemoteAccessBasicEndpointModalComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: RemoteAccessBasicEndpointModalComponent, isStandalone: true, selector: "c8y-remote-access-basic-endpoint-modal", ngImport: i0, template: "<c8y-modal\n [title]=\"title\"\n [headerClasses]=\"'dialog-header'\"\n (onDismiss)=\"cancel()\"\n (onClose)=\"save()\"\n [disabled]=\"form.invalid\"\n [labels]=\"{ cancel: 'Cancel', ok: 'Save' }\"\n>\n <ng-container c8y-modal-title>\n <span [c8yIcon]=\"'laptop'\"></span>\n </ng-container>\n <div\n class=\"p-24\"\n [formGroup]=\"form\"\n >\n <c8y-form-group>\n <label\n for=\"name\"\n translate\n >\n Name\n </label>\n <input\n class=\"form-control\"\n id=\"name\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 'My remote access endpoint' }\"\n name=\"name\"\n type=\"text\"\n formControlName=\"name\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--name'\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group>\n <label\n for=\"protocol\"\n translate\n >\n Protocol\n </label>\n <input\n class=\"form-control\"\n id=\"protocol\"\n readonly\n name=\"protocol\"\n type=\"text\"\n formControlName=\"protocol\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group>\n <label\n for=\"hostname\"\n translate\n >\n Host\n </label>\n <input\n class=\"form-control\"\n id=\"hostname\"\n placeholder=\"{{'e.g. {{ example }}' | translate : { example: '127.0.0.1' } }}\"\n name=\"hostname\"\n type=\"text\"\n formControlName=\"hostname\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--hostname'\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group>\n <label\n for=\"port\"\n translate\n >\n Port\n </label>\n <input\n class=\"form-control\"\n id=\"port\"\n placeholder=\"{{'e.g. {{ example }}' | translate : { example: '8080' } }}\"\n name=\"port\"\n type=\"number\"\n formControlName=\"port\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--port'\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n </div>\n</c8y-modal>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i2.ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i2.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RemoteAccessBasicEndpointModalComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-remote-access-basic-endpoint-modal', standalone: true, imports: [CoreModule], template: "<c8y-modal\n [title]=\"title\"\n [headerClasses]=\"'dialog-header'\"\n (onDismiss)=\"cancel()\"\n (onClose)=\"save()\"\n [disabled]=\"form.invalid\"\n [labels]=\"{ cancel: 'Cancel', ok: 'Save' }\"\n>\n <ng-container c8y-modal-title>\n <span [c8yIcon]=\"'laptop'\"></span>\n </ng-container>\n <div\n class=\"p-24\"\n [formGroup]=\"form\"\n >\n <c8y-form-group>\n <label\n for=\"name\"\n translate\n >\n Name\n </label>\n <input\n class=\"form-control\"\n id=\"name\"\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: 'My remote access endpoint' }\"\n name=\"name\"\n type=\"text\"\n formControlName=\"name\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--name'\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group>\n <label\n for=\"protocol\"\n translate\n >\n Protocol\n </label>\n <input\n class=\"form-control\"\n id=\"protocol\"\n readonly\n name=\"protocol\"\n type=\"text\"\n formControlName=\"protocol\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group>\n <label\n for=\"hostname\"\n translate\n >\n Host\n </label>\n <input\n class=\"form-control\"\n id=\"hostname\"\n placeholder=\"{{'e.g. {{ example }}' | translate : { example: '127.0.0.1' } }}\"\n name=\"hostname\"\n type=\"text\"\n formControlName=\"hostname\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--hostname'\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group>\n <label\n for=\"port\"\n translate\n >\n Port\n </label>\n <input\n class=\"form-control\"\n id=\"port\"\n placeholder=\"{{'e.g. {{ example }}' | translate : { example: '8080' } }}\"\n name=\"port\"\n type=\"number\"\n formControlName=\"port\"\n [attr.data-cy]=\"'remoteAccessEndpointModal--port'\"\n />\n <c8y-messages></c8y-messages>\n </c8y-form-group>\n </div>\n</c8y-modal>\n" }]
}], ctorParameters: () => [{ type: i1.FormBuilder }] });
const types = [
{
name: 'PRIVATE',
value: 'private',
placeholder: '-----BEGIN RSA PRIVATE KEY----- MIIEpAIBAAK...VQvopm2xw==----- END RSA PRIVATE KEY-----'
},
{
name: 'PUBLIC',
value: 'public',
placeholder: 'ssh-rsa AAAAB3NzaC...1kc3MAAACB== user.com'
},
{
name: 'CERTIFICATE',
value: 'certificate',
placeholder: 'ssh-rsa-cert-v01.com AAAAHHNz...Y9gBU= user.com'
}
];
class SshKeyInputComponent {
constructor() {
this.keyType = types[0].value;
this.readonly = false;
this.value = '';
}
writeValue(obj) {
this.value = obj;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouch = fn;
}
setDisabledState(isDisabled) {
this.readonly = isDisabled;
}
ngOnChanges(changes) {
if (changes.keyType) {
this.reassignPlaceholder();
}
}
ngOnInit() {
this.reassignPlaceholder();
}
async onKeyFileSelected(event) {
const file = event[0];
const content = await file.readAsText();
this.newValue(content);
}
newValue(value) {
this.value = value;
this.onChange(value);
this.onTouch();
}
reassignPlaceholder() {
const type = types.find(t => t.value === this.keyType);
if (type) {
this.placeholder = type.placeholder;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SshKeyInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SshKeyInputComponent, isStandalone: true, selector: "c8y-ssh-key-input", inputs: { keyType: "keyType" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SshKeyInputComponent),
multi: true
}
], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group\">\n <div class=\"tight-grid\">\n <div class=\"col-xs-8\">\n <input\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: placeholder }\"\n type=\"text\"\n class=\"form-control\"\n [ngModel]=\"value\"\n (ngModelChange)=\"newValue($event)\"\n [readonly]=\"readonly\"\n [ngModelOptions]=\"{standalone: true}\"\n />\n </div>\n <div class=\"col-xs-4\" *ngIf=\"!readonly\">\n <c8y-drop-area class=\"drop-area-sm\" (dropped)=\"onKeyFileSelected($event)\" [maxAllowedFiles]=\"1\" [icon]=\"'upload'\"></c8y-drop-area>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SshKeyInputComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-ssh-key-input', standalone: true, imports: [C8yTranslatePipe, NgIf, DropAreaComponent, FormsModule], providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SshKeyInputComponent),
multi: true
}
], template: "<div class=\"form-group\">\n <div class=\"tight-grid\">\n <div class=\"col-xs-8\">\n <input\n [placeholder]=\"'e.g. {{ example }}' | translate : { example: placeholder }\"\n type=\"text\"\n class=\"form-control\"\n [ngModel]=\"value\"\n (ngModelChange)=\"newValue($event)\"\n [readonly]=\"readonly\"\n [ngModelOptions]=\"{standalone: true}\"\n />\n </div>\n <div class=\"col-xs-4\" *ngIf=\"!readonly\">\n <c8y-drop-area class=\"drop-area-sm\" (dropped)=\"onKeyFileSelected($event)\" [maxAllowedFiles]=\"1\" [icon]=\"'upload'\"></c8y-drop-area>\n </div>\n </div>\n</div>\n" }]
}], propDecorators: { keyType: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { RemoteAccessBasicEndpointModalComponent, SshKeyInputComponent };
//# sourceMappingURL=c8y-ngx-components-remote-access-shared.mjs.map