{"version":3,"sources":["webpack:///./node_modules/@aws-amplify/ui-components/dist/esm-es5/amplify-form-field_4.entry.js"],"names":["amplifyFormFieldCss","AmplifyFormField","hostRef","this","type","required","placeholder","prototype","render","class","label","htmlFor","fieldId","description","id","name","handleInputChange","value","inputProps","disabled","hint","style","amplifyHintCss","AmplifyHint","amplifyInputCss","AmplifyInput","autoCompleted","setAutoCompleteValue","input","el","querySelector","dispatchEvent","Event","checkAutoCompletion","targetInput","_this","addEventListener","e","target","disconnectedCallback","removeHubListener","componentWillLoad","componentDidLoad","test","navigator","userAgent","container","signIn","username","password","Object","assign","onInput","event","defineProperty","get","enumerable","configurable","amplifyLabelCss","AmplifyLabel"],"mappings":"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","file":"js/chunk-2d22dbc9.648f0502.js","sourcesContent":["import { r as registerInstance, h, H as Host, g as getElement } from './index-83f2275b.js';\nimport '@aws-amplify/core';\nimport './auth-types-78df304e.js';\nimport '@aws-amplify/auth';\nimport './Translations-108d469f.js';\nimport './constants-c8ecaa24.js';\nimport { e as closestElement, o as onAuthUIStateChange } from './helpers-14fcb50c.js';\nvar amplifyFormFieldCss = \"amplify-form-field{--label-font-size:var(--amplify-text-md);--description-font-size:var(--amplify-text-sm)}.form-field{margin-bottom:15px}.form-field-label{display:block;font-size:var(--label-font-size);padding-bottom:0.5em}.form-field-description{font-size:var(--description-font-size);padding-top:0.5em}\";\nvar AmplifyFormField = /** @class */ (function () {\n    function AmplifyFormField(hostRef) {\n        registerInstance(this, hostRef);\n        /** The input type.  Can be any HTML input type. */\n        this.type = 'text';\n        /** The required flag in order to make an input required prior to submitting a form */\n        this.required = false;\n        /** (Optional) The placeholder for the input element.  Using hints is recommended, but placeholders can also be useful to convey information to users. */\n        this.placeholder = '';\n    }\n    AmplifyFormField.prototype.render = function () {\n        return (h(\"div\", { class: \"form-field\" }, this.label && (h(\"div\", { class: \"form-field-label\" }, h(\"amplify-label\", { htmlFor: this.fieldId }, this.label))), this.description && (h(\"div\", { id: this.fieldId + \"-description\", class: \"form-field-description\", \"data-test\": \"form-field-description\" }, this.description)), h(\"div\", null, h(\"slot\", { name: \"input\" }, h(\"amplify-input\", { fieldId: this.fieldId, description: this.description, type: this.type, handleInputChange: this.handleInputChange, placeholder: this.placeholder, name: this.name, value: this.value, inputProps: this.inputProps, disabled: this.disabled, required: this.required }))), this.hint && (h(\"amplify-hint\", { id: this.fieldId + \"-hint\" }, this.hint))));\n    };\n    return AmplifyFormField;\n}());\nAmplifyFormField.style = amplifyFormFieldCss;\nvar amplifyHintCss = \":host{--color:var(--amplify-grey);--font-family:var(--amplify-font-family);--font-size:var(--amplify-text-xs);--font-weight:var(--amplify-font-weight)}.hint{color:var(--color);font-family:var(--font-family);font-weight:var(--font-weight);font-size:var(--font-size);margin-bottom:2.625rem}\";\nvar AmplifyHint = /** @class */ (function () {\n    function AmplifyHint(hostRef) {\n        registerInstance(this, hostRef);\n    }\n    AmplifyHint.prototype.render = function () {\n        return (h(\"div\", { class: \"hint\" }, h(\"slot\", null)));\n    };\n    return AmplifyHint;\n}());\nAmplifyHint.style = amplifyHintCss;\nvar amplifyInputCss = \"amplify-input{--color:var(--amplify-secondary-color);--background-color:var(--amplify-secondary-contrast);--border-color:var(--amplify-light-grey);--border-color-focus:var(--amplify-primary-color);--border:1px solid var(--border-color);--margin:0 0 0.625rem 0}[data-autocompleted]{background-color:#e8f0fe !important}.input-host{width:100%}.input{display:block;width:100%;padding:1rem;font-size:var(--amplify-text-sm);color:var(--color);background-color:var(--background-color);background-image:none;border:var(--border);border-radius:3px;-webkit-box-sizing:border-box;box-sizing:border-box;margin:var(--margin);height:3.125rem;line-height:1.1;-webkit-box-shadow:none;box-shadow:none}.input:focus{outline:none;border-color:var(--border-color-focus)}.input:disabled{opacity:0.5}\";\nvar AmplifyInput = /** @class */ (function () {\n    function AmplifyInput(hostRef) {\n        registerInstance(this, hostRef);\n        /** The input type.  Can be any HTML input type. */\n        this.type = 'text';\n        /** The callback, called when the input is modified by the user. */\n        this.handleInputChange = function () { return void 0; };\n        /** (Optional) The placeholder for the input element.  Using hints is recommended, but placeholders can also be useful to convey information to users. */\n        this.placeholder = '';\n        /** Whether the input is a required field */\n        this.required = false;\n        /** Whether the input has been autocompleted */\n        this.autoCompleted = false;\n    }\n    /**\n     * Sets the value of this input to the value in autofill input event.\n     */\n    AmplifyInput.prototype.setAutoCompleteValue = function (value) {\n        var input = this.el.querySelector('input');\n        if (!input)\n            return;\n        input.value = value;\n        // dispatch an input event from this element to the parent form\n        input.dispatchEvent(new Event('input'));\n        this.autoCompleted = true;\n    };\n    /**\n     * Checks if the target dummy input in `amplify-auth-container` is present have been autofilled.\n     * If so, we update this.value with the autofilled value.\n     */\n    AmplifyInput.prototype.checkAutoCompletion = function (targetInput) {\n        var _this = this;\n        if (!targetInput)\n            return;\n        if (targetInput.value) {\n            // if value is already set, we set the value directly\n            this.setAutoCompleteValue(targetInput.value);\n        }\n        else {\n            // if value is not set, we start listening for it\n            targetInput.addEventListener('input', function (e) {\n                var value = e.target.value;\n                _this.setAutoCompleteValue(value);\n            });\n        }\n    };\n    AmplifyInput.prototype.disconnectedCallback = function () {\n        this.removeHubListener && this.removeHubListener(); // stop listening to `onAuthUIStateChange`\n    };\n    AmplifyInput.prototype.componentWillLoad = function () {\n        var _this = this;\n        // the below behaviors are only applicable if `amplify-input` is used by `amplify-authenticator`.\n        if (!closestElement('amplify-authenticator', this.el))\n            return;\n        this.removeHubListener = onAuthUIStateChange(function () {\n            /**\n             * When we're using slots, autofilled data will persist between different authState,\n             * even though input events are not triggered. This ends up in parent components\n             * not picking up input values. For now, we're emptying the input on authState change\n             * which is the existing behavior.\n             */\n            var input = _this.el.querySelector('input');\n            if (input)\n                input.value = '';\n            _this.autoCompleted = false;\n        });\n    };\n    AmplifyInput.prototype.componentDidLoad = function () {\n        // no-op if this field already has been autofilled or already has an value\n        if (this.autoCompleted || this.value)\n            return;\n        if (/Firefox/.test(navigator.userAgent))\n            return; // firefox autofill works\n        var container = closestElement('amplify-auth-container', this.el);\n        var signIn = closestElement('amplify-sign-in', this.el);\n        // only autocomplete if `amplify-auth-container` is present and input is under `sign-in`.\n        if (!container || !signIn)\n            return;\n        var username = container.querySelector(\"input[name='username']\");\n        var password = container.querySelector(\"input[name='password']\");\n        if (this.name === 'username' ||\n            this.name === 'email' ||\n            this.name === 'phone') {\n            this.checkAutoCompletion(username);\n        }\n        else if (this.name === 'password') {\n            this.checkAutoCompletion(password);\n        }\n    };\n    AmplifyInput.prototype.render = function () {\n        var _this = this;\n        return (h(Host, { class: \"input-host\" }, h(\"input\", Object.assign({ id: this.fieldId, \"aria-describedby\": this.fieldId && this.description\n                ? this.fieldId + \"-description\"\n                : null, \"data-autocompleted\": this.autoCompleted, type: this.type, onInput: function (event) {\n                _this.autoCompleted = false;\n                _this.handleInputChange(event);\n            }, placeholder: this.placeholder, name: this.name, class: \"input\", value: this.value, disabled: this.disabled, required: this.required }, this.inputProps))));\n    };\n    Object.defineProperty(AmplifyInput.prototype, \"el\", {\n        get: function () { return getElement(this); },\n        enumerable: false,\n        configurable: true\n    });\n    return AmplifyInput;\n}());\nAmplifyInput.style = amplifyInputCss;\nvar amplifyLabelCss = \":host{--label-color:var(--amplify-secondary-color)}.label{color:var(--label-color);font-size:var(--amplify-text-sm);margin-bottom:16px}\";\nvar AmplifyLabel = /** @class */ (function () {\n    function AmplifyLabel(hostRef) {\n        registerInstance(this, hostRef);\n    }\n    AmplifyLabel.prototype.render = function () {\n        return (h(\"label\", { class: \"label\", htmlFor: this.htmlFor }, h(\"slot\", null)));\n    };\n    return AmplifyLabel;\n}());\nAmplifyLabel.style = amplifyLabelCss;\nexport { AmplifyFormField as amplify_form_field, AmplifyHint as amplify_hint, AmplifyInput as amplify_input, AmplifyLabel as amplify_label };\n"],"sourceRoot":""}