@ebay/ebayui-core
Version:
Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.
57 lines (56 loc) • 2.15 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const makeup_floating_label_1 = __importDefault(require("makeup-floating-label"));
class Textbox {
onMount() {
this._setupMakeup();
}
onUpdate() {
this._setupMakeup();
}
focus() {
this.getEl("input").focus();
}
/** Can be removed after `:has` is fully supported */
onFocus(e, el) {
var _a;
this.forwardEvent("focus", e, el);
(_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add("textbox--focus");
}
/** Can be removed after `:has` is fully supported */
onBlur(e, el) {
var _a;
this.forwardEvent("blur", e, el);
(_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.classList.remove("textbox--focus");
}
_setupMakeup() {
// TODO: makeup-floating-label should be updated so that we can remove the event listeners.
// It probably makes more sense to just move this functionality into Marko though.
if (this.input.floatingLabel && !this.input.floatingLabelStatic) {
if (this._floatingLabel) {
this._floatingLabel.refresh();
this.emit("floating-label-init");
}
else if (document.readyState === "complete") {
if (this.el) {
this._floatingLabel = new makeup_floating_label_1.default(this.el);
this.emit("floating-label-init");
}
}
else {
this.subscribeTo(window).once("load", this._setupMakeup.bind(this));
}
}
}
forwardEvent(eventName, originalEvent, el) {
var _a, _b;
this.emit(eventName, {
originalEvent,
value: (_b = (el || ((_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector("input, textarea")))) === null || _b === void 0 ? void 0 : _b.value,
});
}
}
module.exports = Textbox;