"use strict";
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;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIField = void 0;
var aurelia_framework_1 = require("aurelia-framework");
var UIField = exports.UIField = (function () {
    function UIField(element, taskQueue) {
        this.element = element;
        this.taskQueue = taskQueue;
        this.label = "";
        this.plain = false;
        this.required = false;
        this.disabled = false;
        this.hintPosition = "top";
        this.width = "auto";
        this.isEmpty = false;
        this.hasError = false;
        this.hasDisabled = false;
        this.hasReadonly = false;
        if (element.hasAttribute("nolabel")) {
            element.classList.add("ui-field--nolabel");
        }
        if (element.hasAttribute("inline")) {
            element.classList.add("ui-field--inline");
        }
        if (element.hasAttribute("label-multi-line")) {
            element.classList.add("ui-field--label-multi-line");
        }
    }
    UIField.prototype.focus = function () {
        var el = this.element.querySelector("input, textarea, select");
        if (el !== null && el.readOnly === false && el.disabled === false) {
            el.focus();
        }
    };
    UIField.prototype.attached = function () {
        var _this = this;
        this.taskQueue.queueMicroTask(function () {
            var _a, _b, _c, _d;
            var el = _this.element.querySelector("input, textarea, select, ui-input, ui-select, ui-date-picker, ui-ml-input, ui-ml-textarea");
            if (el != null) {
                if (el.tagName.toLowerCase() == 'select') {
                    if (((_b = (_a = el.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length) == 0 && ((_c = el.parentElement) === null || _c === void 0 ? void 0 : _c.classList.contains('ui-input--readonly'))) {
                        _this.isEmpty = true;
                    }
                }
                else {
                    var val = el.value;
                    if ((val === null || val === void 0 ? void 0 : val.length) == 0 && ((_d = el.parentElement) === null || _d === void 0 ? void 0 : _d.classList.contains('ui-input--readonly'))) {
                        _this.isEmpty = true;
                    }
                }
                _this.hasReadonly = el.hasAttribute('readonly');
                _this.hasDisabled = el.hasAttribute('disabled');
                el.addEventListener("input-invalid", function () {
                    _this.hasError = true;
                });
                el.addEventListener("input-valid", function () {
                    _this.hasError = false;
                });
                el.addEventListener("input-readonly", function () {
                    _this.hasReadonly = true;
                });
                el.addEventListener("input-not-readonly", function () {
                    _this.hasReadonly = false;
                });
                el.addEventListener("input-disabled", function () {
                    _this.hasDisabled = true;
                });
                el.addEventListener("input-not-disabled", function () {
                    _this.hasDisabled = false;
                });
            }
        });
    };
    Object.defineProperty(UIField.prototype, "isRequired", {
        get: function () {
            return this.required === "" || this.required === "required" || isTrue(this.required);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(UIField.prototype, "classes", {
        get: function () {
            var classes = [];
            if (this.plain === "" || this.plain === "plain" || isTrue(this.plain)) {
                classes.push("ui-field--plain");
            }
            if (this.isRequired) {
                classes.push("ui-field--required");
            }
            if (this.isEmpty === true) {
                classes.push("ui-field--empty");
            }
            if (this.disabled || this.hasDisabled) {
                classes.push("ui-field--disabled");
            }
            if (this.hasError) {
                classes.push("ui-field--invalid");
            }
            if (this.hasReadonly) {
                classes.push("ui-field--readonly");
            }
            if (this.hint) {
                classes.push("ui-field--hint");
            }
            return classes.join(" ");
        },
        enumerable: false,
        configurable: true
    });
    __decorate([
        (0, aurelia_framework_1.bindable)(),
        __metadata("design:type", String)
    ], UIField.prototype, "label", void 0);
    __decorate([
        (0, aurelia_framework_1.bindable)(),
        __metadata("design:type", Object)
    ], UIField.prototype, "plain", void 0);
    __decorate([
        (0, aurelia_framework_1.bindable)(),
        __metadata("design:type", Object)
    ], UIField.prototype, "required", void 0);
    __decorate([
        (0, aurelia_framework_1.bindable)(),
        __metadata("design:type", Object)
    ], UIField.prototype, "disabled", void 0);
    __decorate([
        (0, aurelia_framework_1.bindable)(),
        __metadata("design:type", String)
    ], UIField.prototype, "hint", void 0);
    __decorate([
        (0, aurelia_framework_1.bindable)(),
        __metadata("design:type", String)
    ], UIField.prototype, "hintPosition", void 0);
    __decorate([
        (0, aurelia_framework_1.bindable)(),
        __metadata("design:type", String)
    ], UIField.prototype, "width", void 0);
    __decorate([
        aurelia_framework_1.observable,
        __metadata("design:type", Object)
    ], UIField.prototype, "isEmpty", void 0);
    __decorate([
        aurelia_framework_1.observable,
        __metadata("design:type", Object)
    ], UIField.prototype, "hasError", void 0);
    __decorate([
        aurelia_framework_1.observable,
        __metadata("design:type", Object)
    ], UIField.prototype, "hasDisabled", void 0);
    __decorate([
        aurelia_framework_1.observable,
        __metadata("design:type", Object)
    ], UIField.prototype, "hasReadonly", void 0);
    __decorate([
        (0, aurelia_framework_1.computedFrom)("required"),
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], UIField.prototype, "isRequired", null);
    __decorate([
        (0, aurelia_framework_1.computedFrom)("plain", "required", "isEmpty", 'disabled', 'hasError', 'hasReadonly', 'hasDisabled'),
        __metadata("design:type", String),
        __metadata("design:paramtypes", [])
    ], UIField.prototype, "classes", null);
    UIField = __decorate([
        (0, aurelia_framework_1.customElement)("ui-field"),
        (0, aurelia_framework_1.inlineView)("\n<template aria-required.bind=\"required\" aria-disabled.bind=\"disabled\" class=\"ui-field ${classes}\" css.bind=\"{width}\">\n  <slot name=\"title-left\"></slot>\n  <label title=\"${label}\" class=\"ui-field__label\" role=\"text\" click.trigger=\"focus()\">\n    <span>${label}</span>\n    <span show.bind=\"isRequired\">*</span>\n  </label>\n  <span if.bind=\"hint\" class=\"ui-field__hint-icon\" ui-tooltip=\"value.one-time:hint; position.one-time:hintPosition; use-click.one-time:true\">\n    <ui-icon icon=\"digi-info-input\" size=\"sm\"></ui-icon>\n  </span>\n  <slot></slot>\n</template>"),
        __metadata("design:paramtypes", [Element, aurelia_framework_1.TaskQueue])
    ], UIField);
    return UIField;
}());

//# sourceMappingURL=ui-field.js.map
