wcs-core 2.5.2 → 2.7.0

package/dist/esm/wcs-radio.entry.js

@@ -0,0 +1,45 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b982604a.js';
+
+const radioCss = ":host([mode=radio]) input{display:none}:host([mode=radio]) label{padding:0.125rem 0 0;margin-bottom:0;color:var(--wcs-text-medium);background-color:transparent;border:none;font-weight:500 !important;transition:0.175s ease-in-out}:host([mode=radio]) label:before{transition:0.175s ease-in-out;border-radius:50%;margin-right:var(--wcs-base-margin);border:2px solid var(--wcs-text-disabled);position:relative;display:inline-block;top:3px;width:1.125rem;height:1.125rem;pointer-events:none;content:\"\";background-color:var(--wcs-white);box-sizing:border-box}:host([mode=radio]) label:after{transition:0.175s ease-in-out;position:relative;width:1.125rem;height:1.125rem;content:\"\";background:no-repeat 50%/50% 50%}:host([mode=radio][disabled]) label{color:var(--wcs-text-disabled)}:host([mode=radio]:not([disabled])) label{cursor:pointer}:host([mode=radio][checked]) label{color:var(--wcs-primary)}:host([mode=radio][checked]) label:before{border-color:var(--wcs-primary);background-color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label{color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label:before{border-color:var(--wcs-primary)}:host([mode=option]){padding:var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);font-weight:500 !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:0.375rem 1.25rem 0.3125rem;margin-bottom:0;color:var(--wcs-white);white-space:nowrap;border-radius:0.4375rem}:host([mode=option][checked]) label{font-weight:500 !important;color:var(--wcs-primary);background-color:var(--wcs-white)}:host([mode=option][disabled]) label{color:var(--wcs-text-disabled)}:host([mode=option]:not([disabled])) label{cursor:pointer}";
+
+let Radio = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wcsRadioClick = createEvent(this, "wcsRadioClick", 7);
+    this.inputId = `wcs-rb-${radioButtonIds++}`;
+    this.mode = 'radio';
+    /**
+     * If `true`, the radio is selected.
+     */
+    this.checked = false;
+    /**
+     * If `true`, the user cannot interact with the radio.
+     */
+    this.disabled = false;
+  }
+  componentWillLoad() {
+    if (this.value === undefined) {
+      // If no value was given we use the text content instead.
+      this.value = this.el.innerText || '';
+    }
+  }
+  componentDidLoad() {
+    this.inputEl = this.el.shadowRoot.querySelector('input');
+    this.inputEl.addEventListener('change', _ => {
+      this.wcsRadioClick.emit({
+        label: this.label,
+        source: this.el,
+        value: this.value
+      });
+      this.checked = true;
+    });
+  }
+  render() {
+    return (h(Host, { slot: "option" }, h("input", { id: this.inputId, type: "radio", value: this.value, checked: this.checked, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}` }), h("label", { htmlFor: `${this.inputId}` }, this.label)));
+  }
+  get el() { return getElement(this); }
+};
+let radioButtonIds = 0;
+Radio.style = radioCss;
+
+export { Radio as wcs_radio };