@ed.yakovich/component-library 0.0.13 → 0.0.15

package/dist/prism-checkbox-group.entry-Dwa_mvjd.js

@@ -0,0 +1,62 @@
+import { r as s, c, h as a, H as r, g as n } from "./index-D9BZSjMp.js";
+import { g as o, m as h } from "./index-44540db3-BN5vFHKr.js";
+/*!
+ * Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
+ */
+const p = ".sc-prism-checkbox-group-h{display:block}.parent.sc-prism-checkbox-group{--prism-checkbox-spacing-margin:0}.options.sc-prism-checkbox-group{margin-left:var(--prism-checkbox-group-spacing-gutter,var(--prism-spacer-size-3xl));padding-left:var(--prism-spacer-size-sm)}.group-row.sc-prism-checkbox-group{align-items:center;display:flex;justify-content:space-between;margin-top:var(--prism-spacer-size-lg)}.expandable-content.sc-prism-checkbox-group{max-height:0;overflow:hidden;transition:max-height var(--prism-animation-duration-normal) var(--prism-animation-timing-function);will-change:max-height,opacity}.expandable-content.visible.sc-prism-checkbox-group{display:block;max-height:500vh}.toggle.sc-prism-checkbox-group{margin-left:var(--prism-spacer-size-lg)}.container.sc-prism-checkbox-group{width:100%}@media (min-width:640px){.container.sc-prism-checkbox-group{max-width:640px}}@media (min-width:768px){.container.sc-prism-checkbox-group{max-width:768px}}@media (min-width:1024px){.container.sc-prism-checkbox-group{max-width:1024px}}@media (min-width:1280px){.container.sc-prism-checkbox-group{max-width:1280px}}@media (min-width:1536px){.container.sc-prism-checkbox-group{max-width:1536px}}", d = p, m = class {
+  constructor(e) {
+    s(this, e), this.prismChange = c(this, "prismChange", 7), this.uid = o(), this.toggleSelections = (i) => {
+      this.checkBoxes.forEach((t) => {
+        i.detail.checked ? t.checked = !0 : t.checked = !1;
+      });
+    }, this.name = void 0, this.loading = !1, this.prismId = `prism-checkbox-group-${this.uid}`, this.variant = "static", this.expanded = !0;
+  }
+  connectedCallback() {
+    h("prism-checkbox-group");
+  }
+  _setParentUnchecked() {
+    this.parentCheckbox.checked = !1, this.parentCheckbox.indeterminate = !1;
+  }
+  _setParentChecked() {
+    this.parentCheckbox.checked = !0, this.parentCheckbox.indeterminate = !1;
+  }
+  _setParentIndeterminate() {
+    this.parentCheckbox.checked = !1, this.parentCheckbox.indeterminate = !0;
+  }
+  _setParentCheckbox() {
+    const e = this.checkBoxes.length, i = this.checkBoxes.filter((t) => t.checked === !0).length;
+    return i === 0 ? this._setParentUnchecked() : i === e ? this._setParentChecked() : this._setParentIndeterminate();
+  }
+  componentDidRender() {
+    this.checkBoxes = Array.from(this.checkboxCollection.getElementsByTagName("prism-checkbox")), this.checkBoxes.forEach((e) => {
+      this.loading ? e.setAttribute("disabled", "true") : e.removeAttribute("disabled");
+    }), this._setParentCheckbox();
+  }
+  onCheckboxChange(e) {
+    const i = e.detail, t = i.target;
+    i.target.id !== this.prismId && (this._setParentCheckbox(), this.prismChange.emit({
+      name: "checkbox-group-changed",
+      checked: t.checked,
+      group: t.name,
+      id: t.id,
+      invalid: t.invalid,
+      loading: t.loading,
+      target: t,
+      value: t.value
+    }));
+  }
+  render() {
+    return a(r, { key: "a14a1de5e8adebfeefe2c766d1303051709175fb" }, a("span", { key: "964a7e842881b182edceb0ce2a694554a651e2b3", class: "group-row" }, a("prism-checkbox", { key: "a164bc10a36329078a08ae16199bf9cb39efe98b", ref: (e) => this.parentCheckbox = e, prismId: this.prismId, loading: this.loading, onPrismInput: (e) => this.toggleSelections(e), name: this.name, class: "parent" }), this.variant === "tree" && a("prism-button", { key: "8b8a23ba3a8a86a721969ffcee17cf5ccf4a7f71", class: "toggle", onPrismClick: () => this.expanded = !this.expanded, expanded: this.expanded, size: "xs", display: "ghost-icon", label: `toggle ${this.name}` }, " ", a("prism-icon", { key: "3eb5e14682ca8a1e5192932edbd52a8ecfb70c94", "aria-hidden": "true", priority: "secondary", display: "outline", name: this.expanded ? "caret_up_button" : "caret_down_button" }))), a("div", { key: "6834fd881abc643a76392b7d52da508ccc7a280d", role: "group", "aria-label": this.name, "aria-hidden": this.expanded && this.variant === "tree" ? "false" : this.variant === "tree" ? "true" : null, ref: (e) => this.checkboxCollection = e, class: {
+      options: !0,
+      "expandable-content": this.variant === "tree",
+      visible: this.expanded && this.variant === "tree"
+    } }, a("slot", { key: "9a6942344271a6ca9921fdee014d5b04f122d376" })));
+  }
+  get el() {
+    return n(this);
+  }
+};
+m.style = d;
+export {
+  m as prism_checkbox_group
+};

package/dist/prism-checkbox.entry-CZvx2AHI.js

@@ -0,0 +1,116 @@
+import { r as s, c, h as r, H as t } from "./index-D9BZSjMp.js";
+import { g as a, m as o } from "./index-44540db3-BN5vFHKr.js";
+import { A as n } from "./index-4d46d9ca-BtyZMEt1.js";
+/*!
+ * Copyright (c) 2025 Comcast. Prism UI - v8.28.0 - made with ❤️ in Philadelphia
+ */
+const h = '.sr-input.sc-prism-checkbox{margin:0;opacity:0;overflow:hidden;padding:0;position:absolute!important;visibility:visible}.sc-prism-checkbox-h{display:block;margin:var(--prism-checkbox-spacing-margin,var(--prism-spacer-size-lg) 0);position:relative;width:auto}.screen-reader-text.sc-prism-checkbox{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.label.sc-prism-checkbox{grid-column-gap:var(--prism-spacer-size-lg);align-items:center;-moz-column-gap:var(--prism-spacer-size-lg);column-gap:var(--prism-spacer-size-lg);display:grid;grid-template-areas:"checkbox label" "checkbox hint";grid-template-columns:-webkit-max-content 1fr;grid-template-columns:max-content 1fr;grid-template-rows:1fr}.no-visual.label.sc-prism-checkbox{gap:0}.label.right.sc-prism-checkbox{grid-template-areas:"label checkbox" "hint checkbox"}.label.sc-prism-checkbox:not(.loading):hover{cursor:pointer}.input.sc-prism-checkbox:hover+.label.sc-prism-checkbox .checkbox.checked.sc-prism-checkbox,.input.sc-prism-checkbox:hover+.label.sc-prism-checkbox .checkbox.indeterminate.sc-prism-checkbox,.label.sc-prism-checkbox:hover .checkbox.checked.sc-prism-checkbox,.label.sc-prism-checkbox:hover .checkbox.indeterminate.sc-prism-checkbox{background-color:var(--prism-color-fill-brand-primary-hover);border-color:var(--prism-color-border-brand-primary-hover)}.input[disabled].sc-prism-checkbox:hover,.label.disabled.sc-prism-checkbox:hover{cursor:not-allowed}.label-text.sc-prism-checkbox{color:var(--prism-color-text-primary-base);display:inline-block;grid-area:label;vertical-align:middle}.input.sc-prism-checkbox:hover+.label.sc-prism-checkbox:not(.loading) .checkbox.sc-prism-checkbox:not(.checked):not(.invalid){border-color:var(--prism-color-border-secondary-hover)}.checkbox.sc-prism-checkbox{background-color:var(--prism-color-material-primary-base);border-color:var(--prism-color-border-secondary-base);border-radius:var(--prism-radius-size-sm);border-style:solid;border-width:1px;display:inline-block;flex-shrink:0;grid-area:checkbox;height:1.5rem;outline:2px solid transparent;outline-offset:var(--prism-spacer-size-xxs);pointer-events:none;text-align:center;transition:all var(--prism-animation-duration-normal) var(--prism-animation-timing-function);vertical-align:middle;width:1.5rem}.loading.sc-prism-checkbox .checkbox.sc-prism-checkbox{align-items:center;border-color:color-mix(in srgb,var(--prism-color-border-secondary-base) var(--prism-alpha-inactive-percentage),transparent);color:var(--prism-color-text-secondary-base);display:flex;justify-content:center}.input.sc-prism-checkbox{border-style:solid;border-width:1px;cursor:pointer;height:1.5rem;left:var(--prism-spacer-size-xxs);margin:0;opacity:0;overflow:hidden;padding:0;position:absolute;top:var(--prism-spacer-size-xxs);transition:all var(--prism-animation-duration-normal) var(--prism-animation-timing-function);visibility:visible;width:1.5rem}.sc-prism-checkbox-h:focus-within .label.sc-prism-checkbox:not(.loading) .checkbox.sc-prism-checkbox{outline:var(--prism-spacer-size-3xs) solid var(--prism-color-border-secondary-focus)}.sc-prism-checkbox-h:focus-within .label.sc-prism-checkbox:not(.loading) .checkbox.sc-prism-checkbox:not(.invalid){border-color:var(--prism-color-border-secondary-focus)}.sc-prism-checkbox-h:focus-within .label.sc-prism-checkbox:not(.loading) .checked.sc-prism-checkbox,.sc-prism-checkbox-h:focus-within .label.sc-prism-checkbox:not(.loading) .indeterminate.sc-prism-checkbox{background-color:var(--prism-color-fill-brand-primary-focus);border-color:var(--prism-color-border-brand-primary-focus);outline-color:var(--prism-color-border-brand-primary-base)}.checked.sc-prism-checkbox,.indeterminate.sc-prism-checkbox{align-items:center;background-color:var(--prism-color-fill-brand-primary-base);border-width:0;display:inline-flex;justify-content:center}.checked.sc-prism-checkbox,.indeterminate.sc-prism-checkbox,.loading.sc-prism-checkbox .checked.sc-prism-checkbox{color:var(--prism-color-text-primary-inverse-base)}.loading.sc-prism-checkbox .checked.sc-prism-checkbox{border-color:color-mix(in srgb,var(--prism-color-border-brand-primary-base) var(--prism-alpha-inactive-percentage),transparent)}.invalid.sc-prism-checkbox,.invalid.checked.sc-prism-checkbox,.invalid.indeterminate.sc-prism-checkbox{border-color:var(--prism-color-border-danger-base)}.invalid.checked.sc-prism-checkbox,.invalid.indeterminate.sc-prism-checkbox{background-color:var(--prism-color-fill-danger-base)}.input.sc-prism-checkbox:hover+.label.sc-prism-checkbox .invalid.sc-prism-checkbox{border-color:var(--prism-color-border-danger-hover)}.input.sc-prism-checkbox:hover+.label.sc-prism-checkbox .invalid.checked.sc-prism-checkbox,.input.sc-prism-checkbox:hover+.label.sc-prism-checkbox .invalid.indeterminate.sc-prism-checkbox{background-color:var(--prism-color-fill-danger-hover)}.sc-prism-checkbox-h:focus-within .label.sc-prism-checkbox .invalid.sc-prism-checkbox{border-color:var(--prism-color-border-danger-focus)}.sc-prism-checkbox-h:focus-within .label.sc-prism-checkbox .invalid.checked.sc-prism-checkbox,.sc-prism-checkbox-h:focus-within .label.sc-prism-checkbox .invalid.indeterminate.sc-prism-checkbox{background-color:var(--prism-color-fill-danger-focus);outline-color:var(--prism-color-border-danger-focus)}.disabled.sc-prism-checkbox{cursor:not-allowed;opacity:var(--prism-alpha-disabled)}.icon.sc-prism-checkbox{color:var(--prism-color-text-primary-inverse-base);display:block;height:1rem;width:1rem}.hint-container.sc-prism-checkbox{align-items:center;display:flex;margin-top:.25rem}.hint-container.sc-prism-checkbox>.sc-prism-checkbox:not([hidden])~.sc-prism-checkbox:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.25rem*var(--tw-space-x-reverse))}.hint-text.sc-prism-checkbox{display:block;grid-area:hint;text-align:left}.invalid-text.sc-prism-checkbox{color:var(--prism-color-text-danger-base)}.loading.sc-prism-checkbox{cursor:wait;pointer-events:none}@media (prefers-reduced-motion:reduce){.checkbox.sc-prism-checkbox{transition:none}}', d = h, l = class {
+  constructor(i) {
+    s(this, i), this.prismChange = c(this, "prismChange", 7), this.prismWatch = c(this, "prismWatch", 7), this.prismInput = c(this, "prismInput", 7), this.prismBlur = c(this, "prismBlur", 7), this.prismFocus = c(this, "prismFocus", 7), this.uid = a(), this.isDirty = !1, this.prismId = `prism-checkbox-${this.uid}`, this.name = this.prismId, this.label = this.name.charAt(0).toUpperCase() + this.name.replace(/-/g, " ").substring(1), this.checked = !1, this.indeterminate = !1, this.required = !1, this.disabled = !1, this.loading = !1, this.hideLabel = !1, this.hideInvalid = !1, this.hint = void 0, this.invalid = !1, this.value = void 0, this.invalidMessage = "This field is required", this.describedby = "", this.alignment = "left", this.validation = "native", this.hintId = `${this.prismId}-hint`, this.customDescribedBy = void 0;
+  }
+  /**
+   * @description Public: Set Focus on Input
+   */
+  async setFocus() {
+    this.element && this.element.focus();
+  }
+  watchChecked(i) {
+    this.prismWatch.emit({
+      name: "checked-changed",
+      id: this.prismId,
+      checked: i,
+      indeterminate: this.indeterminate,
+      invalid: this.invalid,
+      value: this.value,
+      target: this.element,
+      type: "checkbox"
+    });
+  }
+  /**
+   * Listen to Reset Events
+   */
+  handleReset() {
+    this.checked = !1;
+  }
+  /** @internal Emit onChange of Value Event */
+  valueChanged(i) {
+    this.prismChange.emit({
+      name: "value-changed",
+      checked: this.checked,
+      indeterminate: this.indeterminate,
+      invalid: this.invalid,
+      value: i.target.value,
+      type: "checkbox"
+    });
+  }
+  /** @internal Native Event Handling */
+  inputChanged(i) {
+    this.isDirty = !0, this.customDescribedBy = `${this.hintId} ${this.describedby}`.trim();
+    let e = i.currentTarget;
+    this.checked = e.checked, this.checked && (this.indeterminate = !1), this.prismInput.emit({
+      name: "input-change",
+      checked: this.checked,
+      indeterminate: this.indeterminate,
+      invalid: this.invalid,
+      value: e.value,
+      type: "checkbox",
+      target: e
+    });
+  }
+  onCheckValidity(i) {
+    i.preventDefault();
+    let e = i.currentTarget;
+    this.validation === "native" && (this.invalid = !e.validity.valid), this.customDescribedBy = `${this.hintId} ${this.describedby}`.trim(), this.prismChange.emit({ name: "check-validity", checked: this.checked, target: e, reason: e.validity });
+  }
+  // Input has focus or blurred
+  inputState(i) {
+    let e = i.currentTarget;
+    switch (i.type) {
+      case "blur":
+        this.isDirty && this.validation === "native" && (this.invalid = !e.validity.valid), this.prismBlur.emit({
+          name: "input-blurred",
+          checked: this.checked,
+          type: "checkbox",
+          value: e.value,
+          target: e
+        });
+        break;
+      case "focus":
+        this.prismFocus.emit({
+          name: "input-focused",
+          checked: this.checked,
+          type: "checkbox",
+          value: e.value,
+          target: e
+        });
+    }
+  }
+  /**
+   * Listen to Keydown Events
+   */
+  inputKeyDown(i) {
+    this.loading && i.key === " " && i.preventDefault();
+  }
+  connectedCallback() {
+    this.customDescribedBy = this.hint ? `${this.hintId} ${this.describedby}`.trim() : this.describedby, o("prism-checkbox");
+  }
+  render() {
+    const i = this.invalid;
+    return r(t, { key: "75531849391de2eb30a083fae2bcc3a2c93d96de" }, r("input", { key: "cd83535ced64ae00d8739d209e4a1b5bfc9c94f2", onInput: (e) => this.inputChanged(e), onChange: (e) => this.valueChanged(e), onInvalid: (e) => this.onCheckValidity(e), onBlur: (e) => this.inputState(e), onFocus: (e) => this.inputState(e), onKeyDown: (e) => this.inputKeyDown(e), checked: this.checked, indeterminate: this.indeterminate, id: this.prismId, ref: (e) => this.element = e, name: this.name.replace(/ /g, "-"), type: "checkbox", disabled: this.disabled, required: this.required, "aria-invalid": this.invalid.toString(), "aria-required": this.required.toString(), "aria-describedby": this.customDescribedBy ? this.customDescribedBy : !1, value: this.value, class: { input: !0, loading: this.loading } }), r("label", { key: "5cbb0d9b778dd2cabdc132f018bfcdc8c5fae15b", class: { label: !0, disabled: this.disabled, loading: this.loading, [this.alignment]: !0, "no-visual": this.hideLabel }, htmlFor: this.prismId }, r("span", { key: "9ee44e01be89782b6facc930cc774ac1e1ea3d2e", class: { checkbox: !0, checked: this.checked, indeterminate: this.indeterminate, invalid: this.invalid } }, this.loading && r("prism-loading", { key: "65cb120191326acde572f77270d59e9e1f9d3f9e", as: "spinner", size: "sm" }), this.checked && !this.loading && r("prism-icon", { key: "55f13a8a96de3ce9adf3dd49e8e20b9e744a8914", tone: "primary-inverse", display: "outline", size: "sm", name: "check" }), this.indeterminate && r("prism-icon", { key: "4035de208983a8a7187a8816d7fb42523b0dd416", tone: "primary-inverse", display: "outline", size: "sm", name: "minus" })), r("prism-text", { key: "88d227507f4d31a89e5505db09a09ee76595d1e6", family: "body", size: "400", class: { "label-text": !0, "screen-reader-text": this.hideLabel } }, this.label, this.required && r(n, { key: "55a3e2724ad4c07fe4b7e46027a8046339ba089e" })), this.hint && r("prism-text", { key: "223b4814ebae074b3ed8405db5b2d780a9621512", as: "caption", priority: "secondary", class: { "hint-text": !0, "screen-reader-text": this.hideLabel } }, this.hint)), r("span", { key: "bb1f1a859b4e9aff867eb8404d5488bdd8139ad3", "aria-live": "polite", id: this.hintId }, i && r("span", { key: "d87c25b5cd8c110ac3b57b6fbff82941e9f6afbf", class: {
+      "hint-container": !0,
+      "screen-reader-text": this.invalid && this.hideInvalid
+    } }, this.invalid && r("prism-icon", { key: "2675f21caa0a524048ea2da83b22a8039c9d5440", display: "fill", slot: "icon-trailing", size: "xs", tone: "danger", name: "alert" }), r("prism-text", { key: "5f1da372389b849612efd71666e42560816b902e", class: {
+      "invalid-text": this.invalid,
+      "hint-text": !0
+    }, as: "caption" }, this.invalidMessage))));
+  }
+  static get watchers() {
+    return {
+      checked: ["watchChecked"]
+    };
+  }
+};
+l.style = d;
+export {
+  l as prism_checkbox
+};