@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.10

package/src/components/checkbox/checkbox.ts

@@ -1,238 +1,266 @@
-import {LitElement, html, css, PropertyValues} from "lit";
-import {customElement, property, query} from "lit/decorators.js";
-import {resetStyles} from "../../styles/reset.js";
-
-@customElement("st-checkbox")
-export class StCheckbox extends LitElement {
-  static formAssociated = true;
-  private _internals: ElementInternals;
-
-  @query("input") private _inputEl!: HTMLInputElement;
-
-  @property({type: String, reflect: true}) size: "sm" | "md" | "lg" = "md";
-  @property({type: String, reflect: true}) name = "";
-  // Checkboxes default to 'on' natively if no value is provided
-  @property({type: String}) value = "on";
-
-  @property({type: Boolean, reflect: true}) checked = false;
-  @property({type: Boolean, reflect: true}) indeterminate = false;
-
-  @property({type: Boolean, reflect: true}) disabled = false;
-  @property({type: Boolean, reflect: true}) invalid = false;
-  @property({type: Boolean, reflect: true}) required = false;
-
-  @property({attribute: "aria-label"}) ariaLabel = "";
-
-constructor() {
-    super();
-    this._internals = this.attachInternals();
-
-    // 1. Trigger error state if the user clicks away and the field is invalid
-    this.addEventListener('focusout', () => {
-      this.invalid = !this._inputEl.validity.valid;
-    });
-
-    // 2. Trigger error state if the st-form tries to submit and fails
-    this.addEventListener('invalid', () => {
-      this.invalid = true;
-    });
-  }
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: inline-block;
-        outline: none;
-        user-select: none;
-        --checkbox-size: 1.25rem;
-        --checkbox-icon-size: 0.875rem;
-      }
-
-      :host([size="sm"]) {
-        --checkbox-size: 1rem;
-        --checkbox-icon-size: 0.75rem;
-      }
-      :host([size="lg"]) {
-        --checkbox-size: 1.5rem;
-        --checkbox-icon-size: 1rem;
-      }
-
-      label {
-        display: inline-flex;
-        align-items: flex-start;
-        gap: var(--st-spacing-sm);
-        cursor: pointer;
-        color: var(--st-color-text);
-        font-size: var(--st-font-size-base);
-      }
-
-      /* Visually hide the native input but keep it in the DOM for focus/screen readers */
-      input {
-        position: absolute;
-        width: var(--checkbox-size);
-        height: var(--checkbox-size);
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border-width: 0;
-      }
-
-      /* Custom Checkbox Box */
-      .control {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: var(--checkbox-size);
-        height: var(--checkbox-size);
-        border: 1px solid var(--st-color-border);
-        border-radius: 4px;
-        background-color: var(--st-color-bg);
-        transition: all 0.2s ease;
-        flex-shrink: 0;
-        /* Aligns the box nicely with standard text line-height */
-        margin-top: 0.125rem;
-      }
-
-      /* Hover State */
-      label:hover .control {
-        border-color: var(--st-color-primary-hover);
-      }
-
-      /* Focus State */
-      input:focus-visible + .control {
-        box-shadow:
-          0 0 0 2px var(--st-color-bg),
-          0 0 0 4px var(--st-color-primary);
-      }
-
-      /* Checked & Indeterminate States */
-      :host([checked]) .control,
-      :host([indeterminate]) .control {
-        border-color: var(--st-color-primary);
-        background-color: var(--st-color-primary);
-      }
-
-      /* SVG Icons */
-      svg {
-        width: var(--checkbox-icon-size);
-        height: var(--checkbox-icon-size);
-        stroke: var(--st-white);
-        stroke-width: 3;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        fill: none;
-        opacity: 0;
-        transform: scale(0.5);
-        transition:
-          transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
-          opacity 0.2s ease;
-      }
-
-      /* Reveal Icons */
-      :host([checked]) svg.icon-check,
-      :host([indeterminate]) svg.icon-minus {
-        opacity: 1;
-        transform: scale(1);
-      }
-
-      /* Disabled State */
-      :host([disabled]) {
-        pointer-events: none;
-      }
-      :host([disabled]) label {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      /* Invalid State */
-      :host([invalid]) .control {
-        border-color: var(--st-color-error);
-      }
-      :host([invalid]) input:focus-visible + .control {
-        box-shadow:
-          0 0 0 2px var(--st-color-bg),
-          0 0 0 4px var(--st-color-error);
-      }
-    `,
-  ];
-
-  override updated(changedProperties: PropertyValues<this>) {
-    super.updated(changedProperties);
-
-    if (changedProperties.has("checked") || changedProperties.has("value")) {
-      // Form API: If checked, submit the value. If unchecked, submit null to remove it from FormData.
-      this._internals.setFormValue(this.checked ? this.value : null);
-      this._syncValidity();
-    }
-
-    if (changedProperties.has("required")) {
-      this._syncValidity();
-    }
-  }
-
-  private _syncValidity() {
-    if (!this._inputEl) return;
-    this._internals.setValidity(
-      this._inputEl.validity,
-      this._inputEl.validationMessage,
-      this._inputEl,
-    );
-  }
-
-  formResetCallback() {
-    this.checked = false;
-    this.indeterminate = false;
-    this._internals.setFormValue(null);
-    this.updateComplete.then(() => this._syncValidity());
-  }
-
-  private _handleChange(e: Event) {
-    e.stopPropagation();
-
-    if (this.disabled) return;
-
-    // Standard native behavior: clicking an indeterminate checkbox unsets the indeterminate state
-    if (this.indeterminate) {
-      this.indeterminate = false;
-    }
-
-    this.checked = this._inputEl.checked;
-    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
-  }
-
-  render() {
-    return html`
-      <label>
-        <input
-          type="checkbox"
-          aria-label=${this.ariaLabel || ""}
-          .name=${this.name}
-          .value=${this.value}
-          .checked=${this.checked}
-          .indeterminate=${this.indeterminate}
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          @change=${this._handleChange}
-        />
-        <div class="control">
-          <!-- Render both SVGs and use CSS to conditionally reveal them based on host attributes -->
-          ${this.indeterminate
-            ? html`<svg class="icon-minus" viewBox="0 0 24 24"><path d="M5 12h14"></path></svg>`
-            : html`<svg class="icon-check" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>`}
-        </div>
-        <span class="label"><slot></slot></span>
-      </label>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "st-checkbox": StCheckbox;
-  }
-}
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, query} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+@customElement("st-checkbox")
+export class StCheckbox extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @query("input") private _inputEl!: HTMLInputElement;
+
+  @property({type: String, reflect: true}) size: "sm" | "md" | "lg" = "md";
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) value = "on";
+
+  @property({type: Boolean, reflect: true}) checked = false;
+  @property({type: Boolean, reflect: true}) indeterminate = false;
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) invalid = false;
+  @property({type: Boolean, reflect: true}) required = false;
+  @property({type: String}) errorMessage = "";
+
+  @property({attribute: "aria-label"}) ariaLabel = "";
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+
+    this.addEventListener('focusout', () => {
+      this.invalid = !this.checkValidity();
+    });
+
+    this.addEventListener('invalid', () => {
+      this.invalid = !this.checkValidity();
+    });
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-block;
+        outline: none;
+        user-select: none;
+        --checkbox-size: 1.25rem;
+        --checkbox-icon-size: 0.875rem;
+      }
+
+      :host([size="sm"]) {
+        --checkbox-size: 1rem;
+        --checkbox-icon-size: 0.75rem;
+      }
+      :host([size="lg"]) {
+        --checkbox-size: 1.5rem;
+        --checkbox-icon-size: 1rem;
+      }
+
+      label {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var(--st-spacing-sm);
+        cursor: pointer;
+        color: var(--st-color-text);
+        font-size: var(--st-font-size-base);
+      }
+
+      input {
+        position: absolute;
+        width: var(--checkbox-size);
+        height: var(--checkbox-size);
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+      }
+
+      .control {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--checkbox-size);
+        height: var(--checkbox-size);
+        border: 1px solid var(--st-color-border);
+        border-radius: 4px;
+        background-color: var(--st-color-bg);
+        transition: all 0.2s ease;
+        flex-shrink: 0;
+        margin-top: 0.125rem;
+      }
+
+      label:hover .control {
+        border-color: var(--st-color-primary-hover);
+      }
+
+      input:focus-visible + .control {
+        box-shadow:
+          0 0 0 2px var(--st-color-bg),
+          0 0 0 4px var(--st-color-primary);
+      }
+
+      :host([checked]) .control,
+      :host([indeterminate]) .control {
+        border-color: var(--st-color-primary);
+        background-color: var(--st-color-primary);
+      }
+
+      svg {
+        width: var(--checkbox-icon-size);
+        height: var(--checkbox-icon-size);
+        stroke: var(--st-white);
+        stroke-width: 3;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+        opacity: 0;
+        transform: scale(0.5);
+        transition:
+          transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+          opacity 0.2s ease;
+      }
+
+      :host([checked]) svg.icon-check,
+      :host([indeterminate]) svg.icon-minus {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      :host([disabled]) {
+        pointer-events: none;
+      }
+      :host([disabled]) label {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      :host([invalid]) .control {
+        border-color: var(--st-color-error);
+      }
+      :host([invalid]) input:focus-visible + .control {
+        box-shadow:
+          0 0 0 2px var(--st-color-bg),
+          0 0 0 4px var(--st-color-error);
+      }
+    `,
+  ];
+
+  override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("checked") || changedProperties.has("value") || changedProperties.has("errorMessage")) {
+      this._internals.setFormValue(this.checked ? this.value : null);
+      this._syncValidity();
+    }
+
+    if (changedProperties.has("required")) {
+      this._syncValidity();
+    }
+  }
+
+  private _syncValidity() {
+    if (!this._inputEl) return;
+
+    if (this.required && !this.checked) {
+      const message = this.errorMessage || this._inputEl.validationMessage || "Please check this box if you want to proceed.";
+      this._internals.setValidity(
+        {valueMissing: true},
+        message,
+        this._inputEl,
+      );
+    } else {
+      this._internals.setValidity(
+        this._inputEl.validity,
+        this._inputEl.validationMessage,
+        this._inputEl,
+      );
+    }
+  }
+
+  public checkValidity(): boolean {
+    if (!this._inputEl) return true;
+
+    if (this.required && !this.checked) {
+      const message = this.errorMessage || this._inputEl.validationMessage || "Please check this box if you want to proceed.";
+      this._internals.setValidity(
+        {valueMissing: true},
+        message,
+        this._inputEl,
+      );
+      this.invalid = true;
+      return false;
+    }
+
+    const isValid = this._inputEl.checkValidity();
+    this._syncValidity();
+    this.invalid = !isValid;
+    return isValid;
+  }
+
+  public reportValidity(): boolean {
+    this._syncValidity();
+    const isValid = this._internals.reportValidity();
+    this.invalid = !isValid;
+    return isValid;
+  }
+
+  formResetCallback() {
+    this.checked = false;
+    this.indeterminate = false;
+    this.invalid = false;
+    this._internals.setFormValue(null);
+    this.updateComplete.then(() => this._syncValidity());
+  }
+
+  private _handleChange(e: Event) {
+    e.stopPropagation();
+
+    if (this.disabled) return;
+
+    if (this.indeterminate) {
+      this.indeterminate = false;
+    }
+
+    this.checked = this._inputEl.checked;
+    
+    if (this.checkValidity()) {
+      this.invalid = false;
+    }
+
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  }
+
+  render() {
+    return html`
+      <label>
+        <input
+          type="checkbox"
+          aria-label=${this.ariaLabel || ""}
+          .name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          .indeterminate=${this.indeterminate}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          @change=${this._handleChange}
+        />
+        <div class="control">
+          ${this.indeterminate
+            ? html`<svg class="icon-minus" viewBox="0 0 24 24"><path d="M5 12h14"></path></svg>`
+            : html`<svg class="icon-check" viewBox="0 0 24 24">
+                <path d="M20 6L9 17l-5-5"></path>
+              </svg>`}
+        </div>
+        <span class="label"><slot></slot></span>
+      </label>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-checkbox": StCheckbox;
+  }
+}