{"version":3,"sources":["webpack:///./node_modules/@aws-amplify/ui-components/dist/esm-es5/amplify-form-field_4.entry.js"],"names":[],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA2F;AAChE;AACO;AACP;AACS;AACH;AACqD;AACtF,8CAA8C,yCAAyC,+CAA+C,YAAY,mBAAmB,kBAAkB,cAAc,iCAAiC,qBAAqB,wBAAwB,uCAAuC,kBAAkB;AAC5U;AACA;AACA,QAAQ,4DAAgB;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB,4DAAC,SAAS,sBAAsB,iBAAiB,4DAAC,SAAS,4BAA4B,EAAE,4DAAC,mBAAmB,wBAAwB,sCAAsC,4DAAC,SAAS,4GAA4G,sBAAsB,4DAAC,cAAc,4DAAC,UAAU,gBAAgB,EAAE,4DAAC,mBAAmB,qQAAqQ,mBAAmB,4DAAC,kBAAkB,6BAA6B;AAC/sB;AACA;AACA,CAAC;AACD;AACA,4BAA4B,4BAA4B,yCAAyC,mCAAmC,yCAAyC,MAAM,mBAAmB,+BAA+B,+BAA+B,2BAA2B,uBAAuB;AACtT;AACA;AACA,QAAQ,4DAAgB;AACxB;AACA;AACA,gBAAgB,4DAAC,SAAS,gBAAgB,EAAE,4DAAC;AAC7C;AACA;AACA,CAAC;AACD;AACA,qCAAqC,uCAAuC,qDAAqD,yCAAyC,kDAAkD,uCAAuC,wBAAwB,qBAAqB,oCAAoC,YAAY,WAAW,OAAO,cAAc,WAAW,aAAa,iCAAiC,mBAAmB,yCAAyC,sBAAsB,qBAAqB,kBAAkB,8BAA8B,sBAAsB,qBAAqB,gBAAgB,gBAAgB,wBAAwB,gBAAgB,aAAa,aAAa,uCAAuC,gBAAgB,YAAY;AAChyB;AACA;AACA,QAAQ,4DAAgB;AACxB;AACA;AACA;AACA,8CAA8C,eAAe;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA,2DAA2D;AAC3D;AACA;AACA;AACA;AACA,aAAa,8DAAc;AAC3B;AACA,iCAAiC,8DAAmB;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB;AACnB,wBAAwB,8DAAc;AACtC,qBAAqB,8DAAc;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB,4DAAC,CAAC,oDAAI,GAAG,sBAAsB,EAAE,4DAAC,yBAAyB;AAC3E;AACA;AACA;AACA;AACA,aAAa,uIAAuI;AACpJ;AACA;AACA,0BAA0B,QAAQ,4DAAU,OAAO,EAAE;AACrD;AACA;AACA,KAAK;AACL;AACA,CAAC;AACD;AACA,6BAA6B,6CAA6C,OAAO,yBAAyB,iCAAiC,mBAAmB;AAC9J;AACA;AACA,QAAQ,4DAAgB;AACxB;AACA;AACA,gBAAgB,4DAAC,WAAW,wCAAwC,EAAE,4DAAC;AACvE;AACA;AACA,CAAC;AACD;AAC6I","file":"js/22.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":""}