wcs-core 2.5.4 → 2.6.0

package/dist/cjs/wcs-radio-group.cjs.entry.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const radioGroupCss = ":host{display:flex}:host([mode=radio]){flex-direction:column}:host([mode=radio]) ::slotted([slot=option]:first-child){margin-top:0}:host([mode=radio]) ::slotted([slot=option]:last-child){margin-bottom:0}:host([mode=radio]) ::slotted([slot=options]){margin-top:calc(var(--wcs-base-margin) / 2);margin-bottom:calc(var(--wcs-base-margin) / 2)}:host([mode=option]){display:inline-flex;flex-direction:row;padding:calc(var(--wcs-base-margin) / 2);background-color:#4d4f53;border-radius:0.6875rem}";
+
+let RadioGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wcsChange = index.createEvent(this, "wcsChange", 7);
+    this.mode = 'radio';
+  }
+  onValueChangeHandler(newValue) {
+    this.updateOptionsState(newValue, true);
+  }
+  componentDidLoad() {
+    if (this.value) {
+      this.updateOptionsState(this.value, true);
+    }
+    if (this.mode === 'option') {
+      for (const option of this.options) {
+        option.mode = 'option';
+      }
+    }
+  }
+  get options() {
+    const opts = this.el.querySelectorAll('wcs-radio');
+    const slot = this.el.querySelector('slot');
+    return opts.length !== 0
+      ? opts
+      : slot !== null
+        ? slot.assignedElements()
+        : [];
+  }
+  selectedOptionChanged(event) {
+    this.updateOptionsState(event.detail.value, false);
+    this.wcsChange.emit({
+      value: event.detail.value
+    });
+  }
+  updateOptionsState(value, markAsChecked) {
+    for (const option of this.options) {
+      if (option.value !== value) {
+        option.removeAttribute('checked');
+      }
+      else {
+        if (markAsChecked) {
+          option.setAttribute('checked', '');
+        }
+      }
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", { name: "option" })));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["onValueChangeHandler"]
+  }; }
+};
+RadioGroup.style = radioGroupCss;
+
+exports.wcs_radio_group = RadioGroup;

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

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.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);cursor:pointer;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][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) label{color:var(--wcs-primary)}:host([mode=radio]:hover) 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;cursor:pointer;border-radius:0.4375rem}:host([mode=option][checked]) label{font-weight:500 !important;color:var(--wcs-primary);background-color:var(--wcs-white)}";
+
+let Radio = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wcsRadioClick = index.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 (index.h(index.Host, { slot: "option" }, index.h("input", { id: this.inputId, type: "radio", value: this.value, checked: this.checked, "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}` }), index.h("label", { htmlFor: `${this.inputId}` }, this.label)));
+  }
+  get el() { return index.getElement(this); }
+};
+let radioButtonIds = 0;
+Radio.style = radioCss;
+
+exports.wcs_radio = Radio;