text: ODA({ is: 'oda-radio-group', imports:'@oda/icon', template: /*html*/`
      <style>
          :host {
              @apply --vertical;
          }
  
          .radio {
              @apply --horizontal;
              @apply --flex;
              align-items: center;
              cursor: pointer;
              margin: 4px 8px;
          }
      </style>
      <div ~for="item in items" :item="item" class="radio" @tap.stop="_tap">
          <oda-icon :icon="item.checked ? checkedIcon : uncheckedIcon"></oda-icon>
          <span ~text="item.label"></span>
      </div>`,
      props: {
          list: {
              type: [Array, Object],
              set(list) {
                  if (Array.isArray(list)) {
                      this.items = list.every(i => typeof i === 'string')
                          ? list.map(n => ({ label: n, checked: false }))
                          : list;
                  } else {
                      const items = [];
                      for (n in list) {
                          items.push({ label: n, checked: list[n] });
                      }
                      this.items = items;
                  }
              }
          },
          items: {
              type: Array,
              default: [],
              set(items) {
                  if (items.length) {
                      if (!this.multiSelect && items.every(i => !i.checked)) {
                          this.set(items[0], 'checked', true);
                      }
                  }
              }
          },
          multiSelect: false,
          value: {
              type: String,
              set(nv) {
                  if (nv && this.items.length) {
                      const newArr = nv.split(';');
                      this.items.forEach(i => i.checked = newArr.includes(i.label));
                  }
              }
          },
          checkedIcon: {
              type: String,
              get() {
                  return (this.multiSelect)
                      ? 'icons:check-box'
                      : 'icons:radio-button-checked'
              }
          },
          uncheckedIcon: {
              type: String,
              get() {
                  return (this.multiSelect)
                      ? 'icons:check-box-outline-blank'
                      : 'icons:radio-button-unchecked'
              }
          }
      },
      _tap(e) {
          const item = e.currentTarget.item;
          if (!this.multiSelect) {
              this.items.forEach(i => {
                  this.set(i, 'checked', i === item);
              });
          } else {
              this.set(item, 'checked', !item.checked);
          }
      },
      updated() {
          if (this.items.length) {
              const res = this.items.filter(i => i.checked);
              if (res.length) {
                  const newVal = (this.multiSelect ? res.map(i => i.label) : [res[0].label]).join(';');
                  if (newVal !== this.value) {
                      this.value = newVal;
                  }
              }
          }
      }
  })