add a new currency input

docs/components/input.md

@@ -306,6 +306,25 @@ const App = () => (
 );
 ```
 
+### Currency
+
+Use the `currency` attribute to set the currency symbol and abbreviation. It only allows integers which will be converted into a comma-separated currency format. Only `usd` is implemented.
+
+```html preview
+<sl-input currency="usd"></sl-input>
+```
+
+```pug slim
+sl-input currency="usd"
+```
+
+```jsx react
+import { SlInput } from '@teamshares/shoelace/dist/react';
+
+const App = () => <SlInput currency="usd" />;
+```
+
+
 ### Customizing Label Position
 
 Use [CSS parts](#css-parts) to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls.

docs/teamshares/changelog.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## 1.2.1
+- Added `currency` attribute with a value of `usd` to the input
 ## 1.2.0
 
 - Updated to upstream [2.4.0](/resources/changelog)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamshares/shoelace",
   "description": "The Teamshares flavor of a forward-thinking library of web components.",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "upstreamVersion": "2.4.0",
   "homepage": "https://github.com/teamshares/shoelace",
   "author": "Cory LaViska",
@@ -74,6 +74,7 @@
     "@shoelace-style/localize": "^3.0.4",
     "composed-offset-position": "^0.0.4",
     "data-grid-component": "github:teamshares/data-grid",
+    "imask": "^6.6.3",
     "lit": "^2.6.1",
     "qr-creator": "^1.0.0"
   },

src/components/input/input.styles.ts

@@ -172,11 +172,13 @@ export default css`
     width: calc(1em + var(--sl-input-spacing-small) * 2);
   }
 
-  .input--small .input__prefix::slotted(*) {
+  .input--small .input__prefix::slotted(*),
+  .input--small.input--currency .input__prefix {
     margin-inline-start: var(--sl-input-spacing-small);
   }
 
-  .input--small .input__suffix::slotted(*) {
+  .input--small .input__suffix::slotted(*),
+  .input--small.input--currency .input__suffix {
     margin-inline-end: var(--sl-input-spacing-small);
   }
 
@@ -196,11 +198,13 @@ export default css`
     width: calc(1em + var(--sl-input-spacing-medium) * 2);
   }
 
-  .input--medium .input__prefix::slotted(*) {
+  .input--medium .input__prefix::slotted(*),
+  .input--medium.input--currency .input__prefix {
     margin-inline-start: var(--sl-input-spacing-medium);
   }
 
-  .input--medium .input__suffix::slotted(*) {
+  .input--medium .input__suffix::slotted(*),
+  .input--medium.input--currency .input__suffix {
     margin-inline-end: var(--sl-input-spacing-medium);
   }
 
@@ -220,11 +224,13 @@ export default css`
     width: calc(1em + var(--sl-input-spacing-large) * 2);
   }
 
-  .input--large .input__prefix::slotted(*) {
+  .input--large .input__prefix::slotted(*),
+  .input--large.input--currency .input__prefix {
     margin-inline-start: var(--sl-input-spacing-large);
   }
 
-  .input--large .input__suffix::slotted(*) {
+  .input--large .input__suffix::slotted(*),
+  .input--large.input--currency .input__ {
     margin-inline-end: var(--sl-input-spacing-large);
   }
 

src/components/input/input.ts

@@ -13,6 +13,7 @@ import ShoelaceElement from '../../internal/shoelace-element';
 import styles from './input.styles';
 import type { CSSResultGroup } from 'lit';
 import type { ShoelaceFormControl } from '../../internal/shoelace-element';
+import IMask from 'imask';
 
 /**
  * @summary Inputs collect data from the user.
@@ -173,6 +174,9 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
   /** Used to customize the label or icon of the Enter key on virtual keyboards. */
   @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
 
+  /** Adds currency symbol and abbreviation */
+  @property() currency = '';
+
   /** Enables spell checking on the input. */
   @property({
     type: Boolean,
@@ -265,6 +269,15 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
   }
 
   private handleInput() {
+    if (this.currency) {
+      var element = this.input;
+      var maskOptions = {
+        mask: Number,
+        thousandsSeparator: ','
+      }
+      IMask(element, maskOptions);
+    }
+
     this.value = this.input.value;
     this.formControlController.updateValidity();
     this.emit('sl-input');
@@ -449,10 +462,14 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
               'input--disabled': this.disabled,
               'input--focused': this.hasFocus,
               'input--empty': !this.value,
-              'input--no-spin-buttons': this.noSpinButtons
+              'input--no-spin-buttons': this.noSpinButtons,
+              'input--currency': !!this.currency
             })}
           >
-            <slot name="prefix" part="prefix" class="input__prefix"></slot>
+            <slot name="prefix" part="prefix" class="input__prefix">
+              ${ this.currency === "usd" ? "$" : ""}
+            </slot>
+
             <input
               part="input"
               id="input"
@@ -532,7 +549,9 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
                 : ''
             }
 
-            <slot name="suffix" part="suffix" class="input__suffix"></slot>
+            <slot name="suffix" part="suffix" class="input__suffix">
+              ${ this.currency === "usd" ? "USD" : "" }
+            </slot>
           </div>
         </div>