@iotize/ionic
Version:
Iotize specific building blocks on top of @ionic/angular.
57 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 {
modalController;
inputOptions = {
type: 'text',
};
set value(v) {
this.field.setValue(v, { emitEvent: false });
}
field;
form;
constructor(formBuilder, modalController) {
this.modalController = modalController;
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 */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TapValueEditorModalComponent, deps: [{ token: i1.FormBuilder }, { token: i2.ModalController }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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-input\n [pattern]=\"inputOptions.pattern\"\n [placeholder]=\"inputOptions.placeholder\"\n [type]=\"inputOptions.type\"\n [formControl]=\"field\"\n [value]=\"value\"\n labelPlacement=\"floating\"\n label=\"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", "fixedSlotPlacement", "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: ["autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearInputIcon", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "spellcheck", "step", "type", "value"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { 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-input-otp[type=text],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: "18.2.14", 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-input\n [pattern]=\"inputOptions.pattern\"\n [placeholder]=\"inputOptions.placeholder\"\n [type]=\"inputOptions.type\"\n [formControl]=\"field\"\n [value]=\"value\"\n labelPlacement=\"floating\"\n label=\"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: () => [{ type: i1.FormBuilder }, { type: i2.ModalController }], propDecorators: { inputOptions: [{
type: Input
}], value: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFwLXZhbHVlLWVkaXRvci1tb2RhbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9pb3RpemUtaW9uaWMvc3JjL2xpYi90YXAtdmFsdWUtZWRpdG9yLW1vZGFsL3RhcC12YWx1ZS1lZGl0b3ItbW9kYWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvaW90aXplLWlvbmljL3NyYy9saWIvdGFwLXZhbHVlLWVkaXRvci1tb2RhbC90YXAtdmFsdWUtZWRpdG9yLW1vZGFsLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFFTCxXQUFXLEVBRVgsVUFBVSxHQUNYLE1BQU0sZ0JBQWdCLENBQUM7QUFDeEIsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRWpELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLFlBQVksQ0FBQzs7OztBQU9qRCxNQUFNLE9BQU8sNEJBQTRCO0lBYzdCO0lBYkQsWUFBWSxHQUE2QztRQUNoRSxJQUFJLEVBQUUsTUFBTTtLQUNiLENBQUM7SUFFRixJQUFhLEtBQUssQ0FBQyxDQUFNO1FBQ3ZCLElBQUksQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDLENBQUMsRUFBRSxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO0lBQy9DLENBQUM7SUFFRCxLQUFLLENBQWtCO0lBQ3ZCLElBQUksQ0FBWTtJQUVoQixZQUNFLFdBQXdCLEVBQ2hCLGVBQWdDO1FBQWhDLG9CQUFlLEdBQWYsZUFBZSxDQUFpQjtRQUV4QyxJQUFJLENBQUMsSUFBSSxHQUFHLFdBQVcsQ0FBQyxLQUFLLENBQUM7WUFDNUIsS0FBSyxFQUFFO2dCQUNMLEVBQUU7Z0JBQ0Y7b0JBQ0UsVUFBVSxDQUFDLFFBQVE7b0JBQ25CLFVBQVUsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxHQUFHLENBQUM7b0JBQ3JDLFVBQVUsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUM7b0JBQ2pELFVBQVUsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxHQUFHLENBQUM7b0JBQ3JDLFVBQVUsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUM7aUJBQ2xEO2FBQ0Y7U0FDRixDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsS0FBSyxHQUFHLG1CQUFtQixDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsT0FBTyxDQUFDLENBQUM7SUFDdkQsQ0FBQztJQUVELFFBQVEsS0FBSSxDQUFDO0lBRWIsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNwQixPQUFPLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ3hDLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTyxDQUMxQjtnQkFDRSxLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLO2FBQ3hCLEVBQ0QsUUFBUSxDQUNULENBQUM7UUFDSixDQUFDO0lBQ0gsQ0FBQztJQUVELE1BQU07UUFDSixJQUFJLENBQUMsZUFBZSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBQ2pDLENBQUM7MkhBL0NVLDRCQUE0QjsrR0FBNUIsNEJBQTRCLHdIQ2hCekMscS9DQWtEQTs7NEZEbENhLDRCQUE0QjtrQkFMeEMsU0FBUzsrQkFDRSx3QkFBd0I7OEdBS3pCLFlBQVk7c0JBQXBCLEtBQUs7Z0JBSU8sS0FBSztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgQWJzdHJhY3RDb250cm9sLFxuICBGb3JtQnVpbGRlcixcbiAgRm9ybUdyb3VwLFxuICBWYWxpZGF0b3JzLFxufSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBNb2RhbENvbnRyb2xsZXIgfSBmcm9tICdAaW9uaWMvYW5ndWxhcic7XG5pbXBvcnQgeyBJbmxpbmVFZGl0b3JDb21wb25lbnQgfSBmcm9tICcuLi9pbmxpbmUtZWRpdG9yL2lubGluZS1lZGl0b3IuY29tcG9uZW50JztcbmltcG9ydCB7IGdldEZvcm1GaWVsZE9yRXJyb3IgfSBmcm9tICcuLi91dGlsaXR5JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGFwLXZhbHVlLWVkaXRvci1tb2RhbCcsXG4gIHRlbXBsYXRlVXJsOiAnLi90YXAtdmFsdWUtZWRpdG9yLW1vZGFsLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGFwLXZhbHVlLWVkaXRvci1tb2RhbC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBUYXBWYWx1ZUVkaXRvck1vZGFsQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQElucHV0KCkgaW5wdXRPcHRpb25zOiBJbmxpbmVFZGl0b3JDb21wb25lbnQuSW5wdXRPcHRpb25zIHwgYW55ID0ge1xuICAgIHR5cGU6ICd0ZXh0JyxcbiAgfTtcblxuICBASW5wdXQoKSBzZXQgdmFsdWUodjogYW55KSB7XG4gICAgdGhpcy5maWVsZC5zZXRWYWx1ZSh2LCB7IGVtaXRFdmVudDogZmFsc2UgfSk7XG4gIH1cblxuICBmaWVsZDogQWJzdHJhY3RDb250cm9sO1xuICBmb3JtOiBGb3JtR3JvdXA7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgZm9ybUJ1aWxkZXI6IEZvcm1CdWlsZGVyLFxuICAgIHByaXZhdGUgbW9kYWxDb250cm9sbGVyOiBNb2RhbENvbnRyb2xsZXJcbiAgKSB7XG4gICAgdGhpcy5mb3JtID0gZm9ybUJ1aWxkZXIuZ3JvdXAoe1xuICAgICAgZmllbGQ6IFtcbiAgICAgICAgJycsXG4gICAgICAgIFtcbiAgICAgICAgICBWYWxpZGF0b3JzLnJlcXVpcmVkLFxuICAgICAgICAgIFZhbGlkYXRvcnMubWF4KHRoaXMuaW5wdXRPcHRpb25zLm1heCksXG4gICAgICAgICAgVmFsaWRhdG9ycy5tYXhMZW5ndGgodGhpcy5pbnB1dE9wdGlvbnMubWF4TGVuZ3RoKSxcbiAgICAgICAgICBWYWxpZGF0b3JzLm1pbih0aGlzLmlucHV0T3B0aW9ucy5taW4pLFxuICAgICAgICAgIFZhbGlkYXRvcnMubWluTGVuZ3RoKHRoaXMuaW5wdXRPcHRpb25zLm1pbkxlbmd0aCksXG4gICAgICAgIF0sXG4gICAgICBdLFxuICAgIH0pO1xuICAgIHRoaXMuZmllbGQgPSBnZXRGb3JtRmllbGRPckVycm9yKHRoaXMuZm9ybSwgJ2ZpZWxkJyk7XG4gIH1cblxuICBuZ09uSW5pdCgpIHt9XG5cbiAgb25TdWJtaXQoKSB7XG4gICAgaWYgKHRoaXMuZm9ybS52YWxpZCkge1xuICAgICAgY29uc29sZS5sb2coJ1Jlc3VsdCcsIHRoaXMuZmllbGQudmFsdWUpO1xuICAgICAgdGhpcy5tb2RhbENvbnRyb2xsZXIuZGlzbWlzcyhcbiAgICAgICAge1xuICAgICAgICAgIHZhbHVlOiB0aGlzLmZpZWxkLnZhbHVlLFxuICAgICAgICB9LFxuICAgICAgICAnc3VibWl0J1xuICAgICAgKTtcbiAgICB9XG4gIH1cblxuICBjYW5jZWwoKSB7XG4gICAgdGhpcy5tb2RhbENvbnRyb2xsZXIuZGlzbWlzcygpO1xuICB9XG59XG4iLCI8aW9uLWhlYWRlcj5cbiAgPGlvbi10b29sYmFyIGNvbG9yPVwicHJpbWFyeVwiPlxuICAgIDxpb24tYnV0dG9ucyBzbG90PVwic3RhcnRcIj5cbiAgICAgIDxpb24tYnV0dG9uIGZpbGw9XCJjbGVhclwiIChjbGljayk9XCJjYW5jZWwoKVwiPlxuICAgICAgICA8aW9uLWljb24gbmFtZT1cImFycm93LWJhY2stb3V0bGluZVwiPjwvaW9uLWljb24+XG4gICAgICA8L2lvbi1idXR0b24+XG4gICAgPC9pb24tYnV0dG9ucz5cbiAgICA8aW9uLXRpdGxlPkVkaXRpb248L2lvbi10aXRsZT5cbiAgPC9pb24tdG9vbGJhcj5cbjwvaW9uLWhlYWRlcj5cbjxpb24tY29udGVudD5cbiAgPGlvbi1ncmlkPlxuICAgIDxpb24tcm93IGp1c3RpZnktY29udGVudC1jZW50ZXIgYWxpZ24taXRlbXMtY2VudGVyPlxuICAgICAgPGRpdiBzdHlsZT1cIm1hcmdpbjogYXV0b1wiPlxuICAgICAgICA8Zm9ybVxuICAgICAgICAgIChuZ1N1Ym1pdCk9XCJvblN1Ym1pdCgpXCJcbiAgICAgICAgICBbZm9ybUdyb3VwXT1cImZvcm1cIlxuICAgICAgICAgIChrZXlkb3duLmVudGVyKT1cIm9uU3VibWl0KClcIlxuICAgICAgICA+XG4gICAgICAgICAgPGlvbi1saXN0IGxpbmVzPVwibm9uZVwiPlxuICAgICAgICAgICAgPGlvbi1pdGVtPlxuICAgICAgICAgICAgICA8aW9uLWlucHV0XG4gICAgICAgICAgICAgICAgW3BhdHRlcm5dPVwiaW5wdXRPcHRpb25zLnBhdHRlcm5cIlxuICAgICAgICAgICAgICAgIFtwbGFjZWhvbGRlcl09XCJpbnB1dE9wdGlvbnMucGxhY2Vob2xkZXJcIlxuICAgICAgICAgICAgICAgIFt0eXBlXT1cImlucHV0T3B0aW9ucy50eXBlXCJcbiAgICAgICAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwiZmllbGRcIlxuICAgICAgICAgICAgICAgIFt2YWx1ZV09XCJ2YWx1ZVwiXG4gICAgICAgICAgICAgICAgbGFiZWxQbGFjZW1lbnQ9XCJmbG9hdGluZ1wiXG4gICAgICAgICAgICAgICAgbGFiZWw9XCJWYWx1ZVwiXG4gICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgPC9pb24taW5wdXQ+XG4gICAgICAgICAgICA8L2lvbi1pdGVtPlxuICAgICAgICAgICAgPGlvbi1pdGVtPlxuICAgICAgICAgICAgICA8aW9uLWJ1dHRvbnMgc2xvdD1cImVuZFwiPlxuICAgICAgICAgICAgICAgIDxpb24tYnV0dG9uXG4gICAgICAgICAgICAgICAgICBjb2xvcj1cInByaW1hcnlcIlxuICAgICAgICAgICAgICAgICAgdHlwZT1cInN1Ym1pdFwiXG4gICAgICAgICAgICAgICAgICBbZGlzYWJsZWRdPVwiIWZvcm0udmFsaWRcIlxuICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cIm9uU3VibWl0KClcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIFN1Ym1pdFxuICAgICAgICAgICAgICAgIDwvaW9uLWJ1dHRvbj5cbiAgICAgICAgICAgICAgPC9pb24tYnV0dG9ucz5cbiAgICAgICAgICAgIDwvaW9uLWl0ZW0+XG4gICAgICAgICAgPC9pb24tbGlzdD5cbiAgICAgICAgPC9mb3JtPlxuICAgICAgPC9kaXY+XG4gICAgPC9pb24tcm93PlxuICA8L2lvbi1ncmlkPlxuPC9pb24tY29udGVudD5cbiJdfQ==