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

package/dist/index.js

@@ -0,0 +1,170 @@
+import { PxElement as c } from "@proximus/lavender-common";
+const b = `:host{display:block}.radio{display:flex;align-items:center;gap:var(--px-spacing-after-element-s-mobile);align-items:flex-start}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)}input{-webkit-appearance:none;-moz-appearance:none;appearance: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}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}input:hover:not([disabled]){border:var(--px-border-size-l) solid var(--px-border-color-action-hover-default)}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)}input:disabled{background-color:var(--px-background-color-action-disabled-default);border-color:var(--px-border-color-container-main-default)}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")}input:disabled+label{color:var(--px-text-color-action-disabled-default)}input.error:not(:disabled){border-color:var(--px-border-color-purpose-error-default)}input.error:not(:disabled):checked{background-color:var(--px-background-color-purpose-error-default)}input.error:not(:disabled):checked:hover{background-color:var(--px-background-color-action-primary-default)}input[inverted]{border-color:var(--px-border-color-action-neutral-inverted)}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")}input[inverted]:hover:not([disabled]){border-color:var(--px-border-color-action-hover-inverted)}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)}input[inverted]:disabled{background-color:var(--px-background-color-action-disabled-inverted);border-color:var(--px-border-color-container-main-inverted)}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")}input[inverted]:disabled+label{color:var(--px-text-color-action-disabled-inverted)}input[inverted].error:not(:disabled){border-color:var(--px-border-color-purpose-error-inverted)}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")}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")}input[inverted]+label{color:var(--px-text-color-heading-neutral-inverted)}@media only screen and (min-width: 768px){.radio{gap:var(--px-spacing-after-element-s-tablet)}label{font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.radio{gap:var(--px-spacing-after-element-s-desktop)}label{font-size:var(--px-text-size-label-m-desktop)}}@keyframes anim-pop{0%{transform:scale(0)}to{transform:scale(1)}}`, h = new CSSStyleSheet();
+h.replaceSync(b);
+var u = /* @__PURE__ */ ((o) => (o.ERROR = "error", o.SUCCESS = "success", o))(u || {});
+const l = class l extends c {
+  constructor() {
+    var e;
+    super(h), this.template = () => `<div class="radio" tabindex="0" role="radio">
+      <input type="radio" tabindex="-1" />
+      <label><slot name="label"></slot></label>
+    </div>`, this.shadowRoot && (this.shadowRoot.innerHTML = this.template()), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "state", "inverted"];
+  }
+  connectedCallback() {
+    this.$el.addEventListener("change", () => {
+      var t;
+      const e = new Event("change", {
+        bubbles: !0,
+        composed: !0
+        // Allow the event to pass through shadow DOM boundaries
+      });
+      this.dispatchEvent(e), (t = this.internals) == null || t.setFormValue(this.formData());
+    }), this.addEventListener("keypress", (e) => {
+      (e.code === "Space" || e.code === "Enter") && this.$el.click();
+    }), this.setupForId(), this.hasAttribute("checked") && (this.checked = !0);
+  }
+  attributeChangedCallback(e, t, r) {
+    e === "state" && t !== r ? this.stateChangeCallback(t, r) : super.attributeChangedCallback(e, t, r);
+  }
+  stateChangeCallback(e, t) {
+    e !== null && this.$el.classList.toggle(e), t !== null && this.$el.classList.toggle(t);
+  }
+  formData() {
+    if (this.$el.name) {
+      const e = new FormData(), t = this.getAttribute("name");
+      return t && e.append(t, this.$el.value), e;
+    }
+  }
+  // Form-associated callbacks
+  static get formAssociated() {
+    return !0;
+  }
+  // Set default behavior when the element is attached to a form
+  formResetCallback() {
+    this.$el.value = "";
+  }
+  formStateRestoreCallback(e) {
+    this.$el.value = e;
+  }
+  setupForId() {
+    const e = Math.random().toString(36).substr(2, 9);
+    this.$el.setAttribute("id", e), this.$label && this.$label.setAttribute("for", e);
+  }
+  get state() {
+    return this.getAttribute("state");
+  }
+  set state(e) {
+    this.setAttribute("state", e);
+  }
+  get disabled() {
+    return this.getAttribute("disabled");
+  }
+  set disabled(e) {
+    this.setAttribute("disabled", e);
+  }
+  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) {
+    this.$el.checked = e, e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
+  }
+  get $radio() {
+    return this.shadowRoot.querySelector('div[role="radio"]');
+  }
+};
+l.nativeName = "input";
+let s = l;
+customElements.define("px-radio", s);
+const d = class d extends c {
+  constructor() {
+    var e;
+    super(), this.template = () => `<div role="radiogroup">
+      <slot></slot>
+    </div>`, this.handleRadioChange = (t) => {
+      const r = t.target;
+      if (r.localName === "px-radio") {
+        const i = r.getAttribute("name");
+        i && this.uncheckOtherRadios(i, r);
+      }
+    }, this.shadowRoot.innerHTML = this.template(), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this);
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "name",
+      "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);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("change", this.handleRadioChange);
+  }
+  attributeChangedCallback(e, t, r) {
+    t !== r && this.querySelectorAll("px-radio").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, t) {
+    this.querySelectorAll(`px-radio[name="${e}"]`).forEach((i) => {
+      i !== t ? (i.checked = !1, i.$radio.ariaChecked = "false") : (i.checked = !0, i.$radio.ariaChecked = "true");
+    });
+  }
+  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 n = d;
+customElements.define("px-radio-group", n);
+export {
+  u as InputState,
+  s as Radio,
+  n as Radiogroup
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@proximus/lavender-radio-group",
+  "version": "1.0.0-alpha.2",
+  "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": "bad89d519c6fc1d431ebc46bee89fcd80cf18b83",
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "CHANGELOG.md",
+          "package.json",
+          "dist/*.js",
+          "dist/*.cjs",
+          "dist/css/**/*.css"
+        ]
+      }
+    }
+  }
+}