@aws-amplify/ui-react 1.2.25-unstable.1 → 2.0.0

package/dist/19.js

@@ -1,267 +0,0 @@
-(this["webpackJsonpaws_amplify_react"] = this["webpackJsonpaws_amplify_react"] || []).push([[19],{
-
-/***/ "../amplify-ui-components/dist/esm-es5/amplify-form-field_4.entry.js":
-/*!***************************************************************************!*\
-  !*** ../amplify-ui-components/dist/esm-es5/amplify-form-field_4.entry.js ***!
-  \***************************************************************************/
-/*! exports provided: amplify_form_field, amplify_hint, amplify_input, amplify_label */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "amplify_form_field", function() { return AmplifyFormField; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "amplify_hint", function() { return AmplifyHint; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "amplify_input", function() { return AmplifyInput; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "amplify_label", function() { return AmplifyLabel; });
-/* harmony import */ var _index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./index-83f2275b.js */ "../amplify-ui-components/dist/esm-es5/index-83f2275b.js");
-/* harmony import */ var _aws_amplify_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @aws-amplify/core */ "@aws-amplify/core");
-/* harmony import */ var _aws_amplify_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_aws_amplify_core__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _auth_types_78df304e_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./auth-types-78df304e.js */ "../amplify-ui-components/dist/esm-es5/auth-types-78df304e.js");
-/* harmony import */ var _aws_amplify_auth__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @aws-amplify/auth */ "@aws-amplify/auth");
-/* harmony import */ var _aws_amplify_auth__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_aws_amplify_auth__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _Translations_108d469f_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./Translations-108d469f.js */ "../amplify-ui-components/dist/esm-es5/Translations-108d469f.js");
-/* harmony import */ var _constants_c8ecaa24_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./constants-c8ecaa24.js */ "../amplify-ui-components/dist/esm-es5/constants-c8ecaa24.js");
-/* harmony import */ var _helpers_14fcb50c_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./helpers-14fcb50c.js */ "../amplify-ui-components/dist/esm-es5/helpers-14fcb50c.js");
-
-
-
-
-
-
-
-var 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}";
-
-var AmplifyFormField =
-/** @class */
-function () {
-  function AmplifyFormField(hostRef) {
-    Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["r"])(this, hostRef);
-    /** The input type.  Can be any HTML input type. */
-
-    this.type = 'text';
-    /** The required flag in order to make an input required prior to submitting a form */
-
-    this.required = false;
-    /** (Optional) The placeholder for the input element.  Using hints is recommended, but placeholders can also be useful to convey information to users. */
-
-    this.placeholder = '';
-  }
-
-  AmplifyFormField.prototype.render = function () {
-    return Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["h"])("div", {
-      "class": "form-field"
-    }, this.label && Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["h"])("div", {
-      "class": "form-field-label"
-    }, Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["h"])("amplify-label", {
-      htmlFor: this.fieldId
-    }, this.label)), this.description && Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["h"])("div", {
-      id: this.fieldId + "-description",
-      "class": "form-field-description",
-      "data-test": "form-field-description"
-    }, this.description), Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["h"])("div", null, Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["h"])("slot", {
-      name: "input"
-    }, Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["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 && Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["h"])("amplify-hint", {
-      id: this.fieldId + "-hint"
-    }, this.hint));
-  };
-
-  return AmplifyFormField;
-}();
-
-AmplifyFormField.style = amplifyFormFieldCss;
-var 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}";
-
-var AmplifyHint =
-/** @class */
-function () {
-  function AmplifyHint(hostRef) {
-    Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["r"])(this, hostRef);
-  }
-
-  AmplifyHint.prototype.render = function () {
-    return Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["h"])("div", {
-      "class": "hint"
-    }, Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["h"])("slot", null));
-  };
-
-  return AmplifyHint;
-}();
-
-AmplifyHint.style = amplifyHintCss;
-var 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}";
-
-var AmplifyInput =
-/** @class */
-function () {
-  function AmplifyInput(hostRef) {
-    Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["r"])(this, hostRef);
-    /** The input type.  Can be any HTML input type. */
-
-    this.type = 'text';
-    /** The callback, called when the input is modified by the user. */
-
-    this.handleInputChange = function () {
-      return void 0;
-    };
-    /** (Optional) The placeholder for the input element.  Using hints is recommended, but placeholders can also be useful to convey information to users. */
-
-
-    this.placeholder = '';
-    /** Whether the input is a required field */
-
-    this.required = false;
-    /** Whether the input has been autocompleted */
-
-    this.autoCompleted = false;
-  }
-  /**
-   * Sets the value of this input to the value in autofill input event.
-   */
-
-
-  AmplifyInput.prototype.setAutoCompleteValue = function (value) {
-    var input = this.el.querySelector('input');
-    if (!input) return;
-    input.value = value; // dispatch an input event from this element to the parent form
-
-    input.dispatchEvent(new Event('input'));
-    this.autoCompleted = true;
-  };
-  /**
-   * Checks if the target dummy input in `amplify-auth-container` is present have been autofilled.
-   * If so, we update this.value with the autofilled value.
-   */
-
-
-  AmplifyInput.prototype.checkAutoCompletion = function (targetInput) {
-    var _this = this;
-
-    if (!targetInput) return;
-
-    if (targetInput.value) {
-      // if value is already set, we set the value directly
-      this.setAutoCompleteValue(targetInput.value);
-    } else {
-      // if value is not set, we start listening for it
-      targetInput.addEventListener('input', function (e) {
-        var value = e.target.value;
-
-        _this.setAutoCompleteValue(value);
-      });
-    }
-  };
-
-  AmplifyInput.prototype.disconnectedCallback = function () {
-    this.removeHubListener && this.removeHubListener(); // stop listening to `onAuthUIStateChange`
-  };
-
-  AmplifyInput.prototype.componentWillLoad = function () {
-    var _this = this; // the below behaviors are only applicable if `amplify-input` is used by `amplify-authenticator`.
-
-
-    if (!Object(_helpers_14fcb50c_js__WEBPACK_IMPORTED_MODULE_6__["e"])('amplify-authenticator', this.el)) return;
-    this.removeHubListener = Object(_helpers_14fcb50c_js__WEBPACK_IMPORTED_MODULE_6__["o"])(function () {
-      /**
-       * When we're using slots, autofilled data will persist between different authState,
-       * even though input events are not triggered. This ends up in parent components
-       * not picking up input values. For now, we're emptying the input on authState change
-       * which is the existing behavior.
-       */
-      var input = _this.el.querySelector('input');
-
-      if (input) input.value = '';
-      _this.autoCompleted = false;
-    });
-  };
-
-  AmplifyInput.prototype.componentDidLoad = function () {
-    // no-op if this field already has been autofilled or already has an value
-    if (this.autoCompleted || this.value) return;
-    if (/Firefox/.test(navigator.userAgent)) return; // firefox autofill works
-
-    var container = Object(_helpers_14fcb50c_js__WEBPACK_IMPORTED_MODULE_6__["e"])('amplify-auth-container', this.el);
-    var signIn = Object(_helpers_14fcb50c_js__WEBPACK_IMPORTED_MODULE_6__["e"])('amplify-sign-in', this.el); // only autocomplete if `amplify-auth-container` is present and input is under `sign-in`.
-
-    if (!container || !signIn) return;
-    var username = container.querySelector("input[name='username']");
-    var password = container.querySelector("input[name='password']");
-
-    if (this.name === 'username' || this.name === 'email' || this.name === 'phone') {
-      this.checkAutoCompletion(username);
-    } else if (this.name === 'password') {
-      this.checkAutoCompletion(password);
-    }
-  };
-
-  AmplifyInput.prototype.render = function () {
-    var _this = this;
-
-    return Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["h"])(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["H"], {
-      "class": "input-host"
-    }, Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["h"])("input", Object.assign({
-      id: this.fieldId,
-      "aria-describedby": this.fieldId && this.description ? this.fieldId + "-description" : null,
-      "data-autocompleted": this.autoCompleted,
-      type: this.type,
-      onInput: function onInput(event) {
-        _this.autoCompleted = false;
-
-        _this.handleInputChange(event);
-      },
-      placeholder: this.placeholder,
-      name: this.name,
-      "class": "input",
-      value: this.value,
-      disabled: this.disabled,
-      required: this.required
-    }, this.inputProps)));
-  };
-
-  Object.defineProperty(AmplifyInput.prototype, "el", {
-    get: function get() {
-      return Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["g"])(this);
-    },
-    enumerable: false,
-    configurable: true
-  });
-  return AmplifyInput;
-}();
-
-AmplifyInput.style = amplifyInputCss;
-var amplifyLabelCss = ":host{--label-color:var(--amplify-secondary-color)}.label{color:var(--label-color);font-size:var(--amplify-text-sm);margin-bottom:16px}";
-
-var AmplifyLabel =
-/** @class */
-function () {
-  function AmplifyLabel(hostRef) {
-    Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["r"])(this, hostRef);
-  }
-
-  AmplifyLabel.prototype.render = function () {
-    return Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["h"])("label", {
-      "class": "label",
-      htmlFor: this.htmlFor
-    }, Object(_index_83f2275b_js__WEBPACK_IMPORTED_MODULE_0__["h"])("slot", null));
-  };
-
-  return AmplifyLabel;
-}();
-
-AmplifyLabel.style = amplifyLabelCss;
-
-
-/***/ })
-
-}]);
-//# sourceMappingURL=19.js.map

package/dist/19.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///./node_modules/@aws-amplify/ui-components/dist/esm-es5/amplify-form-field_4.entry.js"],"names":["amplifyFormFieldCss","AmplifyFormField","registerInstance","h","htmlFor","fieldId","id","name","description","type","handleInputChange","placeholder","value","inputProps","disabled","required","amplifyHintCss","AmplifyHint","amplifyInputCss","AmplifyInput","input","_this","targetInput","e","closestElement","onAuthUIStateChange","navigator","container","signIn","username","password","onInput","Object","get","getElement","enumerable","configurable","amplifyLabelCss","AmplifyLabel"],"mappings":"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","file":"19.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":""}