@orangelogic/design-system 2.19.0-ci.5

package/library/components/radio-button.js

@@ -0,0 +1,151 @@
+import { i as d, n as i, C as c, c as b } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as f } from "../chunks/component.styles.DtouHn2g.js";
+import { H as m } from "../chunks/slot.DJLm4Dig.js";
+import { w as x } from "../chunks/watch.BCJD77bD.js";
+import { r as y } from "../chunks/state.Dt9F_SuS.js";
+import { e as p } from "../chunks/query.BBf1UFkC.js";
+import { e as _ } from "../chunks/class-map.DqNfBvJI.js";
+import { o as h } from "../chunks/if-defined.CKupVaWs.js";
+import { u as C } from "../chunks/static.kLXgh3Gq.js";
+import { b as v } from "../chunks/button.styles.CRh5_Ev4.js";
+const w = d`
+  ${v}
+
+  .button__prefix,
+  .button__suffix,
+  .button__label {
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+  }
+
+  /* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
+    We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
+  .hidden-input {
+    all: unset;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    outline: dotted 1px red;
+    opacity: 0;
+    z-index: -1;
+  }
+`;
+var $ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, e = (s, l, a, r) => {
+  for (var o = r > 1 ? void 0 : r ? g(l, a) : l, u = s.length - 1, n; u >= 0; u--)
+    (n = s[u]) && (o = (r ? n(l, a, o) : n(o)) || o);
+  return r && o && $(l, a, o), o;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.hasSlotController = new m(
+      this,
+      "[default]",
+      "prefix",
+      "suffix"
+    ), this.hasFocus = !1, this.checked = !1, this.disabled = !1, this.size = "medium", this.pill = !1, this.label = "";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "presentation");
+  }
+  handleBlur() {
+    this.hasFocus = !1, this.emit("cx-blur");
+  }
+  handleClick(s) {
+    if (this.disabled) {
+      s.preventDefault(), s.stopPropagation();
+      return;
+    }
+    this.checked = !0;
+  }
+  handleFocus() {
+    this.hasFocus = !0, this.emit("cx-focus");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  /** Sets focus on the radio button. */
+  focus(s) {
+    this.input.focus(s);
+  }
+  /** Removes focus from the radio button. */
+  blur() {
+    this.input.blur();
+  }
+  render() {
+    return C`
+      <div part="base" role="presentation">
+        <button
+          part=${`button${this.checked ? " button--checked" : ""}`}
+          role="radio"
+          aria-checked=${this.checked}
+          aria-label=${h(this.label || void 0)}
+          class=${_({
+      button: !0,
+      "button--checked": this.checked,
+      "button--default": !0,
+      "button--disabled": this.disabled,
+      "button--focused": this.hasFocus,
+      "button--has-label": this.hasSlotController.test("[default]"),
+      "button--has-prefix": this.hasSlotController.test("prefix"),
+      "button--has-suffix": this.hasSlotController.test("suffix"),
+      "button--large": this.size === "large",
+      "button--medium": this.size === "medium",
+      "button--outline": !0,
+      "button--pill": this.pill,
+      "button--small": this.size === "small"
+    })}
+          aria-disabled=${this.disabled}
+          type="button"
+          value=${h(this.value)}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+        >
+          <slot name="prefix" part="prefix" class="button__prefix"></slot>
+          <slot part="label" class="button__label"></slot>
+          <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        </button>
+      </div>
+    `;
+  }
+};
+t.styles = [f, w];
+e([
+  p(".button")
+], t.prototype, "input", 2);
+e([
+  p(".hidden-input")
+], t.prototype, "hiddenInput", 2);
+e([
+  y()
+], t.prototype, "hasFocus", 2);
+e([
+  i({ reflect: !0, type: Boolean })
+], t.prototype, "checked", 2);
+e([
+  i()
+], t.prototype, "value", 2);
+e([
+  i({ reflect: !0, type: Boolean })
+], t.prototype, "disabled", 2);
+e([
+  i({ reflect: !0 })
+], t.prototype, "size", 2);
+e([
+  i({ reflect: !0, type: Boolean })
+], t.prototype, "pill", 2);
+e([
+  i({ reflect: !0, type: String })
+], t.prototype, "label", 2);
+e([
+  x("disabled", { waitUntilFirstUpdate: !0 })
+], t.prototype, "handleDisabledChange", 1);
+t = e([
+  b("cx-radio-button")
+], t);
+export {
+  t as default
+};

package/library/components/radio-card.d.ts

@@ -0,0 +1,3 @@
+export * from '../packages/atoms/src/components/radio-card/radio-card'
+import _default from '../packages/atoms/src/components/radio-card/radio-card'
+export default _default

package/library/components/radio-card.js

@@ -0,0 +1,262 @@
+import { i as b, n as o, C as u, x as p, c as m } from "../chunks/custom-element.fmLrnDZr.js";
+import { c as f } from "../chunks/component.styles.DtouHn2g.js";
+import { H as g } from "../chunks/slot.DJLm4Dig.js";
+import { w as h } from "../chunks/watch.BCJD77bD.js";
+import { r as n } from "../chunks/state.Dt9F_SuS.js";
+import { e as x } from "../chunks/query.BBf1UFkC.js";
+import { e as v } from "../chunks/class-map.DqNfBvJI.js";
+import _ from "./card.js";
+import C from "./line-clamp.js";
+import y from "./radio.js";
+const k = b`
+  :host {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    --label-color: var(--cx-input-label-color);
+    --label-text-align: left;
+    --description-color: var(--cx-input-label-color);
+    --description-text-align: left;
+    --toggle-size: var(--cx-toggle-size-large);
+  }
+
+  :host(:focus-visible) {
+    outline: 0px;
+  }
+
+  .radio-card {
+    --border-radius: var(--cx-border-radius-large);
+    --box-shadow: none;
+    --padding: var(--cx-spacing-small);
+    --image-border-radius: var(--cx-border-radius-medium);
+    cursor: pointer;
+    width: var(--card-width, 100%);
+    height: var(--card-height, 100%);
+  }
+
+  .radio-card--checked:not(.radio-card--grouped)::part(base) {
+    height: 100%;
+  }
+
+  .radio-card--grouped::part(base) {
+    border-radius: 0;
+    border-top-width: 0;
+    height: 100%;
+  }
+
+  .radio-card--grouped.radio-card--horizontal::part(base) {
+    border-left-width: 0;
+    border-top-width: var(--border-width);
+  }
+
+  :host(:first-child) .radio-card--grouped::part(base) {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-width: var(--border-width);
+  }
+
+  :host(:last-child) .radio-card--grouped::part(base) {
+    border-bottom-left-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  :host(:first-child) .radio-card--grouped.radio-card--horizontal::part(base) {
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-left-width: var(--border-width);
+  }
+
+  :host(:last-child) .radio-card--grouped.radio-card--horizontal::part(base) {
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .radio-card::part(image) {
+    background-color: transparent;
+  }
+
+  .radio-card--compact::part(image) {
+    display: none;
+  }
+
+  .radio-card--checked:not(.radio-card--grouped) {
+    --border-color: var(--cx-color-primary);
+  }
+
+  .radio-card--checked::part(base) {
+    background-color: var(--cx-color-primary-50);
+  }
+
+  .radio-card--disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  .radio-card__label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cx-spacing-2x-small);
+    text-transform: var(--cx-radio-card-label-text-transform, none);
+  }
+
+  .radio-card__description {
+    margin-left: calc(var(--toggle-size) + 0.5em);
+  }
+
+  .radio-card__description > cx-line-clamp {
+    color: var(--description-color);
+    line-height: var(--cx-line-height-medium);
+    text-align: var(--description-text-align);
+  }
+
+  .radio-card__label > cx-line-clamp {
+    color: var(--label-color);
+    flex: 1 1 auto;
+    text-align: var(--label-text-align);
+  }
+
+  .radio-card--has-suffix .radio-card__label__suffix {
+    width: 3rem;
+  }
+
+  .radio-card__label__suffix {
+    display: flex;
+    justify-content: flex-end;
+    height: fit-content;
+  }
+
+  .radio-card__image::slotted(img),
+  .radio-card__image::slotted(svg) {
+    border-radius: var(--cx-border-radius-small);
+    width: 100%;
+  }
+
+  .radio-card__image::slotted(*) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  cx-radio {
+    --toggle-size: var(--toggle-size);
+  }
+
+  cx-radio::part(base) {
+    align-items: center;
+    width: 100%;
+  }
+`;
+var w = Object.defineProperty, A = Object.getOwnPropertyDescriptor, e = (i, a, s, d) => {
+  for (var t = d > 1 ? void 0 : d ? A(a, s) : a, l = i.length - 1, c; l >= 0; l--)
+    (c = i[l]) && (t = (d ? c(a, s, t) : c(t)) || t);
+  return d && t && w(a, s, t), t;
+};
+let r = class extends u {
+  constructor() {
+    super(), this.hasSlotController = new g(this, "suffix"), this.checked = !1, this.hasFocus = !1, this.disabled = !1, this.hideIndicator = !1, this.disabledLineClamp = !1, this.handleBlur = this.handleBlur.bind(this), this.handleClick = this.handleClick.bind(this), this.handleFocus = this.handleFocus.bind(this), this.addEventListener("blur", this.handleBlur), this.addEventListener("click", this.handleClick), this.addEventListener("focus", this.handleFocus);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setInitialAttributes();
+  }
+  handleBlur() {
+    this.hasFocus = !1, this.emit("cx-blur");
+  }
+  handleClick() {
+    this.disabled || (this.checked = !0);
+  }
+  handleFocus() {
+    this.hasFocus = !0, this.emit("cx-focus");
+  }
+  setInitialAttributes() {
+    this.setAttribute("role", "radio"), this.setAttribute("tabindex", "-1"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleCheckedChange() {
+    this.radio.checked = this.checked, this.setAttribute("aria-checked", this.checked ? "true" : "false"), this.setAttribute("tabindex", this.checked ? "0" : "-1"), this.radio.setAttribute("aria-checked", this.checked ? "true" : "false"), this.radio.setAttribute("tabindex", this.checked ? "0" : "-1");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false"), this.radio.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  render() {
+    const i = this.parentElement?.getAttribute("compact") !== null, a = this.parentElement?.getAttribute("horizontal") !== null;
+    return p`<cx-card
+      part="base"
+      class=${v({
+      "radio-card": !0,
+      "radio-card--checked": this.checked,
+      "radio-card--compact": !this.querySelector('[slot="image"]'),
+      "radio-card--disabled": this.disabled,
+      "radio-card--focused": this.hasFocus,
+      "radio-card--grouped": i,
+      "radio-card--has-suffix": this.hasSlotController.test("suffix"),
+      "radio-card--horizontal": a
+    })}
+    >
+      <slot name="image" slot="image" class="radio-card__image"></slot>
+      <cx-radio
+        ?disabled=${this.disabled}
+        ?hide-indicator=${this.hideIndicator}
+      >
+        <div class="radio-card__label">
+          <cx-line-clamp lines=${this.disabledLineClamp ? 0 : 1}>
+            <slot></slot>
+          </cx-line-clamp>
+          <slot name="suffix" class="radio-card__label__suffix"></slot>
+        </div>
+      </cx-radio>
+      <div class="radio-card__description">
+        <cx-line-clamp lines=${this.disabledLineClamp ? 0 : 3}>
+          <slot name="help-text"></slot>
+        </cx-line-clamp>
+      </div>
+    </cx-card>`;
+  }
+};
+r.styles = [f, k];
+r.dependencies = {
+  "cx-card": _,
+  "cx-line-clamp": C,
+  "cx-radio": y
+};
+e([
+  x("cx-radio")
+], r.prototype, "radio", 2);
+e([
+  n()
+], r.prototype, "checked", 2);
+e([
+  n()
+], r.prototype, "hasFocus", 2);
+e([
+  o()
+], r.prototype, "value", 2);
+e([
+  o({ reflect: !0, type: Boolean })
+], r.prototype, "disabled", 2);
+e([
+  o({ attribute: "hide-indicator", reflect: !0, type: Boolean })
+], r.prototype, "hideIndicator", 2);
+e([
+  o({ attribute: "disabled-line-clamp", reflect: !0, type: Boolean })
+], r.prototype, "disabledLineClamp", 2);
+e([
+  h("checked", { waitUntilFirstUpdate: !0 })
+], r.prototype, "handleCheckedChange", 1);
+e([
+  h("disabled", { waitUntilFirstUpdate: !0 })
+], r.prototype, "handleDisabledChange", 1);
+r = e([
+  m("cx-radio-card")
+], r);
+export {
+  r as default
+};

package/library/components/radio-group.d.ts

@@ -0,0 +1,3 @@
+export * from '../packages/atoms/src/components/radio-group/radio-group'
+import _default from '../packages/atoms/src/components/radio-group/radio-group'
+export default _default