ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
227 lines (226 loc) • 18.5 kB
JavaScript
import { T as s, _ as o, c as u, i as n, s as l } from "./factory-WDxu11V0.js";
import { t as p } from "./events-Cqz3ramM.js";
import "./builder-EH76YCFS.js";
import { a as h, c as r, i as d, l as a, n as c, o as b, r as v, t as g } from "./utils-U-9uH7EX.js";
import { a as m, n as f } from "./ssr-BzykYefm.js";
import { a as _, r as x, t as w } from "./a11y-ZSlIUH9B.js";
import "./icon-DgLPjeVe.js";
var A = `:host{position:var(--ran-input-host-position, relative);display:var(--ran-input-host-display, block);box-sizing:var(--ran-input-host-box-sizing, border-box)}.ran-input-label{display:var(--ran-input-label-display, block);margin-bottom:var(--ran-input-label-margin-bottom, var(--ran-space-1, 4px));font-size:var(--ran-input-label-font-size, var(--ran-text-label-1, 14px));font-weight:var(--ran-input-label-font-weight, var(--ran-text-label-weight, 500));color:var(--ran-input-label-color, var(--ran-color-text, #171717))}:host([status="error"]) .ran-input-label{color:var(--ran-input-label-error-color, var(--ran-color-danger, #ff4d4f))}:host([status="warning"]) .ran-input-label{color:var(--ran-input-label-warning-color, var(--ran-color-warning, #faad14))}:host([disabled]) .ran-input-label{color:var(--ran-input-label-disabled-color, var(--ran-color-text-disabled, #999));cursor:var(--ran-input-label-disabled-cursor, not-allowed)}.ran-input{box-sizing:var(--ran-input-box-sizing, border-box);position:var(--ran-input-position, relative);display:var(--ran-input-display, flex);align-items:var(--ran-input-align-items, center);width:var(--ran-input-width, 100%);height:var(--ran-input-height, 100%);min-width:var(--ran-input-min-width, 0);padding:var(--ran-input-padding, 0px 0px 0px 4px);color:var(--ran-input-color, var(--ran-color-text, #000000d9));font-size:var(--ran-input-font-size, var(--ran-text-label-3, 12px));font-family:var(--ran-input-font-family, var(--ran-skin-font-family, inherit));line-height:var(--ran-input-line-height, 1.5715);background-color:var(--ran-input-background-color, var(--ran-color-bg-elevated, #fff));background-image:var(--ran-input-background-image, none);border:var(--ran-input-border, 1px solid var(--ran-color-border, #eaeaea));border-image-source:var(--ran-input-border-image-source, none);border-image-slice:var(--ran-input-border-image-slice, 8);border-image-width:var(--ran-input-border-image-width, var(--ran-skin-border-image-width, 4px));border-image-outset:0;border-image-repeat:stretch;border-radius:var(--ran-input-border-radius, var(--ran-radius-sm, 6px));transition:var(--ran-input-transition, none);min-height:var(--ran-input-min-height, var(--ran-size-7, 32px))}.ran-input .ran-icon{display:var(--ran-input-icon-display, flex);align-items:var(--ran-input-icon-align-items, center);justify-content:var(--ran-input-icon-justify-content, center)}.ran-input:has(.ran-input-content:focus-visible){border-color:var(--ran-input-active-border-color, var(--ran-color-link, #006bff));box-shadow:var(--ran-input-active-box-shadow, var(--ran-focus-ring));border-right-width:var(--ran-input-active-border-right-width, 1px);outline:var(--ran-input-active-outline, 0)}.ran-input:hover{border-color:var(--ran-input-hover-border-color, var(--ran-color-border-hover, #c9c9c9));border-right-width:var(--ran-input-hover-border-right-width, 1px)}.ran-input[status=error] .ran-input-content,.ran-input[status=warning] .ran-input-content{padding-right:var(--ran-input-content-status-padding-right, var(--ran-space-8, 32px))}.ran-input[status=error]:after,.ran-input[status=warning]:after{content:"";position:absolute;top:50%;right:var(--ran-input-status-icon-right, var(--ran-space-3, 12px));width:var(--ran-input-status-icon-width, var(--ran-size-1, 16px));height:var(--ran-input-status-icon-height, var(--ran-size-1, 16px));transform:translateY(-50%);pointer-events:none;mask-position:center;mask-repeat:no-repeat;mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain}.ran-input[status=error]{border-color:var(--ran-input-error-border-color, var(--ran-color-danger, #ff4d4f))}.ran-input[status=error]:after{background-color:var(--ran-color-danger, #ff4d4f);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm-.75 3.5h1.5v5h-1.5v-5zM8 11a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 100 14A7 7 0 008 1zm-.75 3.5h1.5v5h-1.5v-5zM8 11a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E")}.ran-input[status=warning]{border-color:var(--ran-input-warning-border-color, var(--ran-color-warning, #faad14))}.ran-input[status=warning]:after{background-color:var(--ran-color-warning, #faad14);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l6.85 11.86a.5.5 0 01-.43.75H1.58a.5.5 0 01-.43-.75L8 1.5zm-.75 4.25v3.5h1.5v-3.5h-1.5zM8 10.75a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l6.85 11.86a.5.5 0 01-.43.75H1.58a.5.5 0 01-.43-.75L8 1.5zm-.75 4.25v3.5h1.5v-3.5h-1.5zM8 10.75a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E")}.ran-input[disabled]{color:var(--ran-input-disabled-color, var(--ran-color-text-disabled, #00000040));background-color:var(--ran-input-disabled-background-color, var(--ran-color-bg-muted, #f5f5f5));border-color:var(--ran-input-disabled-border-color, var(--ran-color-border, #eaeaea));box-shadow:var(--ran-input-disabled-box-shadow, none);cursor:var(--ran-input-disabled-cursor, not-allowed);opacity:var(--ran-input-disabled-opacity, 1)}.ran-input[disabled]>.ran-input-content{color:var(--ran-input-content-disabled-color, var(--ran-color-text-disabled, #00000040));background-color:var(--ran-input-content-disabled-background-color, var(--ran-color-bg-muted, #f5f5f5));border-color:var(--ran-input-content-disabled-border-color, var(--ran-color-border, #eaeaea));box-shadow:var(--ran-input-content-disabled-box-shadow, none);cursor:var(--ran-input-content-disabled-cursor, not-allowed);opacity:var(--ran-input-content-disabled-opacity, 1)}.ran-input-content{writing-mode:var(--ran-input-content-writing-mode, horizontal-tb);text-rendering:var(--ran-input-content-text-rendering, auto);letter-spacing:var(--ran-input-content-letter-spacing, normal);word-spacing:var(--ran-input-content-word-spacing, normal);text-transform:var(--ran-input-content-text-transform, none);text-indent:var(--ran-input-content-text-indent, 0px);text-shadow:var(--ran-input-content-text-shadow, none);text-align:var(--ran-input-content-text-align, start);cursor:var(--ran-input-content-cursor, text);touch-action:var(--ran-input-content-touch-action, manipulation);-webkit-appearance:var(--ran-input-content--webkit-appearance, none);text-overflow:var(--ran-input-content-text-overflow, ellipsis);box-sizing:var(--ran-input-content-box-sizing, border-box);margin:var(--ran-input-content-margin, 0);font-variant:var(--ran-input-content-font-variant, tabular-nums);list-style:var(--ran-input-content-list-style, none);font-feature-settings:var(--ran-input-content-font-feature-settings, "tnum");position:var(--ran-input-content-position, relative);border:var(--ran-input-content-border, none);width:var(--ran-input-content-width, 100%);height:var(--ran-input-content-height, 100%);min-height:var(--ran-input-content-min-height, var(--ran-size-6, 30px));min-width:var(--ran-input-content-min-width, 0);color:var(--ran-input-content-color, var(--ran-color-text, #000000d9));font-size:var(--ran-input-content-font-size, var(--ran-text-copy-2, 14px));line-height:var(--ran-input-content-line-height, 1.48);background-color:var(--ran-input-content-background-color, var(--ran-color-bg-elevated, #fff));background-image:var(--ran-input-content-background-image, none);transition:var(--ran-input-content-transition, none);outline:var(--ran-input-content-outline, none);border-radius:var(--ran-input-content-border-radius, var(--ran-radius-sm, 6px));padding:var(--ran-input-content-padding, 0 0 0 var(--ran-space-1, 4px));font-weight:var(--ran-input-content-font-weight, var(--ran-text-copy-weight, 400));-webkit-tap-highlight-color:transparent}.ran-input-content:focus,.ran-input-content:focus-visible,.ran-input-content:hover{border:var(--ran-input-content-hover-border, none);outline:var(--ran-input-content-hover-outline, none);box-shadow:var(--ran-input-content-hover-box-shadow, none)}.ran-input-content::placeholder{color:var(--ran-input-content-placeholder-color, var(--ran-color-text-disabled, #999))}.ran-input-content::-webkit-search-cancel-button{display:none;-webkit-appearance:none}.ran-input-message{margin-top:var(--ran-input-message-margin-top, 4px);font-size:var(--ran-input-message-font-size, var(--ran-text-label-3, 12px));font-weight:var(--ran-input-message-font-weight, var(--ran-text-label-weight, 500));line-height:var(--ran-input-message-line-height, 1.5);color:var(--ran-input-message-color, var(--ran-color-text-secondary, #8c8c8c))}.ran-input-message:empty{display:none}:host([status="error"]) .ran-input-message{color:var(--ran-input-message-error-color, var(--ran-color-danger, #ff4d4f))}:host([status="warning"]) .ran-input-message{color:var(--ran-input-message-warning-color, var(--ran-color-warning, #faad14))}`, C = 0, y = class extends f {
static formAssociated = !0;
_internals;
static get observedAttributes() {
return [
"label",
"disabled",
"name",
"placeholder",
"type",
"icon",
"value",
"status",
"message",
"min",
"max",
"step",
"required",
"sheet"
];
}
_events = new p();
_shadowDom;
_input;
_label;
_inputContent;
_icon;
_message;
_defaultValue = "";
_defaultValueCaptured = !1;
constructor() {
super();
try {
this._internals = this.attachInternals();
} catch {
this._internals = void 0;
}
this._shadowDom = g(this, A);
const t = s(), e = n().class("ran-input").part("input").children(l().class("ran-input-content").ref(t).part("content")).build();
this._shadowDom.appendChild(e), this._input = e, this._inputContent = h(t, "content"), this._inputContent.id || (this._inputContent.id = `ran-input-${++C}`);
}
focus(t) {
this._inputContent?.focus(t);
}
blur() {
this._inputContent?.blur();
}
select() {
this._inputContent?.select?.();
}
get value() {
return this.getAttribute("value") || "";
}
set value(t) {
t ? (this.setAttribute("value", t), this._input.setAttribute("value", t)) : (this.removeAttribute("value"), this._input.removeAttribute("value")), this._internals?.setFormValue?.(this.getAttribute("value") ?? ""), this._updateValidity();
}
get placeholder() {
return this.getAttribute("placeholder") || "";
}
set placeholder(t) {
t ? this.setAttribute("placeholder", t) : this.removeAttribute("placeholder");
}
get required() {
return this.hasAttribute("required");
}
set required(t) {
v(this, "required", !(!t || t === "false"));
}
get disabled() {
return a(this);
}
set disabled(t) {
r.includes(t) ? (this.removeAttribute("disabled"), this._input.removeAttribute("disabled"), this._inputContent.removeAttribute("disabled")) : (this.setAttribute("disabled", ""), this._input.setAttribute("disabled", ""), this._inputContent.setAttribute("disabled", ""));
}
get label() {
return this.getAttribute("label") || "";
}
set label(t) {
this.setAttribute("label", t);
}
get status() {
return this.getAttribute("status") || "";
}
set status(t) {
t ? (this.setAttribute("status", t), this._input.setAttribute("status", t)) : (this.removeAttribute("status"), this._input.removeAttribute("status"));
}
get message() {
return this.getAttribute("message") || "";
}
set message(t) {
t ? this.setAttribute("message", t) : this.removeAttribute("message");
}
get name() {
return this.getAttribute("name") || "";
}
set name(t) {
this.setAttribute("name", t);
}
get min() {
return this.getAttribute("min") || "";
}
set min(t) {
this.type === "number" && this.setAttribute("min", t);
}
get max() {
return this.getAttribute("max") || "";
}
set max(t) {
this.type === "number" && this.setAttribute("max", t);
}
get step() {
return this.getAttribute("step") || "";
}
set step(t) {
this.type === "number" && this.setAttribute("step", t);
}
get icon() {
return this.getAttribute("icon") || "";
}
set icon(t) {
t ? this.setAttribute("icon", t) : this.removeAttribute("icon");
}
get type() {
return this.getAttribute("type") || "";
}
set type(t) {
t ? this.setAttribute("type", t) : this.removeAttribute("type");
}
get sheet() {
return c(this, "sheet");
}
set sheet(t) {
d(this, "sheet", t);
}
handlerExternalCss = () => {
b(this, this._shadowDom, "sheet", null, this.sheet);
};
_updateValidity = () => {
_(this, this._internals, {
disabled: this.disabled,
required: this.required,
isEmpty: !this.value,
anchor: this._inputContent,
ariaTarget: this._inputContent
});
};
checkValidity() {
return w(this._internals);
}
reportValidity() {
return x(this._internals);
}
get validity() {
return this._internals?.validity;
}
get validationMessage() {
return this._internals?.validationMessage ?? "";
}
formResetCallback() {
this.value = this._defaultValue;
}
customInput = (t) => {
t.stopPropagation(), t.preventDefault();
const { target: e, data: i = "" } = t;
this.value = e?.value || i || "", this.dispatchEvent(new CustomEvent("input", { detail: { value: this.value } }));
};
customKeydown = (t) => {
t.key !== "Enter" || t.isComposing || this._internals?.form?.requestSubmit();
};
customChange = () => {
this.value = this._inputContent?.value ?? this.value, this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }));
};
listenPlaceholder = (t, e) => {
t === "placeholder" && this._inputContent && (e != null ? this._inputContent.setAttribute("placeholder", e) : this._inputContent.removeAttribute("placeholder"));
};
listenLabel = (t, e) => {
t === "label" && this._inputContent && (e != null ? this._label ? this._label.innerHTML = e : (this._label = u().class("ran-input-label").part("label").text(e).build(), this._label.htmlFor = this._inputContent.id, this._shadowDom.insertBefore(this._label, this._input)) : (this._input.removeAttribute("label"), this._label && (this._label.remove(), this._label = void 0)));
};
listenType = (t, e) => {
t === "type" && this._inputContent && (e ? this._inputContent.setAttribute("type", e) : (this._inputContent.removeAttribute("type"), this._inputContent.removeAttribute("min"), this._inputContent.removeAttribute("max"), this._inputContent.removeAttribute("step")));
};
listenStatus = (t, e) => {
t === "status" && this._input && (e ? this._input.setAttribute("status", e) : this._input.removeAttribute("status"));
};
listenMessage = (t, e) => {
t === "message" && (e ? (this._message || (this._message = n().class("ran-input-message").part("message").build(), this._message.id = `${this._inputContent.id}-message`, this._shadowDom.appendChild(this._message), this._inputContent.setAttribute("aria-describedby", this._message.id)), this._message.textContent = e) : this._message && (this._inputContent.removeAttribute("aria-describedby"), this._message.remove(), this._message = void 0));
};
listenNumericConstraint = (t, e) => {
(t === "min" || t === "max" || t === "step") && this._inputContent && (this.type === "number" && e != null ? this._inputContent.setAttribute(t, e) : this._inputContent.removeAttribute(t));
};
listenRequired = (t, e) => {
t === "required" && this._inputContent && (e != null ? this._inputContent.setAttribute("required", "") : this._inputContent.removeAttribute("required"), this._updateValidity());
};
listenDisabled = (t, e) => {
t === "disabled" && this._input && (r.includes(e) ? this._input.removeAttribute("disabled") : (this._input.setAttribute("disabled", ""), this._inputContent.setAttribute("disabled", "")), this._updateValidity());
};
listenIcon = (t, e, i) => {
t === "icon" && e && e !== i && (this.removeAttribute("label"), this.setAttribute("icon", e), this.dealIcon());
};
dealIcon = () => {
this._icon || (this._icon = o("r-icon").class("ran-icon").build(), this._inputContent.insertAdjacentElement("beforebegin", this._icon)), this.icon && this._icon.setAttribute("name", this.icon);
};
listenEvent = (t, e, i) => {
this.listenPlaceholder(t, i), this.listenLabel(t, i), this.listenStatus(t, i), this.listenMessage(t, i), this.listenNumericConstraint(t, i), this.listenRequired(t, i), this.listenDisabled(t, i), this.listenIcon(t, i, e), t === "value" && e !== i && (this._inputContent.value = i, this._input.setAttribute("value", i));
};
connectedCallback() {
this.handlerExternalCss(), this._defaultValueCaptured || (this._defaultValue = this.value, this._defaultValueCaptured = !0), this.value && (this._inputContent.value = this.value, this._input.setAttribute("value", this.value)), this._internals?.setFormValue?.(this.value), this.status && this._input.setAttribute("status", this.status), this.message && this.listenMessage("message", this.message), a(this) && (this._input.setAttribute("disabled", ""), this._inputContent.setAttribute("disabled", "")), this.type && this._inputContent.setAttribute("type", this.type), this.type === "number" && (this.min && this._inputContent.setAttribute("min", this.min), this.max && this._inputContent.setAttribute("max", this.max), this.step && this._inputContent.setAttribute("step", this.step)), this.required && this._inputContent.setAttribute("required", ""), this._updateValidity(), this._events.on(this._inputContent, "input", this.customInput), this._events.on(this._inputContent, "change", this.customChange), this._events.on(this._inputContent, "keydown", this.customKeydown), document.readyState === "complete" && this.dealIcon();
}
disconnectedCallback() {
this._events.abort();
}
attributeChangedCallback(t, e, i) {
e !== i && (this.listenEvent(t, e, i), t === "sheet" && this.handlerExternalCss());
}
};
m("r-input", y);
export {
y as t
};