@proximus/lavender-radio-group 1.0.0-alpha.10

package/dist/index.js

@@ -0,0 +1,329 @@
+import { PxElement as h } from "@proximus/lavender-common";
+const g = `:host{display:block}:host(:focus-visible){outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default);outline-offset:var(--px-focus-offset-mobile)}:host([variant="selectable-tag"]:focus-visible){border-radius:var(--px-radius-pill)}:host([inverted]:focus-visible){outline-color:var(--px-border-color-focus-outline-inverted)}.radio{display:flex;align-items:flex-start;gap:var(--px-spacing-after-element-s-mobile)}.radio.all-slots-empty{gap:0}label{font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:calc(var(--px-line-height-m) * 1rem);font-weight:400;color:var(--px-text-color-heading-neutral-default)}.radio:not(.selectable-tag) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;margin:0;border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default);width:var(--px-action-size-m);height:var(--px-action-size-m);flex-shrink:0;transition:box-shadow .3s ease-out,background-color .3s;animation:anim-pop .2s cubic-bezier(.9,-.13,.61,.99) forwards .1s}.radio:not(.selectable-tag) input:checked{background-color:var(--px-background-color-action-primary-default);border-color:var(--px-border-color-none);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E");background-position:center center}.radio:not(.selectable-tag) input:hover:not([disabled]),.radio:not(.selectable-tag) input.hover:not([disabled]){border:var(--px-border-size-l) solid var(--px-border-color-action-hover-default)}.radio:not(.selectable-tag) input:checked:not([disabled]):hover,.radio:not(.selectable-tag) input:checked:not([disabled]).hover{box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-default),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-default)}.radio:not(.selectable-tag) input:disabled{background-color:var(--px-background-color-action-disabled-default);border-color:var(--px-border-color-container-main-default)}.radio:not(.selectable-tag) input:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='black' fill-opacity='0.12'/%3E%3C/svg%3E")}.radio:not(.selectable-tag) input:disabled+label{color:var(--px-text-color-action-disabled-default)}.radio:not(.selectable-tag) input.error:not(:disabled){border-color:var(--px-border-color-purpose-error-default)}.radio:not(.selectable-tag) input.error:not(:disabled):checked{background-color:var(--px-background-color-purpose-error-default)}.radio:not(.selectable-tag) input.error:not(:disabled):checked:hover,.radio:not(.selectable-tag) input.error:not(:disabled):checked.hover{background-color:var(--px-background-color-action-primary-default)}.radio:not(.selectable-tag) input[inverted]{border-color:var(--px-border-color-action-neutral-inverted)}.radio:not(.selectable-tag) input[inverted]:checked{background-color:var(--px-background-color-action-primary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='%235C2D91'/%3E%3C/svg%3E")}.radio:not(.selectable-tag) input[inverted]:hover:not([disabled]),.radio:not(.selectable-tag) input[inverted].hover:not([disabled]){border-color:var(--px-border-color-action-hover-inverted)}.radio:not(.selectable-tag) input[inverted]:checked:not([disabled]):hover,.radio:not(.selectable-tag) input[inverted]:checked:not([disabled]).hover{box-shadow:inset 0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-inverted),0 0 0 var(--px-border-size-s) var(--px-border-color-action-hover-inverted)}.radio:not(.selectable-tag) input[inverted]:disabled{background-color:var(--px-background-color-action-disabled-inverted);border-color:var(--px-border-color-container-main-inverted)}.radio:not(.selectable-tag) input[inverted]:disabled:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white' fill-opacity='0.16'/%3E%3C/svg%3E")}.radio:not(.selectable-tag) input[inverted]:disabled+label{color:var(--px-text-color-action-disabled-inverted)}.radio:not(.selectable-tag) input[inverted].error:not(:disabled){border-color:var(--px-border-color-purpose-error-inverted)}.radio:not(.selectable-tag) input[inverted].error:not(:disabled):checked{background-color:var(--px-background-color-purpose-error-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E")}.radio:not(.selectable-tag) input[inverted].error:not(:disabled):checked:hover,.radio:not(.selectable-tag) input[inverted].error:not(:disabled):checked.hover{background-color:var( --px-background-color-action-primary-inverted );background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='4' fill='%235C2D91'/%3E%3C/svg%3E")}.radio:not(.selectable-tag) input[inverted]+label{color:var(--px-text-color-heading-neutral-inverted)}.radio.selectable-tag{gap:0}.radio.selectable-tag input{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.radio.selectable-tag label{line-height:var(--px-line-height-m);display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--px-spacing-after-element-xs-mobile);background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default);border-radius:var(--px-radius-pill);transition:all .2s ease-in-out 0s}.radio.selectable-tag input:hover:not([disabled],[aria-disabled=true])+label,.radio.selectable-tag input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default);border-color:var(--px-border-color-action-hover-default);cursor:pointer}.radio.selectable-tag input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}.radio.selectable-tag input:checked+label,.radio.selectable-tag input:checked+label:hover{background-color:var(--px-background-color-action-active-default);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-inverted)}.radio.selectable-tag input[disabled]+label{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}:host([inverted]) .radio.selectable-tag label{background:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-brand-inverted);border-color:var(--px-border-color-action-neutral-inverted)}:host([inverted]) .radio.selectable-tag input:hover:not([disabled],[aria-disabled=true])+label,:host([inverted]) .radio.selectable-tag input.hover:not([disabled],[aria-disabled=true])+label{color:var(--px-text-color-action-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .radio.selectable-tag input:active:not([disabled],[aria-disabled=true])+label{background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([inverted]) .radio.selectable-tag input:checked+label,:host([inverted]) .radio.selectable-tag input:checked+label:hover{background-color:var(--px-background-color-action-active-inverted);border-color:var(--px-border-color-none);color:var(--px-text-color-action-active-default)}:host([inverted]) .radio.selectable-tag input[disabled]+label{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}@media only screen and (min-width: 768px){:host(:focus-visible){outline-width:var(--px-focus-outline-tablet);outline-offset:var(--px-focus-offset-tablet)}label{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){:host(:focus-visible){outline-width:var(--px-focus-outline-desktop);outline-offset:var(--px-focus-offset-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`, p = new CSSStyleSheet();
+p.replaceSync(g);
+const s = class s extends h {
+  constructor() {
+    super(p), this.template = () => `<div class="radio" tabindex="-1">
+      <input type="radio" tabindex="-1" />
+      <label><slot name="before"></slot><slot name="label"></slot></label>
+    </div>`, this.shadowRoot && (this.shadowRoot.innerHTML = this.template());
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "hover"];
+  }
+  attributeChangedCallback(e, t, r) {
+    if (t !== r)
+      switch (e) {
+        case "hover":
+          this.$el.classList.toggle("hover");
+          break;
+        default:
+          super.attributeChangedCallback(e, t, r);
+          break;
+      }
+  }
+  get $radio() {
+    return this.shadowRoot.querySelector(".radio");
+  }
+  get $labelSlot() {
+    return this.querySelector('[slot="label"]');
+  }
+  get $iconSlot() {
+    return this.querySelector('px-icon[slot="before"]');
+  }
+};
+s.nativeName = "input";
+let o = s;
+customElements.define("px-radio-base", o);
+const u = ["", "default", "selectable-tag"], x = ["", "error"], n = class n extends o {
+  constructor() {
+    var e, t;
+    super(), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.tabIndex = ((t = this.parentElement) == null ? void 0 : t.firstElementChild) === this ? 0 : -1, this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`);
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "state", "variant", "inverted"];
+  }
+  connectedCallback() {
+    this.addEventListener("keypress", (e) => {
+      switch (e.stopPropagation(), e.preventDefault(), e.code) {
+        case "Space":
+          this.click();
+          break;
+      }
+    }), this.addEventListener("click", (e) => {
+      this.checked || (this.checked = !0), e.stopPropagation(), e.preventDefault();
+    }), this.setupForId(), this.hasAttribute("checked") && (this.checked = !0), this.$iconSlot && (this.$iconSlot.setAttribute("size", "xs"), this.$iconSlot.setAttribute("color", "inherit")), !this.$labelSlot && !this.$iconSlot ? this.$radio.classList.add("all-slots-empty") : this.$radio.classList.remove("all-slots-empty");
+  }
+  attributeChangedCallback(e, t, r) {
+    if (t !== r)
+      switch (e) {
+        case "state":
+          this.updateAttribute(t, r, x, e);
+          break;
+        case "variant":
+          this.updateAttribute(t, r, u, e);
+          break;
+        case "checked":
+          this.handleCheckedChange(r !== null);
+          break;
+        default:
+          super.attributeChangedCallback(e, t, r);
+          break;
+      }
+  }
+  // Form-associated callbacks
+  static get formAssociated() {
+    return !0;
+  }
+  // Set default behavior when the element is attached to a form
+  formResetCallback() {
+    this.checked = !1;
+  }
+  formStateRestoreCallback(e) {
+    this.checked = e;
+  }
+  updateAttribute(e, t, r, a) {
+    var c, b;
+    if (!this.checkName(r, t)) {
+      console.error(
+        `${t} is not a valid ${a} value for`,
+        this.$el
+      );
+      return;
+    }
+    e !== null && (a === "variant" ? (c = this.$el.parentElement) == null || c.classList.toggle(e) : this.$el.classList.toggle(e)), t !== null && (a === "variant" ? (b = this.$el.parentElement) == null || b.classList.toggle(t) : this.$el.classList.toggle(t));
+  }
+  handleCheckedChange(e) {
+    var t;
+    this.$el.checked = e, (t = this.internals) == null || t.setFormValue(this.formData()), e ? (this.tabIndex = 0, this.internals && (this.internals.ariaChecked = "true"), this.setAttribute("checked", "")) : (this.tabIndex = -1, this.removeAttribute("checked"), this.internals && (this.internals.ariaChecked = "false")), e && this.dispatchEvent(
+      new Event("change", {
+        bubbles: !0,
+        composed: !0
+        // Allow the event to pass through shadow DOM boundaries
+      })
+    );
+  }
+  formData() {
+    if (this.$el.name) {
+      const e = new FormData(), t = this.getAttribute("name");
+      return t && (this.$el.checked ? e.set(t, this.$el.value) : e.delete(t)), e;
+    }
+  }
+  setupForId() {
+    const e = Math.random().toString(36).substr(2, 9);
+    this.$el.setAttribute("id", e), this.$label && this.$label.setAttribute("for", e);
+  }
+  checkName(e, t) {
+    return e.includes(t);
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(e) {
+    this.setAttribute("state", e);
+  }
+  get disabled() {
+    return this.getAttribute("disabled") !== null;
+  }
+  set disabled(e) {
+    e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get $label() {
+    return this.shadowRoot.querySelector("label");
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(e) {
+    this.setAttribute("inverted", e);
+  }
+  get checked() {
+    return this.$el.checked;
+  }
+  set checked(e) {
+    e ? this.setAttribute("checked", e ? "" : "false") : this.removeAttribute("checked");
+  }
+  get $radio() {
+    return this.shadowRoot.querySelector(".radio");
+  }
+  get $labelSlot() {
+    return this.querySelector('[slot="label"]');
+  }
+  get $iconSlot() {
+    return this.querySelector('px-icon[slot="before"]');
+  }
+};
+n.nativeName = "input";
+let i = n;
+customElements.define("px-radio", i);
+const f = "div[role=radiogroup]{display:flex;flex-direction:column;gap:var( --px-radiogroup-gap--mobile, var(--px-spacing-after-element-xs-mobile) )}div[role=radiogroup].selectable-tag{display:inline-flex;flex-direction:row}@media screen and (min-width: 768px){div[role=radiogroup]{gap:var( --px-radiogroup-gap--tablet, var(--px-spacing-after-element-xs-tablet) )}}@media screen and (min-width: 1025px){div[role=radiogroup]{gap:var( --px-radiogroup-gap--laptop, var(--px-spacing-after-element-xs-desktop) )}}", v = new CSSStyleSheet();
+v.replaceSync(f);
+const k = [
+  "",
+  "after-element-none",
+  "after-element-2xs",
+  "after-element-xs",
+  "after-element-s",
+  "after-element-default",
+  "after-element-l"
+], d = class d extends h {
+  constructor() {
+    var e;
+    super(v), this.template = () => `<div role="radiogroup">
+      <slot></slot>
+    </div>`, this.handleKeyDown = () => {
+      var r;
+      const t = this.currentCheckedRadio ? ((r = this.currentCheckedRadio) == null ? void 0 : r.nextElementSibling) ?? this.$radioList[0] : this.$radioList[1];
+      t.checked = !0, t.focus();
+    }, this.handleKeyUp = () => {
+      var r;
+      const t = ((r = this.currentCheckedRadio) == null ? void 0 : r.previousElementSibling) ?? this.$radioList[this.$radioList.length - 1];
+      t.checked = !0, t.focus();
+    }, this.handleRadioChange = (t) => {
+      const r = t.target;
+      if (r.localName === "px-tile-radio" || r.localName === "px-radio") {
+        this.currentCheckedRadio = r;
+        const a = r.getAttribute("name");
+        a && this.currentCheckedRadio.checked && this.uncheckOtherRadios(a);
+      }
+    }, this.shadowRoot.innerHTML = this.template(), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "name",
+      "gap",
+      "variant",
+      "required",
+      "disabled",
+      "state",
+      "inverted"
+    ];
+  }
+  connectedCallback() {
+    (!this.hasAttribute("name") || this.getAttribute("name") === "") && console.error(
+      '<px-radio-group> requires a "name" attribute to function properly.'
+    ), this.addEventListener("change", this.handleRadioChange), this.addEventListener("keydown", (e) => {
+      switch (e.code) {
+        case "ArrowUp":
+        case "ArrowDown":
+          e.stopPropagation(), e.preventDefault();
+      }
+    }), this.addEventListener("keyup", (e) => {
+      switch (e.stopPropagation(), e.preventDefault(), e.code) {
+        case "ArrowUp":
+        case "ArrowLeft":
+          this.handleKeyUp();
+          break;
+        case "ArrowDown":
+        case "ArrowRight":
+          this.handleKeyDown();
+          break;
+      }
+    });
+  }
+  disconnectedCallback() {
+    this.removeEventListener("change", this.handleRadioChange);
+  }
+  attributeChangedCallback(e, t, r) {
+    t !== r && (e === "gap" ? this.updateGap(t, r, k) : e === "variant" ? this.updateVariant(t, r, u) : this.$radioList.forEach((a) => {
+      if (r === null)
+        a.removeAttribute(e);
+      else
+        switch (e) {
+          case "required":
+            this.$el.ariaRequired = "true";
+            break;
+          case "state":
+            r === "error" && (this.$el.ariaInvalid = "true", a.setAttribute(e, r));
+            break;
+          case "disabled":
+            this.$el.ariaDisabled = "true", a.setAttribute(e, r);
+            break;
+          default:
+            a.setAttribute(e, r);
+            break;
+        }
+    }));
+  }
+  uncheckOtherRadios(e) {
+    this.querySelectorAll(
+      `px-radio[name="${e}"], px-tile-radio[name="${e}"]`
+    ).forEach((r) => {
+      r !== this.currentCheckedRadio && (r.checked = !1);
+    });
+  }
+  updateVariant(e, t, r) {
+    if (!this.checkName(r, t)) {
+      console.error(`${t} is not a valid variant value for`, this.$el);
+      return;
+    }
+    e !== null && e !== "" && this.$el.classList.toggle(e), t !== null && t !== "" && (this.$el.classList.toggle(t), this.$radioList.forEach((a) => {
+      a.setAttribute("variant", t);
+    }));
+  }
+  updateGap(e, t, r) {
+    if (!this.checkName(r, t)) {
+      console.error(`${t} is not a valid gap value for`, this.$el);
+      return;
+    }
+    this.updateGapStyle(e), this.updateGapStyle(t);
+  }
+  updateGapStyle(e) {
+    e !== null && e !== "" && e !== "default" && (this.$el.style.setProperty(
+      "--px-radiogroup-gap--mobile",
+      `var(--px-spacing-${e}-mobile)`
+    ), this.$el.style.setProperty(
+      "--px-radiogroup-gap--tablet",
+      `var(--px-spacing-${e}-tablet)`
+    ), this.$el.style.setProperty(
+      "--px-radiogroup-gap--laptop",
+      `var(--px-spacing-${e}-desktop)`
+    ));
+  }
+  checkName(e, t) {
+    return e.includes(t);
+  }
+  get $radioList() {
+    return this.querySelectorAll(
+      "px-radio, px-tile-radio"
+    );
+  }
+  get gap() {
+    return this.getAttribute("gap");
+  }
+  set gap(e) {
+    this.setAttribute("gap", e);
+  }
+  get variant() {
+    return this.getAttribute("variant");
+  }
+  set variant(e) {
+    this.setAttribute("variant", e);
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(e) {
+    this.setAttribute("state", e);
+  }
+  get $label() {
+    return this.shadowRoot.querySelector("label");
+  }
+  get inverted() {
+    return this.getAttribute("inverted");
+  }
+  set inverted(e) {
+    this.setAttribute("inverted", e);
+  }
+};
+d.nativeName = "div";
+let l = d;
+customElements.define("px-radio-group", l);
+export {
+  i as Radio,
+  l as Radiogroup,
+  k as gapValues,
+  x as stateValues,
+  u as variantValues
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@proximus/lavender-radio-group",
+  "version": "1.0.0-alpha.10",
+  "description": "",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./src/*.css": {
+      "development": "src/*.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "rm -rf dist;tsc; vite build",
+    "test": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "98b517c6cedf3a4b9c2757688bf307ac432aebb3",
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/*.cjs",
+          "dist/css/**/*.css",
+          "dist/js/**/*.js"
+        ]
+      }
+    }
+  }
+}