ion-oui/lib/parsers/forms/form.js

The client library of oui builder for ionic

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        if (typeof b !== "function" && b !== null)
            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.OUIIonFormSliderParser = exports.OUIIonFormSlider = exports.OUIIonFormDropdownParser = exports.OUIIonFormDropdown = exports.OUIIonFormCheckboxParser = exports.OUIIonFormCheckbox = exports.OUIIonFormSwitchParser = exports.OUIIonFormSwitch = exports.UIIonFormDatetimeParser = exports.OUIIonFormDatetime = exports.OUIIonFormTextFieldParser = exports.OUIIonFormTextField = exports.OUIIonFormParser = exports.OUIIonForm = void 0;
var core_1 = require("@angular/core");
var oui_element_1 = require("../../oui-element");
var oui_parser_1 = require("../../oui-parser");
var forms_1 = require("@angular/forms");
var helpers_1 = require("../../helpers");
var common_1 = require("@angular/common");
var OUIIonForm = /** @class */ (function (_super) {
    __extends(OUIIonForm, _super);
    function OUIIonForm() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    OUIIonForm.prototype.ngAfterViewInit = function () {
        var _a, _b;
        var formState = (_b = (_a = this.clickHandler) === null || _a === void 0 ? void 0 : _a.page) === null || _b === void 0 ? void 0 : _b.formStates;
        if (formState) {
            formState.currentFormId = this.parentFormId;
        }
    };
    OUIIonForm.prototype.ngOnInit = function () {
        var _a, _b;
        var formState = (_b = (_a = this.clickHandler) === null || _a === void 0 ? void 0 : _a.page) === null || _b === void 0 ? void 0 : _b.formStates;
        this.parentFormId = formState === null || formState === void 0 ? void 0 : formState.currentFormId;
        this.form = new forms_1.FormGroup({});
        formState === null || formState === void 0 ? void 0 : formState.set(this.data.id, this.form);
        if (formState) {
            formState.currentFormId = this.data.id;
        }
    };
    OUIIonForm = __decorate([
        (0, core_1.Component)({
            selector: 'app-ion-oui-form',
            template: "\n        <div [id]=\"data.id\">\n            <form *ngIf=\"form\" [formGroup]=\"form\">\n                <app-ion-oui [mode]=\"mode\" *ngIf=\"data.child\" [data]=\"data.child\" [onClick]=\"click\"></app-ion-oui>\n            </form>\n        </div>\n    ",
            styleUrls: ['../o-ui.scss'],
        })
    ], OUIIonForm);
    return OUIIonForm;
}(oui_element_1.OUIIonElement));
exports.OUIIonForm = OUIIonForm;
var OUIIonFormParser = /** @class */ (function (_super) {
    __extends(OUIIonFormParser, _super);
    function OUIIonFormParser() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'Form';
        _this.componentType = OUIIonForm;
        return _this;
    }
    return OUIIonFormParser;
}(oui_parser_1.OUIAbstractIonParser));
exports.OUIIonFormParser = OUIIonFormParser;
var OUIIonFormTextField = /** @class */ (function (_super) {
    __extends(OUIIonFormTextField, _super);
    function OUIIonFormTextField() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    OUIIonFormTextField.prototype.ngOnInit = function () {
        var _a, _b, _c;
        var formState = (_b = (_a = this.clickHandler) === null || _a === void 0 ? void 0 : _a.page) === null || _b === void 0 ? void 0 : _b.formStates;
        this.form = formState === null || formState === void 0 ? void 0 : formState.form(formState.currentFormId);
        (_c = this.form) === null || _c === void 0 ? void 0 : _c.addControl(this.data.name, new forms_1.FormControl((0, helpers_1.tryParsingDynamicValue)(this.data.initialValue, this.clickHandler), []));
    };
    OUIIonFormTextField = __decorate([
        (0, core_1.Component)({
            selector: 'app-ion-oui-form-edit',
            template: "\n       <ion-item [formGroup]=\"form!\" lines=\"full\" [mode]=\"mode\">\n       <ion-label *ngIf=\"data.labelText\" position=\"stacked\">\n            {{data.labelText}}\n        </ion-label>\n        <ion-input [mode]=\"mode\" [formControlName]=\"data.name\" [type]=\"'text'\" [inputmode]=\"data.inputmode || 'text'\"   [placeholder]=\"data.hint || ''\"></ion-input>\n       </ion-item>\n    ",
            styleUrls: ['../o-ui.scss'],
        })
    ], OUIIonFormTextField);
    return OUIIonFormTextField;
}(oui_element_1.OUIIonElement));
exports.OUIIonFormTextField = OUIIonFormTextField;
var OUIIonFormTextFieldParser = /** @class */ (function (_super) {
    __extends(OUIIonFormTextFieldParser, _super);
    function OUIIonFormTextFieldParser() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'TextField';
        _this.componentType = OUIIonFormTextField;
        return _this;
    }
    return OUIIonFormTextFieldParser;
}(oui_parser_1.OUIAbstractIonParser));
exports.OUIIonFormTextFieldParser = OUIIonFormTextFieldParser;
var OUIIonFormDatetime = /** @class */ (function (_super) {
    __extends(OUIIonFormDatetime, _super);
    function OUIIonFormDatetime(datePipe) {
        var _this = _super.call(this) || this;
        _this.datePipe = datePipe;
        return _this;
    }
    OUIIonFormDatetime.prototype.ngOnInit = function () {
        var _a, _b, _c;
        var formState = (_b = (_a = this.clickHandler) === null || _a === void 0 ? void 0 : _a.page) === null || _b === void 0 ? void 0 : _b.formStates;
        this.form = formState === null || formState === void 0 ? void 0 : formState.form(formState.currentFormId);
        (_c = this.form) === null || _c === void 0 ? void 0 : _c.addControl(this.data.name, new forms_1.FormControl((0, helpers_1.tryParsingDynamicValue)(this.data.initialValue, this.clickHandler), []));
    };
    OUIIonFormDatetime.prototype.formatDate = function (d) {
        return this.datePipe.transform(d, this.data.format || 'yyyy-MM-dd') || '';
    };
    OUIIonFormDatetime = __decorate([
        (0, core_1.Component)({
            selector: 'app-ion-oui-form-datetime',
            template: "\n\n       <ion-item lines=\"full\" [mode]=\"mode\">\n       <ion-label *ngIf=\"data.labelText\">\n            {{data.labelText}}\n        </ion-label>\n        <ion-datetime-button  slot=\"end\" datetime=\"datetime\">\n        </ion-datetime-button>\n        <!-- <ion-text slot=\"end\">{{ date | date: 'yyyy-MM-dd'}}</ion-text> -->\n        <ng-container [formGroup]=\"form!\">\n            <!-- <ion-input\n                [mode]=\"mode\"\n                [value]=\"date | date: (data.format || 'dd.MM.yyyy')\"\n                id=\"date\"\n                class=\"ion-text-end\"\n                [placeholder]=\"data.hint || ''\"\n                [formControlName]=\"data.name\"\n            ></ion-input> -->\n           \n\n            <!-- <ion-modal [keepContentsMounted]=\"true\">\n                <ng-template>\n                    <ion-datetime showDefaultButtons=\"true\" [presentation]=\"data.input || 'date'\"  [formControlName]=\"data.name\" id=\"datetime\"></ion-datetime>\n                </ng-template>\n            </ion-modal> -->\n            \n            <ion-popover [keepContentsMounted]=\"true\" [mode]=\"mode\">\n            <ng-template>\n                    <ion-datetime [(ngModel)]=\"date\" #popoverDatetime (ionChange)=\"date = formatDate(popoverDatetime.value); popoverDatetime.confirm(true);\" [presentation]=\"data.input || 'date'\"  [formControlName]=\"data.name\" id=\"datetime\"></ion-datetime>\n                </ng-template>\n            </ion-popover>\n        </ng-container>\n       </ion-item>\n\n       \n    ",
            styleUrls: ['../o-ui.scss'],
            providers: [common_1.DatePipe]
        })
    ], OUIIonFormDatetime);
    return OUIIonFormDatetime;
}(oui_element_1.OUIIonElement));
exports.OUIIonFormDatetime = OUIIonFormDatetime;
var UIIonFormDatetimeParser = /** @class */ (function (_super) {
    __extends(UIIonFormDatetimeParser, _super);
    function UIIonFormDatetimeParser() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'DateTime';
        _this.componentType = OUIIonFormDatetime;
        return _this;
    }
    return UIIonFormDatetimeParser;
}(oui_parser_1.OUIAbstractIonParser));
exports.UIIonFormDatetimeParser = UIIonFormDatetimeParser;
var OUIIonFormSwitch = /** @class */ (function (_super) {
    __extends(OUIIonFormSwitch, _super);
    function OUIIonFormSwitch() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    OUIIonFormSwitch.prototype.ngOnInit = function () {
        var _a, _b, _c;
        var formState = (_b = (_a = this.clickHandler) === null || _a === void 0 ? void 0 : _a.page) === null || _b === void 0 ? void 0 : _b.formStates;
        this.form = formState === null || formState === void 0 ? void 0 : formState.form(formState.currentFormId);
        (_c = this.form) === null || _c === void 0 ? void 0 : _c.addControl(this.data.name, new forms_1.FormControl((0, helpers_1.tryParsingDynamicValue)(this.data.initialValue, this.clickHandler), []));
    };
    OUIIonFormSwitch = __decorate([
        (0, core_1.Component)({
            selector: 'app-ion-oui-form-switch',
            template: "\n       <ion-item [formGroup]=\"form!\" lines=\"full\" [mode]=\"mode\">\n        <ion-label>\n         <app-ion-oui [mode]=\"mode\" [data]=\"data.title\" [onClick]=\"click\"></app-ion-oui>\n         <app-ion-oui [mode]=\"mode\" *ngIf=\"data.subtitle\" [data]=\"data.subtitle\" [onClick]=\"click\"></app-ion-oui>\n        </ion-label>\n       <ion-toggle [mode]=\"mode\" [formControlName]=\"data.name\" [slot]=\"data.labelPosition\"></ion-toggle>\n       </ion-item>\n    ",
            styleUrls: ['../o-ui.scss'],
        })
    ], OUIIonFormSwitch);
    return OUIIonFormSwitch;
}(oui_element_1.OUIIonElement));
exports.OUIIonFormSwitch = OUIIonFormSwitch;
var OUIIonFormSwitchParser = /** @class */ (function (_super) {
    __extends(OUIIonFormSwitchParser, _super);
    function OUIIonFormSwitchParser() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'Switch';
        _this.componentType = OUIIonFormSwitch;
        return _this;
    }
    return OUIIonFormSwitchParser;
}(oui_parser_1.OUIAbstractIonParser));
exports.OUIIonFormSwitchParser = OUIIonFormSwitchParser;
var OUIIonFormCheckbox = /** @class */ (function (_super) {
    __extends(OUIIonFormCheckbox, _super);
    function OUIIonFormCheckbox() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    OUIIonFormCheckbox.prototype.ngOnInit = function () {
        var _a, _b, _c;
        var formState = (_b = (_a = this.clickHandler) === null || _a === void 0 ? void 0 : _a.page) === null || _b === void 0 ? void 0 : _b.formStates;
        this.form = formState === null || formState === void 0 ? void 0 : formState.form(formState.currentFormId);
        (_c = this.form) === null || _c === void 0 ? void 0 : _c.addControl(this.data.name, new forms_1.FormControl((0, helpers_1.tryParsingDynamicValue)(this.data.initialValue, this.clickHandler), []));
    };
    OUIIonFormCheckbox = __decorate([
        (0, core_1.Component)({
            selector: 'app-ion-oui-form-checkbox',
            template: "\n       <ion-item [formGroup]=\"form!\" lines=\"full\" [mode]=\"mode\">\n        <ion-label>\n         <app-ion-oui [mode]=\"mode\" [data]=\"data.title\" [onClick]=\"click\"></app-ion-oui>\n         <app-ion-oui [mode]=\"mode\" *ngIf=\"data.subtitle\" [data]=\"data.subtitle\" [onClick]=\"click\"></app-ion-oui>\n        </ion-label>\n       <ion-checkbox [mode]=\"mode\" [formControlName]=\"data.name\" [slot]=\"data.labelPosition\"></ion-checkbox>\n       </ion-item>\n    ",
            styleUrls: ['../o-ui.scss'],
        })
    ], OUIIonFormCheckbox);
    return OUIIonFormCheckbox;
}(oui_element_1.OUIIonElement));
exports.OUIIonFormCheckbox = OUIIonFormCheckbox;
var OUIIonFormCheckboxParser = /** @class */ (function (_super) {
    __extends(OUIIonFormCheckboxParser, _super);
    function OUIIonFormCheckboxParser() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'Checkbox';
        _this.componentType = OUIIonFormCheckbox;
        return _this;
    }
    return OUIIonFormCheckboxParser;
}(oui_parser_1.OUIAbstractIonParser));
exports.OUIIonFormCheckboxParser = OUIIonFormCheckboxParser;
var OUIIonFormDropdown = /** @class */ (function (_super) {
    __extends(OUIIonFormDropdown, _super);
    function OUIIonFormDropdown() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    OUIIonFormDropdown.prototype.ngOnInit = function () {
        var _a, _b, _c;
        var formState = (_b = (_a = this.clickHandler) === null || _a === void 0 ? void 0 : _a.page) === null || _b === void 0 ? void 0 : _b.formStates;
        this.form = formState === null || formState === void 0 ? void 0 : formState.form(formState.currentFormId);
        (_c = this.form) === null || _c === void 0 ? void 0 : _c.addControl(this.data.name, new forms_1.FormControl((0, helpers_1.tryParsingDynamicValue)(this.data.initialValue, this.clickHandler), []));
    };
    OUIIonFormDropdown = __decorate([
        (0, core_1.Component)({
            selector: 'app-ion-oui-form-dropdown',
            template: "\n       <ion-item [formGroup]=\"form!\" lines=\"full\" [mode]=\"mode\">\n\n       <ion-label *ngIf=\"data.labelText\">\n            {{data.labelText}}\n        </ion-label>\n    \n       \n        <ion-select [mode]=\"mode\" [formControlName]=\"data.name\" [value]=\"data.default\" [multiple]=\"data.multiple\" [placeholder]=\"data.hint || ''\" interface=\"popover\">\n            <ion-select-option [value]=\"item.value\" *ngFor=\"let item of data.items\">{{item.label}}</ion-select-option>\n        </ion-select>\n       </ion-item>\n    ",
            styleUrls: ['../o-ui.scss'],
        })
    ], OUIIonFormDropdown);
    return OUIIonFormDropdown;
}(oui_element_1.OUIIonElement));
exports.OUIIonFormDropdown = OUIIonFormDropdown;
var OUIIonFormDropdownParser = /** @class */ (function (_super) {
    __extends(OUIIonFormDropdownParser, _super);
    function OUIIonFormDropdownParser() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'Dropdown';
        _this.componentType = OUIIonFormDropdown;
        return _this;
    }
    return OUIIonFormDropdownParser;
}(oui_parser_1.OUIAbstractIonParser));
exports.OUIIonFormDropdownParser = OUIIonFormDropdownParser;
var OUIIonFormSlider = /** @class */ (function (_super) {
    __extends(OUIIonFormSlider, _super);
    function OUIIonFormSlider() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    OUIIonFormSlider.prototype.ngOnInit = function () {
        var _a, _b, _c;
        var formState = (_b = (_a = this.clickHandler) === null || _a === void 0 ? void 0 : _a.page) === null || _b === void 0 ? void 0 : _b.formStates;
        this.form = formState === null || formState === void 0 ? void 0 : formState.form(formState.currentFormId);
        (_c = this.form) === null || _c === void 0 ? void 0 : _c.addControl(this.data.name, new forms_1.FormControl((0, helpers_1.tryParsingDynamicValue)(this.data.initialValue, this.clickHandler), []));
    };
    OUIIonFormSlider = __decorate([
        (0, core_1.Component)({
            selector: 'app-ion-oui-form-slider',
            template: "\n       <ion-item  [formGroup]=\"form!\" lines=\"full\" [mode]=\"mode\">\n           <ion-label *ngIf=\"data.label\" position=\"stacked\">\n       {{data.label}} - {{form?.value[data.name]}}\n       </ion-label>\n        <ion-range [mode]=\"mode\" [formControlName]=\"data.name\" [min]=\"data.min || 0\" [max]=\"data.max || 100\" dualKnobs=\"false\" pin=\"true\" snaps=\"false\" [step]=\"data.divisions || 1\" ticks=\"true\" [value]=\"data.initialValue\"\n            color=\"primary\">\n        </ion-range>\n       <!-- <ion-toggle [slot]=\"data.labelPosition\"></ion-toggle> -->\n       </ion-item>\n    ",
            styleUrls: ['../o-ui.scss'],
        })
    ], OUIIonFormSlider);
    return OUIIonFormSlider;
}(oui_element_1.OUIIonElement));
exports.OUIIonFormSlider = OUIIonFormSlider;
var OUIIonFormSliderParser = /** @class */ (function (_super) {
    __extends(OUIIonFormSliderParser, _super);
    function OUIIonFormSliderParser() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.type = 'Slider';
        _this.componentType = OUIIonFormSlider;
        return _this;
    }
    return OUIIonFormSliderParser;
}(oui_parser_1.OUIAbstractIonParser));
exports.OUIIonFormSliderParser = OUIIonFormSliderParser;