@cargosense/cargo-design-system 1.0.5 → 1.0.8

package/dist/molecules/index.es.js

@@ -1,7 +1,7 @@
 import "../fonts/index.es.js";
-import { r as s, i as r, a as o, f as n, b as i, o as c, x as e, c as p, d as h, e as b } from "../assets/index.es.js";
+import { r as s, i as r, a as o, f as n, b as i, o as c, x as e, c as p, d as h, e as v } from "../assets/index.es.js";
 s();
-class v extends r {
+class b extends r {
   static styles = i`
    @font-face {
       font-family: 'Geist';
@@ -210,7 +210,7 @@ class v extends r {
   }
 }
 function d() {
-  typeof window < "u" && !customElements.get("cd-button") && customElements.define("cd-button", v);
+  typeof window < "u" && !customElements.get("cd-button") && customElements.define("cd-button", b);
 }
 s();
 class f extends r {
@@ -361,6 +361,10 @@ class g extends r {
       outline: 2px solid var(--input-error-border-color);
     }
 
+    .input-error::placeholder {
+      color: var(--input-error-border-color);
+    }
+
     .full-width {
       width: 100%;
     }
@@ -521,7 +525,7 @@ class g extends r {
     return e`
       ${this.iconLeft ? e`<span class="icon-left-container"><cd-icon name="${this.iconLeft}" size="sm" class="icon-left"></cd-icon></span>` : ""}
       <input id='${this.name}' class="${this.iconLeft ? "icon-spacing-left" : ""} ${this.iconRight ? " icon-spacing-right" : ""}  ${this.disabled ? " disabled" : ""} ${this.error ? " input-error" : ""} ${this.fullWidth ? " full-width" : ""} ${this.variant === "dashed" ? " dashed" : this.variant == "dotted" ? " dotted" : ""} ${this.size}" type="${this.type}" placeholder="${this.placeholder}" ?required=${this.required} .value="${this.value}"  ?readonly=${this.readOnly} ?disabled=${this.disabled} .pattern="${this.pattern}" @input="${this.handleInput}" @change="${this.handleChange}" @blur="${this.handleFocus}" @keypress=${this.handleKeyPress}/>
-      ${this.iconRight ? e`<span class="icon-right-container"><cd-icon name="${this.iconRight}" size="sm" class="icon-right"></cd-icon></span>` : ""}
+      ${this.iconRight ? e`<span class="icon-right-container"><cd-icon name="${this.iconRight}" size="sm" class="icon-right" color='${ifDefined(this.error ? "var(--input-error-border-color)" : void 0)}'></cd-icon></span>` : ""}
       `;
   }
   focus() {
@@ -1838,6 +1842,11 @@ class A extends r {
       flex-direction: row;
       align-items: center;
     }
+
+    .input-error::placeholder {
+      color: var(--input-error-border-color);
+    }
+
   `;
   static properties = {
     value: {
@@ -2019,6 +2028,13 @@ class C extends r {
       font-style: normal;
     }
 
+    .container {
+      display: flex;
+      gap: var(--input-gap);
+      flex-direction: row;
+      align-items: center;
+    }
+
     input {
       box-sizing: border-box;
       padding: 0 var(--input-horizontal-inline-padding);
@@ -2071,6 +2087,11 @@ class C extends r {
       outline: 2px solid var(--input-error-border-color);
     }
 
+    .input-error::placeholder {
+      color: var(--input-error-border-color);
+    }
+
+
     .full-width {
       width: 100%;
     }
@@ -2179,8 +2200,10 @@ class C extends r {
   })), this.value);
   render() {
     return e`
-    <input class='${this.error ? "input-error" : ""} ${this.disabled ? "disabled" : ""} ${this.fullWidth ? "full-width" : ""} ${this.variant} ${this.size}' type='time' id='${this.name | "time"}' name='${this.name | "time"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
-    ${this.shortcut ? e`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>` : ""}
+    <div class='container'>
+      <input class='${this.error ? "input-error" : ""} ${this.disabled ? "disabled" : ""} ${this.fullWidth ? "full-width" : ""} ${this.variant} ${this.size}' type='time' id='${this.name | "time"}' name='${this.name | "time"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
+      ${this.shortcut ? e`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>` : ""}
+    </div>
     `;
   }
   firstUpdated() {
@@ -2236,7 +2259,7 @@ class B extends r {
   static styles = i`
     @font-face {
       font-family: 'GeistMono';
-      src: url(${o(b)}) format('woff');
+      src: url(${o(v)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -2341,7 +2364,7 @@ function Y() {
   typeof window < "u" && !customElements.get("cd-icon-container") && customElements.define("cd-icon-container", B);
 }
 export {
-  v as Button,
+  b as Button,
   A as DateComponent,
   f as Header,
   B as IconContainer,