var Clapton = (function (exports) {
'use strict';
const htmlAttributes = (params) => {
const customDataAttributes = params.data || {};
const others = Object.keys(params).filter(key => key !== "data");
const flattenDataAttributes = (data, prefix = "data") => {
return Object.keys(data).reduce((acc, key) => {
const value = data[key];
if (typeof value === "object" && value !== null) {
acc.push(...flattenDataAttributes(value, `${prefix}-${key}`));
}
else {
acc.push(`${prefix}-${key}='${escapeHtml(value)}'`);
}
return acc;
}, []);
};
return [
others.map(key => {
if (key === "disabled") {
if (params[key] === false) {
return "";
}
else {
return `${key}`;
}
}
return `${key}='${escapeHtml(params[key])}'`;
}).join(" "),
flattenDataAttributes(customDataAttributes).join(" ")
].filter(Boolean).join(" ");
};
const escapeHtml = (unsafe) => {
if (typeof unsafe !== "string") {
return "";
}
return unsafe
.replace(/&/g, "&")
.replace(//g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
};
class Box {
constructor(attributes = {}) {
this.children = [];
this.attributes = attributes;
}
add(child) {
this.children.push(child);
return this;
}
get render() {
return `
${this.children.map(child => child.render).join("")}
`;
}
}
class Component {
constructor(state = {}, id = Math.random().toString(36).substring(2, 10), errors = []) {
this._state = state;
this.id = id;
this._errors = errors;
this._root = new Box({ data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } });
}
get render() {
return this._root.render;
}
}
class Text {
constructor(value) {
this.value = value;
}
get render() {
return this.value;
}
}
class TextField {
constructor(state, attribute, attributes = {}) {
this.state = state;
this.attributes = attributes;
this.attribute = attribute;
this.attributes["data-attribute"] = attribute;
}
get render() {
return ``;
}
add_action(event, klass, fn, options = {}) {
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
return this;
}
}
class Link {
constructor(attributes = {}) {
this.children = [];
this.attributes = attributes;
}
get render() {
return `${this.children.map(child => child.render).join("")}`;
}
add(child) {
this.children.push(child);
return this;
}
}
class Button {
constructor(attributes = {}) {
this.attributes = attributes;
this.children = [];
}
add(child) {
this.children.push(child);
return this;
}
get render() {
return ``;
}
add_action(event, klass, fn, options = {}) {
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
return this;
}
}
class DateTimeField {
constructor(state, attribute, attributes = {}) {
this.attributes = {};
this.state = state;
this.attribute = attribute;
this.attributes = attributes;
this.attributes["data-attribute"] = attribute;
}
get render() {
const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
return ``;
}
add_action(event, klass, fn, options = {}) {
this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
return this;
}
datetime_local_value(value) {
if (!value) {
return "";
}
const date = new Date(value);
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
let month = date.getMonth() + 1;
let day = date.getDate();
let hours = date.getHours();
let minutes = date.getMinutes();
if (month < 10) {
month = `0${month}`;
}
if (day < 10) {
day = `0${day}`;
}
if (hours < 10) {
hours = `0${hours}`;
}
if (minutes < 10) {
minutes = `0${minutes}`;
}
return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
}
}
exports.Box = Box;
exports.Button = Button;
exports.Component = Component;
exports.DateTimeField = DateTimeField;
exports.Link = Link;
exports.Text = Text;
exports.TextField = TextField;
return exports;
})({});