JezK

Edit File: sc-form-control2.js.map

{"file":"sc-form-control2.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,8sEAA8sE,CAAC;AACxuE,4BAAe,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;6mBCsEkB,UAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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"],"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"],"version":3}