pebble-web 2.11.1 → 2.12.0

package/dist/pebble-web.js

@@ -1199,10 +1199,14 @@ var wrapperStyle$2 = /*#__PURE__*/emotion.css({
     height: 110
   }
 }, ";label:wrapperStyle;" + ( "" ));
+var inputWrapperStyle = /*#__PURE__*/emotion.css({
+  display: "flex",
+  alignItems: "baseline",
+  borderBottom: "1px solid ".concat(pebbleShared.colors.gray.lighter)
+}, ";label:inputWrapperStyle;" + ( "" ));
 var inputStyle = /*#__PURE__*/emotion.css(_objectSpread$7(_objectSpread$7(_objectSpread$7({
   outline: 0,
   border: 0,
-  borderBottom: "1px solid ".concat(pebbleShared.colors.gray.lighter),
   padding: "24px 0 12px 0",
   height: 48,
   borderRadius: 0
@@ -1253,15 +1257,14 @@ var labelStyle = /*#__PURE__*/emotion.css({
   }
 }, ";label:labelStyle;" + ( "" ));
 var messageStyle = /*#__PURE__*/emotion.css(_objectSpread$7(_objectSpread$7({}, typography.s.regular), {}, {
-  marginTop: 10,
+  marginTop: 9,
   lineHeight: "10px",
   textAlign: "left"
 }), ";label:messageStyle;" + ( "" ));
-var loadingStyle = /*#__PURE__*/emotion.css({
-  right: -10,
-  top: 20,
-  position: "absolute"
-}, ";label:loadingStyle;" + ( "" ));
+var loadingStyle = /*#__PURE__*/emotion.css( {
+  name: "1vx6lh0-loadingStyle",
+  styles: "position:relative;top:4px;;label:loadingStyle;"
+} );
 
 function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -1333,6 +1336,7 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
           type = _this$props.type,
           placeholder = _this$props.placeholder,
           className = _this$props.className,
+          inputWrapperClassName = _this$props.inputWrapperClassName,
           inputClassName = _this$props.inputClassName,
           highlightClassName = _this$props.highlightClassName,
           loadingClassName = _this$props.loadingClassName,
@@ -1346,9 +1350,12 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
           textArea = _this$props.textArea,
           required = _this$props.required,
           onClick = _this$props.onClick,
-          loading = _this$props.loading;
+          loading = _this$props.loading,
+          leftElement = _this$props.leftElement,
+          rightElement = _this$props.rightElement;
       var isFocused = this.state.isFocused;
       var _message = errorMessage || successMessage || message;
+      var _inputWrapperClassName = emotion.cx(inputWrapperStyle, inputWrapperClassName);
       var _inputClassName = emotion.cx(inputStyle, (_cx2 = {}, _defineProperty(_cx2, inputDisabledStyle, !!disabled), _defineProperty(_cx2, inputReadOnlyStyle, !!readOnly), _defineProperty(_cx2, inputTextAreaStyle, !!textArea), _cx2), inputClassName);
       var _inputProps = {
         "aria-label": placeholder ? placeholder : undefined,
@@ -1365,7 +1372,7 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
         _pebble_input_highlight_disabled: !!disabled
       }, highlightClassName);
       var labelClassName = emotion.cx(labelStyle, {
-        _pebble_input_label_focused: !!(isFocused || !!value || fixLabelAtTop)
+        _pebble_input_label_focused: !!(isFocused || value || fixLabelAtTop || leftElement)
       });
       var _wrapperStyle = emotion.cx(wrapperStyle$2, {
         _pebble_input_wrapper_textarea: !!textArea
@@ -1376,9 +1383,15 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
         onFocus: this.addFocus,
         onBlur: this.removeFocus,
         onClick: onClick
-      }, this.props.textArea ? /*#__PURE__*/React.createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps)) : /*#__PURE__*/React.createElement("input", Object.assign({
+      }, /*#__PURE__*/React.createElement("div", {
+        className: _inputWrapperClassName
+      }, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/React.createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps)) : /*#__PURE__*/React.createElement("input", Object.assign({
         type: type
-      }, _inputProps, this.props.inputProps)), !!placeholder && /*#__PURE__*/React.createElement("label", {
+      }, _inputProps, this.props.inputProps)), loading && /*#__PURE__*/React.createElement(Loader, {
+        color: pebbleShared.colors.violet.base,
+        scale: 0.6,
+        className: _loadingStyle
+      }), rightElement === null || rightElement === void 0 ? void 0 : rightElement()), !!placeholder && /*#__PURE__*/React.createElement("label", {
         className: labelClassName
       }, placeholder, required && /*#__PURE__*/React.createElement("span", {
         style: {
@@ -1389,10 +1402,6 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
         style: {
           backgroundColor: getColor(errorMessage, successMessage, true)
         }
-      }), loading && /*#__PURE__*/React.createElement(Loader, {
-        color: pebbleShared.colors.violet.base,
-        scale: 0.6,
-        className: _loadingStyle
       }), _message && /*#__PURE__*/React.createElement("div", {
         className: messageStyle,
         style: {
@@ -3384,7 +3393,7 @@ var inputStyle$2 = /*#__PURE__*/emotion.css(_objectSpread$m(_objectSpread$m({
 }, textEllipsis), {}, {
   height: "48px"
 }), ";label:inputStyle;" + ( "" ));
-var inputWrapperStyle = /*#__PURE__*/emotion.css({
+var inputWrapperStyle$1 = /*#__PURE__*/emotion.css({
   position: "relative",
   borderRadius: "3px",
   fontSize: "14px",
@@ -3465,7 +3474,7 @@ var SecondaryInput = /*#__PURE__*/function (_React$PureComponent) {
         className: inputStyle$2,
         onChange: this.handleChange
       };
-      var inputWrapperClassName = emotion.cx(inputWrapperStyle, (_cx2 = {}, _defineProperty(_cx2, inputDisabledStyle$1, !!disabled), _defineProperty(_cx2, inputReadOnlyStyle$1, !!readOnly), _cx2), inputClassName);
+      var inputWrapperClassName = emotion.cx(inputWrapperStyle$1, (_cx2 = {}, _defineProperty(_cx2, inputDisabledStyle$1, !!disabled), _defineProperty(_cx2, inputReadOnlyStyle$1, !!readOnly), _cx2), inputClassName);
       var placeholderClassName = emotion.cx(placeholderStyle, {
         _pebble_secondary_input_label_focused: isFocused || !!value
       });