@countermeasure-platform/web-components 0.2.0

package/dist/button-DKuKl4vs.js

@@ -0,0 +1,69 @@
+import { t as e } from "./purify.es-oNgIHWpC.js";
+import { n as t, t as n } from "./utils-Cn_W3h3f.js";
+//#region src/primitives/button/button-group.ts
+var r = class {
+	el;
+	constructor(e) {
+		let t = e.orientation ?? "horizontal";
+		this.el = document.createElement("div"), this.el.className = `cmm-btn-group cmm-btn-group--${t}`, this.el.setAttribute("role", "group"), e.className && this.el.classList.add(e.className), e.container !== void 0 && n(e.container).appendChild(this.el);
+	}
+	add(e) {
+		this.el.appendChild(e.el);
+	}
+	remove(e) {
+		this.el.contains(e.el) && this.el.removeChild(e.el);
+	}
+	destroy() {
+		this.el.remove();
+	}
+}, i = class {
+	el;
+	labelEl;
+	iconEl = null;
+	spinnerEl = null;
+	loadingTextEl = null;
+	btnId;
+	currentVariant;
+	currentSize;
+	isLoading;
+	clickHandler;
+	constructor(r) {
+		this.btnId = t("cmm-btn"), this.currentVariant = r.variant ?? "primary", this.currentSize = r.size ?? "md", this.isLoading = r.loading === !0, this.clickHandler = r.onClick, this.el = document.createElement("button"), this.el.id = this.btnId, this.el.type = r.type ?? "button", this.el.className = this.buildClassName(r.className), r.ariaLabel !== void 0 && this.el.setAttribute("aria-label", r.ariaLabel), (r.disabled === !0 || this.isLoading) && (this.el.disabled = !0, this.el.setAttribute("aria-disabled", "true")), this.labelEl = document.createElement("span"), this.labelEl.className = "cmm-btn__label", r.label !== void 0 && (this.labelEl.textContent = r.label), r.icon !== void 0 && (this.iconEl = document.createElement("span"), this.iconEl.className = "cmm-btn__icon", this.iconEl.innerHTML = e.sanitize(r.icon, { USE_PROFILES: { svg: !0 } })), this.buildContent(r.iconPosition ?? "left"), this.isLoading && this.applyLoadingState(), this.clickHandler !== void 0 && this.el.addEventListener("click", this.clickHandler), r.container !== void 0 && n(r.container).appendChild(this.el);
+	}
+	setLabel(e) {
+		this.labelEl.textContent = e;
+	}
+	setDisabled(e) {
+		this.el.disabled = e || this.isLoading, e ? this.el.setAttribute("aria-disabled", "true") : this.isLoading || this.el.removeAttribute("aria-disabled");
+	}
+	setLoading(e) {
+		this.isLoading = e, e ? (this.el.classList.add("cmm-btn--loading"), this.el.disabled = !0, this.el.setAttribute("aria-disabled", "true"), this.applyLoadingState()) : (this.el.classList.remove("cmm-btn--loading"), this.el.disabled = !1, this.el.removeAttribute("aria-disabled"), this.removeLoadingState());
+	}
+	setVariant(e) {
+		this.el.classList.remove(`cmm-btn--${this.currentVariant}`), this.currentVariant = e, this.el.classList.add(`cmm-btn--${this.currentVariant}`);
+	}
+	destroy() {
+		this.clickHandler !== void 0 && this.el.removeEventListener("click", this.clickHandler), this.el.remove();
+	}
+	buildClassName(e) {
+		let t = [
+			"cmm-btn",
+			`cmm-btn--${this.currentVariant}`,
+			`cmm-btn--${this.currentSize}`
+		];
+		return this.isLoading && t.push("cmm-btn--loading"), e && t.push(e), t.join(" ");
+	}
+	buildContent(e) {
+		this.el.innerHTML = "", this.iconEl !== null && e === "left" && this.el.appendChild(this.iconEl), this.el.appendChild(this.labelEl), this.iconEl !== null && e === "right" && this.el.appendChild(this.iconEl);
+	}
+	applyLoadingState() {
+		this.spinnerEl === null && (this.spinnerEl = document.createElement("span"), this.spinnerEl.className = "cmm-btn__spinner", this.spinnerEl.setAttribute("aria-hidden", "true"), this.el.insertBefore(this.spinnerEl, this.el.firstChild), this.loadingTextEl = document.createElement("span"), this.loadingTextEl.className = "cmm-sr-only", this.loadingTextEl.textContent = "Loading", this.loadingTextEl.style.cssText = "\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    ", this.el.insertBefore(this.loadingTextEl, this.el.firstChild), this.el.setAttribute("aria-busy", "true"));
+	}
+	removeLoadingState() {
+		this.spinnerEl !== null && (this.spinnerEl.remove(), this.spinnerEl = null), this.loadingTextEl !== null && (this.loadingTextEl.remove(), this.loadingTextEl = null), this.el.removeAttribute("aria-busy");
+	}
+};
+//#endregion
+export { r as n, i as t };
+
+//# sourceMappingURL=button-DKuKl4vs.js.map

package/dist/button-DKuKl4vs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-DKuKl4vs.js","names":[],"sources":["../src/primitives/button/button-group.ts","../src/primitives/button/index.ts"],"sourcesContent":["/**\n * ButtonGroup - Groups buttons into a connected visual unit\n * @countermeasure/web-components/primitives/button\n */\n\nimport { type ButtonGroupConfig } from './types'\nimport { type Button } from './index'\nimport { resolveContainer } from '../utils'\n\nexport class ButtonGroup {\n  public readonly el: HTMLDivElement\n\n  constructor(config: ButtonGroupConfig) {\n    const orientation = config.orientation ?? 'horizontal'\n\n    this.el = document.createElement('div')\n    this.el.className = `cmm-btn-group cmm-btn-group--${orientation}`\n    this.el.setAttribute('role', 'group')\n\n    if (config.className) {\n      this.el.classList.add(config.className)\n    }\n\n    // Mount if container provided\n    if (config.container !== undefined) {\n      const parent = resolveContainer(config.container)\n      parent.appendChild(this.el)\n    }\n  }\n\n  /** Add a button to the group */\n  add(button: Button): void {\n    this.el.appendChild(button.el)\n  }\n\n  /** Remove a button from the group */\n  remove(button: Button): void {\n    if (this.el.contains(button.el)) {\n      this.el.removeChild(button.el)\n    }\n  }\n\n  /** Remove the group from the DOM */\n  destroy(): void {\n    this.el.remove()\n  }\n}\n","/**\n * Button - Primary interactive button component\n * @countermeasure/web-components/primitives/button\n */\n\nimport DOMPurify from 'dompurify'\nimport { type ButtonConfig, type ButtonVariant, type ButtonSize } from './types'\nimport { resolveContainer, uniqueId } from '../utils'\n\nexport type { ButtonConfig, ButtonVariant, ButtonSize, ButtonGroupConfig } from './types'\nexport { ButtonGroup } from './button-group'\n\nexport class Button {\n  public readonly el: HTMLButtonElement\n\n  private labelEl: HTMLSpanElement\n  private iconEl: HTMLSpanElement | null = null\n  private spinnerEl: HTMLSpanElement | null = null\n  private loadingTextEl: HTMLSpanElement | null = null\n  private readonly btnId: string\n  private currentVariant: ButtonVariant\n  private currentSize: ButtonSize\n  private isLoading: boolean\n  private readonly clickHandler: (() => void) | undefined\n\n  constructor(config: ButtonConfig) {\n    this.btnId = uniqueId('cmm-btn')\n    this.currentVariant = config.variant ?? 'primary'\n    this.currentSize = config.size ?? 'md'\n    this.isLoading = config.loading === true\n    this.clickHandler = config.onClick\n\n    // Create the button element\n    this.el = document.createElement('button')\n    this.el.id = this.btnId\n    this.el.type = config.type ?? 'button'\n    this.el.className = this.buildClassName(config.className)\n\n    // Set ARIA attributes\n    if (config.ariaLabel !== undefined) {\n      this.el.setAttribute('aria-label', config.ariaLabel)\n    }\n\n    // Set disabled state\n    if (config.disabled === true || this.isLoading) {\n      this.el.disabled = true\n      this.el.setAttribute('aria-disabled', 'true')\n    }\n\n    // Create label span\n    this.labelEl = document.createElement('span')\n    this.labelEl.className = 'cmm-btn__label'\n    if (config.label !== undefined) {\n      this.labelEl.textContent = config.label\n    }\n\n    // Create icon span if needed\n    if (config.icon !== undefined) {\n      this.iconEl = document.createElement('span')\n      this.iconEl.className = 'cmm-btn__icon'\n      this.iconEl.innerHTML = DOMPurify.sanitize(config.icon, { USE_PROFILES: { svg: true } })\n    }\n\n    // Build inner content\n    this.buildContent(config.iconPosition ?? 'left')\n\n    // Loading state\n    if (this.isLoading) {\n      this.applyLoadingState()\n    }\n\n    // Click handler\n    if (this.clickHandler !== undefined) {\n      this.el.addEventListener('click', this.clickHandler)\n    }\n\n    // Mount if container provided\n    if (config.container !== undefined) {\n      const parent = resolveContainer(config.container)\n      parent.appendChild(this.el)\n    }\n  }\n\n  /** Update the button label text */\n  setLabel(label: string): void {\n    this.labelEl.textContent = label\n  }\n\n  /** Toggle the disabled state */\n  setDisabled(disabled: boolean): void {\n    this.el.disabled = disabled || this.isLoading\n    if (disabled) {\n      this.el.setAttribute('aria-disabled', 'true')\n    } else if (!this.isLoading) {\n      this.el.removeAttribute('aria-disabled')\n    }\n  }\n\n  /** Toggle the loading spinner */\n  setLoading(loading: boolean): void {\n    this.isLoading = loading\n\n    if (loading) {\n      this.el.classList.add('cmm-btn--loading')\n      this.el.disabled = true\n      this.el.setAttribute('aria-disabled', 'true')\n      this.applyLoadingState()\n    } else {\n      this.el.classList.remove('cmm-btn--loading')\n      this.el.disabled = false\n      this.el.removeAttribute('aria-disabled')\n      this.removeLoadingState()\n    }\n  }\n\n  /** Change the button variant */\n  setVariant(variant: ButtonVariant): void {\n    this.el.classList.remove(`cmm-btn--${this.currentVariant}`)\n    this.currentVariant = variant\n    this.el.classList.add(`cmm-btn--${this.currentVariant}`)\n  }\n\n  /** Remove the button from the DOM and clean up event listeners */\n  destroy(): void {\n    if (this.clickHandler !== undefined) {\n      this.el.removeEventListener('click', this.clickHandler)\n    }\n    this.el.remove()\n  }\n\n  private buildClassName(extra?: string): string {\n    const classes = ['cmm-btn', `cmm-btn--${this.currentVariant}`, `cmm-btn--${this.currentSize}`]\n    if (this.isLoading) {\n      classes.push('cmm-btn--loading')\n    }\n    if (extra) {\n      classes.push(extra)\n    }\n    return classes.join(' ')\n  }\n\n  private buildContent(iconPosition: 'left' | 'right'): void {\n    this.el.innerHTML = ''\n\n    if (this.iconEl !== null && iconPosition === 'left') {\n      this.el.appendChild(this.iconEl)\n    }\n\n    this.el.appendChild(this.labelEl)\n\n    if (this.iconEl !== null && iconPosition === 'right') {\n      this.el.appendChild(this.iconEl)\n    }\n  }\n\n  private applyLoadingState(): void {\n    if (this.spinnerEl !== null) {\n      return\n    }\n\n    // Create spinner element (visual)\n    this.spinnerEl = document.createElement('span')\n    this.spinnerEl.className = 'cmm-btn__spinner'\n    this.spinnerEl.setAttribute('aria-hidden', 'true')\n    this.el.insertBefore(this.spinnerEl, this.el.firstChild)\n\n    // Create visually hidden text for screen readers\n    this.loadingTextEl = document.createElement('span')\n    this.loadingTextEl.className = 'cmm-sr-only'\n    this.loadingTextEl.textContent = 'Loading'\n    this.loadingTextEl.style.cssText = `\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    `\n    this.el.insertBefore(this.loadingTextEl, this.el.firstChild)\n\n    // Set aria-busy to indicate loading state\n    this.el.setAttribute('aria-busy', 'true')\n  }\n\n  private removeLoadingState(): void {\n    if (this.spinnerEl !== null) {\n      this.spinnerEl.remove()\n      this.spinnerEl = null\n    }\n    if (this.loadingTextEl !== null) {\n      this.loadingTextEl.remove()\n      this.loadingTextEl = null\n    }\n    this.el.removeAttribute('aria-busy')\n  }\n}\n"],"mappings":"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"}