JezK

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

{"file":"sc-form-control.sc-input.entry.js","mappings":"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","names":[],"sources":["src/components/ui/form-control/sc-form-control.scss?tag=sc-form-control&encapsulation=shadow","src/components/ui/form-control/sc-form-control.tsx","src/components/ui/input/sc-input.scss?tag=sc-input&encapsulation=shadow","src/components/ui/input/sc-input.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.form-control {\n font-family: var(--sc-font-sans);\n font-size: var(--sc-font-size-medium);\n font-weight: var(--sc-font-weight-normal);\n display: flex;\n flex-direction: column;\n gap: var(--sc-input-label-margin);\n\n .form-control__label {\n display: none;\n }\n\n .form-control__help-text {\n display: none;\n }\n}\n\n// Label\n.form-control--has-label {\n .form-control__label {\n display: inline-block;\n color: var(--sc-input-label-color);\n font-weight: var(--sc-input-label-font-weight);\n text-transform: var(--sc-input-label-text-transform, none);\n letter-spacing: var(--sc-input-label-letter-spacing, 0);\n }\n\n &.form-control--small .form-control__label {\n font-size: var(--sc-input-label-font-size-small);\n }\n\n &.form-control--medium .form-control__label {\n font-size: var(--sc-input-label-font-size-medium);\n }\n\n &.form-control--large .form-control_label {\n font-size: var(--sc-input-label-font-size-large);\n }\n}\n\n::slotted(.control--errors) {\n margin-top: var(--sc-spacing-small);\n color: var(--sc-color-danger-500);\n}\n::slotted([slot='label-end']) {\n float: right;\n}\n\n.form-control--is-required .required {\n color: var(--sc-color-danger-500);\n}\n\n// Help text\n.form-control--has-help-text {\n .form-control__help-text {\n display: block;\n color: var(--sc-input-help-text-color);\n }\n\n &.form-control--small .form-control__help-text {\n font-size: var(--sc-input-help-text-font-size-small);\n }\n\n &.form-control--medium .form-control__help-text {\n font-size: var(--sc-input-help-text-font-size-medium);\n }\n\n &.form-control--large .form-control__help-text {\n font-size: var(--sc-input-help-text-font-size-large);\n }\n}\n\n// Error messages\n.form-control--has-error {\n .form-control__error-text {\n display: block;\n color: var(--sc-input-error-text-color);\n }\n\n &.form-control--small .form-control__error-text {\n font-size: var(--sc-input-error-text-font-size-small);\n }\n\n &.form-control--medium .form-control__error-text {\n font-size: var(--sc-input-error-text-font-size-medium);\n }\n\n &.form-control--large .form-control__error-text {\n font-size: var(--sc-input-error-text-font-size-large);\n }\n\n ::part(base) {\n border-color: rgb(var(--sl-color-danger-500));\n }\n}\n\n.form-control--is-rtl {\n &.form-control--has-label {\n .form-control__label {\n text-align: right;\n }\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\nimport { isRtl } from '../../../functions/page-align';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * @part form-control - The elements base wrapper.\n * @part label - The label.\n * @part input - The input wrapper.\n * @part help-text - Help text.\n * @part tooltip - Tooltip\n * @part tooltip-text - Tooltip text.\n */\n@Component({\n tag: 'sc-form-control',\n styleUrl: 'sc-form-control.scss',\n shadow: true,\n})\nexport class ScFormControl {\n @Element() el: HTMLScFormControlElement;\n\n /** Size of the label */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** Name for the input. Used for validation errors. */\n @Prop() name: string;\n\n /** Show the label. */\n @Prop() showLabel: boolean = true;\n\n /** Input label. */\n @Prop() label: string;\n\n /** Input label id. */\n @Prop() labelId: string;\n\n /** Input id. */\n @Prop() inputId: string;\n\n /** Whether the input is required. */\n @Prop() required: boolean = false;\n\n /** Help text */\n @Prop() help: string;\n\n /** Help id */\n @Prop() helpId: string;\n\n render() {\n return (\n <div\n part=\"form-control\"\n class={{\n 'form-control': true,\n 'form-control--small': this.size === 'small',\n 'form-control--medium': this.size === 'medium',\n 'form-control--large': this.size === 'large',\n 'form-control--has-label': !!this.label && this.showLabel,\n 'form-control--has-help-text': !!this.help,\n 'form-control--is-required': !!this.required,\n 'form-control--is-rtl': isRtl(),\n }}\n >\n <label part=\"label\" id={this.labelId} class=\"form-control__label\" htmlFor={this.inputId} aria-hidden={!!this.label ? 'false' : 'true'}>\n <slot name=\"label\">{this.label}</slot>\n <slot name=\"label-end\"></slot>\n {!!this.required && (\n <span aria-hidden=\"true\" class=\"required\">\n {' '}\n *\n </span>\n )}\n <sc-visually-hidden>{!!this.required ? __('required', 'surecart') : ''}</sc-visually-hidden>\n </label>\n <div part=\"input\" class=\"form-control__input\">\n <slot />\n </div>\n {this.help && (\n <div part=\"help-text\" id={this.helpId} class=\"form-control__help-text\">\n <slot name=\"help-text\">{this.help}</slot>\n </div>\n )}\n </div>\n );\n }\n}\n","/**\n * @prop --focus-ring: The focus ring style to use when the control receives focus, a `box-shadow` property.\n */\n:host {\n --focus-ring: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);\n display: block;\n position: relative;\n}\n\n.input__control[type='number'] {\n -moz-appearance: textfield;\n}\n\n.input__control::-webkit-outer-spin-button,\n.input__control::-webkit-inner-spin-button {\n -webkit-appearance: none;\n}\n\n.input {\n flex: 1 1 auto;\n display: inline-flex;\n align-items: center;\n justify-content: start;\n position: relative;\n width: 100%;\n box-sizing: border-box;\n font-family: var(--sc-input-font-family);\n font-weight: var(--sc-input-font-weight);\n letter-spacing: var(--sc-input-letter-spacing);\n background-color: var(--sc-input-background-color);\n border: solid 1px var(--sc-input-border-color, var(--sc-input-border));\n vertical-align: middle;\n box-shadow: var(--sc-input-box-shadow);\n transition: var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) border,\n var(--sc-input-transition, var(--sc-transition-medium)) box-shadow;\n cursor: var(--sc-input-cursor, text);\n\n &:hover:not(.input--disabled) {\n background-color: var(--sc-input-background-color-hover);\n border-color: var(--sc-input-border-color-hover);\n z-index: 7;\n\n .input__control {\n color: var(--sc-input-color-hover);\n }\n }\n\n &.input--focused:not(.input--disabled) {\n background-color: var(--sc-input-background-color-focus);\n border-color: var(--sc-input-border-color-focus);\n box-shadow: var(--focus-ring);\n z-index: 8;\n\n .input__control {\n color: var(--sc-input-color-focus);\n }\n }\n\n &.input--disabled {\n background-color: var(--sc-input-background-color-disabled);\n border-color: var(--sc-input-border-color-disabled);\n opacity: 0.5;\n cursor: not-allowed;\n\n .input__control {\n color: var(--sc-input-color-disabled);\n\n &::placeholder {\n color: var(--sc-input-placeholder-color-disabled);\n }\n }\n }\n}\n\n.input__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n min-width: 0;\n height: 100%;\n color: var(--sc-input-color);\n border: none;\n background: none;\n box-shadow: none;\n padding: 0;\n margin: 0;\n cursor: inherit;\n -webkit-appearance: none;\n box-sizing: border-box;\n width: 100%;\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n box-shadow: 0 0 0 var(--sc-input-height-large) var(--sc-input-background-color-hover) inset !important;\n -webkit-text-fill-color: var(--sc-input-color);\n }\n\n &::placeholder {\n color: var(--sc-input-placeholder-color);\n user-select: none;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.input__prefix,\n.input__suffix {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n color: var(--sc-input-color);\n cursor: default;\n\n ::slotted(sc-icon) {\n color: var(--sc-input-icon-color);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n.input--small {\n border-radius: var(--sc-input-border-radius-small);\n font-size: var(--sc-input-font-size-small);\n height: var(--sc-input-height-small);\n\n .input__control {\n height: calc(var(--sc-input-height-small) - var(--sc-input-border-width) * 2);\n padding: 0 var(--sc-input-spacing-small);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--sc-input-spacing-small);\n }\n\n .input__prefix ::slotted(*) {\n margin-left: var(--sc-input-spacing-small);\n }\n\n .input__suffix ::slotted(*) {\n margin-right: var(--sc-input-spacing-small);\n }\n\n .input__suffix ::slotted(sc-dropdown) {\n margin: 0;\n }\n}\n\n.input--medium {\n border-radius: var(--sc-input-border-radius-medium);\n font-size: var(--sc-input-font-size-medium);\n height: var(--sc-input-height-medium);\n\n .input__control {\n height: calc(var(--sc-input-height-medium) - var(--sc-input-border-width) * 2);\n padding: 0 var(--sc-input-spacing-medium);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--sc-input-spacing-medium);\n }\n\n .input__prefix ::slotted(*) {\n margin-left: var(--sc-input-spacing-medium) !important;\n }\n\n .input__suffix ::slotted(:not(sc-button[size='medium']):not(sc-button[size='small'])) {\n margin-right: var(--sc-input-spacing-medium) !important;\n }\n\n .input__suffix ::slotted(sc-tag),\n .input__suffix ::slotted(sc-button[size='small']) {\n line-height: 1;\n margin-right: var(--sc-input-spacing-small) !important;\n }\n\n .input__suffix ::slotted(sc-dropdown) {\n margin: 3px;\n }\n}\n\n.input--large {\n border-radius: var(--sc-input-border-radius-large);\n font-size: var(--sc-input-font-size-large);\n height: var(--sc-input-height-large);\n\n .input__control {\n height: calc(var(--sc-input-height-large) - var(--sc-input-border-width) * 2);\n padding: 0 var(--sc-input-spacing-large);\n }\n\n .input__clear,\n .input__password-toggle {\n margin-right: var(--sc-input-spacing-large);\n }\n\n .input__prefix ::slotted(*) {\n margin-left: var(--sc-input-spacing-large);\n }\n\n .input__suffix ::slotted(*) {\n margin-right: var(--sc-input-spacing-large);\n }\n\n .input__suffix ::slotted(sc-dropdown) {\n margin: 3px;\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input--pill {\n &.input--small {\n border-radius: var(--sc-input-height-small);\n }\n\n &.input--medium {\n border-radius: var(--sc-input-height-medium);\n }\n\n &.input--large {\n border-radius: var(--sc-input-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Clearable + Password Toggle\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.input__clear,\n.input__password-toggle {\n display: inline-flex;\n align-items: center;\n font-size: inherit;\n color: var(--sc-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--sc-input-transition, var(--sc-transition-medium)) color;\n cursor: pointer;\n\n &:hover {\n color: var(--sc-input-icon-color-hover);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.input--empty .input__clear {\n visibility: hidden;\n}\n\n.input {\n &--squared {\n border-radius: 0;\n }\n &--squared-top {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n &--squared-bottom {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n &--squared-left {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n &--squared-right {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n}\n","import { Component, Prop, State, Watch, h, Event, EventEmitter, Method, Element, Host, Listen } from '@stencil/core';\nimport { FormSubmitController } from '../../../functions/form-data';\n\nlet id = 0;\n\n/**\n * @part base - The elements base wrapper.\n * @part input - The html input element.\n * @part form-control - The form control wrapper.\n * @part label - The input label.\n * @part help-text - Help text that describes how to use the input.\n * @part prefix - Used to prepend an icon or element to the input.\n * @part suffix - Used to prepend an icon or element to the input.\n */\n@Component({\n tag: 'sc-input',\n styleUrl: 'sc-input.scss',\n shadow: true,\n})\nexport class ScInput {\n private input: HTMLInputElement;\n private inputId: string = `input-${++id}`;\n private helpId = `input-help-text-${id}`;\n private labelId = `input-label-${id}`;\n\n /** Element */\n @Element() el: HTMLScInputElement;\n\n private formController: any;\n\n @Prop() squared: boolean;\n @Prop() squaredBottom: boolean;\n @Prop() squaredTop: boolean;\n @Prop() squaredLeft: boolean;\n @Prop() squaredRight: boolean;\n\n /** Hidden */\n @Prop() hidden: boolean = false;\n\n /** The input's type. */\n @Prop({ reflect: true }) type: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'hidden' = 'text';\n\n /** The input's size. */\n @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n /** The input's name attribute. */\n @Prop({ reflect: true }) name: string;\n\n /** The input's value attribute. */\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /** Draws a pill-style input with rounded edges. */\n @Prop({ reflect: true }) pill = false;\n\n /** The input's label. */\n @Prop() label: string;\n\n /** Should we show the label */\n @Prop() showLabel: boolean = true;\n\n /** The input's help text. */\n @Prop() help: string = '';\n\n /** Adds a clear button when the input is populated. */\n @Prop() clearable = false;\n\n /** Adds a password toggle button to password inputs. */\n @Prop() togglePassword: boolean = false;\n\n /** The input's placeholder text. */\n @Prop() placeholder: string;\n\n /** Disables the input. */\n @Prop({ reflect: true, mutable: true }) disabled: boolean = false;\n\n /** Makes the input readonly. */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /** The minimum length of input that will be considered valid. */\n @Prop() minlength: number;\n\n /** The maximum length of input that will be considered valid. */\n @Prop() maxlength: number;\n\n /** The input's minimum value. */\n @Prop() min: number | string;\n\n /** The input's maximum value. */\n @Prop() max: number | string;\n\n /** The input's step attribute. */\n @Prop() step: number;\n\n /** A pattern to validate input against. */\n @Prop() pattern: string;\n\n /** Custom validation message to show when the input is invalid (replaces browser default). */\n @Prop() customValidity: string;\n\n /** Makes the input a required field. */\n @Prop({ reflect: true }) required = false;\n\n /**\n * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,\n * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.\n */\n @Prop({ mutable: true, reflect: true }) invalid = false;\n\n /** The input's autocorrect attribute. */\n @Prop() autocorrect: string;\n\n /** The input's autocomplete attribute. */\n @Prop() autocomplete: string;\n\n /** The input's autofocus attribute. */\n @Prop() autofocus: boolean;\n\n /** Enables spell checking on the input. */\n @Prop() spellcheck: boolean;\n\n /** The input's inputmode attribute. */\n @Prop() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n /** Inputs focus */\n @Prop({ mutable: true, reflect: true }) hasFocus: boolean;\n\n /** Is the password visible */\n @State() isPasswordVisible = false;\n\n /** Emitted when the control's value changes. */\n @Event({ composed: true })\n scChange: EventEmitter<void>;\n\n /** Emitted when the clear button is activated. */\n @Event() scClear: EventEmitter<void>;\n\n /** Emitted when the control receives input. */\n @Event({ cancelable: true }) scInput: EventEmitter<void>;\n\n /** Emitted when the control gains focus. */\n @Event() scFocus: EventEmitter<void>;\n\n /** Emitted when the control loses focus. */\n @Event() scBlur: EventEmitter<void>;\n\n @Method()\n async reportValidity() {\n return this.input.reportValidity();\n }\n\n // An invalid pattern breaks validation for the whole field, so only use it if it compiles.\n validPattern(): string | undefined {\n if (!this.pattern) {\n return undefined;\n }\n\n // Use the same regex flag the browser uses for the `pattern` attribute.\n const flag = 'unicodeSets' in RegExp.prototype ? 'v' : 'u';\n\n try {\n // `.source` is read so the build doesn't strip this check as unused.\n return new RegExp(`^(?:${this.pattern})$`, flag).source ? this.pattern : undefined;\n } catch {\n return undefined;\n }\n }\n\n /** Sets focus on the input. */\n @Method()\n async triggerFocus(options?: FocusOptions) {\n return this.input.focus(options);\n }\n\n /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n @Method()\n async setCustomValidity(message: string) {\n this.input.setCustomValidity(message);\n this.invalid = !this.input.checkValidity();\n }\n\n /** Removes focus from the input. */\n @Method()\n async triggerBlur() {\n return this.input.blur();\n }\n\n /** Prevent mouse scroll wheel from modifying input value */\n @Listen('wheel')\n handleWheel() {\n if (this.type === 'number') {\n this.input?.blur();\n }\n }\n\n /** Selects all the text in the input. */\n select() {\n return this.input.select();\n }\n\n handleBlur() {\n this.hasFocus = false;\n this.scBlur.emit();\n }\n\n handleFocus() {\n this.hasFocus = true;\n this.scFocus.emit();\n }\n\n handleChange() {\n this.value = this.input.value;\n this.scChange.emit();\n }\n\n handleInput() {\n this.value = this.input.value;\n // Clear custom validity so browser can re-validate.\n this.input.setCustomValidity('');\n this.scInput.emit();\n }\n\n handleInvalid() {\n // Only show custom validity message for pattern mismatch, not for required/empty fields.\n if (this.customValidity && this.input.validity.patternMismatch) {\n this.input.setCustomValidity(this.customValidity);\n } else {\n // this is needed if the user switches from a country with a regex to one without.\n // we want to clear out the custom validity so it does not persist.\n this.input.setCustomValidity('');\n }\n }\n\n handleClearClick(event: MouseEvent) {\n this.value = '';\n this.scClear.emit();\n this.scInput.emit();\n this.scChange.emit();\n this.input.focus();\n\n event.stopPropagation();\n }\n\n handlePasswordToggle() {\n this.isPasswordVisible = !this.isPasswordVisible;\n }\n\n @Watch('hasFocus')\n handleFocusChange() {\n setTimeout(() => {\n this.hasFocus && this.input ? this.input.focus() : this.input.blur();\n }, 0);\n }\n\n @Watch('value')\n handleValueChange() {\n if (this.input) {\n this.invalid = !this.input.checkValidity();\n }\n }\n\n componentDidLoad() {\n this.formController = new FormSubmitController(this.el).addFormData();\n this.handleFocusChange();\n }\n\n disconnectedCallback() {\n this.formController?.removeFormData();\n }\n\n render() {\n return (\n <Host hidden={this.hidden}>\n <sc-form-control\n exportparts=\"label, help-text, form-control\"\n size={this.size}\n required={this.required}\n label={this.label}\n showLabel={this.showLabel}\n help={this.help}\n inputId={this.inputId}\n helpId={this.helpId}\n labelId={this.labelId}\n name={this.name}\n >\n <slot name=\"label-end\" slot=\"label-end\"></slot>\n <div\n part=\"base\"\n class={{\n 'input': true,\n\n // Sizes\n 'input--small': this.size === 'small',\n 'input--medium': this.size === 'medium',\n 'input--large': this.size === 'large',\n\n // States\n 'input--focused': this.hasFocus,\n 'input--invalid': this.invalid,\n 'input--disabled': this.disabled,\n\n 'input--squared': this.squared,\n 'input--squared-bottom': this.squaredBottom,\n 'input--squared-top': this.squaredTop,\n 'input--squared-left': this.squaredLeft,\n 'input--squared-right': this.squaredRight,\n }}\n >\n <span part=\"prefix\" class=\"input__prefix\">\n <slot name=\"prefix\"></slot>\n </span>\n\n <slot>\n <input\n part=\"input\"\n id={this.inputId}\n class=\"input__control\"\n ref={el => (this.input = el as HTMLInputElement)}\n type={this.type === 'password' && this.isPasswordVisible ? 'text' : this.type}\n name={this.name}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n placeholder={this.placeholder}\n minlength={this.minlength}\n maxlength={this.maxlength}\n min={this.min}\n max={this.max}\n step={this.step}\n // TODO: Test These below\n autocomplete={this.autocomplete}\n autocorrect={this.autocorrect}\n autofocus={this.autofocus}\n spellcheck={this.spellcheck}\n pattern={this.validPattern()}\n inputmode={this.inputmode}\n aria-label={this.label}\n aria-labelledby={this.labelId}\n aria-invalid={this.invalid ? true : false}\n value={this.value}\n onChange={() => this.handleChange()}\n onInput={() => this.handleInput()}\n onInvalid={() => this.handleInvalid()}\n onFocus={() => this.handleFocus()}\n onBlur={() => this.handleBlur()}\n onKeyDown={e => {\n // Only stop propagation on keys that are not handled by the browser\n if (!['Enter', 'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Tab'].includes(e.key)) {\n e.stopPropagation();\n }\n }}\n />\n </slot>\n\n <span part=\"suffix\" class=\"input__suffix\">\n <slot name=\"suffix\"></slot>\n </span>\n\n {this.clearable && this.value?.length > 0 && (\n <button part=\"clear-button\" class=\"input__clear\" type=\"button\" onClick={e => this.handleClearClick(e)} tabindex=\"-1\">\n <slot name=\"clear-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n class=\"feather feather-x\"\n >\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </slot>\n </button>\n )}\n </div>\n </sc-form-control>\n </Host>\n );\n }\n}\n"],"version":3}