@iotize/ionic
Version:
Iotize specific building blocks on top of @ionic/angular.
54 lines • 15.3 kB
JavaScript
import { Component, Input } from '@angular/core';
import { FormBuilder, Validators, } from '@angular/forms';
import { ModalController } from '@ionic/angular';
import { getFormFieldOrError } from '../utility';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@ionic/angular";
export class TapValueEditorModalComponent {
set value(v) {
this.field.setValue(v, { emitEvent: false });
}
constructor(formBuilder, modalController) {
this.modalController = modalController;
this.inputOptions = {
type: 'text',
};
this.form = formBuilder.group({
field: [
'',
[
Validators.required,
Validators.max(this.inputOptions.max),
Validators.maxLength(this.inputOptions.maxLength),
Validators.min(this.inputOptions.min),
Validators.minLength(this.inputOptions.minLength),
],
],
});
this.field = getFormFieldOrError(this.form, 'field');
}
ngOnInit() { }
onSubmit() {
if (this.form.valid) {
console.log('Result', this.field.value);
this.modalController.dismiss({
value: this.field.value,
}, 'submit');
}
}
cancel() {
this.modalController.dismiss();
}
}
/** @nocollapse */ TapValueEditorModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TapValueEditorModalComponent, deps: [{ token: i1.FormBuilder }, { token: i2.ModalController }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ TapValueEditorModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TapValueEditorModalComponent, selector: "tap-value-editor-modal", inputs: { inputOptions: "inputOptions", value: "value" }, ngImport: i0, template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-button fill=\"clear\" (click)=\"cancel()\">\n <ion-icon name=\"arrow-back-outline\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Edition</ion-title>\n </ion-toolbar>\n</ion-header>\n<ion-content>\n <ion-grid>\n <ion-row justify-content-center align-items-center>\n <div style=\"margin: auto\">\n <form\n (ngSubmit)=\"onSubmit()\"\n [formGroup]=\"form\"\n (keydown.enter)=\"onSubmit()\"\n >\n <ion-list lines=\"none\">\n <ion-item>\n <ion-label position=\"floating\"> Value </ion-label>\n <ion-input\n [pattern]=\"inputOptions.pattern\"\n [placeholder]=\"inputOptions.placeholder\"\n [type]=\"inputOptions.type\"\n [formControl]=\"field\"\n [value]=\"value\"\n >\n </ion-input>\n </ion-item>\n <ion-item>\n <ion-buttons slot=\"end\">\n <ion-button\n color=\"primary\"\n type=\"submit\"\n [disabled]=\"!form.valid\"\n (click)=\"onSubmit()\"\n >\n Submit\n </ion-button>\n </ion-buttons>\n </ion-item>\n </ion-list>\n </form>\n </div>\n </ion-row>\n </ion-grid>\n</ion-content>\n", styles: ["ion-grid{height:100%}ion-grid>ion-row{height:100%}ion-grid>ion-row>div{margin:auto}ion-input{font-size:2em}\n"], dependencies: [{ kind: "component", type: i2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { kind: "component", type: i2.IonRow, selector: "ion-row" }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TapValueEditorModalComponent, decorators: [{
type: Component,
args: [{ selector: 'tap-value-editor-modal', template: "<ion-header>\n <ion-toolbar color=\"primary\">\n <ion-buttons slot=\"start\">\n <ion-button fill=\"clear\" (click)=\"cancel()\">\n <ion-icon name=\"arrow-back-outline\"></ion-icon>\n </ion-button>\n </ion-buttons>\n <ion-title>Edition</ion-title>\n </ion-toolbar>\n</ion-header>\n<ion-content>\n <ion-grid>\n <ion-row justify-content-center align-items-center>\n <div style=\"margin: auto\">\n <form\n (ngSubmit)=\"onSubmit()\"\n [formGroup]=\"form\"\n (keydown.enter)=\"onSubmit()\"\n >\n <ion-list lines=\"none\">\n <ion-item>\n <ion-label position=\"floating\"> Value </ion-label>\n <ion-input\n [pattern]=\"inputOptions.pattern\"\n [placeholder]=\"inputOptions.placeholder\"\n [type]=\"inputOptions.type\"\n [formControl]=\"field\"\n [value]=\"value\"\n >\n </ion-input>\n </ion-item>\n <ion-item>\n <ion-buttons slot=\"end\">\n <ion-button\n color=\"primary\"\n type=\"submit\"\n [disabled]=\"!form.valid\"\n (click)=\"onSubmit()\"\n >\n Submit\n </ion-button>\n </ion-buttons>\n </ion-item>\n </ion-list>\n </form>\n </div>\n </ion-row>\n </ion-grid>\n</ion-content>\n", styles: ["ion-grid{height:100%}ion-grid>ion-row{height:100%}ion-grid>ion-row>div{margin:auto}ion-input{font-size:2em}\n"] }]
}], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.ModalController }]; }, propDecorators: { inputOptions: [{
type: Input
}], value: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFwLXZhbHVlLWVkaXRvci1tb2RhbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9pb3RpemUtaW9uaWMvc3JjL2xpYi90YXAtdmFsdWUtZWRpdG9yLW1vZGFsL3RhcC12YWx1ZS1lZGl0b3ItbW9kYWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaW90aXplLWlvbmljL3NyYy9saWIvdGFwLXZhbHVlLWVkaXRvci1tb2RhbC90YXAtdmFsdWUtZWRpdG9yLW1vZGFsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFFTCxXQUFXLEVBRVgsVUFBVSxHQUNYLE1BQU0sZ0JBQWdCLENBQUM7QUFDeEIsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRWpELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLFlBQVksQ0FBQzs7OztBQU9qRCxNQUFNLE9BQU8sNEJBQTRCO0lBS3ZDLElBQWEsS0FBSyxDQUFDLENBQU07UUFDdkIsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQyxFQUFFLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUM7SUFDL0MsQ0FBQztJQUtELFlBQ0UsV0FBd0IsRUFDaEIsZUFBZ0M7UUFBaEMsb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBYmpDLGlCQUFZLEdBQTZDO1lBQ2hFLElBQUksRUFBRSxNQUFNO1NBQ2IsQ0FBQztRQWFBLElBQUksQ0FBQyxJQUFJLEdBQUcsV0FBVyxDQUFDLEtBQUssQ0FBQztZQUM1QixLQUFLLEVBQUU7Z0JBQ0wsRUFBRTtnQkFDRjtvQkFDRSxVQUFVLENBQUMsUUFBUTtvQkFDbkIsVUFBVSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLEdBQUcsQ0FBQztvQkFDckMsVUFBVSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLFNBQVMsQ0FBQztvQkFDakQsVUFBVSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLEdBQUcsQ0FBQztvQkFDckMsVUFBVSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLFNBQVMsQ0FBQztpQkFDbEQ7YUFDRjtTQUNGLENBQUMsQ0FBQztRQUNILElBQUksQ0FBQyxLQUFLLEdBQUcsbUJBQW1CLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsQ0FBQztJQUN2RCxDQUFDO0lBRUQsUUFBUSxLQUFJLENBQUM7SUFFYixRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRTtZQUNuQixPQUFPLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ3hDLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxDQUMxQjtnQkFDRSxLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLO2FBQ3hCLEVBQ0QsUUFBUSxDQUNULENBQUM7U0FDSDtJQUNILENBQUM7SUFFRCxNQUFNO1FBQ0osSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUNqQyxDQUFDOzs2SUEvQ1UsNEJBQTRCO2lJQUE1Qiw0QkFBNEIsd0hDaEJ6QywyK0NBaURBOzRGRGpDYSw0QkFBNEI7a0JBTHhDLFNBQVM7K0JBQ0Usd0JBQXdCO2dJQUt6QixZQUFZO3NCQUFwQixLQUFLO2dCQUlPLEtBQUs7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIEFic3RyYWN0Q29udHJvbCxcbiAgRm9ybUJ1aWxkZXIsXG4gIEZvcm1Hcm91cCxcbiAgVmFsaWRhdG9ycyxcbn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgTW9kYWxDb250cm9sbGVyIH0gZnJvbSAnQGlvbmljL2FuZ3VsYXInO1xuaW1wb3J0IHsgSW5saW5lRWRpdG9yQ29tcG9uZW50IH0gZnJvbSAnLi4vaW5saW5lLWVkaXRvci9pbmxpbmUtZWRpdG9yLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBnZXRGb3JtRmllbGRPckVycm9yIH0gZnJvbSAnLi4vdXRpbGl0eSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RhcC12YWx1ZS1lZGl0b3ItbW9kYWwnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFwLXZhbHVlLWVkaXRvci1tb2RhbC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RhcC12YWx1ZS1lZGl0b3ItbW9kYWwuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgVGFwVmFsdWVFZGl0b3JNb2RhbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIGlucHV0T3B0aW9uczogSW5saW5lRWRpdG9yQ29tcG9uZW50LklucHV0T3B0aW9ucyB8IGFueSA9IHtcbiAgICB0eXBlOiAndGV4dCcsXG4gIH07XG5cbiAgQElucHV0KCkgc2V0IHZhbHVlKHY6IGFueSkge1xuICAgIHRoaXMuZmllbGQuc2V0VmFsdWUodiwgeyBlbWl0RXZlbnQ6IGZhbHNlIH0pO1xuICB9XG5cbiAgZmllbGQ6IEFic3RyYWN0Q29udHJvbDtcbiAgZm9ybTogRm9ybUdyb3VwO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIGZvcm1CdWlsZGVyOiBGb3JtQnVpbGRlcixcbiAgICBwcml2YXRlIG1vZGFsQ29udHJvbGxlcjogTW9kYWxDb250cm9sbGVyXG4gICkge1xuICAgIHRoaXMuZm9ybSA9IGZvcm1CdWlsZGVyLmdyb3VwKHtcbiAgICAgIGZpZWxkOiBbXG4gICAgICAgICcnLFxuICAgICAgICBbXG4gICAgICAgICAgVmFsaWRhdG9ycy5yZXF1aXJlZCxcbiAgICAgICAgICBWYWxpZGF0b3JzLm1heCh0aGlzLmlucHV0T3B0aW9ucy5tYXgpLFxuICAgICAgICAgIFZhbGlkYXRvcnMubWF4TGVuZ3RoKHRoaXMuaW5wdXRPcHRpb25zLm1heExlbmd0aCksXG4gICAgICAgICAgVmFsaWRhdG9ycy5taW4odGhpcy5pbnB1dE9wdGlvbnMubWluKSxcbiAgICAgICAgICBWYWxpZGF0b3JzLm1pbkxlbmd0aCh0aGlzLmlucHV0T3B0aW9ucy5taW5MZW5ndGgpLFxuICAgICAgICBdLFxuICAgICAgXSxcbiAgICB9KTtcbiAgICB0aGlzLmZpZWxkID0gZ2V0Rm9ybUZpZWxkT3JFcnJvcih0aGlzLmZvcm0sICdmaWVsZCcpO1xuICB9XG5cbiAgbmdPbkluaXQoKSB7fVxuXG4gIG9uU3VibWl0KCkge1xuICAgIGlmICh0aGlzLmZvcm0udmFsaWQpIHtcbiAgICAgIGNvbnNvbGUubG9nKCdSZXN1bHQnLCB0aGlzLmZpZWxkLnZhbHVlKTtcbiAgICAgIHRoaXMubW9kYWxDb250cm9sbGVyLmRpc21pc3MoXG4gICAgICAgIHtcbiAgICAgICAgICB2YWx1ZTogdGhpcy5maWVsZC52YWx1ZSxcbiAgICAgICAgfSxcbiAgICAgICAgJ3N1Ym1pdCdcbiAgICAgICk7XG4gICAgfVxuICB9XG5cbiAgY2FuY2VsKCkge1xuICAgIHRoaXMubW9kYWxDb250cm9sbGVyLmRpc21pc3MoKTtcbiAgfVxufVxuIiwiPGlvbi1oZWFkZXI+XG4gIDxpb24tdG9vbGJhciBjb2xvcj1cInByaW1hcnlcIj5cbiAgICA8aW9uLWJ1dHRvbnMgc2xvdD1cInN0YXJ0XCI+XG4gICAgICA8aW9uLWJ1dHRvbiBmaWxsPVwiY2xlYXJcIiAoY2xpY2spPVwiY2FuY2VsKClcIj5cbiAgICAgICAgPGlvbi1pY29uIG5hbWU9XCJhcnJvdy1iYWNrLW91dGxpbmVcIj48L2lvbi1pY29uPlxuICAgICAgPC9pb24tYnV0dG9uPlxuICAgIDwvaW9uLWJ1dHRvbnM+XG4gICAgPGlvbi10aXRsZT5FZGl0aW9uPC9pb24tdGl0bGU+XG4gIDwvaW9uLXRvb2xiYXI+XG48L2lvbi1oZWFkZXI+XG48aW9uLWNvbnRlbnQ+XG4gIDxpb24tZ3JpZD5cbiAgICA8aW9uLXJvdyBqdXN0aWZ5LWNvbnRlbnQtY2VudGVyIGFsaWduLWl0ZW1zLWNlbnRlcj5cbiAgICAgIDxkaXYgc3R5bGU9XCJtYXJnaW46IGF1dG9cIj5cbiAgICAgICAgPGZvcm1cbiAgICAgICAgICAobmdTdWJtaXQpPVwib25TdWJtaXQoKVwiXG4gICAgICAgICAgW2Zvcm1Hcm91cF09XCJmb3JtXCJcbiAgICAgICAgICAoa2V5ZG93bi5lbnRlcik9XCJvblN1Ym1pdCgpXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxpb24tbGlzdCBsaW5lcz1cIm5vbmVcIj5cbiAgICAgICAgICAgIDxpb24taXRlbT5cbiAgICAgICAgICAgICAgPGlvbi1sYWJlbCBwb3NpdGlvbj1cImZsb2F0aW5nXCI+IFZhbHVlIDwvaW9uLWxhYmVsPlxuICAgICAgICAgICAgICA8aW9uLWlucHV0XG4gICAgICAgICAgICAgICAgW3BhdHRlcm5dPVwiaW5wdXRPcHRpb25zLnBhdHRlcm5cIlxuICAgICAgICAgICAgICAgIFtwbGFjZWhvbGRlcl09XCJpbnB1dE9wdGlvbnMucGxhY2Vob2xkZXJcIlxuICAgICAgICAgICAgICAgIFt0eXBlXT1cImlucHV0T3B0aW9ucy50eXBlXCJcbiAgICAgICAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZmllbGRcIlxuICAgICAgICAgICAgICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgPC9pb24taW5wdXQ+XG4gICAgICAgICAgICA8L2lvbi1pdGVtPlxuICAgICAgICAgICAgPGlvbi1pdGVtPlxuICAgICAgICAgICAgICA8aW9uLWJ1dHRvbnMgc2xvdD1cImVuZFwiPlxuICAgICAgICAgICAgICAgIDxpb24tYnV0dG9uXG4gICAgICAgICAgICAgICAgICBjb2xvcj1cInByaW1hcnlcIlxuICAgICAgICAgICAgICAgICAgdHlwZT1cInN1Ym1pdFwiXG4gICAgICAgICAgICAgICAgICBbZGlzYWJsZWRdPVwiIWZvcm0udmFsaWRcIlxuICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cIm9uU3VibWl0KClcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIFN1Ym1pdFxuICAgICAgICAgICAgICAgIDwvaW9uLWJ1dHRvbj5cbiAgICAgICAgICAgICAgPC9pb24tYnV0dG9ucz5cbiAgICAgICAgICAgIDwvaW9uLWl0ZW0+XG4gICAgICAgICAgPC9pb24tbGlzdD5cbiAgICAgICAgPC9mb3JtPlxuICAgICAgPC9kaXY+XG4gICAgPC9pb24tcm93PlxuICA8L2lvbi1ncmlkPlxuPC9pb24tY29udGVudD5cbiJdfQ==