@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

package/dist/cjs/components/text-masked-field/daikin-text-masked-field.cjs

@@ -32,6 +32,7 @@ const cvaInput = classVarianceAuthority.cva(
     "relative",
     "rounded-sm",
     "overflow-hidden",
+    "text-(length:--dds-font-size-400)",
     "outline-solid",
     "outline-(--color-border)",
     "outline-0",
@@ -64,12 +65,12 @@ const cvaInput = classVarianceAuthority.cva(
         true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
       },
       leftIcon: {
-        false: ["pl-4"],
-        true: ["pl-11"]
+        false: ["pl-(--dds-padding-40)"],
+        true: ["pl-[calc((var(--dds-padding-40)*2)+var(--dds-padding-30))]"]
       },
       rightIcon: {
-        false: ["pr-4"],
-        true: ["pr-11"]
+        false: ["pr-(--dds-padding-40)"],
+        true: ["pr-[calc((var(--dds-padding-40)*2)+var(--dds-padding-30))]"]
       }
     }
   }
@@ -183,7 +184,7 @@ exports.DaikinTextMaskedField = class DaikinTextMaskedField extends ddsFormEleme
       >
         <slot
           name="left-icon"
-          class="icon-size-6"
+          class="icon-size-token"
           @slotchange=${this._handleSlotChange}
         ></slot>
       </span>
@@ -195,7 +196,7 @@ exports.DaikinTextMaskedField = class DaikinTextMaskedField extends ddsFormEleme
       >
         <slot
           name="right-icon"
-          class="icon-size-6"
+          class="icon-size-token"
           @slotchange=${this._handleSlotChange}
         ></slot>
       </span>`;
@@ -248,6 +249,7 @@ exports.DaikinTextMaskedField = class DaikinTextMaskedField extends ddsFormEleme
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && !!inputGroup.error;
     this.disabled = !!inputGroup.disabled;
+    this.readonly = !!inputGroup.readonly;
     this.required = !!inputGroup.required;
     this.error = isError;
     this._label = inputGroup.label;
@@ -259,10 +261,32 @@ exports.DaikinTextMaskedField.styles = lit.css`
     :host {
       display: flex;
       align-items: center;
-      height: 3rem;
+      height: var(--dds-input-height, 3rem);
       position: relative;
     }
 
+    ::slotted(daikin-icon[slot="left-icon"]),
+    ::slotted(daikin-icon[slot="right-icon"]) {
+      --ddc-icon-size: var(--dds-icon, 20px);
+    }
+
+    :host([readonly]:not([disabled])) input {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly]:not([disabled])) input:hover,
+    :host([readonly]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly][error]:not([disabled])) input,
+    :host([readonly][error]:not([disabled])) input:hover,
+    :host([readonly][error]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-danger-default);
+    }
+
     input::-ms-reveal {
       display: none !important;
     }