@dooboostore/dom-render/dist/esm/components/details/Details.js

html view template engine

import { ComponentBase } from "../ComponentBase.js";
import { DomRender } from "../../DomRender.js";
import { RawSet } from "../../rawsets/RawSet.js";
import { ValidUtils } from "@dooboostore/core-web";
import { EventUtils } from "@dooboostore/core-web";
var Details;
((_Details) => {
  _Details.selector = "dr-details";
  class Summary extends ComponentBase {
    constructor() {
      super({ onlyParentType: [Details2] });
    }
  }
  _Details.Summary = Summary;
  class Body extends ComponentBase {
    constructor() {
      super({ onlyParentType: [Details2] });
    }
  }
  _Details.Body = Body;
  _Details.isBody = (instance) => {
    return instance instanceof Body;
  };
  class Form extends ComponentBase {
    constructor() {
      super({ onlyParentType: [Details2] });
    }
    submit(element, event) {
      if (this.hasAttribute("disabledSubmit")) {
        event.preventDefault();
      }
      if (this.hasAttribute("submit")) {
        this.getAttribute("submit")?.(event, element);
      }
    }
    reset() {
      this.$element?.reset();
    }
  }
  _Details.Form = Form;
  _Details.isForm = (instance) => {
    return instance instanceof Form;
  };
  class Details2 extends ComponentBase {
    onCreateRenderData(data) {
      super.onCreateRenderData(data);
    }
    onCreateRender(...param) {
    }
    toggle(element) {
      const toggleAttribute = this.getAttribute("toggle");
      if (toggleAttribute) {
        toggleAttribute?.(element.open);
      }
      if (element.open) {
        this.getAttribute("onOpen")?.();
      } else {
        this.getAttribute("onClose")?.();
      }
    }
    async onInitRender(param, rawSet) {
      await super.onInitRender(param, rawSet);
      if (ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {
        const detailsElement = this.element;
        const document = this.rawSet.dataSet.config.window.document;
        this.documentClickSubscription = EventUtils.htmlElementEventObservable(document, "click").subscribe((event) => {
          if (this.getAttribute("disableOtherClickClose")) {
            return;
          }
          if (detailsElement && !detailsElement?.contains(event?.target)) {
            detailsElement.open = false;
          }
        });
        if (detailsElement) {
          this.toggleSubscription = EventUtils.htmlElementEventObservable(detailsElement, "toggle").subscribe((it) => {
            if (ValidUtils.coreValidUtils.isNotNullUndefined(this.getAttribute("toggle_form_reset"))) {
              this.children?.filter(_Details.isForm).forEach((it2) => {
                it2.reset();
              });
            }
          });
        }
      }
    }
    onChangeAttrRender(name, value, other) {
      super.onChangeAttrRender(name, value, other);
    }
    onDestroyRender(...metaData) {
      this.toggleSubscription?.unsubscribe();
      this.documentClickSubscription?.unsubscribe();
    }
    // changeAttribute(attribute: { className: string } | undefined) {
    // }
  }
  _Details.Details = Details2;
})(Details || (Details = {}));
var Details_default = {
  detailsSummary: (config) => {
    return RawSet.createComponentTargetElement({
      name: `${Details.selector}-summary`,
      template: "<summary class=\"${`${@this@.getAttribute('class')} details-summary-container`}$\">#innerHTML#</summary>",
      objFactory: (e, o, r2, counstructorParam) => {
        return DomRender.run({ rootObject: new Details.Summary(), config });
      }
    });
  },
  detailsBody: (config) => {
    return RawSet.createComponentTargetElement({
      name: `${Details.selector}-body`,
      template: "<div class=\"${`${@this@.getAttribute('class')} details-body-container details-body-${@this@.getAttribute('float')}-container`}$\" dr-on-init=\"@this@.$element = $element;\">#innerHTML#</div>",
      objFactory: (e, o, r2, counstructorParam) => {
        return DomRender.run({ rootObject: new Details.Body(), config });
      }
    });
  },
  detailsForm: (config) => {
    return RawSet.createComponentTargetElement({
      name: `${Details.selector}-form`,
      template: '<form class="${`${@this@.getAttribute(\'class\')} details-body-container details-body-${@this@.getAttribute(\'float\')}-container details-form-container`}$" dr-on-init="@this@.$element = $element;" dr-event-submit="@this@.submit($element,$event);">#innerHTML#</form>',
      objFactory: (e, o, r2, counstructorParam) => {
        return DomRender.run({ rootObject: new Details.Form(), config });
      }
    });
  },
  details: (config) => {
    return RawSet.createComponentTargetElement({
      name: `${Details.selector}`,
      styles: `
        .details-container {
            position: relative;
        }

        .details-container .details-body-container {
            position: absolute;
        }


        .details-container .details-body-bottom-left-container {
            position: absolute;
            left: 0;
            top: 100%;
            /*margin-top: 0px;*/
            /*width: max-content;*/
        }

        .details-container .details-body-bottom-right-container {
            position: absolute;
            right: 0;
            top: 100%;
            /*margin-top: 0px;*/
            /*width: max-content;*/
        }

        .details-container .details-body-top-left-container {
            position: absolute;
            left: 0;
            bottom: 100%;
            /*margin-bottom: 0px;*/
            /*width: max-content;*/
        }

        .details-container .details-body-top-right-container {
            position: absolute;
            right: 0;
            bottom: 100%;
            /*margin-bottom: 0px;*/
        }
      `,
      template: '<details class="${`${@this@.getAttribute(\'class\')} details-container`}$" dr-on-init="@this@.element = $element;" dr-event-toggle="@this@.toggle($element)"> #innerHTML# </details>',
      objFactory: (e, o, r2, counstructorParam) => {
        return DomRender.run({ rootObject: new Details.Details(...counstructorParam), config });
      }
    });
  }
};
export {
  Details,
  Details_default as default
};
//# sourceMappingURL=Details.js.map