@mono-lit/helper 0.0.9 → 0.1.0

package/dist/ui/shadow/checkbox.js

@@ -1,298 +1,10 @@
-import { a as __decorate, c as defineHybridPropAlias, f as customElement, i as withShadowUtilityStyles, l as defineHybridPropAliases, r as toShadowCss, s as booleanStringConverter, t as flushSsrHydration } from "../../hydration-flush-BaE9gN3C.js";
-import { t as dispatchMonoEvent } from "../../mono-event-BPku9HpS.js";
-import { t as MonoFormControlCore } from "../../form-control-core-BbiACMtL.js";
+import { t as customElement } from "../../mono-element-CKcT0rwv.js";
+import { t as __decorate } from "../../decorate-DbYFpi8R.js";
+import { n as validateCheckboxProps, r as MonoCheckboxCore, t as generateCheckboxAttributes } from "../../checkbox-utils-DKdrhAzF.js";
+import { i as withShadowUtilityStyles, r as toShadowCss, t as flushSsrHydration } from "../../hydration-flush-Volt9X7Q.js";
 import { t as checkbox_css_raw_default } from "../../checkbox.css_raw-AYtSbUtY.js";
 import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
-import { property, state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 
-//#region src/components/checkbox/checkbox-core.ts
-/**
-* `MonoCheckboxCore` — all render-mode-agnostic logic for `mono-checkbox`:
-* reactive props (incl. SSR boolean coercion), hybrid aliases, camelCase
-* attribute fallbacks, the `modelValue`↔`checked` sync, class computation,
-* change interactivity (`mno-change`), `focus`/`blur`, AND the shared `render()`
-* skeleton (`<label><input><box></box><labelBlock></label>`). The slot-bearing
-* regions are two overridable hooks — `_renderCustomIcon()` / `_renderLabelBlock()`
-* — that default to the light build's `[data-mono-slot]` placeholders; the shadow
-* build overrides them with native `<slot>` (mirrors `mono-accordion`).
-*
-* SSR-safe: no `document`/`window` access; `focus`/`blur` query `this.renderRoot`.
-*/
-const MonoCheckboxCore = (superClass) => {
-	class MonoCheckboxCoreClass extends MonoFormControlCore(superClass) {
-		constructor(...args) {
-			super(...args);
-			this.size = "md";
-			this.color = "primary";
-			this.modelValue = false;
-			this.checked = false;
-			this.disabled = false;
-			this.indeterminate = false;
-			this.loading = false;
-			this.label = "";
-			this.sublabel = "";
-			this.value = "";
-			this.name = "";
-			this.cssClass = {};
-			this.cssClassName = "";
-			this._hasIcon = false;
-			this._hasIndeterminateIcon = false;
-			this._hasLabelSlotState = false;
-			this._hasDescriptionSlotState = false;
-			defineHybridPropAliases(this, [
-				"modelValue",
-				"ariaLabelText",
-				"cssClass"
-			]);
-			defineHybridPropAlias(this, "description", "sublabel");
-		}
-		static get observedAttributes() {
-			return [
-				...super.observedAttributes ?? [],
-				"modelvalue",
-				"arialabeltext",
-				"description",
-				"css-class",
-				"cssclass"
-			];
-		}
-		attributeChangedCallback(name, oldValue, newValue) {
-			super.attributeChangedCallback(name, oldValue, newValue);
-			if (oldValue === newValue) return;
-			if (name === "modelvalue") {
-				this.modelValue = this._toBoolean(newValue);
-				return;
-			}
-			if (name === "arialabeltext") {
-				this.ariaLabelText = newValue ?? void 0;
-				return;
-			}
-			if (name === "description") {
-				this.sublabel = newValue ?? "";
-				return;
-			}
-			if (name === "css-class" || name === "cssclass") this.cssClassName = newValue ?? "";
-		}
-		willUpdate(changed) {
-			for (const key of [
-				"modelValue",
-				"checked",
-				"disabled",
-				"indeterminate"
-			]) if (typeof this[key] === "string") this[key] = this._toBoolean(this[key]);
-			if (changed.has("modelValue") && this.checked !== this.modelValue) this.checked = this.modelValue;
-			if (changed.has("checked") && this.modelValue !== this.checked) this.modelValue = this.checked;
-			super.willUpdate?.(changed);
-		}
-		_toBoolean(value) {
-			if (typeof value === "boolean") return value;
-			if (typeof value === "string") {
-				const normalized = value.toLowerCase().trim();
-				return normalized === "" || normalized === "true";
-			}
-			return Boolean(value);
-		}
-		_cls(base, key) {
-			const extra = this.cssClass?.[key];
-			return extra ? `${base} ${extra}` : base;
-		}
-		get _wrapperClasses() {
-			return [
-				"mono-checkbox",
-				this.size,
-				this.color,
-				this.disabled ? "disabled" : "",
-				this.checked ? "mono-checkbox-checked" : "",
-				this.indeterminate ? "mono-checkbox-indeterminate" : "",
-				this.cssClassName,
-				this.cssClass?.root
-			].filter(Boolean).join(" ");
-		}
-		get _inputClasses() {
-			return this._cls("mono-checkbox-input", "input");
-		}
-		get _boxClasses() {
-			return [
-				this._cls("mono-checkbox-box", "box"),
-				this.size,
-				this._hasIcon || this.loading ? "has-custom-icon" : "",
-				this._hasIndeterminateIcon || this.loading ? "has-custom-indeterminate-icon" : ""
-			].filter(Boolean).join(" ");
-		}
-		_hasLabelContent() {
-			return Boolean(this.label) || this._hasLabelSlotState;
-		}
-		_hasDescriptionContent() {
-			return Boolean(this.sublabel) || this._hasDescriptionSlotState;
-		}
-		_createModelDetail(args) {
-			return {
-				modelValue: args.modelValue,
-				currentValue: args.modelValue,
-				oldValue: args.oldValue,
-				checked: args.modelValue,
-				value: this.value,
-				name: this.name,
-				sourceEvent: args.sourceEvent
-			};
-		}
-		_emitChange(detail) {
-			dispatchMonoEvent(this, "change", detail);
-		}
-		_handleChange(event) {
-			if (this.disabled) return;
-			const input = event.currentTarget;
-			const oldValue = this.modelValue;
-			const nextValue = input.checked;
-			if (this.indeterminate) this.indeterminate = false;
-			this.checked = nextValue;
-			this.modelValue = nextValue;
-			const detail = this._createModelDetail({
-				modelValue: nextValue,
-				oldValue,
-				sourceEvent: event
-			});
-			this._emitChange(detail);
-		}
-		/**
-		* The `loading` spinner, shown in place of the tick/dash. Light uses the global
-		* icon utility class; the shadow build overrides this with inline SVG, which
-		* page-level CSS cannot reach.
-		*/
-		_renderLoadingIcon() {
-			return html`<span class="mono-icon i-mdi-loading mono-checkbox-spinner" mono-spinner aria-hidden="true"></span>`;
-		}
-		/** Light-DOM custom icon (data-mono-slot). Shadow build overrides with `<slot>`. */
-		_renderCustomIcon() {
-			if (this.indeterminate && this._hasIndeterminateIcon) return html`
-          <span
-            class=${[this._cls("mono-checkbox-indeterminate-icon", "indeterminateIcon"), this.size].filter(Boolean).join(" ")}
-            mono-indeterminate-icon
-            data-mono-slot="indeterminate-icon"
-          ></span>
-        `;
-			if (this.checked && this._hasIcon) return html`
-          <span
-            class=${[this._cls("mono-checkbox-icon", "icon"), this.size].filter(Boolean).join(" ")}
-            mono-icon
-            data-mono-slot="icon"
-          ></span>
-        `;
-			return nothing;
-		}
-		/** Light-DOM label block (data-mono-slot). Shadow build overrides with `<slot>`. */
-		_renderLabelBlock() {
-			if (!this._hasLabelContent() && !this._hasDescriptionContent()) return nothing;
-			return html`
-        <span class=${this._cls("mono-checkbox-label", "label")} mono-label>
-          ${this._hasLabelContent() ? html`
-                <span class=${this._cls("mono-checkbox-label-text", "labelText")} mono-label-text>
-                  ${this._hasLabelSlotState ? html`<span data-mono-slot="label"></span>` : this.label}
-                </span>
-              ` : nothing}
-
-          ${this._hasDescriptionContent() ? html`
-                <span class=${this._cls("mono-checkbox-label-description", "description")} mono-description>
-                  ${this._hasDescriptionSlotState ? html`<span data-mono-slot="description"></span>` : this.sublabel}
-                </span>
-              ` : nothing}
-        </span>
-      `;
-		}
-		render() {
-			const ariaLabel = this.ariaLabelText || this.label || (this._hasLabelSlotState ? "Checkbox" : void 0);
-			return html`
-        <label
-          class=${this._wrapperClasses}
-          mono-checkbox
-          mono-size=${this.size === "md" ? nothing : this.size}
-          mono-color=${this.color === "primary" ? nothing : this.color}
-          ?mono-checked=${this.checked}
-          ?mono-indeterminate=${this.indeterminate}
-          ?mono-disabled=${this.disabled}
-          ?mono-loading=${this.loading}
-        >
-          <input
-            class=${this._inputClasses}
-            mono-input
-            type="checkbox"
-            .checked=${this.checked}
-            .indeterminate=${this.indeterminate}
-            .value=${this.value}
-            name=${ifDefined(this.name || void 0)}
-            ?disabled=${this.disabled || this.loading}
-            aria-checked=${this.indeterminate ? "mixed" : String(this.checked)}
-            aria-label=${ifDefined(ariaLabel)}
-            aria-busy=${this.loading ? "true" : "false"}
-            @change=${this._handleChange}
-          />
-
-          <span
-            class=${this._boxClasses}
-            mono-box
-            ?mono-custom-icon=${this._hasIcon || this.loading}
-            ?mono-custom-indeterminate-icon=${this._hasIndeterminateIcon || this.loading}
-            aria-hidden="true"
-          >
-            ${this.loading ? this._renderLoadingIcon() : this._renderCustomIcon()}
-          </span>
-
-          ${this._renderLabelBlock()}
-        </label>
-      `;
-		}
-		focus(options) {
-			this.renderRoot.querySelector(".mono-checkbox-input")?.focus(options);
-		}
-		blur() {
-			this.renderRoot.querySelector(".mono-checkbox-input")?.blur();
-		}
-	}
-	__decorate([property({ type: String })], MonoCheckboxCoreClass.prototype, "size", void 0);
-	__decorate([property({ type: String })], MonoCheckboxCoreClass.prototype, "color", void 0);
-	__decorate([property({
-		attribute: "model-value",
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoCheckboxCoreClass.prototype, "modelValue", void 0);
-	__decorate([property({
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoCheckboxCoreClass.prototype, "checked", void 0);
-	__decorate([property({
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoCheckboxCoreClass.prototype, "disabled", void 0);
-	__decorate([property({
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoCheckboxCoreClass.prototype, "indeterminate", void 0);
-	__decorate([property({
-		reflect: true,
-		converter: booleanStringConverter
-	})], MonoCheckboxCoreClass.prototype, "loading", void 0);
-	__decorate([property({ type: String })], MonoCheckboxCoreClass.prototype, "label", void 0);
-	__decorate([property({ type: String })], MonoCheckboxCoreClass.prototype, "sublabel", void 0);
-	__decorate([property({ type: String })], MonoCheckboxCoreClass.prototype, "value", void 0);
-	__decorate([property({ type: String })], MonoCheckboxCoreClass.prototype, "name", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "aria-label"
-	})], MonoCheckboxCoreClass.prototype, "ariaLabelText", void 0);
-	__decorate([property({ attribute: false })], MonoCheckboxCoreClass.prototype, "cssClass", void 0);
-	__decorate([property({
-		type: String,
-		attribute: "css-class"
-	})], MonoCheckboxCoreClass.prototype, "cssClassName", void 0);
-	__decorate([state()], MonoCheckboxCoreClass.prototype, "_hasIcon", void 0);
-	__decorate([state()], MonoCheckboxCoreClass.prototype, "_hasIndeterminateIcon", void 0);
-	__decorate([state()], MonoCheckboxCoreClass.prototype, "_hasLabelSlotState", void 0);
-	__decorate([state()], MonoCheckboxCoreClass.prototype, "_hasDescriptionSlotState", void 0);
-	return MonoCheckboxCoreClass;
-};
-
-//#endregion
 //#region src/components/checkbox/mono-checkbox.shadow.ts
 const SHADOW_EXTRA_CSS = "";
 let MonoCheckboxShadow = class MonoCheckboxShadow extends withShadowUtilityStyles(MonoCheckboxCore(LitElement)) {
@@ -415,47 +127,5 @@ let MonoCheckboxShadow = class MonoCheckboxShadow extends withShadowUtilityStyle
 };
 MonoCheckboxShadow = __decorate([customElement("mono-shadow-checkbox")], MonoCheckboxShadow);
 
-//#endregion
-//#region src/components/checkbox/checkbox-utils.ts
-/**
-* Validate checkbox props
-*/
-function validateCheckboxProps(props) {
-	const validSizes = [
-		"xs",
-		"sm",
-		"md",
-		"lg",
-		"xl",
-		"xxl"
-	];
-	const validColors = [
-		"primary",
-		"secondary",
-		"success",
-		"danger",
-		"warning",
-		"info",
-		"teal",
-		"purple",
-		"neutral",
-		"dark"
-	];
-	if (props.size && !validSizes.includes(props.size)) return false;
-	if (props.color && !validColors.includes(props.color)) return false;
-	return true;
-}
-/**
-* Generate ARIA attributes for accessibility
-*/
-function generateCheckboxAttributes(disabled, checked, indeterminate, label) {
-	return {
-		"aria-disabled": disabled ? "true" : void 0,
-		"aria-checked": indeterminate ? "mixed" : String(checked),
-		"role": "checkbox",
-		"aria-label": label || void 0
-	};
-}
-
 //#endregion
 export { MonoCheckboxCore, MonoCheckboxShadow, generateCheckboxAttributes, validateCheckboxProps };