@cargosense/cargo-design-system 1.0.4 → 1.0.5

package/dist/molecules/index.es.js

@@ -1,11 +1,11 @@
-import { r as s, i as r, c as o, f as i, d as a, o as c, x as e, a as p, b as h } from "../assets/Counter.es.js";
 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";
 s();
 class v extends r {
-  static styles = a`
+  static styles = i`
    @font-face {
       font-family: 'Geist';
-      src: url(${o(i)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -213,11 +213,11 @@ function d() {
   typeof window < "u" && !customElements.get("cd-button") && customElements.define("cd-button", v);
 }
 s();
-class b extends r {
-  static styles = a`
+class f extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${o(i)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -284,16 +284,16 @@ class b extends r {
     `;
   }
 }
-function T() {
-  !customElements.get("cd-header") && typeof window < "u" && customElements.define("cd-header", b);
+function I() {
+  !customElements.get("cd-header") && typeof window < "u" && customElements.define("cd-header", f);
 }
 s();
-class f extends r {
+class g extends r {
   static formAssociated = !0;
-  static styles = a`
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${o(i)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -536,15 +536,15 @@ class f extends r {
     this.shadowRoot.querySelector("input").focus();
   }
 }
-function q() {
-  typeof window < "u" && !customElements.get("cd-input") && customElements.define("cd-input", f);
+function D() {
+  typeof window < "u" && !customElements.get("cd-input") && customElements.define("cd-input", g);
 }
 p();
-class g extends r {
-  static styles = a`
+class m extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${o(i)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -639,15 +639,15 @@ class g extends r {
   }
 }
 function V() {
-  typeof window < "u" && !customElements.get("cd-nav-bar") && customElements.define("cd-nav-bar", g);
+  typeof window < "u" && !customElements.get("cd-nav-bar") && customElements.define("cd-nav-bar", m);
 }
 h();
 s();
-class m extends r {
-  static styles = a`
+class x extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url('${o(i)}') format('woff');
+      src: url('${o(n)}') format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -823,14 +823,14 @@ class m extends r {
     this.active = !this.active, this.requestUpdate();
   }
 }
-function I() {
-  typeof window < "u" && !customElements.get("cd-nav-item") && customElements.define("cd-nav-item", m);
+function F() {
+  typeof window < "u" && !customElements.get("cd-nav-item") && customElements.define("cd-nav-item", x);
 }
 class y extends r {
-  static styles = a`
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${o(i)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -850,14 +850,14 @@ class y extends r {
     `;
   }
 }
-function D() {
+function R() {
   typeof window < "u" && !customElements.get("cd-table") && customElements.define("cd-table", y);
 }
-class x extends r {
-  static styles = a`
+class w extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${o(i)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -954,15 +954,15 @@ class x extends r {
     `;
   }
 }
-function R() {
-  typeof window < "u" && !customElements.get("cd-tool-tip") && customElements.define("cd-tool-tip", x);
+function L() {
+  typeof window < "u" && !customElements.get("cd-tool-tip") && customElements.define("cd-tool-tip", w);
 }
 s();
-class w extends r {
-  static styles = a`
+class k extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${o(i)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -1038,15 +1038,15 @@ class w extends r {
     `;
   }
 }
-function L() {
-  typeof window < "u" && !customElements.get("cd-nav-profile") && customElements.define("cd-nav-profile", w);
+function P() {
+  typeof window < "u" && !customElements.get("cd-nav-profile") && customElements.define("cd-nav-profile", k);
 }
 s();
-class k extends r {
-  static styles = a`
+class $ extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${o(i)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -1145,15 +1145,15 @@ class k extends r {
     `;
   }
 }
-function P() {
-  typeof window < "u" && !customElements.get("cd-value") && customElements.define("cd-value", k);
+function N() {
+  typeof window < "u" && !customElements.get("cd-value") && customElements.define("cd-value", $);
 }
 s();
-class $ extends r {
-  static styles = a`
+class E extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${o(i)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -1490,15 +1490,15 @@ class $ extends r {
     })), this.requestUpdate());
   }
 }
-function N() {
-  typeof window < "u" && !customElements.get("cd-search") && customElements.define("cd-search", $);
+function G() {
+  typeof window < "u" && !customElements.get("cd-search") && customElements.define("cd-search", E);
 }
 s();
-class E extends r {
-  static styles = a`
+class z extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${o(i)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -1657,14 +1657,14 @@ class E extends r {
     this.disabled = t;
   }
 }
-function G() {
-  typeof window < "u" && !customElements.get("cd-tab") && customElements.define("cd-tab", E);
+function U() {
+  typeof window < "u" && !customElements.get("cd-tab") && customElements.define("cd-tab", z);
 }
-class z extends r {
-  static styles = a`
+class S extends r {
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${o(i)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: normal;
       font-style: normal;
     }
@@ -1702,11 +1702,11 @@ class z extends r {
     `;
   }
 }
-function F() {
-  typeof window < "u" && !customElements.get("cd-tab-container") && customElements.define("cd-tab-container", z);
+function M() {
+  typeof window < "u" && !customElements.get("cd-tab-container") && customElements.define("cd-tab-container", S);
 }
 d();
-class S extends r {
+class A extends r {
   static formAssociated = !0;
   static distinctTimezones = [
     "Etc/GMT+12",
@@ -1746,10 +1746,10 @@ class S extends r {
     "Pacific/Tongatapu",
     "Pacific/Kiritimati"
   ];
-  static styles = a`
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${o(i)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -1967,11 +1967,11 @@ class S extends r {
     }), this.requestUpdate();
   }
 }
-function U() {
-  typeof window < "u" && !customElements.get("cd-date") && customElements.define("cd-date", S);
+function K() {
+  typeof window < "u" && !customElements.get("cd-date") && customElements.define("cd-date", A);
 }
 d();
-class A extends r {
+class C extends r {
   static formAssociated = !0;
   static distinctTimezones = [
     "Etc/GMT+12",
@@ -2011,10 +2011,10 @@ class A extends r {
     "Pacific/Tongatapu",
     "Pacific/Kiritimati"
   ];
-  static styles = a`
+  static styles = i`
     @font-face {
       font-family: 'Geist';
-      src: url(${o(i)}) format('woff');
+      src: url(${o(n)}) format('woff');
       font-weight: 100 900;
       font-style: normal;
     }
@@ -2228,37 +2228,148 @@ class A extends r {
     }), this.requestUpdate();
   }
 }
-function K() {
-  typeof window < "u" && !customElements.get("cd-time") && customElements.define("cd-time", A);
+function W() {
+  typeof window < "u" && !customElements.get("cd-time") && customElements.define("cd-time", C);
+}
+s();
+class B extends r {
+  static styles = i`
+    @font-face {
+      font-family: 'GeistMono';
+      src: url(${o(b)}) format('woff');
+      font-weight: 100 900;
+      font-style: normal;
+    }
+
+    :host {
+      height: var(--icon-container-size, 36px);
+      width: var(--icon-container-size, 36px);
+    }
+
+    .icon-container {
+      font-family: 'GeistMono', sans-serif;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--icon-container-size, 36px);
+      height: var(--icon-container-size, 36px);
+      border-radius: var(--icon-container-border-radius, 5px);
+      cursor: pointer;
+      box-sizing: border-box;
+    }
+
+    .icon-container.default {
+      background-color: var(--icon-container-default-background, #2D3339);
+      border: 1px solid var(--icon-container-default-border, #1B1F23);
+    }
+
+    .icon-container.primary {
+      background-color: var(--icon-container-primary-background, #747E8B);
+      border: 1px solid var(--icon-container-primary-border, #5C6570);
+    }
+    .icon-container.secondary {
+      background-color: var(--icon-container-secondary-background, #F1F4F6);
+      border: 1px solid var(--icon-container-secondary-border, #F1F4F6);
+    }
+
+    .icon-container.exception {
+      background-color: var(--icon-container-exception-background, #C30F21);
+      border: 1px solid var(--icon-container-exception-border, #A20D1C);
+    }
+    .icon-container.sensor {
+      background-color: var(--icon-container-sensor-background, #0F665F);
+      border: 1px solid var(--icon-container-sensor-border, #024C49);
+    }
+    .icon-container.fedex {
+      background-color: var(--icon-container-fedex-background, #572297);
+      border: 1px solid var(--icon-container-fedex-border, #481E7A);
+    }
+    .icon-container.ups {
+      background-color: var(--icon-container-ups-background, #573C3C);
+      border: 1px solid var(--icon-container-ups-border, #352222);
+    }
+    .icon-container.air {
+      background-color: var(--icon-container-air-background, #1D5FAA);
+      border: 1px solid var(--icon-container-air-border, #185294);
+    }
+    .icon-container.ocean {
+      background-color: var(--icon-container-ocean-background, #12378E);
+      border: 1px solid var(--icon-container-ocean-border, #132E6E);
+    }
+  `;
+  static properties = {
+    icon: {
+      type: String,
+      reflect: !0,
+      attribute: "icon"
+    },
+    size: {
+      type: String,
+      reflect: !0,
+      attribute: "size"
+    },
+    variant: {
+      type: String,
+      reflect: !0,
+      attribute: "variant"
+    }
+  };
+  constructor() {
+    super(), this.icon = void 0, this.size = "md", this.variant = "default";
+  }
+  setIcon(t) {
+    this.icon = t;
+  }
+  _handleIconClick() {
+    this.dispatchEvent(new CustomEvent("click", {
+      bubbles: !0,
+      composed: !0,
+      detail: {
+        icon: this.icon
+      }
+    }));
+  }
+  render() {
+    return e`
+      <div class="icon-container ${this.variant}" @click="${this._handleIconClick}">
+        ${this.icon ? e`<cd-icon name="${this.icon}" size="${this.size | "md"}"></cd-icon>` : e`<slot></slot>`}
+      </div>
+    `;
+  }
+}
+function Y() {
+  typeof window < "u" && !customElements.get("cd-icon-container") && customElements.define("cd-icon-container", B);
 }
 export {
   v as Button,
-  S as DateComponent,
-  b as Header,
-  f as Input,
-  g as NavBar,
-  m as NavItem,
-  w as NavProfile,
-  $ as Search,
-  E as Tab,
-  z as TabContainer,
+  A as DateComponent,
+  f as Header,
+  B as IconContainer,
+  g as Input,
+  m as NavBar,
+  x as NavItem,
+  k as NavProfile,
+  E as Search,
+  z as Tab,
+  S as TabContainer,
   y as Table,
-  A as TimeComponent,
-  x as ToolTip,
-  k as Value,
+  C as TimeComponent,
+  w as ToolTip,
+  $ as Value,
   d as registerButton,
-  U as registerDate,
-  T as registerHeader,
-  q as registerInput,
+  K as registerDate,
+  I as registerHeader,
+  Y as registerIconContainer,
+  D as registerInput,
   V as registerNavBar,
-  I as registerNavItem,
-  L as registerNavProfile,
-  N as registerSearch,
-  G as registerTab,
-  F as registerTabContainer,
-  D as registerTable,
-  K as registerTime,
-  R as registerToolTip,
-  P as registerValue
+  F as registerNavItem,
+  P as registerNavProfile,
+  G as registerSearch,
+  U as registerTab,
+  M as registerTabContainer,
+  R as registerTable,
+  W as registerTime,
+  L as registerToolTip,
+  N as registerValue
 };
 //# sourceMappingURL=index.es.js.map