From b8786956e2c285fc9b0c840e3f2327c19fd2c9e1 Mon Sep 17 00:00:00 2001
From: Eric Y Liu <ericyl.us@gmail.com>
Date: Fri, 9 Jul 2021 11:34:36 -0700
Subject: [PATCH] feat(number-input): support readonly variant

Ref: https://github.com/carbon-design-system/carbon/commit/d0bd8eddb
---
 docs/src/pages/components/NumberInput.svx | 4 ++++
 src/NumberInput/NumberInput.svelte        | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx
index 237569db..923fab25 100644
--- a/docs/src/pages/components/NumberInput.svx
+++ b/docs/src/pages/components/NumberInput.svx
@@ -31,6 +31,10 @@ components: ["NumberInput", "NumberInputSkeleton"]
 
 <NumberInput light label="Clusters" />
 
+### Read-only variant
+
+<NumberInput readonly label="Clusters" />
+
 ### Extra-large size
 
 <NumberInput size="xl" label="Clusters" />
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index b88b142f..ea93b23e 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -108,6 +108,7 @@
   import Subtract16 from "carbon-icons-svelte/lib/Subtract16/Subtract16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
+  import EditOff16 from "carbon-icons-svelte/lib/EditOff16/EditOff16.svelte";
 
   const defaultTranslations = {
     [translationIds.increment]: "Increment number",
@@ -273,6 +274,9 @@
             class="bx--number__invalid bx--number__invalid--warning"
           />
         {/if}
+        {#if readonly}
+          <EditOff16 class="bx--text-input__readonly-icon" />
+        {/if}
         {#if !hideSteppers}
           <div class:bx--number__controls="{true}">
             <button