@aqua-ds/web-components/components-build/aq-editable-input2.js

AquaDS Web Components

import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { e as emitEvent } from './eventEmitter.js';
import { d as defineCustomElement$4 } from './aq-helper-text2.js';
import { d as defineCustomElement$3 } from './aq-label2.js';
import { d as defineCustomElement$2 } from './aq-text-field2.js';
import { d as defineCustomElement$1 } from './aq-tooltip2.js';

const aqEditableInputCss = ".aq-text-field{width:100%}";

const AqEditableInput = /*@__PURE__*/ proxyCustomElement(class AqEditableInput extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.label = '';
        this.labelText = '';
        this.desc = '';
        this.value = '';
        this.min = 0;
        this.max = 100;
        this.arrowOffset = 1;
    }
    update(e) {
        this.value = e.detail.value;
        this.handleChange(e.detail.value);
    }
    handleKeyDown(e) {
        let val = this.value;
        const number = Number(val);
        if (number) {
            const amount = this.arrowOffset || 1;
            // Up
            if (e.keyCode === 38) {
                val = number + amount;
                this.handleChange(val);
                e.preventDefault();
            }
            // Down
            if (e.keyCode === 40) {
                val = number - amount;
                this.handleChange(val);
                e.preventDefault();
            }
        }
    }
    handleChange(newVal) {
        const data = {};
        data[this.label] = newVal;
        if (data.hex === undefined && data['#'] === undefined) {
            emitEvent('change', this.hostElement, { value: data });
        }
        else if (newVal?.length > 5) {
            emitEvent('change', this.hostElement, { value: data });
        }
    }
    get labelId() {
        return `input__label__${this.label}__${Math.random().toString().slice(2, 5)}`;
    }
    render() {
        return (h("aq-text-field", { key: 'ba6773204f99f30d1ee79d78104324b8ff2c7b7f', sublabel: this.labelText, "aria-labelledby": this.labelId, value: this.value, onInput: (e) => this.update(e), onKeyDown: (e) => this.handleKeyDown(e) }));
    }
    get hostElement() { return this; }
    static get style() { return aqEditableInputCss; }
}, [256, "aq-editable-input", {
        "label": [1],
        "labelText": [1, "label-text"],
        "desc": [1],
        "value": [1032],
        "min": [2],
        "max": [2],
        "arrowOffset": [2, "arrow-offset"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["aq-editable-input", "aq-helper-text", "aq-label", "aq-text-field", "aq-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "aq-editable-input":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, AqEditableInput);
            }
            break;
        case "aq-helper-text":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "aq-label":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "aq-text-field":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "aq-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { AqEditableInput as A, defineCustomElement as d };