@dooboostore/dom-render/dist/esm/components/radio/Radio.js

html view template engine

import { ComponentBase } from "../ComponentBase.js";
import { DomRender } from "../../DomRender.js";
import { RawSet } from "../../rawsets/RawSet.js";
var Radio;
((_Radio) => {
  _Radio.selector = "System:Radio";
  class RadioBase extends ComponentBase {
    constructor() {
      super(...arguments);
      this.hidden = true;
    }
  }
  class Checked extends RadioBase {
    constructor() {
      super({ onlyParentType: Radio2 });
      this.name = "Checked";
    }
  }
  _Radio.Checked = Checked;
  class UnChecked extends RadioBase {
    constructor() {
      super({ onlyParentType: Radio2 });
      this.name = "unChecked";
    }
  }
  _Radio.UnChecked = UnChecked;
  class Radio2 extends ComponentBase {
    constructor() {
      super(...arguments);
      this.checked = false;
    }
    change(checked) {
      checked = checked ?? this.checked;
      this.checked = checked;
      this.setChildrenHidden(checked);
      console.log("radio checked!!!!!!!", checked, this.checked, this.inputElement?.checked);
      if (this.getAttribute("on_change_checked")) {
        this.getAttribute("on_change_checked")?.(checked, this.inputElement);
      }
    }
    setChildrenHidden(checked) {
      this.getChildren(Checked).forEach((it) => {
        it.hidden = !checked;
      });
      this.getChildren(UnChecked).forEach((it) => {
        it.hidden = checked;
      });
    }
    onCreatedThisChild(child, childData) {
      super.onCreatedThisChild(child, childData);
      this.setChildrenHidden(this.checked);
    }
    onInitInputElement(element) {
      this.inputElement = element;
    }
    onChangeAttrRender(name, val, other) {
      super.onChangeAttrRender(name, val, other);
      if (this.inputElement && this.getAttribute("checked") !== this.checked) {
        this.inputElement.checked = !!this.getAttribute("checked");
        console.log("----changeAttribute", this.getAttribute("checked"));
        this.change(!!this.getAttribute("checked"));
      }
    }
  }
  _Radio.Radio = Radio2;
})(Radio || (Radio = {}));
var Radio_default = {
  radioChecked: (config) => {
    return RawSet.createComponentTargetElement({
      name: `${Radio.selector}-checked`,
      template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
      objFactory: (e, o, r2, counstructorParam) => {
        return DomRender.run({ rootObject: new Radio.Checked(), config });
      }
    });
  },
  radioUnChecked: (config) => {
    return RawSet.createComponentTargetElement({
      name: `${Radio.selector}-unchecked`,
      template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
      objFactory: (e, o, r2, counstructorParam) => {
        return DomRender.run({ rootObject: new Radio.UnChecked(), config });
      }
    });
  },
  radio: (config) => {
    return RawSet.createComponentTargetElement({
      name: `${Radio.selector}`,
      template: `<label class="\${@this@.getAttribute('class')}$">
  <input
    name="\${@this@.getAttribute('name')}$"
    checked="\${@this@.getAttribute('checked')}$"
    value="\${@this@.getAttribute('value')}$"
    dr-on-init="@this@.onInitInputElement($element)"
    dr-event-change="@this@.change($element.checked);"
    type="radio"

  />
  \${@this@.getAttribute('checked')}$
  #innerHTML#
</label>`,
      objFactory: (e, o, r2, counstructorParam) => {
        return DomRender.run({ rootObject: new Radio.Radio(...counstructorParam), config });
      }
    });
  }
};
export {
  Radio,
  Radio_default as default
};
//# sourceMappingURL=Radio.js.map