JezK

Edit File: sc-form-control_2.entry.js

import { r as registerInstance, h, a as getElement, c as createEvent, H as Host } from './index-25e5af33.js'; import { i as isRtl } from './page-align-0cdacf32.js'; import { F as FormSubmitController } from './form-data-76641f16.js'; const scFormControlCss = ":host{display:block}.form-control{font-family:var(--sc-font-sans);font-size:var(--sc-font-size-medium);font-weight:var(--sc-font-weight-normal);display:flex;flex-direction:column;gap:var(--sc-input-label-margin)}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control--has-label .form-control__label{display:inline-block;color:var(--sc-input-label-color);font-weight:var(--sc-input-label-font-weight);text-transform:var(--sc-input-label-text-transform, none);letter-spacing:var(--sc-input-label-letter-spacing, 0)}.form-control--has-label.form-control--small .form-control__label{font-size:var(--sc-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--sc-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--sc-input-label-font-size-large)}::slotted(.control--errors){margin-top:var(--sc-spacing-small);color:var(--sc-color-danger-500)}::slotted([slot=label-end]){float:right}.form-control--is-required .required{color:var(--sc-color-danger-500)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--sc-input-help-text-color)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--sc-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--sc-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--sc-input-help-text-font-size-large)}.form-control--has-error .form-control__error-text{display:block;color:var(--sc-input-error-text-color)}.form-control--has-error.form-control--small .form-control__error-text{font-size:var(--sc-input-error-text-font-size-small)}.form-control--has-error.form-control--medium .form-control__error-text{font-size:var(--sc-input-error-text-font-size-medium)}.form-control--has-error.form-control--large .form-control__error-text{font-size:var(--sc-input-error-text-font-size-large)}.form-control--has-error ::part(base){border-color:rgb(var(--sl-color-danger-500))}.form-control--is-rtl.form-control--has-label .form-control__label{text-align:right}"; const ScFormControlStyle0 = scFormControlCss; const ScFormControl = class { constructor(hostRef) { registerInstance(this, hostRef); this.size = 'medium'; this.name = undefined; this.showLabel = true; this.label = undefined; this.labelId = undefined; this.inputId = undefined; this.required = false; this.help = undefined; this.helpId = undefined; } render() { return (h("div", { key: '7cc653d32ae4b95fad41f6e0fe8d3e51bf2991a6', part: "form-control", class: { 'form-control': true, 'form-control--small': this.size === 'small', 'form-control--medium': this.size === 'medium', 'form-control--large': this.size === 'large', 'form-control--has-label': !!this.label && this.showLabel, 'form-control--has-help-text': !!this.help, 'form-control--is-required': !!this.required, 'form-control--is-rtl': isRtl(), } }, h("label", { key: '5cfb4310d3bf9dc0e9951e0b9f796d4359292234', part: "label", id: this.labelId, class: "form-control__label", htmlFor: this.inputId, "aria-hidden": !!this.label ? 'false' : 'true' }, h("slot", { key: '8d419e0fa37a30887b650bf76a78d7720711e5fe', name: "label" }, this.label), h("slot", { key: 'a9603557631f9f99f858bffe1464f6955f8b454a', name: "label-end" }), !!this.required && (h("span", { key: 'b27a00aee94c00e953bae7634619fe9765928396', "aria-hidden": "true", class: "required" }, ' ', "*")), h("sc-visually-hidden", { key: '4a8d0f9297a738e95788e8be9dc03a565e9b6997' }, !!this.required ? wp.i18n.__('required', 'surecart') : '')), h("div", { key: '93e0e991da63e52a9079ff076a75c18cf5ecbde7', part: "input", class: "form-control__input" }, h("slot", { key: 'f737923462655a830b10254446e6ac26fe5d17e1' })), this.help && (h("div", { key: '397a92ad1f6fe067ef6552c81cd954d27e122488', part: "help-text", id: this.helpId, class: "form-control__help-text" }, h("slot", { key: 'c7778d7f76a5e9126d747b342ec03b55130509e1', name: "help-text" }, this.help))))); } get el() { return getElement(this); } }; ScFormControl.style = ScFormControlStyle0; const scInputCss = ":host{--focus-ring:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);display:block;position:relative}.input__control[type=number]{-moz-appearance:textfield}.input__control::-webkit-outer-spin-button,.input__control::-webkit-inner-spin-button{-webkit-appearance:none}.input{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:start;position:relative;width:100%;box-sizing:border-box;font-family:var(--sc-input-font-family);font-weight:var(--sc-input-font-weight);letter-spacing:var(--sc-input-letter-spacing);background-color:var(--sc-input-background-color);border:solid 1px var(--sc-input-border-color, var(--sc-input-border));vertical-align:middle;box-shadow:var(--sc-input-box-shadow);transition:var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) border, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow;cursor:var(--sc-input-cursor, text)}.input:hover:not(.input--disabled){background-color:var(--sc-input-background-color-hover);border-color:var(--sc-input-border-color-hover);z-index:7}.input:hover:not(.input--disabled) .input__control{color:var(--sc-input-color-hover)}.input.input--focused:not(.input--disabled){background-color:var(--sc-input-background-color-focus);border-color:var(--sc-input-border-color-focus);box-shadow:var(--focus-ring);z-index:8}.input.input--focused:not(.input--disabled) .input__control{color:var(--sc-input-color-focus)}.input.input--disabled{background-color:var(--sc-input-background-color-disabled);border-color:var(--sc-input-border-color-disabled);opacity:0.5;cursor:not-allowed}.input.input--disabled .input__control{color:var(--sc-input-color-disabled)}.input.input--disabled .input__control::placeholder{color:var(--sc-input-placeholder-color-disabled)}.input__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;min-width:0;height:100%;color:var(--sc-input-color);border:none;background:none;box-shadow:none;padding:0;margin:0;cursor:inherit;-webkit-appearance:none;box-sizing:border-box;width:100%}.input__control::-webkit-search-decoration,.input__control::-webkit-search-cancel-button,.input__control::-webkit-search-results-button,.input__control::-webkit-search-results-decoration{-webkit-appearance:none}.input__control:-webkit-autofill,.input__control:-webkit-autofill:hover,.input__control:-webkit-autofill:focus,.input__control:-webkit-autofill:active{box-shadow:0 0 0 var(--sc-input-height-large) var(--sc-input-background-color-hover) inset !important;-webkit-text-fill-color:var(--sc-input-color)}.input__control::placeholder{color:var(--sc-input-placeholder-color);user-select:none}.input__control:focus{outline:none}.input__prefix,.input__suffix{display:inline-flex;flex:0 0 auto;align-items:center;color:var(--sc-input-color);cursor:default}.input__prefix ::slotted(sc-icon),.input__suffix ::slotted(sc-icon){color:var(--sc-input-icon-color)}.input--small{border-radius:var(--sc-input-border-radius-small);font-size:var(--sc-input-font-size-small);height:var(--sc-input-height-small)}.input--small .input__control{height:calc(var(--sc-input-height-small) - var(--sc-input-border-width) * 2);padding:0 var(--sc-input-spacing-small)}.input--small .input__clear,.input--small .input__password-toggle{margin-right:var(--sc-input-spacing-small)}.input--small .input__prefix ::slotted(*){margin-left:var(--sc-input-spacing-small)}.input--small .input__suffix ::slotted(*){margin-right:var(--sc-input-spacing-small)}.input--small .input__suffix ::slotted(sc-dropdown){margin:0}.input--medium{border-radius:var(--sc-input-border-radius-medium);font-size:var(--sc-input-font-size-medium);height:var(--sc-input-height-medium)}.input--medium .input__control{height:calc(var(--sc-input-height-medium) - var(--sc-input-border-width) * 2);padding:0 var(--sc-input-spacing-medium)}.input--medium .input__clear,.input--medium .input__password-toggle{margin-right:var(--sc-input-spacing-medium)}.input--medium .input__prefix ::slotted(*){margin-left:var(--sc-input-spacing-medium) !important}.input--medium .input__suffix ::slotted(:not(sc-button[size=medium]):not(sc-button[size=small])){margin-right:var(--sc-input-spacing-medium) !important}.input--medium .input__suffix ::slotted(sc-tag),.input--medium .input__suffix ::slotted(sc-button[size=small]){line-height:1;margin-right:var(--sc-input-spacing-small) !important}.input--medium .input__suffix ::slotted(sc-dropdown){margin:3px}.input--large{border-radius:var(--sc-input-border-radius-large);font-size:var(--sc-input-font-size-large);height:var(--sc-input-height-large)}.input--large .input__control{height:calc(var(--sc-input-height-large) - var(--sc-input-border-width) * 2);padding:0 var(--sc-input-spacing-large)}.input--large .input__clear,.input--large .input__password-toggle{margin-right:var(--sc-input-spacing-large)}.input--large .input__prefix ::slotted(*){margin-left:var(--sc-input-spacing-large)}.input--large .input__suffix ::slotted(*){margin-right:var(--sc-input-spacing-large)}.input--large .input__suffix ::slotted(sc-dropdown){margin:3px}.input--pill.input--small{border-radius:var(--sc-input-height-small)}.input--pill.input--medium{border-radius:var(--sc-input-height-medium)}.input--pill.input--large{border-radius:var(--sc-input-height-large)}.input__clear,.input__password-toggle{display:inline-flex;align-items:center;font-size:inherit;color:var(--sc-input-icon-color);border:none;background:none;padding:0;transition:var(--sc-input-transition, var(--sc-transition-medium)) color;cursor:pointer}.input__clear:hover,.input__password-toggle:hover{color:var(--sc-input-icon-color-hover)}.input__clear:focus,.input__password-toggle:focus{outline:none}.input--empty .input__clear{visibility:hidden}.input--squared{border-radius:0}.input--squared-top{border-top-left-radius:0;border-top-right-radius:0}.input--squared-bottom{border-bottom-left-radius:0;border-bottom-right-radius:0}.input--squared-left{border-top-left-radius:0;border-bottom-left-radius:0}.input--squared-right{border-top-right-radius:0;border-bottom-right-radius:0}"; const ScInputStyle0 = scInputCss; let id = 0; const ScInput = class { constructor(hostRef) { registerInstance(this, hostRef); this.scChange = createEvent(this, "scChange", 7); this.scClear = createEvent(this, "scClear", 7); this.scInput = createEvent(this, "scInput", 7); this.scFocus = createEvent(this, "scFocus", 7); this.scBlur = createEvent(this, "scBlur", 7); this.inputId = `input-${++id}`; this.helpId = `input-help-text-${id}`; this.labelId = `input-label-${id}`; this.squared = undefined; this.squaredBottom = undefined; this.squaredTop = undefined; this.squaredLeft = undefined; this.squaredRight = undefined; this.hidden = false; this.type = 'text'; this.size = 'medium'; this.name = undefined; this.value = ''; this.pill = false; this.label = undefined; this.showLabel = true; this.help = ''; this.clearable = false; this.togglePassword = false; this.placeholder = undefined; this.disabled = false; this.readonly = false; this.minlength = undefined; this.maxlength = undefined; this.min = undefined; this.max = undefined; this.step = undefined; this.pattern = undefined; this.customValidity = undefined; this.required = false; this.invalid = false; this.autocorrect = undefined; this.autocomplete = undefined; this.autofocus = undefined; this.spellcheck = undefined; this.inputmode = undefined; this.hasFocus = undefined; this.isPasswordVisible = false; } async reportValidity() { return this.input.reportValidity(); } // An invalid pattern breaks validation for the whole field, so only use it if it compiles. validPattern() { if (!this.pattern) { return undefined; } // Use the same regex flag the browser uses for the `pattern` attribute. const flag = 'unicodeSets' in RegExp.prototype ? 'v' : 'u'; try { // `.source` is read so the build doesn't strip this check as unused. return new RegExp(`^(?:${this.pattern})$`, flag).source ? this.pattern : undefined; } catch { return undefined; } } /** Sets focus on the input. */ async triggerFocus(options) { return this.input.focus(options); } /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */ async setCustomValidity(message) { this.input.setCustomValidity(message); this.invalid = !this.input.checkValidity(); } /** Removes focus from the input. */ async triggerBlur() { return this.input.blur(); } /** Prevent mouse scroll wheel from modifying input value */ handleWheel() { var _a; if (this.type === 'number') { (_a = this.input) === null || _a === void 0 ? void 0 : _a.blur(); } } /** Selects all the text in the input. */ select() { return this.input.select(); } handleBlur() { this.hasFocus = false; this.scBlur.emit(); } handleFocus() { this.hasFocus = true; this.scFocus.emit(); } handleChange() { this.value = this.input.value; this.scChange.emit(); } handleInput() { this.value = this.input.value; // Clear custom validity so browser can re-validate. this.input.setCustomValidity(''); this.scInput.emit(); } handleInvalid() { // Only show custom validity message for pattern mismatch, not for required/empty fields. if (this.customValidity && this.input.validity.patternMismatch) { this.input.setCustomValidity(this.customValidity); } else { // this is needed if the user switches from a country with a regex to one without. // we want to clear out the custom validity so it does not persist. this.input.setCustomValidity(''); } } handleClearClick(event) { this.value = ''; this.scClear.emit(); this.scInput.emit(); this.scChange.emit(); this.input.focus(); event.stopPropagation(); } handlePasswordToggle() { this.isPasswordVisible = !this.isPasswordVisible; } handleFocusChange() { setTimeout(() => { this.hasFocus && this.input ? this.input.focus() : this.input.blur(); }, 0); } handleValueChange() { if (this.input) { this.invalid = !this.input.checkValidity(); } } componentDidLoad() { this.formController = new FormSubmitController(this.el).addFormData(); this.handleFocusChange(); } disconnectedCallback() { var _a; (_a = this.formController) === null || _a === void 0 ? void 0 : _a.removeFormData(); } render() { var _a; return (h(Host, { key: '7cf9127e65191dae30f4de13b1921e0c6782f392', hidden: this.hidden }, h("sc-form-control", { key: 'cbe94938682592dc87d2bc1fa4b8b2863e7fa515', exportparts: "label, help-text, form-control", size: this.size, required: this.required, label: this.label, showLabel: this.showLabel, help: this.help, inputId: this.inputId, helpId: this.helpId, labelId: this.labelId, name: this.name }, h("slot", { key: 'df90f3cda88a9f7b864636525bfb06d0d08d1549', name: "label-end", slot: "label-end" }), h("div", { key: '1bc4f53d3fb318ad622796b32f4447f11bb43944', part: "base", class: { 'input': true, // Sizes 'input--small': this.size === 'small', 'input--medium': this.size === 'medium', 'input--large': this.size === 'large', // States 'input--focused': this.hasFocus, 'input--invalid': this.invalid, 'input--disabled': this.disabled, 'input--squared': this.squared, 'input--squared-bottom': this.squaredBottom, 'input--squared-top': this.squaredTop, 'input--squared-left': this.squaredLeft, 'input--squared-right': this.squaredRight, } }, h("span", { key: '17bfd384f85798d9d7660261ebe56dbe48a7848c', part: "prefix", class: "input__prefix" }, h("slot", { key: '64bd912bf0e2382c0de30e06ad9db99528e74ee3', name: "prefix" })), h("slot", { key: 'a9393099a5bd89f6083d1d8d61cec2aef438898d' }, h("input", { key: '807591a580773108310a75f3e4502118da056210', part: "input", id: this.inputId, class: "input__control", ref: el => (this.input = el), type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, minlength: this.minlength, maxlength: this.maxlength, min: this.min, max: this.max, step: this.step, // TODO: Test These below autocomplete: this.autocomplete, autocorrect: this.autocorrect, autofocus: this.autofocus, spellcheck: this.spellcheck, pattern: this.validPattern(), inputmode: this.inputmode, "aria-label": this.label, "aria-labelledby": this.labelId, "aria-invalid": this.invalid ? true : false, value: this.value, onChange: () => this.handleChange(), onInput: () => this.handleInput(), onInvalid: () => this.handleInvalid(), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur(), onKeyDown: e => { // Only stop propagation on keys that are not handled by the browser if (!['Enter', 'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Tab'].includes(e.key)) { e.stopPropagation(); } } })), h("span", { key: '5525dc9d027503d39e683ce6aedebf02870a40bc', part: "suffix", class: "input__suffix" }, h("slot", { key: '9a153bff727977715387c44c0288b1fcc173a0b5', name: "suffix" })), this.clearable && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("button", { key: '9211ed54e06ed08bbb64a2483d932df801724d5b', part: "clear-button", class: "input__clear", type: "button", onClick: e => this.handleClearClick(e), tabindex: "-1" }, h("slot", { key: '274e5fe48f12c1262391d06ac36b94e11faf62e1', name: "clear-icon" }, h("svg", { key: '5834a1540b17cf0782b3629decb7f7980c1854ac', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "feather feather-x" }, h("line", { key: '6c45d75942069af63cde82dca005eb7a7a40ce8f', x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { key: '735a4a287e284d7596f55e731dbe845019e7ea56', x1: "6", y1: "6", x2: "18", y2: "18" }))))))))); } get el() { return getElement(this); } static get watchers() { return { "hasFocus": ["handleFocusChange"], "value": ["handleValueChange"] }; } }; ScInput.style = ScInputStyle0; export { ScFormControl as sc_form_control, ScInput as sc_input }; //# sourceMappingURL=sc-form-control_2.entry.js.map