@wavelengthusaf/web-components 1.4.1 → 1.4.2

package/dist/cjs/index.cjs

@@ -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"], _nullishCoalesce(value, () => ( "medium")));
+      },
+      color: (value) => {
+        swapCSSClass(this.elements.box, ["primary", "secondary", "error", "warning", "info", "success"], _nullishCoalesce(value, () => ( "primary")));
+      },
+      theme: (value) => {
+        swapCSSClass(this.elements.box, ["light", "dark"], _nullishCoalesce(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"], _nullishCoalesce(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 = `
@@ -5655,7 +5948,8 @@ customElements.define("wavelength-file-drop-zone", WavelengthFileDropZone);
 
 
 
-exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthTitleBar = WavelengthTitleBar;
+
+exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthTitleBar = WavelengthTitleBar;
 /*! Bundled license information:
 
 react/cjs/react.production.min.js: