@cargosense/cargo-design-system 1.0.11 → 1.0.13

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 l, x as e, c as p, d as h, e as v } from "../assets/index.es.js";
-s();
-class b extends r {
+import { r as l, i as r, a as o, f as n, b as i, o as s, x as e, c as p, d as h, e as b } from "../assets/index.es.js";
+l();
+class v extends r {
   static styles = i`
    @font-face {
       font-family: 'Geist';
@@ -188,7 +188,7 @@ class b extends r {
   }
   render() {
     return e`
-    <a href='${l(this.link)}' target="${l(this.target)}" tabindex="-1" class="${this.expand}">
+    <a href='${s(this.link)}' target="${s(this.target)}" tabindex="-1" class="${this.expand}">
       <button form="${this.form}" type="${this.button}" class="button ${this.square} ${this.variant} ${this.size} ${this.expand} ${this.disabled ? "disabled" : ""}" .name="${this.name}" tabindex="${this.disabled ? "-1" : 0}" @click='${this.handleClick}'>
        <slot name='start'></slot> <slot></slot> <slot name='end'></slot>
       </button>
@@ -210,9 +210,9 @@ class b extends r {
   }
 }
 function d() {
-  typeof window < "u" && !customElements.get("cd-button") && customElements.define("cd-button", b);
+  typeof window < "u" && !customElements.get("cd-button") && customElements.define("cd-button", v);
 }
-s();
+l();
 class f extends r {
   static styles = i`
     @font-face {
@@ -287,7 +287,7 @@ class f extends r {
 function I() {
   !customElements.get("cd-header") && typeof window < "u" && customElements.define("cd-header", f);
 }
-s();
+l();
 class g extends r {
   static formAssociated = !0;
   static styles = i`
@@ -524,8 +524,8 @@ class g extends r {
   render() {
     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" color='${l(this.error ? "var(--input-error-border-color)" : void 0)}'></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=${s(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" color='${s(this.error ? "var(--input-error-border-color)" : void 0)}'></cd-icon></span>` : ""}
       `;
   }
   focus() {
@@ -646,7 +646,7 @@ function V() {
   typeof window < "u" && !customElements.get("cd-nav-bar") && customElements.define("cd-nav-bar", m);
 }
 h();
-s();
+l();
 class y extends r {
   static styles = i`
     @font-face {
@@ -798,7 +798,7 @@ class y extends r {
   }
   render() {
     return e`
-      <a href="${l(this.link)}" class="nav-item ${this.active ? "active" : ""} ${this.select ? "selected" : ""}" tabindex="0">
+      <a href="${s(this.link)}" class="nav-item ${this.active ? "active" : ""} ${this.select ? "selected" : ""}" tabindex="0">
         <slot name="before" class="${this.amount > 0 && !this.select ? "standout" : ""} ${this.select ? "selected" : ""}"></slot>
         <p>${this.name}</p>
         ${this.variant == "dropdown" ? e`<cd-icon class='caret' name='caret-down' size='sm'></cd-icon>` : ""}
@@ -961,7 +961,7 @@ class w extends r {
 function L() {
   typeof window < "u" && !customElements.get("cd-tool-tip") && customElements.define("cd-tool-tip", w);
 }
-s();
+l();
 class k extends r {
   static styles = i`
     @font-face {
@@ -1045,7 +1045,7 @@ class k extends r {
 function P() {
   typeof window < "u" && !customElements.get("cd-nav-profile") && customElements.define("cd-nav-profile", k);
 }
-s();
+l();
 class $ extends r {
   static styles = i`
     @font-face {
@@ -1143,16 +1143,16 @@ class $ extends r {
   }
   render() {
     return e`
-      ${this.variant === "default" ? e`<a href="${l(this.link)}" class="value"><slot></slot></a>` : ""}
+      ${this.variant === "default" ? e`<a href="${s(this.link)}" class="value"><slot></slot></a>` : ""}
       ${this.variant === "dropdown" ? e`<span class="dropdown-value"><slot></slot></span>` : ""}
-      ${this.variant === "arrow" ? e`<a href="${l(this.link)}" class="arrow-value"><slot></slot><cd-icon name="arrow" size="sm"></cd-icon></a>` : ""}
+      ${this.variant === "arrow" ? e`<a href="${s(this.link)}" class="arrow-value"><slot></slot><cd-icon name="arrow" size="sm"></cd-icon></a>` : ""}
     `;
   }
 }
 function N() {
   typeof window < "u" && !customElements.get("cd-value") && customElements.define("cd-value", $);
 }
-s();
+l();
 class E extends r {
   static styles = i`
     @font-face {
@@ -1497,7 +1497,7 @@ class E extends r {
 function G() {
   typeof window < "u" && !customElements.get("cd-search") && customElements.define("cd-search", E);
 }
-s();
+l();
 class z extends r {
   static styles = i`
     @font-face {
@@ -1857,6 +1857,12 @@ class A extends r {
       type: String,
       reflect: !0
     },
+    required: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "required",
+      converter: (t) => t === "" || t === !0
+    },
     shortcut: {
       type: String,
       reflect: !0
@@ -1900,7 +1906,7 @@ class A extends r {
     }
   };
   constructor() {
-    super(), this.value = "", this.shortcut = void 0, this.disabled = void 0, this.form = void 0, this.size = "md", this.fullWidth = !1, this.variant = "default", this.timezone = "America/New_York", this._internals = this.attachInternals(), this._internals.setValidity({
+    super(), this.value = "", this.shortcut = void 0, this.disabled = void 0, this.form = void 0, this.size = "md", this.fullWidth = !1, this.variant = "default", this.timezone = "America/New_York", this.error = !1, this.name = void 0, this.required = !1, this._internals = this.attachInternals(), this._internals.setValidity({
       customError: this.errorText && this.errorText.length > 0 || !1
     });
   }
@@ -1935,7 +1941,7 @@ class A extends r {
   render() {
     return e`
     <div class='container'>
-      <input class='${this.error ? "input-error" : ""} ${this.disabled ? "disabled" : ""} ${this.fullWidth ? "full-width" : ""} ${this.variant} ${this.size}' type='date' id='${this.name | "date"}' name='${this.name | "date"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' />
+      <input class='${this.error ? "input-error" : ""} ${this.disabled ? "disabled" : ""} ${this.fullWidth ? "full-width" : ""} ${this.variant} ${this.size}' type='date' id='${this.name | "date"}' name='${this.name | "date"}' .value='${this.value}' @change='${this.handleChange}' @focus='${this.handleFocus}' @blur='${this.handleBlur}' @input='${this.handleInput}' ?disabled='${this.disabled}' ?required='${s(this.required)}' />
       ${this.shortcut ? e`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>` : ""}
     </div>
 
@@ -2127,6 +2133,12 @@ class C extends r {
       type: String,
       reflect: !0
     },
+    required: {
+      type: Boolean,
+      reflect: !0,
+      attribute: "required",
+      converter: (t) => t === "" || t === !0
+    },
     value: {
       type: String,
       reflect: !0
@@ -2174,7 +2186,7 @@ class C extends r {
     }
   };
   constructor() {
-    super(), this.value = "", this.shortcut = void 0, this.error = !1, this.disabled = void 0, this.form = void 0, this.size = "md", this.fullWidth = !1, this.variant = "default", this.timezone = "America/New_York", this._internals = this.attachInternals(), this._internals.setValidity({
+    super(), this.name = void 0, this.required = !1, this.value = "", this.shortcut = void 0, this.error = !1, this.disabled = void 0, this.form = void 0, this.size = "md", this.fullWidth = !1, this.variant = "default", this.timezone = "America/New_York", this._internals = this.attachInternals(), this._internals.setValidity({
       customError: this.errorText && this.errorText.length > 0 || !1
     });
   }
@@ -2209,7 +2221,7 @@ class C extends r {
   render() {
     return e`
     <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}' />
+      <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}' ?required='${s(this.required)}' />
       ${this.shortcut ? e`<cd-button variant='primary' ?disabled='${this.disabled}'>${this.shortcut}</cd-button>` : ""}
     </div>
     `;
@@ -2261,12 +2273,12 @@ class C extends r {
 function W() {
   typeof window < "u" && !customElements.get("cd-time") && customElements.define("cd-time", C);
 }
-s();
-class B extends r {
+l();
+class q extends r {
   static styles = i`
     @font-face {
       font-family: 'GeistMono';
-      src: url(${o(v)}) format('woff');
+      src: url(${o(b)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -2368,13 +2380,13 @@ class B extends r {
   }
 }
 function Y() {
-  typeof window < "u" && !customElements.get("cd-icon-container") && customElements.define("cd-icon-container", B);
+  typeof window < "u" && !customElements.get("cd-icon-container") && customElements.define("cd-icon-container", q);
 }
 export {
-  b as Button,
+  v as Button,
   A as DateComponent,
   f as Header,
-  B as IconContainer,
+  q as IconContainer,
   g as Input,
   m as NavBar,
   y as NavItem,