import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-ClISz4NF.js';
import { g as govForm, l as FormInputClass, m as FormInputSizes } from './form-DvhJiKwA.js';
import { g as govHost, a as toBoolAttr, d as toOnOffAttrIfDefined, t as toBoolAttrIfDefined } from './template-CoD1xawt.js';
import { v as validateProp } from './props-CJZgTDla.js';
import { c as createID } from './string.utils-vN03FcXN.js';
import { A as AttributeObserver, a as ariaAttributes } from './attribute-Bz_RzYFb.js';
import { i as inheritAriaAttributes } from './accessibility-wqNV8djF.js';
import { p as pick } from './utils-CQvUntGY.js';
import { S as Sizes } from './sizes-BcQO4NH2.js';
import { C as Colors } from './colors-U40vKHrs.js';
import './constants-BegH8u6i.js';
import './constants-aqe7GX2n.js';
import './constants-CysDgoMA.js';
import './gov.log-BtqD9K8d.js';

var Tags;
(function (Tags) {
    Tags["INPUT"] = "input";
    Tags["TEXTAREA"] = "textarea";
})(Tags || (Tags = {}));
const GovFormInput = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.govFocus = createEvent(this, "gov-focus");
        this.govBlur = createEvent(this, "gov-blur");
        this.govInput = createEvent(this, "gov-input");
        this.govKeyUp = createEvent(this, "gov-keyup");
        this.govHydrated = createEvent(this, "gov-hydrated");
        this.govKeyDown = createEvent(this, "gov-keydown");
        /**
         * Input’s size.
         */
        this.size = "m";
        /**
         * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.
         * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.
         */
        this.required = false;
        /**
         * Makes the input component disabled.
         */
        this.disabled = false;
        /**
         * Same as original parameter
         * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
         */
        this.inputType = "text";
        /**
         * Accessible text for password display
         */
        this.accessibleShowPasswordLabel = 'Zobrazit heslo';
        /**
         * Accessible text to hide the password
         */
        this.accessibleHidePasswordLabel = 'Skrýt heslo';
        this.showPassword = false;
        this.inheritedAttributes = {};
        this.h = govHost(this.host);
        this.inputId = createID("GovInput");
        this.f = govForm(this.h);
    }
    validateSize(newValue) {
        validateProp(FormInputSizes, newValue, FormInputClass.root);
    }
    watchControlAttrs() {
        this.passControlAttrs();
    }
    passControlAttrs() {
        this.f.passAttrToControl("size", this.size);
        this.f.passAttrToControl("success", toBoolAttr(this.success));
        this.f.passAttrToControl("disabled", toBoolAttr(this.disabled));
        this.f.passAttrToControl("invalid", toBoolAttr(this.invalid));
        this.f.passAttrToControl("type", this.multiline ? Tags.TEXTAREA : Tags.INPUT);
    }
    componentDidLoad() {
        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
            this.onAriaAttributeChange(attributeName, newValue);
        });
        this.attributeObserver.startObserving(ariaAttributes);
        this.govHydrated.emit();
    }
    componentWillLoad() {
        this.validateSize(this.size);
        this.inheritedAttributes = inheritAriaAttributes(this.host);
    }
    componentDidRender() {
        this.passControlAttrs();
        this.f.passAttrToLabel("required", String(this.required));
    }
    onAriaAttributeChange(attributeName, newValue) {
        this.host.removeAttribute(attributeName);
        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
    }
    disconnectedCallback() {
        var _a;
        (_a = this.attributeObserver) === null || _a === void 0 ? void 0 : _a.stopObserving();
    }
    render() {
        const Tag = this.multiline ? Tags.TEXTAREA : Tags.INPUT;
        return (h(Host, { key: '77dae47e06d063a2487a5ddbb1259306b5cdbfc3', class: FormInputClass.root, size: this.size, type: this.type }, this.h.hasSlot("prefix") && h("slot", { key: 'e8e2f433d1ef4132ea11deccd0430d1e629b939b', name: "prefix" }), h("span", { key: 'd6ccd3199c302f2bdefec80c9b1d41e221f5c996', class: "element" }, (this.h.hasSlot("icon-start") && !this.multiline) &&
            h("div", { key: '9bdfc91aeb6b5f9c9c16cf902d092caeb5c5d9c5', class: FormInputClass.icons, onClick: () => this.inputRef.focus() }, h("slot", { key: '2a2d7b03fbe85a18353ac360a822721b2e76da78', name: "icon-start" })), h(Tag, Object.assign({ key: 'e43d026dbb5138a6b69363805df462d18d3e1e1f', type: this.inputType === 'password' && this.showPassword ? 'text' : this.inputType, disabled: this.disabled, id: this.identifier || this.inputId, name: this.name, onFocus: this.onFocusHandler.bind(this), onInput: this.onInputHandler.bind(this), onBlur: this.onBlurHandler.bind(this), onKeyUp: this.onKeyUpHandler.bind(this), onKeyDown: this.onKeyDownHandler.bind(this), ref: el => (this.inputRef = el), placeholder: this.placeholder, spellcheck: toBoolAttrIfDefined(this.spellcheck), lang: this.inputLang, readonly: toBoolAttrIfDefined(this.readonly), autocomplete: toOnOffAttrIfDefined(this.autocomplete), autocorrect: toOnOffAttrIfDefined(this.autocorrect), minlength: this.minlength, maxlength: this.maxlength, min: this.min, max: this.max, required: this.required, rows: this.rows, cols: this.cols, role: this.role, value: this.value }, this.inheritedAttributes, { "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled) })), ((this.success || this.invalid || this.h.hasSlot("icon-end") || this.inputType === 'password') && !this.multiline) &&
            h("div", { key: '43025915f216c0153e069acdddbece0e059f3ec7', class: FormInputClass.icons, onClick: () => this.inputRef.focus() }, this.success && !this.multiline &&
                h("gov-icon", { key: '13b34f7a5e705afdb92877850f116895318bb876', class: "validation-icon", name: "check-lg", type: "components" }), this.invalid && !this.multiline &&
                h("gov-icon", { key: 'd671025577334714519c12956863a3a3c6f3af81', class: "validation-icon", name: "exclamation-lg", type: "components" }), this.h.hasSlot("icon-end") && this.inputType !== 'password' && h("slot", { key: 'f26ff9842ab606917ff1fe10e5fa83e0707f923f', name: "icon-end" }), this.inputType === 'password' ? (h("gov-button", { color: 'primary', type: 'base', size: this.size, "aria-label": this.showPassword ? this.accessibleHidePasswordLabel : this.accessibleShowPasswordLabel, "on-gov-click": () => this.showPassword = !this.showPassword }, h("gov-icon", { slot: "icon-start", name: "eye", type: "components" }))) : null)), this.h.hasSlot("sufix") && h("slot", { key: '666b152801bc34d6cdb66e88c22d695c4b4d169c', name: "sufix" })));
    }
    onFocusHandler(e) {
        e.stopPropagation();
        this.focused = true;
        this.govFocus.emit({
            component: FormInputClass.root,
            value: this.value,
            originalEvent: e,
        });
    }
    onBlurHandler(e) {
        e.stopPropagation();
        this.focused = false;
        this.govBlur.emit({
            component: FormInputClass.root,
            value: this.value,
            originalEvent: e,
        });
    }
    onKeyUpHandler(e) {
        e.stopPropagation();
        this.govKeyUp.emit({
            component: FormInputClass.root,
            value: this.value,
            originalEvent: e,
        });
    }
    onKeyDownHandler(e) {
        e.stopPropagation();
        this.govKeyDown.emit({
            component: FormInputClass.root,
            value: this.value,
            originalEvent: e,
        });
    }
    onInputHandler(e) {
        this.value = e.target.value;
        e.stopPropagation();
        this.govInput.emit({
            component: FormInputClass.root,
            value: this.value,
            originalEvent: e,
        });
    }
    /**
     * Returns the current state of the component
     */
    async setFocus(options) {
        return this.inputRef.focus(options);
    }
    /**
     * Sets the ordered value of the element
     */
    async setValue(value) {
        this.value = value;
    }
    /**
     * Clears input value
     */
    async clearValue() {
        this.value = "";
        this.inputRef.value = "";
    }
    /**
     * Returns an instance of the native html input element
     */
    async getRef() {
        return this.inputRef;
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "size": ["validateSize", "watchControlAttrs"],
        "disabled": ["watchControlAttrs"],
        "invalid": ["watchControlAttrs"],
        "success": ["watchControlAttrs"]
    }; }
};

const SkeletonSizes = pick(Sizes, ['_XS', '_S', '_M', '_L', '_XL']);
pick(Colors, ["PRIMARY", "NEUTRAL"]);
var SkeletonShapes;
(function (SkeletonShapes) {
    SkeletonShapes["CIRCLE"] = "circle";
    SkeletonShapes["LINE"] = "line";
})(SkeletonShapes || (SkeletonShapes = {}));
var SkeletonAnimation;
(function (SkeletonAnimation) {
    SkeletonAnimation["PULSE"] = "pulse";
    SkeletonAnimation["PROGRESS"] = "progress";
    SkeletonAnimation["FALSE"] = "false";
})(SkeletonAnimation || (SkeletonAnimation = {}));
const SkeletonClass = {
    root: 'gov-skeleton',
};

const GovSkeleton = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Input’s size.
         */
        this.size = "m";
        /**
         * Style variation of the skeleton.
         */
        this.color = "neutral";
        /**
         * Shape of the skeleton
         */
        this.shape = "line";
        /**
         * Width of the skeleton ex. 100px, 100%, auto etc.
         */
        this.width = null;
        /**
         * Height of the skeleton ex. 100px, 100%, auto etc.
         */
        this.height = null;
        /**
         * Animation type
         */
        this.animation = "progress";
        this.items = [];
        this.inheritedAttributes = {};
        this.h = govHost(this.host);
    }
    validateSize(newValue) {
        validateProp(SkeletonSizes, newValue, SkeletonClass.root);
    }
    validateShape(newValue) {
        validateProp(SkeletonShapes, newValue, SkeletonClass.root);
    }
    validateAnimation(newValue) {
        validateProp(SkeletonAnimation, newValue, SkeletonClass.root);
    }
    componentDidLoad() {
        this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
            this.onAriaAttributeChange(attributeName, newValue);
        });
        this.attributeObserver.startObserving(ariaAttributes);
    }
    componentWillLoad() {
        this.validateSize(this.size);
        this.validateShape(this.shape);
        this.validateAnimation(this.animation);
        this.init();
        this.inheritedAttributes = inheritAriaAttributes(this.host);
    }
    componentWillUpdate() {
        this.init();
    }
    disconnectedCallback() {
        var _a;
        (_a = this.attributeObserver) === null || _a === void 0 ? void 0 : _a.stopObserving();
    }
    onAriaAttributeChange(attributeName, newValue) {
        this.host.removeAttribute(attributeName);
        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
    }
    init() {
        this.items.fill(1);
    }
    render() {
        return (h(Host, Object.assign({ key: '871f22b2b3bd0c92c75b81b4d649246414c01b97', size: this.size, color: this.color, class: {
                [SkeletonClass.root]: true,
                circle: this.shape === "circle",
                line: this.shape === "line",
                progress: this.animation === "progress",
                pulse: this.animation === "pulse",
            } }, this.inheritedAttributes, { "aria-busy": "true", "aria-valuemin": "0", "aria-valuemax": "100", role: "progressbar", tabindex: "0", style: { width: this.width, height: this.height } })));
    }
    get host() { return getElement(this); }
    static get watchers() { return {
        "size": ["validateSize"],
        "shape": ["validateShape"],
        "animation": ["validateAnimation"]
    }; }
};

export { GovFormInput as gov_form_input, GovSkeleton as gov_skeleton };
//# sourceMappingURL=gov-form-input.gov-skeleton.entry.js.map

//# sourceMappingURL=gov-form-input_2.entry.js.map