@dooboostore/dom-render/dist/esm/components/checkbox/CheckBox.js

html view template engine

import { ComponentBase } from "../ComponentBase.js";
import { DomRender } from "../../DomRender.js";
import { RawSet } from "../../rawsets/RawSet.js";
var CheckBox;
((_CheckBox) => {
  _CheckBox.selector = "dr-checkbox";
  class CheckBoxBase extends ComponentBase {
    constructor() {
      super(...arguments);
      this.hidden = true;
    }
  }
  class Checked extends CheckBoxBase {
    constructor() {
      super({ onlyParentType: CheckBox2 });
      this.name = "checked";
    }
  }
  _CheckBox.Checked = Checked;
  class UnChecked extends CheckBoxBase {
    constructor() {
      super({ onlyParentType: CheckBox2 });
      this.name = "unChecked";
    }
  }
  _CheckBox.UnChecked = UnChecked;
  class CheckBox2 extends ComponentBase {
    constructor() {
      super(...arguments);
      this.checked = false;
    }
    change(option, checked) {
      checked = checked ?? this.checked;
      this.checked = checked;
      this.setChildrenHidden(checked);
      this.getAttribute("change")?.(checked, option);
    }
    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;
      this.inputElement.checked = !!this.getAttribute("checked");
      this.change({ type: "initialize" }, !!this.getAttribute("checked"));
    }
    onChangeAttrRender(name, val, other) {
      super.onChangeAttrRender(name, val, other);
      if (this.inputElement && this.getAttribute("checked") !== this.checked) {
        this.inputElement.checked = !!this.getAttribute("checked");
        this.change({ type: "attributeChange" }, !!this.getAttribute("checked"));
      }
    }
  }
  _CheckBox.CheckBox = CheckBox2;
})(CheckBox || (CheckBox = {}));
var CheckBox_default = {
  checkBoxChecked: (config) => {
    return RawSet.createComponentTargetElement({
      name: `${CheckBox.selector}-checked`,
      template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>',
      objFactory: (e, o, r2, counstructorParam) => {
        return DomRender.run({ rootObject: new CheckBox.Checked(), config });
      }
    });
  },
  checkBoxUnchecked: (config) => {
    return RawSet.createComponentTargetElement({
      name: `${CheckBox.selector}-unchecked`,
      template: '<div dr-if="!@this@.hidden" dr-option-strip="true" >#innerHTML#</div>',
      objFactory: (e, o, r2, counstructorParam) => {
        return DomRender.run({ rootObject: new CheckBox.UnChecked(), config });
      }
    });
  },
  checkBox: (config) => {
    return RawSet.createComponentTargetElement({
      name: `${CheckBox.selector}`,
      template: `<label class="\${@this@.getAttribute('class')}$">
  <input
    name="\${@this@.getAttribute('name')}$"
    dr-on-init="@this@.onInitInputElement($element)"
    dr-event-change="@this@.change({type: 'event'},$element.checked);"
    type="checkbox" hidden="hidden"/>
  #innerHTML#
</label>`,
      objFactory: (e, o, r2, counstructorParam) => {
        return DomRender.run({ rootObject: new CheckBox.CheckBox(...counstructorParam), config });
      }
    });
  }
};
export {
  CheckBox,
  CheckBox_default as default
};
//# sourceMappingURL=CheckBox.js.map