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

html view template engine

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Radio_exports = {};
__export(Radio_exports, {
  Radio: () => Radio,
  default: () => Radio_default
});
module.exports = __toCommonJS(Radio_exports);
var import_ComponentBase = require("../ComponentBase");
var import_DomRender = require("../../DomRender");
var import_RawSet = require("../../rawsets/RawSet");
var Radio;
((_Radio) => {
  _Radio.selector = "System:Radio";
  class RadioBase extends import_ComponentBase.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 import_ComponentBase.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 import_RawSet.RawSet.createComponentTargetElement({
      name: `${Radio.selector}-checked`,
      template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
      objFactory: (e, o, r2, counstructorParam) => {
        return import_DomRender.DomRender.run({ rootObject: new Radio.Checked(), config });
      }
    });
  },
  radioUnChecked: (config) => {
    return import_RawSet.RawSet.createComponentTargetElement({
      name: `${Radio.selector}-unchecked`,
      template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
      objFactory: (e, o, r2, counstructorParam) => {
        return import_DomRender.DomRender.run({ rootObject: new Radio.UnChecked(), config });
      }
    });
  },
  radio: (config) => {
    return import_RawSet.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 import_DomRender.DomRender.run({ rootObject: new Radio.Radio(...counstructorParam), config });
      }
    });
  }
};
//# sourceMappingURL=Radio.js.map