require("./hiro.css");
var $8zHUo$nanoid = require("nanoid");
var $8zHUo$hexcolortocolorname = require("hex-color-to-color-name");


function $parcel$exportWildcard(dest, source) {
  Object.keys(source).forEach(function(key) {
    if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) {
      return;
    }

    Object.defineProperty(dest, key, {
      enumerable: true,
      get: function get() {
        return source[key];
      }
    });
  });

  return dest;
}

function $parcel$export(e, n, v, s) {
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}


var $becb3f2fe37b7390$exports = {};
var $8e901f8d0c6ca2d8$exports = {};

$parcel$export($8e901f8d0c6ca2d8$exports, "HiroApp", () => $8e901f8d0c6ca2d8$export$123dbf0530e650a);

function $21d524920a3c60fa$export$ddcec56dc3db7f2c(len = 5) {
    // Define the alphabet to use (numbers, uppercase and lowercase letters)
    const alphabet = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
    // Create a nanoid generator with the custom alphabet and desired length
    const generateToken = (0, $8zHUo$nanoid.customAlphabet)(alphabet, len);
    // Generate a token
    return generateToken();
}


function $50b7d60bcb34fba3$export$73bda83cddbc7187(str) {
    return str// Handle the start of a new word marked by uppercase letters or non-alphanumeric characters
    .replace(/([a-z0-9])([A-Z])|[^a-zA-Z0-9]+/g, "$1-$2")// Convert the entire string to lowercase
    .toLowerCase()// Remove any leading or trailing dashes
    .replace(/^-|-$/g, "");
}


function $ae1d7a027cf5260a$export$cd380138694d4af6() {
    const element = document.querySelector(".ha-sidebar-tab");
    if (element.scrollHeight > element.clientHeight) element.style.paddingRight = "10px";
    else element.style.paddingRight = "0px";
}


function $7112ed347f5e1a73$export$7a555f0190b038() {
    return typeof window["ENV"] !== "undefined" && window["ENV"] === "gallery";
}
function $7112ed347f5e1a73$export$496c68e92eb56578() {
    return typeof window["ENV"] !== "undefined" && typeof window["CONSTANTS"] !== "undefined" && window["ENV"] === "asset";
}
function $7112ed347f5e1a73$export$27d7c37b6c928f6c() {
    return window["CONSTANTS"];
}




const $8e901f8d0c6ca2d8$var$ROOT_ID_LS_KEY = "artwork-root-Id";
class $8e901f8d0c6ca2d8$export$123dbf0530e650a {
    constructor(options){
        this.options = options;
        this._title = options?.title;
        this._description = options?.description;
        this._artist = options?.artist;
    }
    get title() {
        return this._title;
    }
    get artist() {
        return this._artist;
    }
    get description() {
        return this._description;
    }
    /**
	 * This function must be run first so that
	 * HiroEngine can make sure the controller section is
	 * in place and can add controllers to the app.
	 *
	 * Puts the Hiro controller section next to the root elements.
	 *  @Param {BootstrapOptions} options options of bootstrap
	 */ bootstrap(options) {
        // @ts-ignore
        if ((0, $7112ed347f5e1a73$export$496c68e92eb56578)()) return;
        if (document.querySelector("aside#ha-app-sidebar")) return;
        // Create wrapper element
        const wrapper = document.createElement("div");
        wrapper.id = "ha-app-wrapper";
        // Create sidebar element
        const sidebar = document.createElement("aside");
        sidebar.id = "ha-app-sidebar";
        sidebar.innerHTML = `<header id='ha-sidebar-header'>
	<nav id='ha-sidebar-nav'>
		<button data-tab='properties' class='ha-btn text active'>
			Properties
		</button>
		<button data-tab='about' class='ha-btn text'>About</button>
	</nav>
	<button class='ha-btn icon' id='ha-sidebar-refresh'>
		<i class='hi hi-reset'></i>
	</button>
</header>
<div
	data-tab='properties'
	id='ha-sidebar-properties'
	class='ha-sidebar-tab active'
></div>
<div data-tab='about' id='ha-sidebar-about' class='ha-sidebar-tab'>
	<div id='ha-sidebar-about-head'>
		<h4 id='ha-sidebar-about-head-title'>
			${this.title}
		</h4>
		<h5 id='ha-sidebar-about-head-artist'>
			${this.artist}
		</h5>
	</div>
	<p id='ha-sidebar-about-desc'>
		${this.description}
	</p>
</div>
${(0, $7112ed347f5e1a73$export$7a555f0190b038)() ? `<button style='align-self:stretch'
													id="ha-purchase-btn"
													class='ha-btn primary'>
													Purchase Embed
												</button>` : ``}
`;
        // Create main content element
        const mainContent = document.createElement("main");
        mainContent.id = "ha-main-content";
        // Move existing root children to mainContent, skipping <script> tags
        // The default root element is <Body>
        let rootElement = document.body;
        const idFromLS = localStorage.getItem($8e901f8d0c6ca2d8$var$ROOT_ID_LS_KEY);
        if (idFromLS && document.getElementById(idFromLS)) rootElement = document.getElementById(idFromLS);
        else if (options?.rootID && document.getElementById(options.rootID)) {
            rootElement = document.getElementById(options.rootID);
            rootElement.id = `${rootElement.id}-${(0, $21d524920a3c60fa$export$ddcec56dc3db7f2c)()}`;
        } else wrapper.style.height = "100vh";
        Array.from(rootElement.childNodes).forEach((child)=>{
            if (child.nodeName !== "SCRIPT") mainContent.appendChild(child.cloneNode(true));
        });
        // wrapper.appendChild(styles);
        // Add sidebar and main content to wrapper
        wrapper.appendChild(mainContent);
        wrapper.appendChild(sidebar);
        // Clear existing body children and add wrapper
        rootElement.innerHTML = "";
        rootElement.appendChild(wrapper);
        this.bindTabButtonActions();
        window.addEventListener("resize", (0, $ae1d7a027cf5260a$export$cd380138694d4af6));
    }
    bindTabButtonActions() {
        const propertiesTabButtons = document.querySelectorAll("#ha-sidebar-nav .ha-btn.text");
        const propertiesTabs = document.querySelectorAll(".ha-sidebar-tab");
        propertiesTabButtons.forEach((button)=>{
            button.addEventListener("click", ()=>{
                propertiesTabButtons.forEach((otherButton)=>otherButton.classList.remove("active"));
                propertiesTabs.forEach((otherTabs)=>otherTabs.classList.remove("active"));
                const activeTab = button.dataset.tab;
                button.classList.add("active");
                const activeDiv = document.querySelector(`div[data-tab="${activeTab}"]`);
                activeDiv.classList.add("active");
                (0, $ae1d7a027cf5260a$export$cd380138694d4af6)();
            });
        });
    }
}


var $563ef7b140b71f66$exports = {};

$parcel$export($563ef7b140b71f66$exports, "stateManager", () => $563ef7b140b71f66$export$c80a2529cb071ffa);
const $563ef7b140b71f66$var$EXAMPLES_LS_KEYS = "exampleValues";
const $563ef7b140b71f66$var$STATE_LS_KEYS = "appCurrentState";
/**
 * Manages the application state.
 */ class $563ef7b140b71f66$var$StateManager {
    /**
   * Creates a new StateManager instance.
   */ constructor(){
        /**
   * The application state.
   * @type {AppState}
   * @private
   */ this._appState = {};
        /**
   * The example state.
   * @type {ExampleState}
   * @private
   */ this._exampleState = null;
        const rawLSValue = localStorage.getItem($563ef7b140b71f66$var$EXAMPLES_LS_KEYS);
        if (rawLSValue) this._exampleState = JSON.parse(rawLSValue);
    }
    /**
   * Adds a new controller to the state manager.
   * @param {BaseController} controller - The controller to add.
   * @param {ValueType} initialValue - The initial value of the controller.
   * @returns {ValueState|null} The example state for the given controller,
   * or `null` if the controller does not have an example state.
   * @throws {Error} If the given name is a redundant controller name.
   */ addNew(controller, initialValue) {
        const name = controller.getName();
        if (this.isRedundantName(name)) throw new Error(`Redundant Controller Name: {${name}}
      You've used this name for another controller.\n`);
        const exampleState = this._exampleState?.examples?.hasOwnProperty(name) ? this._exampleState?.examples[name] : null;
        this._appState[name] = {
            originalValue: initialValue,
            currentValue: exampleState ? exampleState.value : initialValue,
            exampleValue: exampleState ? exampleState?.value : null,
            controller: controller
        };
        this.saveToLocalStorage();
        return exampleState;
    }
    /**
   * Resets a controller to its original value.
   * @param {string} controllerName - The name of the controller to reset.
   */ resetToOriginalValue(controllerName) {
        this._appState[controllerName].controller.setValue(this._appState[controllerName].originalValue);
    }
    /**
   * Resets all controllers to their original values.
   */ resetAllToOriginalValue() {
        for(const controllerName in this._appState)this.resetToOriginalValue(controllerName);
    }
    /**
   * Resets a controller to its example value.
   * @param {string} controllerName - The name of the controller to reset.
   */ resetToExampleValue(controllerName) {
        this._appState[controllerName].controller.setValue(this._appState[controllerName].exampleValue);
    }
    /**
   * Resets all controllers to their example values.
   */ resetAllToExampleValue() {
        for(const controllerName in this._appState)this.resetToExampleValue(controllerName);
    }
    /**
   * Updates the value of a controller.
   * @param {string} controllerName - The name of the controller to update.
   * @param {ValueType} newValue - The new value of the controller.
   */ updateControllerValue(controllerName, newValue) {
        this._appState[controllerName].currentValue = newValue;
        this.updateLSAppState(controllerName, newValue);
    }
    /**
   * Checks if a given name is a redundant controller name.
   * @param {string} name - The name to check.
   * @returns {boolean} `true` if the name is a redundant controller name,
   * `false` otherwise.
   */ isRedundantName(name) {
        return this._appState.hasOwnProperty(name);
    }
    /**
   * Saves the current application state to local storage.
   * @private
   */ saveToLocalStorage() {
        const lsAppState = Object.keys(this._appState).reduce((acc, controllerName)=>{
            const controller = this._appState[controllerName].controller;
            acc[controllerName] = {
                controllerType: controller.getType(),
                valueType: typeof controller.getValue(),
                value: controller.getValue()
            };
            return acc;
        }, {});
        localStorage.setItem($563ef7b140b71f66$var$STATE_LS_KEYS, JSON.stringify(lsAppState, null, " "));
    }
    /**
   * Updates the current application state to local storage.
   * @param {string} controllerName - The name of the controller to update.
   * @param {ValueType} newValue - The new value of the controller.
   * @private
   */ updateLSAppState(controllerName, newValue) {
        const appCurrentState = JSON.parse(localStorage.getItem($563ef7b140b71f66$var$STATE_LS_KEYS));
        appCurrentState[controllerName].value = newValue;
        localStorage.setItem($563ef7b140b71f66$var$STATE_LS_KEYS, JSON.stringify(appCurrentState, null, " "));
    }
}
const $563ef7b140b71f66$export$c80a2529cb071ffa = new $563ef7b140b71f66$var$StateManager();


$parcel$exportWildcard($becb3f2fe37b7390$exports, $8e901f8d0c6ca2d8$exports);
$parcel$exportWildcard($becb3f2fe37b7390$exports, $563ef7b140b71f66$exports);


var $8b6f4ab316ce6730$exports = {};
var $a20da6299de53b78$exports = {};

$parcel$export($a20da6299de53b78$exports, "BaseController", () => $a20da6299de53b78$export$3b5bd9381a52554c);


class $a20da6299de53b78$export$3b5bd9381a52554c {
    get currentValue() {
        return this._currentValue;
    }
    set currentValue(value) {
        this._currentValue = value;
        (0, $563ef7b140b71f66$export$c80a2529cb071ffa).updateControllerValue(this.getName(), value);
        if (this.options && typeof this.options.onChange === "function") this.options.onChange(value);
    }
    static{
        /**
	 * HTML element of the Hiro controller section
	 */ this.SIDEBAR_ELEMENT = document.getElementById("ha-sidebar-properties");
    }
    /**
	 * Creates a new instance of the BaseController class.
	 * @param initialValue - The initial value of the controller.
	 * @param name - **UNIQUE** Identifier of the controller (Max length: 30 char)
	 * @param options - The options of the controller.
	 */ constructor(initialValue, name, options){
        /**
	 * Options of the controller
	 */ this.options = null;
        /**
	 * HTML content of the controller
	 */ this.template = null;
        /**
	 * Input HTML element of the controller
	 */ this.INPUT_ELEMENT = null;
        this._currentValue = initialValue;
        this.initialValue = initialValue;
        this.options = options;
        if (name.length > 30) throw new Error("Controller name must be less than 30 characters");
        if (options && options.label && options.label.length > 30) throw new Error("Controller label must be less than 30 characters");
        this.name = `${(0, $50b7d60bcb34fba3$export$73bda83cddbc7187)(name)}-` + `${this.getType()}` + `${options?.label ? "-" + (0, $50b7d60bcb34fba3$export$73bda83cddbc7187)(options?.label) : ""}`;
        if (!(0, $7112ed347f5e1a73$export$496c68e92eb56578)()) {
            this.template = this.createTemplate();
            if (!$a20da6299de53b78$export$3b5bd9381a52554c.SIDEBAR_ELEMENT) $a20da6299de53b78$export$3b5bd9381a52554c.SIDEBAR_ELEMENT = document.getElementById("ha-sidebar-properties");
            $a20da6299de53b78$export$3b5bd9381a52554c.SIDEBAR_ELEMENT.appendChild(this.template);
            (0, $ae1d7a027cf5260a$export$cd380138694d4af6)();
            this.INPUT_ELEMENT = this.template.querySelector(`#${this.name}`);
            this.addEventListener();
            (0, $563ef7b140b71f66$export$c80a2529cb071ffa).addNew(this, initialValue);
        }
    }
    /**
	 * Sets current value of the controller
	 * @param value
	 */ setValue(value) {
        this.currentValue = value;
    }
    /**
	 * Returns current value of the controller
	 */ getValue() {
        if ((0, $7112ed347f5e1a73$export$496c68e92eb56578)()) {
            const constants = (0, $7112ed347f5e1a73$export$27d7c37b6c928f6c)();
            return constants[this.getName()].value;
        } else return this.currentValue;
    }
    getName() {
        return this.name;
    }
    createTooltip() {
        return this.options?.tooltipMessage ? `
					<button
						data-tooltip='${this.options.tooltipMessage}'
						data-flow='bottom' class='ha-form-tooltip'>
						<i class='hi hi-tooltip'></i>
					</button>
		`.trim() : "";
    }
    createLabel() {
        return `<label for="${this.name}" class='ha-form-label'>
			${this.options?.label || this.name}
		</label>`;
    }
    createLabelContainer() {
        return `<div class='ha-form-label-container'>
      ${this.createLabel()}
      ${this.createTooltip()}
    </div>`;
    }
    /**
	 * Adds an event listener to the input field.
	 */ addEventListener() {
        if (!this.INPUT_ELEMENT) throw "The Input Element with this ID was not found.";
        const el = this.INPUT_ELEMENT;
        el.addEventListener("input", (event)=>{
            const target = event.target;
            if (target) this.currentValue = target.value;
        });
    }
}


var $7933887b38a1497d$exports = {};

$parcel$export($7933887b38a1497d$exports, "BooleanController", () => $7933887b38a1497d$export$c6f57966aed3cc84);

class $7933887b38a1497d$export$c6f57966aed3cc84 extends (0, $a20da6299de53b78$export$3b5bd9381a52554c) {
    /**
   * Represents a controller for a boolean input field in a form.
   * @example
   * const booleanController = new BooleanController(true,'isTrue23', {label: 'Checkbox'});
	 * @param initialValue - The initial value of the controller.
	 * @param name - **UNIQUE** Identifier of the controller (Max length: 30 char)
	 * @param options - The options of the controller.
	 */ constructor(initialValue, name, options = {}){
        super(initialValue, name, options);
    }
    /**
	 * Creates the HTML template for the number controller.
	 * @returns The HTML template for the number controller.
	 */ createTemplate() {
        const html = `<div class='ha-form-control'>
		${this.createLabelContainer()}
		<div class='ha-form-input-container ha-boolean-wrapper'>
			<input class='ha-boolean-value'
			type='checkbox'
			${this.initialValue ? "checked" : ""}
			id="${this.name}"
				name="${this.name}">
			<button data-value='true' class="ha-boolean-switch">
				${this.options?.customLabel?.true || "True"}
			</button>
			<button data-value='false' class="ha-boolean-switch">
				${this.options?.customLabel?.false || "False"}
			</button>
		</div>
	</div>`;
        const template = document.createElement("template");
        template.innerHTML = html.trim();
        return template.content.firstElementChild;
    }
    /**
	 * Returns the type of the number controller.
	 * @returns The type of the number controller.
	 */ getType() {
        return "boolean";
    }
    /**
	 * Adds an event listener to the input field.
	 */ addEventListener() {
        this.template.querySelectorAll(".ha-boolean-wrapper").forEach((booleanWrapper)=>{
            const input = booleanWrapper.querySelector("input.ha-boolean-value");
            const switches = booleanWrapper.querySelectorAll("button.ha-boolean-switch");
            input.addEventListener("change", ()=>{
                this.currentValue = input.checked;
            });
            switches.forEach((switchBtn)=>{
                switchBtn.addEventListener("click", ()=>{
                    const event = new MouseEvent("click", {
                        view: window,
                        bubbles: true,
                        cancelable: true
                    });
                    input.dispatchEvent(event);
                });
            });
        });
    }
}


var $461135bd37173a5f$exports = {};

$parcel$export($461135bd37173a5f$exports, "ColorController", () => $461135bd37173a5f$export$3a401c49038ca28a);


class $461135bd37173a5f$export$3a401c49038ca28a extends (0, $a20da6299de53b78$export$3b5bd9381a52554c) {
    /**
	 * Represents a controller for a color input field in a form.
	 * It allows the user to select a color and provides methods to get and set the current value of the color.
	 * @example
	 * const colorController = new ColorController('#ff0000','backColor23', {label: 'Color'});
	 * colorController.setValue('#00ff00');
	 * console.log(colorController.getValue()); // Output: '#00ff00'
	 * @param initialValue - The initial value of the controller.
	 * @param name - **UNIQUE** Identifier of the controller (Max length: 30 char)
	 * @param options - The options of the controller.
	 */ constructor(initialValue, name, options = {}){
        super(initialValue, name, options);
    }
    /**
	 * Creates the HTML template for the color controller.
	 * @returns The HTML template for the color controller.
	 */ createTemplate() {
        const html = `
		<div class='ha-form-control'>
			${this.createLabelContainer()}
			<div class='ha-form-input-container ha-color-wrapper'>
				<input class='ha-color'
					 type='color'
					 id="${this.name}"
					 name="${this.name}"
					 value="${this.currentValue}">
				<span class='ha-color-value'>-</span>
			</div>
		</div>`;
        const template = document.createElement("template");
        template.innerHTML = html.trim();
        return template.content.firstElementChild;
    }
    /**
	 * Returns the type of the color controller.
	 * @returns The type of the color controller.
	 */ getType() {
        return "color";
    }
    addEventListener() {
        this.template.querySelectorAll(".ha-color-wrapper").forEach((colorWrapper)=>{
            const colorInputEl = colorWrapper.children[0];
            const colorTextEl = colorWrapper.children[1];
            changeColorValueText(colorInputEl.value, colorTextEl);
            colorInputEl.addEventListener("input", ()=>{
                changeColorValueText(colorInputEl.value, colorTextEl);
                this.currentValue = colorInputEl.value;
            });
        });
        function changeColorValueText(colorValue, colorValueEl) {
            const colorName = (0, $8zHUo$hexcolortocolorname.GetColorName)(colorValue);
            const formattedString = `${colorValue} (${colorName})`;
            if (formattedString.length > 24) colorValueEl.style.fontSize = "10px";
            else colorValueEl.style.fontSize = "12px";
            colorValueEl.innerText = formattedString;
        }
    }
}


var $a9eba3fb56bda1c5$exports = {};

$parcel$export($a9eba3fb56bda1c5$exports, "NumberController", () => $a9eba3fb56bda1c5$export$ee52b68072d314b9);

class $a9eba3fb56bda1c5$export$ee52b68072d314b9 extends (0, $a20da6299de53b78$export$3b5bd9381a52554c) {
    /**
   * Represents a controller for a number input field in a form.
   * It allows the user to select a number and provides methods to get and set the current value of the number.
   * @example
   * const numberController = new NumberController(10, 'sizeOfCircle23', {label: 'Number'});
	 * @param initialValue - The initial value of the controller.
	 * @param name - **UNIQUE** Identifier of the controller (Max length: 30 char)
	 * @param options - The options of the controller.
	 */ constructor(initialValue, name, options = {}){
        super(initialValue, name, options);
    }
    /**
	 * Creates the HTML template for the number controller.
	 * @returns The HTML template for the number controller.
	 */ createTemplate() {
        const html = `<div class='ha-form-control'>
	${this.createLabelContainer()}
	<div class='ha-form-input-container ${this.options?.slider ? "ha-number-slider-wrapper" : "ha-number-regular-wrapper"}'>
		<div class='ha-number-value-wrapper'>
			<input class='ha-number'
					type='number'	
					id="${this.name}"
					name="${this.name}"
					max=${this.options?.max || 1}
					min=${this.options?.min || 0}
					step=${this.options?.step || 0.1}
					autocomplete="off"
					value="${this.currentValue}">
		</div>
	${this.options?.slider ? `<label class='ha-slider-wrapper'>
			<input class='ha-slider'
						 type='range'
						 value="${this.currentValue}"
						 max=${this.options?.max || 1}
					min=${this.options?.min || 0}
					step=${this.options?.step || 0.1}
			>
		</label>` : `<div class='ha-stepper-wrapper'>
				<button class="ha-stepper ha-stepper-minus-button">
					<i class='hi hi-minus'></i>
				</button>
				<button class="ha-stepper ha-stepper-plus-button">
					<i class='hi hi-plus'></i>
				</button>
			</div>`}
	</div>
</div>

`;
        const template = document.createElement("template");
        template.innerHTML = html.trim();
        return template.content.firstElementChild;
    }
    /**
	 * Returns the type of the number controller.
	 * @returns The type of the number controller.
	 */ getType() {
        return this.options?.slider ? "slider" : "number";
    }
    /**
	 * Adds an event listener to the input field.
	 */ addEventListener() {
        if (this.options?.slider) this.template.querySelectorAll(".ha-number-slider-wrapper").forEach((nw)=>{
            const numberInputEl = nw.querySelector("input.ha-number");
            const sliderInputEl = nw.querySelector("input.ha-slider");
            const min = parseFloat(numberInputEl.min);
            const max = parseFloat(numberInputEl.max);
            numberInputEl.addEventListener("input", ()=>{
                setTimeout(()=>{
                    let value = parseFloat(numberInputEl.value);
                    value = Math.min(Math.max(value, min), max);
                    numberInputEl.value = value.toString();
                    this.currentValue = value;
                }, 200);
                sliderInputEl.value = numberInputEl.value;
            });
            sliderInputEl.addEventListener("input", ()=>{
                numberInputEl.value = sliderInputEl.value;
                this.currentValue = parseFloat(numberInputEl.value);
            });
        });
        else this.template.querySelectorAll(".ha-number-regular-wrapper").forEach((regNumberWrapper)=>{
            const numberInputEl = regNumberWrapper.querySelector("input.ha-number");
            const minusBtn = regNumberWrapper.querySelector(".ha-stepper-minus-button");
            const plusBtn = regNumberWrapper.querySelector(".ha-stepper-plus-button");
            let intervalId;
            const min = parseFloat(numberInputEl.min);
            const max = parseFloat(numberInputEl.max);
            const step = parseFloat(numberInputEl.step);
            let intervalTime = 200;
            const minIntervalTime = 50;
            const acceleration = 20;
            // update by number steppers
            const updateValue = (delta)=>{
                let value = parseFloat(numberInputEl.value);
                value = Math.min(Math.max(+(value + delta).toFixed(2), min), max);
                numberInputEl.value = value.toString();
                updateButtonState();
            };
            const updateButtonState = ()=>{
                const value = parseFloat(numberInputEl.value);
                minusBtn.disabled = value <= min;
                plusBtn.disabled = value >= max;
                minusBtn.classList.toggle("disabled", value <= min);
                plusBtn.classList.toggle("disabled", value >= max);
            };
            // update by number input
            numberInputEl.addEventListener("input", ()=>{
                setTimeout(()=>{
                    let value = parseFloat(numberInputEl.value);
                    value = Math.min(Math.max(value, min), max);
                    numberInputEl.value = value.toString();
                    updateButtonState();
                    this.currentValue = value;
                }, 200);
            });
            const startInterval = (delta)=>{
                if (intervalId) clearInterval(intervalId);
                intervalTime = 200;
                // Immediate update for single click
                updateValue(delta);
                intervalId = setInterval(()=>{
                    updateValue(delta);
                }, intervalTime);
                // Gradually speed up
                const accelerate = ()=>{
                    if (intervalId) clearInterval(intervalId);
                    intervalTime = Math.max(intervalTime - acceleration, minIntervalTime);
                    intervalId = setInterval(()=>{
                        updateValue(delta);
                    }, intervalTime);
                };
                const accelerationId = setInterval(accelerate, intervalTime);
                // Clear intervals on mouse up/leave
                const clear = ()=>{
                    if (intervalId) {
                        clearInterval(intervalId);
                        // set current value just when steppers stop spinning
                        this.currentValue = parseFloat(numberInputEl.value);
                    }
                    clearInterval(accelerationId);
                    intervalId = null;
                };
                minusBtn.addEventListener("mouseup", clear);
                minusBtn.addEventListener("mouseleave", clear);
                plusBtn.addEventListener("mouseup", clear);
                plusBtn.addEventListener("mouseleave", clear);
            };
            minusBtn.addEventListener("mousedown", ()=>startInterval(-step));
            plusBtn.addEventListener("mousedown", ()=>startInterval(step));
            updateButtonState(); // Initial state update
        });
    }
}


var $9929e10ce2331c3a$exports = {};

$parcel$export($9929e10ce2331c3a$exports, "TextController", () => $9929e10ce2331c3a$export$1c7d8fe2c5f61130);

class $9929e10ce2331c3a$export$1c7d8fe2c5f61130 extends (0, $a20da6299de53b78$export$3b5bd9381a52554c) {
    /**
	 * Represents a controller for a text input field in a form.
	 * It allows the user to enter text and provides methods to get and set the current value of the text.
	 * @example
	 * const textController = new TextController('Hello World','text34', {label: 'Text'});
	 * @param initialValue - The initial value of the controller.
	 * @param name - **UNIQUE** Identifier of the controller (Max length: 30 char)
	 * @param options - The options of the controller.
	 */ constructor(initialValue, name, options = {
        changeMethod: "realtime",
        multiLine: false
    }){
        super(initialValue, name, options);
    }
    /**
	 * Returns the type of the text controller.
	 * @returns The type of the text controller.
	 */ getType() {
        return this.options?.multiLine ? "long-text" : "short-text";
    }
    /**
	 * Creates the HTML template for the text controller.
	 * @returns The HTML template for the text controller.
	 */ createTemplate() {
        const html = `<div class='ha-form-control'>
				${this.createLabelContainer()}
				${this.options?.multiLine ? `<textarea id='long-text'
										class='ha-form-input-container ha-text ha-long-text'
										name="${this.name}"
										id="${this.name}"
										maxlength=${this.options?.maxLength || 200}
										rows=${this.options?.rows || 9}
										wrap='soft'
										placeholder='${this.options?.placeholder || ""}'
										autocomplete='off'>${this.currentValue}</textarea>` : `<input class='ha-form-input-container ha-text ha-short-text'
				 id="${this.name}"
					name="${this.name}"
					maxlength=${this.options?.maxLength || 100}
					value="${this.currentValue}"
				 type='text'
				 autocomplete='off'
				 placeholder='${this.options?.placeholder || ""}'>`}
			${this.options?.changeMethod === "onSubmit" ? `<button type='submit' class='ha-btn secondary ha-form-control-submit'>Submit</button>` : ""}
</div>`;
        const template = document.createElement("template");
        template.innerHTML = html.trim();
        return template.content.firstElementChild;
    }
    addEventListener() {
        this.template.querySelectorAll(".ha-text").forEach((input)=>{
            if (this.options?.changeMethod !== "onSubmit") input.addEventListener("input", ()=>{
                this.currentValue = input.value;
            });
            else input.addEventListener("change", ()=>{
                this.currentValue = input.value;
            });
        });
    }
}


var $6d7188bb484b80c8$exports = {};

$parcel$export($6d7188bb484b80c8$exports, "CheckboxController", () => $6d7188bb484b80c8$export$80f4058e755064da);

class $6d7188bb484b80c8$export$80f4058e755064da extends (0, $a20da6299de53b78$export$3b5bd9381a52554c) {
    /**
	 * Represents a controller for a group of checkboxes.
	 * It allows the user to select a boolean and provides methods to get and set the current value of the checkbox.
	 * @example
	 * const checkboxController = new CheckboxController(
	 * {apple:true, orange:false, banana:true},
	 * 'favFruits432',
	 *  {label: 'Checkbox', choices:[{label:"Orange", value:"orange"}, {label:"Apple", value:"apple"}, {label:"Banana", value:"banana"}]});
	 * @param initialValue - The initial value of the controller.
	 * @param name - **UNIQUE** Identifier of the controller (Max length: 30 char)
	 * @param options - The options of the controller.
	 */ constructor(initialValue, name, options = {
        choices: []
    }){
        if (options.choices.length === 0) throw new Error("At least one choice must be provided");
        options.choices.forEach((choice)=>{
            if (!initialValue.hasOwnProperty(choice.value)) initialValue[choice.value] = false;
        });
        const optionsValues = options.choices.map((c)=>c.value);
        Object.keys(initialValue).forEach((iv)=>{
            if (!optionsValues.includes(iv)) options.choices.push({
                value: iv,
                label: iv
            });
        });
        super(initialValue, name, options);
    }
    getType() {
        return "checkbox";
    }
    createTemplate() {
        const html = `<div class='ha-form-control'>
				${this.createLabelContainer()}
				<div class='ha-form-input-container ha-checkbox-wrapper'>
				${this.options?.choices.map((choice)=>`<label class="ha-checkbox-label">
							<input class='ha-checkbox-value'
							${this.initialValue[choice.value] ? "checked" : ""}
							 name='${choice.value}'
							 type="checkbox"/>
							${choice.label}
						</label>`).join("\n")}
				</div>
			</div>`;
        const template = document.createElement("template");
        template.innerHTML = html.trim();
        return template.content.firstElementChild;
    }
    /**
	 * Adds an event listener to the input field.
	 */ addEventListener() {
        this.template.querySelectorAll(".ha-checkbox-wrapper").forEach((checkboxWrapper)=>{
            const allCheckboxes = checkboxWrapper.querySelectorAll("input.ha-checkbox-value");
            allCheckboxes.forEach((checkbox)=>{
                checkbox.addEventListener("click", ()=>{
                    this.currentValue = Array.from(allCheckboxes).reduce((acc, checkbox)=>{
                        acc[checkbox.name] = checkbox.checked;
                        return acc;
                    }, {});
                });
            });
        });
    }
}


var $f544d023172deed1$exports = {};

$parcel$export($f544d023172deed1$exports, "RadioButtonController", () => $f544d023172deed1$export$573b617026202306);

class $f544d023172deed1$export$573b617026202306 extends (0, $a20da6299de53b78$export$3b5bd9381a52554c) {
    /**
	 * Represents a controller for a group of radio buttons.
	 * @example
	 * const radioBtnController = new RadioButtonController(
	 * 'apple',
	 * 'favFruits645',
	 *  {label: 'Radio Button', choices:[{label:"Orange", value:"orange"}, {label:"Apple", value:"apple"}, {label:"Banana", value:"banana"}]});
	 * @param initialValue - The initial value of the controller.
	 * @param name - **UNIQUE** Identifier of the controller (Max length: 30 char)
	 * @param options - The options of the controller.
	 */ constructor(initialValue, name, options = {
        choices: []
    }){
        if (options.choices.length === 0) throw new Error("At least one choice must be provided");
        if (!options.choices.map((c)=>c.value).includes(initialValue)) options.choices.push({
            value: initialValue,
            label: initialValue
        });
        super(initialValue, name, options);
    }
    getType() {
        return "radio";
    }
    createTemplate() {
        const html = `<div class='ha-form-control'>
				${this.createLabelContainer()}
				<div class='ha-form-input-container ha-radio-btn-wrapper'>
				${this.options?.choices.map((choice)=>`<label class="ha-radio-btn-label">
							<input class='ha-radio-btn-value'
							${this.initialValue === choice.value ? "checked" : ""}
							 value='${choice.value}'
							 name='${this.name}'
							 type="radio"/>
							${choice.label}
						</label>`).join("\n")}
					</div>
			</div>`;
        const template = document.createElement("template");
        template.innerHTML = html.trim();
        return template.content.firstElementChild;
    }
    /**
	 * Adds an event listener to the input field.
	 */ addEventListener() {
        this.template.querySelectorAll(".ha-radio-btn-wrapper").forEach((radioWrapper)=>{
            const allRadios = radioWrapper.querySelectorAll("input.ha-radio-btn-value");
            allRadios.forEach((radio)=>{
                radio.addEventListener("change", ()=>{
                    this.currentValue = radio.value;
                });
            });
        });
    }
}


var $80266ea7b781b536$exports = {};

$parcel$export($80266ea7b781b536$exports, "AlignmentController", () => $80266ea7b781b536$export$98d42c90be96929b);

const $80266ea7b781b536$var$HorizontalAllowedValues = [
    "left",
    "center",
    "right"
];
const $80266ea7b781b536$var$VerticalAllowedValues = [
    "top",
    "middle",
    "bottom"
];
class $80266ea7b781b536$export$98d42c90be96929b extends (0, $a20da6299de53b78$export$3b5bd9381a52554c) {
    /**
	 * Represents a controller for a choosing alignment value in a form.
	 * @example
	 * const alignController = new AlignmentController('center','align33', {label: 'Align V', direction: 'horizontal'});
	 * @param initialValue - The initial value of the controller.
	 * @param name - **UNIQUE** Identifier of the controller (Max length: 30 char)
	 * @param options - The options of the controller.
	 */ constructor(initialValue, name, options = {
        direction: "vertical"
    }){
        if (options.direction === "horizontal" && !$80266ea7b781b536$var$HorizontalAllowedValues.includes(initialValue)) initialValue = "left";
        if (options.direction === "vertical" && !$80266ea7b781b536$var$VerticalAllowedValues.includes(initialValue)) initialValue = "top";
        super(initialValue, name, options);
    }
    /**
	 * Returns the type of the number controller.
	 * @returns The type of the number controller.
	 */ getType() {
        return this.options?.direction === "vertical" ? "align-v" : "align-h";
    }
    /**
	 * Creates the HTML template for the number controller.
	 * @returns The HTML template for the number controller.
	 */ createTemplate() {
        const html = `<div class='ha-form-control'>
		${this.createLabelContainer()}
		<div class='ha-form-input-container ha-align-wrapper'>
						${this.options?.direction === "horizontal" ? `<input ${this.initialValue === "left" ? "checked" : ""} class='ha-align-value' value='left' name='alignH' type='radio'>
						<button data-value='left' class="ha-align-switch">
							<i class='hi hi-align-l'></i>
						</button>
						<input ${this.initialValue === "center" ? "checked" : ""} class='ha-align-value' value='center' name='alignH' type='radio'>
						<button data-value='center' class="ha-align-switch">
							<i class='hi hi-align-c'></i>
						</button>
						<input ${this.initialValue === "right" ? "checked" : ""} class='ha-align-value' value='right' name='alignH' type='radio'>
						<button data-value='right' class="ha-align-switch">
							<i class='hi hi-align-r'></i>
						</button>` : `<input checked ${this.initialValue === "top" ? "checked" : ""} class='ha-align-value' value='top' name='alignV' type='radio'>
					<button data-value='top' class="ha-align-switch">
						<i class='hi hi-align-t'></i>
					</button>
					<input ${this.initialValue === "middle" ? "checked" : ""} class='ha-align-value' value='middle' name='alignV' type='radio'>
					<button data-value='middle' class="ha-align-switch">
						<i class='hi hi-align-m'></i>
					</button>
					<input ${this.initialValue === "bottom" ? "checked" : ""} class='ha-align-value' value='bottom' name='alignV' type='radio'>
					<button data-value='bottom' class="ha-align-switch">
						<i class='hi hi-align-b'></i>
					</button>`}
					</div>
	</div>`;
        const template = document.createElement("template");
        template.innerHTML = html.trim();
        return template.content.firstElementChild;
    }
    /**
	 * Adds an event listener to the input field.
	 */ addEventListener() {
        this.template.querySelectorAll(".ha-align-wrapper").forEach((alignWrapper)=>{
            const linkedInputs = alignWrapper.querySelectorAll("input.ha-align-value");
            const switches = alignWrapper.querySelectorAll("button.ha-align-switch");
            linkedInputs.forEach((input)=>{
                input.addEventListener("change", ()=>{
                    this.currentValue = input.value;
                });
            });
            switches.forEach((switchBtn)=>{
                switchBtn.addEventListener("click", ()=>{
                    const event = new MouseEvent("click", {
                        view: window,
                        bubbles: true,
                        cancelable: true
                    });
                    const linkedInput = switchBtn.previousElementSibling;
                    linkedInput.dispatchEvent(event);
                });
            });
        });
    }
}


var $47fd1f10ab852bd0$exports = {};

$parcel$export($47fd1f10ab852bd0$exports, "DropdownController", () => $47fd1f10ab852bd0$export$175630cabb25e59d);

class $47fd1f10ab852bd0$export$175630cabb25e59d extends (0, $a20da6299de53b78$export$3b5bd9381a52554c) {
    /**
	 * Represents a controller for a dropdown field in a form.
	 * @example
	 * const ddController = new DropdownController(
	 * 'germany',
	 * 'country4536',
	 *  {label: 'Country', choices:[{label:"USA", value:"usa"}, {label:"Germany", value:"germany"}, {label:"Canada", value:"canada"}]});
	 * @param initialValue - The initial value of the controller.
	 * @param name - **UNIQUE** Identifier of the controller (Max length: 30 char)
	 * @param options - The options of the controller.
	 */ constructor(initialValue, name, options = {
        choices: []
    }){
        if (options.choices.length === 0) throw new Error("At least one choice must be provided");
        if (!options.choices.map((c)=>c.value).includes(initialValue)) options.choices.push({
            value: initialValue,
            label: initialValue
        });
        super(initialValue, name, options);
    }
    /**
	 * Returns the type of the text controller.
	 * @returns The type of the text controller.
	 */ getType() {
        return "dropdown";
    }
    /**
	 * Creates the HTML template for the text controller.
	 * @returns The HTML template for the text controller.
	 */ createTemplate() {
        const html = `<div class='ha-form-control'>
				${this.createLabelContainer()}
				<div class='ha-form-input-container ha-native-dropdown-wrapper'>
						<select class='ha-native-dropdown'
										name="${this.name}"
										id="${this.name}">
										${this.options?.choices.map((choice)=>`<option 
												${this.initialValue === choice.value ? "selected" : ""}
												value='${choice.value}'
										>${choice.label}</option>`)}
						</select>
					</div>	
			</div>`;
        const template = document.createElement("template");
        template.innerHTML = html.trim();
        return template.content.firstElementChild;
    }
    addEventListener() {
        this.template.querySelectorAll(".ha-native-dropdown").forEach((input)=>{
            input.addEventListener("change", ()=>{
                this.currentValue = input.value;
            });
        });
    }
}


$parcel$exportWildcard($8b6f4ab316ce6730$exports, $a20da6299de53b78$exports);
$parcel$exportWildcard($8b6f4ab316ce6730$exports, $7933887b38a1497d$exports);
$parcel$exportWildcard($8b6f4ab316ce6730$exports, $461135bd37173a5f$exports);
$parcel$exportWildcard($8b6f4ab316ce6730$exports, $a9eba3fb56bda1c5$exports);
$parcel$exportWildcard($8b6f4ab316ce6730$exports, $9929e10ce2331c3a$exports);
$parcel$exportWildcard($8b6f4ab316ce6730$exports, $6d7188bb484b80c8$exports);
$parcel$exportWildcard($8b6f4ab316ce6730$exports, $f544d023172deed1$exports);
$parcel$exportWildcard($8b6f4ab316ce6730$exports, $80266ea7b781b536$exports);
$parcel$exportWildcard($8b6f4ab316ce6730$exports, $47fd1f10ab852bd0$exports);


$parcel$exportWildcard(module.exports, $becb3f2fe37b7390$exports);
$parcel$exportWildcard(module.exports, $8b6f4ab316ce6730$exports);


//# sourceMappingURL=hiro.cjs.map