@copilotkit/a2ui-renderer/dist/web-components/catalog/basic/check-box.mjs

A2UI Renderer for CopilotKit - render A2UI surfaces in React applications

import { createLitComponent } from "../../adapter.mjs";
import { LEAF_MARGIN } from "./utils.mjs";
import { uniqueId } from "./ids.mjs";
import { html, nothing } from "lit";
import { CheckBoxApi } from "@a2ui/web_core/v0_9/basic_catalog";
import { styleMap } from "lit/directives/style-map.js";

//#region src/web-components/catalog/basic/check-box.ts
const CheckBox = createLitComponent(CheckBoxApi, ({ props }) => {
	const inputId = uniqueId("checkbox");
	const hasError = props.validationErrors && props.validationErrors.length > 0;
	return html`
    <div
      style=${styleMap({
		display: "flex",
		flexDirection: "column",
		margin: LEAF_MARGIN
	})}
    >
      <div style="display: flex; align-items: center; gap: 8px;">
        <input
          id=${inputId}
          type="checkbox"
          .checked=${!!props.value}
          @change=${(e) => props.setValue(e.target.checked)}
          style=${styleMap({
		cursor: "pointer",
		outline: hasError ? "1px solid red" : "none"
	})}
        />
        ${props.label ? html`<label
              for=${inputId}
              style=${styleMap({
		cursor: "pointer",
		color: hasError ? "red" : "inherit"
	})}
              >${props.label}</label
            >` : nothing}
      </div>
      ${hasError ? html`<span
            style="font-size: 12px; color: red; margin-top: 4px;"
            >${props.validationErrors?.[0]}</span
          >` : nothing}
    </div>
  `;
});

//#endregion
export { CheckBox };
//# sourceMappingURL=check-box.mjs.map