import { Component, ChangeDetectionStrategy } from '@angular/core';
import { FormControl } from '@angular/forms';
import { HostDisplayFlexStyle } from '@anglr/common';
import { PropertyTypeControlBase } from '../propertyTypeControlBase';
import * as i0 from "@angular/core";
import * as i1 from "../inputNumber/inputNumber.component";
import * as i2 from "../selectValue/selectValue.component";
/**
 * Component used for displaying input of type size string
 */
export class InputSizeComponent extends PropertyTypeControlBase {
    constructor() {
        super(...arguments);
        //######################### protected properties - template bindings #########################
        /**
         * Control for numeric value of size
         */
        this._value = new FormControl(null);
        /**
         * Control for unit value of size
         */
        this._unit = new FormControl('px', { nonNullable: true });
    }
    //######################### protected - overrides #########################
    /**
     * @inheritdoc
     */
    _controlSet() {
        var _a;
        const value = (_a = this._control) === null || _a === void 0 ? void 0 : _a.value;
        if (value) {
            const matches = /^(\d*\.?\d+)\s*([^0-9.]+$)/.exec(value);
            if (matches) {
                this._value.setValue(+matches[1]);
                this._unit.setValue(matches[2]);
                return;
            }
        }
        this._unit.setValue('px');
        this._value.setValue(null);
    }
    /**
     * @inheritdoc
     */
    _initialize() {
        this._value.valueChanges.subscribe(value => {
            var _a, _b;
            const unit = this._unit.value;
            //use empty value for size
            if (!value || !unit) {
                (_a = this._control) === null || _a === void 0 ? void 0 : _a.setValue(null);
                return;
            }
            (_b = this.control) === null || _b === void 0 ? void 0 : _b.setValue(`${value}${unit}`);
        });
        this._unit.valueChanges.subscribe(unit => {
            var _a, _b;
            const value = this._value.value;
            //use empty value for size
            if (!value || !unit) {
                (_a = this._control) === null || _a === void 0 ? void 0 : _a.setValue(null);
                return;
            }
            (_b = this.control) === null || _b === void 0 ? void 0 : _b.setValue(`${value}${unit}`);
        });
    }
}
InputSizeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: InputSizeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
InputSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: InputSizeComponent, selector: "input-size", usesInheritance: true, ngImport: i0, template: "<input-number class=\"dynamic-flex-1\" [control]=\"_value\"></input-number> <select-value style=\"flex: 0 0 48px;\" [control]=\"_unit\" [values]=\"['px', 'pt', 'em', '%']\"></select-value>", styles: [":host{display: flex;}"], dependencies: [{ kind: "component", type: i1.InputNumberComponent, selector: "input-number" }, { kind: "component", type: i2.SelectValueComponent, selector: "select-value" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: InputSizeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'input-size', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input-number class=\"dynamic-flex-1\" [control]=\"_value\"></input-number> <select-value style=\"flex: 0 0 48px;\" [control]=\"_unit\" [values]=\"['px', 'pt', 'em', '%']\"></select-value>", styles: [":host{display: flex;}"] }]
        }] });
//# sourceMappingURL=inputSize.component.js.map