@wavelengthusaf/web-components 1.4.1 → 1.4.2

package/dist/esm/index.js

@@ -5436,6 +5436,299 @@ if (!customElements.get("wavelength-child-data-table")) {
   customElements.define("wavelength-child-data-table", ChildDataTable);
 }
 
+// src/functions/swapCSSClass.ts
+function swapCSSClass(element, remove, add) {
+  element.classList.remove(...remove);
+  if (add) element.classList.add(add);
+}
+
+// src/functions/getRequiredElement.ts
+function getRequiredElement(root, selector) {
+  const el = root.querySelector(`${selector}`);
+  if (!el) {
+    throw new Error(`Missing element: ${selector}`);
+  }
+  return el;
+}
+
+// src/web-components/wavelength-checkbox.ts
+var checkboxTemplate = document.createElement("template");
+checkboxTemplate.innerHTML = `
+    <style>
+
+  .checkbox-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center; 
+  cursor: pointer;
+}
+
+  .checkbox-container input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  
+  .custom-checkbox {
+  --size: 20px;
+  --border: 2px;
+  --check-left: 6.5px;
+  --check-top: 1.5px;
+  --check-width: 5px;
+  --check-height: 10px;
+  --halo: 12px;
+
+  width: var(--size);
+  height: var(--size);
+  border: var(--border) solid #444;
+  border-radius: 4px;
+  background: #fff;
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+}
+
+
+  .custom-checkbox::before {
+    content: "";
+    position: absolute;
+    inset: calc(var(--halo) * -1); /* controls halo size */
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 50%;        /* THIS makes it circular */
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    z-index: -1;
+  }
+
+
+  .checkbox-container:hover .custom-checkbox::before {
+    opacity: 1;
+  }
+
+  
+  .checkbox-container input:checked + .custom-checkbox {
+    background-color: #444;
+  }
+
+  
+  .checkbox-container input:checked + .custom-checkbox::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: var(--check-width);
+  height: var(--check-height);
+  border: solid white;
+  border-width: 0 var(--border) var(--border) 0;
+  transform: translate(-50%, -60%) rotate(45deg);
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.light::after {
+    border: solid white;
+    border-width: 0 2px 2px 0;
+  }
+  
+  .checkbox-container input:checked + .custom-checkbox.dark::after {
+    border: solid black;
+    border-width: 0 2px 2px 0;
+  }
+
+  .primary::before {
+    background: #2196F335;
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.primary {
+    background-color: #2196F3;
+    border-color: #2196F3;
+  }
+
+  .secondary::before {
+    background: #7B1FA235;
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.secondary {
+    background-color: #7B1FA2;
+    border-color: #7B1FA2;
+  }
+
+  .error::before {
+    background: #D32F2F35;
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.error {
+    background-color: #D32F2F;
+    border-color: #D32F2F;
+  }
+
+  .warning::before {
+    background: #EF6C0035;
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.warning {
+    background-color: #EF6C00;
+    border-color: #EF6C00;
+  }
+
+  .info::before {
+    background: #0288D135;
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.info {
+    background-color: #0288D1;
+    border-color: #0288D1;
+  }
+
+  .success::before {
+    background: #2E7D3235;
+  }
+
+  .checkbox-container input:checked + .custom-checkbox.success {
+    background-color: #2E7D32;
+    border-color: #2E7D32;
+  }
+
+  .custom-checkbox.small {
+  --size: 18px;
+  --check-left: 4.5px;
+  --check-top: 1px;
+  --check-width: 3px;
+  --check-height: 7px;
+  --halo: 10px;
+}
+
+.custom-checkbox.medium {
+  
+}
+
+.custom-checkbox.large {
+  --size: 25px;
+  --border: 2px;
+  --check-left: 9px;
+  --check-top: 2px;
+  --check-width: 7px;
+  --check-height: 14px;
+  --halo: 15px;
+}
+
+.custom-checkbox.disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  border-color: rgba(128, 128, 128, 0.85); 
+  background: #f5f5f5;
+}
+
+.custom-checkbox.disabled::before {
+  opacity: 0 !important;
+  display: none;
+}
+
+.checkbox-container:hover .custom-checkbox.disabled::before {
+  opacity: 0;
+}
+
+.checkbox-container input:checked + .custom-checkbox.disabled::after {
+  border-color: rgba(120, 120, 120, 0.85);
+}
+
+.checkbox-container::after {
+  content: attr(text);
+  font-size: 14px;
+  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  line-height: 1;       
+  margin-left: 8px;
+  color: #333;
+  user-select: none;
+}
+
+
+.checkbox-container.small::after {
+  font-size: 14px;
+}
+
+.checkbox-container.medium::after {
+  font-size: 16px; /* default */
+}
+
+.checkbox-container.large::after {
+  font-size: 18px;
+}
+
+</style>
+
+<label class="checkbox-container" text="">
+  <input type="checkbox"/>
+  <span class="custom-checkbox"></span>
+</label>
+`;
+var BaseWavelengthCheckbox = class extends HTMLElement {
+  constructor() {
+    super();
+    this.initialized = false;
+    this.attributeHandlers = {
+      size: (value) => {
+        swapCSSClass(this.elements.box, ["small", "medium", "large"], value ?? "medium");
+      },
+      color: (value) => {
+        swapCSSClass(this.elements.box, ["primary", "secondary", "error", "warning", "info", "success"], value ?? "primary");
+      },
+      theme: (value) => {
+        swapCSSClass(this.elements.box, ["light", "dark"], value ?? "light");
+      },
+      disabled: (value) => {
+        if (value === "") {
+          this.elements.input.disabled = true;
+          swapCSSClass(this.elements.box, ["enabled", "disabled"], "disabled");
+        } else {
+          swapCSSClass(this.elements.box, ["enabled", "disabled"], "enabled");
+          this.elements.input.disabled = false;
+        }
+      },
+      text: (value) => {
+        if (value === null) {
+          this.elements.label.removeAttribute("text");
+        } else {
+          this.elements.label.setAttribute("text", value);
+        }
+      },
+      textSize: (value) => {
+        swapCSSClass(this.elements.label, ["small", "medium", "large"], value ?? "medium");
+      }
+    };
+    this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["size", "color", "theme", "disabled", "text", "text-size"];
+  }
+  connectedCallback() {
+    if (!this.initialized) {
+      this.shadowRoot.innerHTML = checkboxTemplate.innerHTML;
+      this.elements = {
+        box: getRequiredElement(this.shadowRoot, "span"),
+        input: getRequiredElement(this.shadowRoot, "input"),
+        label: getRequiredElement(this.shadowRoot, "label")
+      };
+      this.styleCheckbox();
+      this.initialized = true;
+    }
+  }
+  attributeChangedCallback() {
+    if (this.initialized) this.styleCheckbox();
+  }
+  styleCheckbox() {
+    if (!this.initialized) return;
+    for (const key in this.attributeHandlers) {
+      const attr = key === "textSize" ? "text-size" : key;
+      this.attributeHandlers[key](this.getAttribute(attr));
+    }
+  }
+};
+var WavelengthCheckbox = class extends StylingMixin(BaseWavelengthCheckbox) {
+};
+if (!customElements.get("wavelength-checkbox")) {
+  customElements.define("wavelength-checkbox", WavelengthCheckbox);
+}
+
 // src/web-components/wavelength-file-drop-zone.ts
 var fileDropZoneTemplate = document.createElement("template");
 fileDropZoneTemplate.innerHTML = `
@@ -5646,6 +5939,7 @@ export {
   SampleComponent,
   WavelengthBanner,
   WavelengthButton,
+  WavelengthCheckbox,
   WavelengthDatePicker,
   WavelengthFileDropZone,
   WavelengthForm,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/web-components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Common component library used by Wavelength developers (NATIVE WEB COMPONENTS)",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",