pebble-web 2.11.1 → 2.12.0

package/dist/pebble-web.umd.js

@@ -1237,6 +1237,7 @@
     PebbleIcon["BookmarkAdd"] = "bookmark-add";
     PebbleIcon["Building"] = "building";
     PebbleIcon["Business"] = "business";
+    PebbleIcon["Calendar2"] = "calendar-2";
     PebbleIcon["Calendar"] = "calendar";
     PebbleIcon["CallCenter"] = "call-center";
     PebbleIcon["Call"] = "call";
@@ -1419,6 +1420,7 @@
     PebbleIcon["Store"] = "store";
     PebbleIcon["System"] = "system";
     PebbleIcon["Table"] = "table";
+    PebbleIcon["Tag"] = "tag";
     PebbleIcon["Team"] = "team";
     PebbleIcon["Training"] = "training";
     PebbleIcon["Transfer2"] = "transfer-2";
@@ -9149,10 +9151,14 @@
       height: 110
     }
   }, ";label:wrapperStyle;" + ( "" ));
+  var inputWrapperStyle = /*#__PURE__*/css({
+    display: "flex",
+    alignItems: "baseline",
+    borderBottom: "1px solid ".concat(colors.gray.lighter)
+  }, ";label:inputWrapperStyle;" + ( "" ));
   var inputStyle = /*#__PURE__*/css(_objectSpread$7(_objectSpread$7(_objectSpread$7({
     outline: 0,
     border: 0,
-    borderBottom: "1px solid ".concat(colors.gray.lighter),
     padding: "24px 0 12px 0",
     height: 48,
     borderRadius: 0
@@ -9203,15 +9209,14 @@
     }
   }, ";label:labelStyle;" + ( "" ));
   var messageStyle = /*#__PURE__*/css(_objectSpread$7(_objectSpread$7({}, typography.s.regular), {}, {
-    marginTop: 10,
+    marginTop: 9,
     lineHeight: "10px",
     textAlign: "left"
   }), ";label:messageStyle;" + ( "" ));
-  var loadingStyle = /*#__PURE__*/css({
-    right: -10,
-    top: 20,
-    position: "absolute"
-  }, ";label:loadingStyle;" + ( "" ));
+  var loadingStyle = /*#__PURE__*/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; }
@@ -9283,6 +9288,7 @@
             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,
@@ -9296,9 +9302,12 @@
             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 = cx(inputWrapperStyle, inputWrapperClassName);
         var _inputClassName = cx(inputStyle, (_cx2 = {}, defineProperty(_cx2, inputDisabledStyle, !!disabled), defineProperty(_cx2, inputReadOnlyStyle, !!readOnly), defineProperty(_cx2, inputTextAreaStyle, !!textArea), _cx2), inputClassName);
         var _inputProps = {
           "aria-label": placeholder ? placeholder : undefined,
@@ -9315,7 +9324,7 @@
           _pebble_input_highlight_disabled: !!disabled
         }, highlightClassName);
         var labelClassName = cx(labelStyle, {
-          _pebble_input_label_focused: !!(isFocused || !!value || fixLabelAtTop)
+          _pebble_input_label_focused: !!(isFocused || value || fixLabelAtTop || leftElement)
         });
         var _wrapperStyle = cx(wrapperStyle$2, {
           _pebble_input_wrapper_textarea: !!textArea
@@ -9326,9 +9335,15 @@
           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: 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: {
@@ -9339,10 +9354,6 @@
           style: {
             backgroundColor: getColor(errorMessage, successMessage, true)
           }
-        }), loading && /*#__PURE__*/React.createElement(Loader, {
-          color: colors.violet.base,
-          scale: 0.6,
-          className: _loadingStyle
         }), _message && /*#__PURE__*/React.createElement("div", {
           className: messageStyle,
           style: {
@@ -13285,7 +13296,7 @@
   }, textEllipsis), {}, {
     height: "48px"
   }), ";label:inputStyle;" + ( "" ));
-  var inputWrapperStyle = /*#__PURE__*/css({
+  var inputWrapperStyle$1 = /*#__PURE__*/css({
     position: "relative",
     borderRadius: "3px",
     fontSize: "14px",
@@ -13366,7 +13377,7 @@
           className: inputStyle$2,
           onChange: this.handleChange
         };
-        var inputWrapperClassName = cx(inputWrapperStyle, (_cx2 = {}, defineProperty(_cx2, inputDisabledStyle$1, !!disabled), defineProperty(_cx2, inputReadOnlyStyle$1, !!readOnly), _cx2), inputClassName);
+        var inputWrapperClassName = cx(inputWrapperStyle$1, (_cx2 = {}, defineProperty(_cx2, inputDisabledStyle$1, !!disabled), defineProperty(_cx2, inputReadOnlyStyle$1, !!readOnly), _cx2), inputClassName);
         var placeholderClassName = cx(placeholderStyle, {
           _pebble_secondary_input_label_focused: isFocused || !!value
         });