@dooboostore/dom-render/dist/esm/components/select/Select.js

html view template engine

var __decorate = function(decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = function(k, v) {
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { attribute, ComponentBase } from "../ComponentBase.js";
import { DomRender } from "../../DomRender.js";
import { RawSet } from "../../rawsets/RawSet.js";
import { EventUtils } from "@dooboostore/core-web";
import { ValidUtils } from "@dooboostore/core-web";
import { DomRenderNoProxy } from "../../decorators/DomRenderNoProxy.js";
import { WindowUtils } from "@dooboostore/core-web";
var Select;
(function(Select_1) {
  var _a;
  Select_1.selector = "dr-select";
  class StateComponent extends ComponentBase {
    constructor(config) {
      super(config);
      this.hidden = true;
      this.value = null;
    }
    setValue(value) {
      this.value = value;
    }
  }
  class OptionSelected extends StateComponent {
    constructor() {
      super({ onlyParentType: Option });
    }
  }
  Select_1.OptionSelected = OptionSelected;
  class OptionUnselected extends StateComponent {
    constructor() {
      super({ onlyParentType: Option });
    }
  }
  Select_1.OptionUnselected = OptionUnselected;
  class OptionDisabled extends StateComponent {
    constructor() {
      super({ onlyParentType: Option });
    }
  }
  Select_1.OptionDisabled = OptionDisabled;
  class SummaryPlaceholder extends StateComponent {
    constructor() {
      super({ onlyParentType: Summary });
    }
  }
  Select_1.SummaryPlaceholder = SummaryPlaceholder;
  class SummarySelected extends StateComponent {
    constructor() {
      super({ onlyParentType: Summary });
      this.selectedOptions = [];
    }
    setOptions(options = []) {
      this.selectedOptions = options.filter((it) => it.selected);
    }
  }
  Select_1.SummarySelected = SummarySelected;
  class SummaryDisabled extends StateComponent {
    constructor() {
      super({ onlyParentType: Summary });
      this.selectedOptions = [];
    }
    setOptions(options = []) {
      this.selectedOptions = options.filter((it) => it.selected);
    }
  }
  Select_1.SummaryDisabled = SummaryDisabled;
  class Option extends ComponentBase {
    // public status: 'selected' | 'unselected' | 'disabled' = 'unselected';
    constructor() {
      super({ onlyParentType: SelectBody });
      this.hidden = true;
      this.value = null;
      this.selected = false;
      this.disabled = false;
      this.classAttr = null;
    }
    async onInitRender(param, rawSet) {
      await super.onInitRender(param, rawSet);
      this.updateStatus();
    }
    // onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
    //   super.onCreatedThisChild(child, data);
    //   this.updateStatus();
    // }
    // async onRawSetRendered(rawSet:RawSet, otherData:OnRawSetRenderedOtherData):Promise<void>{
    //   await super.onRawSetRendered(rawSet, otherData);
    // }
    onCreatedThisChildDebounce(childrenSet) {
      super.onCreatedThisChildDebounce(childrenSet);
      this.updateStatus();
    }
    toggleSelected(event) {
      if (!this.disabled) {
        this.selected = this.isMultiple() ? !this.selected : true;
        this.updateStatus();
        this.getParentThis().changeOptionState(this);
      } else {
        event.stopPropagation();
        event.preventDefault();
      }
    }
    isMultiple() {
      return this.getParentThis()?.getParentThis().multiple;
    }
    updateStatus() {
      if (this.disabled) {
        this.getChildren(OptionSelected).forEach((c) => {
          c.hidden = true;
          c.setValue(this.value);
        });
        this.getChildren(OptionUnselected).forEach((c) => {
          c.hidden = true;
          c.setValue(this.value);
        });
        this.getChildren(OptionDisabled).forEach((c) => {
          c.hidden = false;
          c.setValue(this.value);
        });
        return;
      }
      if (this.selected) {
        this.getChildren(OptionSelected).forEach((c) => {
          c.hidden = false;
          c.setValue(this.value);
        });
        this.getChildren(OptionUnselected).forEach((c) => {
          c.hidden = true;
          c.setValue(this.value);
        });
        this.getChildren(OptionDisabled).forEach((c) => {
          c.hidden = true;
          c.setValue(this.value);
        });
      }
      if (!this.selected) {
        this.getChildren(OptionSelected).forEach((c) => {
          c.hidden = true;
          c.setValue(this.value);
        });
        this.getChildren(OptionUnselected).forEach((c) => {
          c.hidden = false;
          c.setValue(this.value);
        });
        this.getChildren(OptionDisabled).forEach((c) => {
          c.hidden = true;
          c.setValue(this.value);
        });
      }
    }
  }
  __decorate([
    attribute({ name: "value" }),
    __metadata("design:type", String)
  ], Option.prototype, "value", void 0);
  __decorate([
    attribute({ name: "selected", converter: (v) => v !== null && v === true }),
    __metadata("design:type", Object)
  ], Option.prototype, "selected", void 0);
  __decorate([
    attribute({ name: "disabled", converter: (v) => v !== null && v === true }),
    __metadata("design:type", Object)
  ], Option.prototype, "disabled", void 0);
  __decorate([
    attribute({ name: "class", converter: (v) => v ? v : null }),
    __metadata("design:type", String)
  ], Option.prototype, "classAttr", void 0);
  Select_1.Option = Option;
  class Summary extends ComponentBase {
    constructor() {
      super(...arguments);
      this.classAttr = null;
      this.options = [];
      this.disabled = false;
    }
    // constructor() {
    //   super({ onlyParentType: Select });
    // }
    setDisabled(disabled) {
      this.disabled = disabled;
      this.getChildren(SummaryPlaceholder).forEach((it) => it.hidden = true);
      this.getChildren(SummarySelected).forEach((it) => it.hidden = true);
      this.getChildren(SummaryDisabled).forEach((it) => it.hidden = false);
    }
    setOptions(options = []) {
      this.options = options;
      const selectedOptions = this.options.filter((it) => it.selected && !it.disabled);
      if (!this.disabled) {
        if (selectedOptions.length > 0) {
          this.getChildren(SummaryPlaceholder).forEach((it) => it.hidden = true);
          this.getChildren(SummarySelected).forEach((c) => {
            c.setOptions(options);
            c.hidden = false;
          });
          this.getChildren(SummaryDisabled).forEach((it) => it.hidden = true);
        } else {
          this.getChildren(SummaryDisabled).forEach((it) => it.hidden = true);
          this.getChildren(SummaryPlaceholder).forEach((it) => it.hidden = false);
          this.getChildren(SummarySelected).forEach((c) => c.hidden = true);
        }
      }
    }
    async onInitRender(param, rawSet) {
      await super.onInitRender(param, rawSet);
    }
    onInitSummaryElement(element, event) {
      this.element = element;
    }
    updateView(hasSelection) {
      this.getChildren(SummaryPlaceholder).forEach((c) => c.hidden = hasSelection);
      this.getChildren(SummarySelected).forEach((c) => c.hidden = !hasSelection);
    }
    // onCreatedThisChild(child: any, data: OnCreateRenderDataParams) {
    //   super.onCreatedThisChild(child, data);
    // }
    // async onRawSetRendered(rawSet: RawSet, otherData: OnRawSetRenderedOtherData): Promise<void> {
    //   await super.onRawSetRendered(rawSet, otherData);
    // }
    onCreatedThisChildDebounce(childrenSet) {
      super.onCreatedThisChildDebounce(childrenSet);
      this.updateView(this.getParentThis()?.selectedValues?.length > 0);
    }
    onSummaryClick(element, event) {
      if (this.getParentThis()?.disabled) {
        event.stopPropagation();
        event.preventDefault();
        return;
      }
    }
  }
  __decorate([
    attribute({ name: "class", converter: (v) => v === "" ? null : v }),
    __metadata("design:type", String)
  ], Summary.prototype, "classAttr", void 0);
  Select_1.Summary = Summary;
  class SelectBody extends ComponentBase {
    constructor() {
      super({ onlyParentType: Select2 });
      this.classAttr = null;
      this.float = null;
    }
    async onRawSetRendered(rawSet, otherData) {
      await super.onRawSetRendered(rawSet, otherData);
      this.changeOptionState();
    }
    changeOptionState(option) {
      const options = this.getChildren(Option);
      const select = this.getParentThis();
      if (!select.multiple) {
        if (option && option.selected) {
          options.filter((it) => it !== option).forEach((it) => {
            it.selected = false;
            it.updateStatus();
          });
        } else {
          const selectedOptions = options.filter((it) => it.selected && !it.disabled);
          selectedOptions.forEach((opt, idx) => {
            const isLast = idx === selectedOptions.length - 1;
            if (!isLast) {
              opt.selected = false;
              opt.updateStatus();
            }
          });
        }
      }
      select?.setOptions(options);
    }
  }
  __decorate([
    attribute({ name: "class", converter: (v) => v === "" ? null : v }),
    __metadata("design:type", String)
  ], SelectBody.prototype, "classAttr", void 0);
  __decorate([
    attribute({ name: "float" }),
    __metadata("design:type", String)
  ], SelectBody.prototype, "float", void 0);
  Select_1.SelectBody = SelectBody;
  class Select2 extends ComponentBase {
    constructor(config) {
      super();
      this.multiple = false;
      this.disabled = false;
      this.classAttr = null;
      this.name = null;
      this.selectedValues = [];
      this.selectedOptions = [];
    }
    // get value(): string | (string | null)[] | null | undefined {
    //   return this._value;
    // }
    // set value(val: string | (string | null)[] | null | undefined) {
    //   console.log('value set', val)
    //   this._value = val;
    // }
    get optionComponents() {
      return this.getChildren(Option);
    }
    onCreateRender() {
    }
    onCreateRenderData() {
    }
    async onInitRender(param, rawSet) {
      await super.onInitRender(param, rawSet);
      if (ValidUtils.isBrowser() && this.rawSet?.dataSet.config.window) {
        const detailsElement = this.element;
        const window = this.rawSet.dataSet.config.window;
        const document = window.document;
        this.documentClickSubscription = EventUtils.htmlElementEventObservable(document, "click").subscribe((event) => {
          const isSummaryClick = this.getChildren(Summary).some((it) => event.target && it.element?.contains(event.target) || it.element === event.target);
          if (!isSummaryClick && this.getAttribute("disableOtherClickClose")) {
            return;
          }
          if (!isSummaryClick && !this.multiple && detailsElement) {
            detailsElement.open = false;
            return;
          }
          if (!isSummaryClick && detailsElement && !detailsElement?.contains(event?.target)) {
            detailsElement.open = false;
          }
        });
        this.windowBlurSubscription = WindowUtils.eventObservable(window, "blur").subscribe(() => {
          if (detailsElement?.open && window.document.activeElement?.tagName === "IFRAME") {
            detailsElement.open = false;
          }
        });
      }
    }
    toggle(element, event) {
      const toggleAttribute = this.getAttribute("toggle");
      if (toggleAttribute) {
        toggleAttribute?.(element.open);
      }
    }
    setOptions(options) {
      const summaries = this.getChildren(Summary);
      this.options = options;
      const values = this.options.filter((it) => it.selected && !it.disabled).map((it) => it.value);
      summaries?.forEach((it) => {
        it.setDisabled(this.disabled);
        if (!this.disabled) {
          it.setOptions(options);
        }
      });
      this.selectedValues = values;
      this.selectedOptions = this.options.filter((it) => it.selected && !it.disabled);
      this.value = this.selectedValues[0];
      this.getAttribute("onchange")?.(this.value);
      this.getAttribute("onchangeValues")?.(values);
    }
    onInitDetailsElement(detailsElement) {
      this.element = detailsElement;
    }
    onDrThisUnBind() {
      super.onDrThisUnBind();
      this.onDestroyRender();
    }
    onDestroyRender() {
      super.onDestroyRender();
      this.documentClickSubscription?.unsubscribe();
      this.windowBlurSubscription?.unsubscribe();
    }
    setValue(value) {
      this.value = value;
      if (this.options) {
        this.options.forEach((it) => {
          it.selected = false;
          it.updateStatus();
        });
        for (let option of this.options) {
          if (option.value === value) {
            option.selected = true;
            if (!this.multiple) {
              break;
            }
          } else {
            option.selected = false;
          }
          option.updateStatus();
        }
      }
      console.log("value set", value);
    }
    test() {
      console.log("tttttttt");
    }
  }
  __decorate([
    attribute({ name: "multiple", converter: (v) => v !== null }),
    __metadata("design:type", Object)
  ], Select2.prototype, "multiple", void 0);
  __decorate([
    attribute({ name: "disabled", converter: (v) => v !== null }),
    __metadata("design:type", Object)
  ], Select2.prototype, "disabled", void 0);
  __decorate([
    attribute({ name: "class", converter: (v) => v === "" ? null : v }),
    __metadata("design:type", String)
  ], Select2.prototype, "classAttr", void 0);
  __decorate([
    attribute({ name: "name", converter: (v) => v === "" ? null : v }),
    __metadata("design:type", String)
  ], Select2.prototype, "name", void 0);
  __decorate([
    DomRenderNoProxy,
    __metadata("design:type", typeof (_a = typeof HTMLDetailsElement !== "undefined" && HTMLDetailsElement) === "function" ? _a : Object)
  ], Select2.prototype, "element", void 0);
  __decorate([
    DomRenderNoProxy,
    __metadata("design:type", Object)
  ], Select2.prototype, "documentClickSubscription", void 0);
  __decorate([
    DomRenderNoProxy,
    __metadata("design:type", Object)
  ], Select2.prototype, "windowBlurSubscription", void 0);
  __decorate([
    DomRenderNoProxy,
    __metadata("design:type", Summary)
  ], Select2.prototype, "summaryComponent", void 0);
  __decorate([
    DomRenderNoProxy,
    __metadata("design:type", SelectBody)
  ], Select2.prototype, "selectBodyComponent", void 0);
  __decorate([
    attribute("value"),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [String]),
    __metadata("design:returntype", void 0)
  ], Select2.prototype, "setValue", null);
  Select_1.Select = Select2;
})(Select || (Select = {}));
const stateComponentFactory = (name, type) => {
  return (config) => RawSet.createComponentTargetElement({
    name,
    template: '<div dr-if="!@this@.hidden" dr-option-strip="true">#innerHTML#</div>\n',
    objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new type(), config })
  });
};
var Select_default = {
  select: (config) => {
    return RawSet.createComponentTargetElement({
      name: Select.selector,
      styles: ".dr-select-container {\n  position: relative;\n\n}\n.dr-select-options-container {\n  display: none;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  z-index: 10;\n}\n.dr-select-container.is-open .dr-select-options-container {\n  display: block;\n}\nsummary::-webkit-details-marker {\n    display: none;\n}\n/* Floating styles for dr-select-body */\n.dr-select-body-container {\n    position: absolute;\n}\n\n.dr-select-body-bottom-left-container {\n    position: absolute;\n    left: 0;\n    top: 100%;\n}\n\n.dr-select-body-bottom-right-container {\n    position: absolute;\n    right: 0;\n    top: 100%;\n}\n\n.dr-select-body-top-left-container {\n    position: absolute;\n    left: 0;\n    bottom: 100%;\n}\n\n.dr-select-body-top-right-container {\n    position: absolute;\n    right: 0;\n    bottom: 100%;\n}\n\n/* Reset default details/summary styles */\n.dr-select-container details {\n  display: block; /* Ensure it behaves like a block element */\n}\n\n.dr-select-container summary {\n  display: block; /* Ensure it behaves like a block element */\n  list-style: none; /* Remove default marker */\n  cursor: pointer; /* Indicate it's clickable */\n}\n\n.dr-select-container summary::-webkit-details-marker,\n.dr-select-container summary::marker {\n  display: none; /* Hide marker for Webkit and standard */\n}",
      template: `<details dr-class="{
        'dr-select-container': true,
        'is-open': @this@.isOpen,
        [@this@.classAttr]: @this@.classAttr
     }" dr-on-init="@this@.onInitDetailsElement($element)" dr-option-complete="@this@.test()"  dr-event-toggle="@this@.toggle($element, $event)">

    #innerHTML#
</details>
<select hidden="hidden" name="\${@this@.name}$" disabled="\${@this@.disabled ? 'disabled' : null}$"  style="width: 1500px; height:500px"  multiple>
    <option dr-for-of="@this@.options" value="\${#it#.value}$" selected="\${#it#.selected ? 'selected' : null}$">#it# \${#it#.value}$</option>
</select>`,
      objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Select(config), config })
    });
  },
  selectSummary: (config) => {
    return RawSet.createComponentTargetElement({
      name: `${Select.selector}-summary`,
      template: '<summary dr-class="{[@this@.classAttr]: @this@.classAttr}"\n         dr-on-init="@this@.onInitSummaryElement($element, $event)"\n         dr-event-click="@this@.onSummaryClick($element, $event)"\n>\n#innerHTML#\n</summary>',
      objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Summary(), config })
    });
  },
  selectSummaryPlaceholder: stateComponentFactory(`${Select.selector}-summary-placeholder`, Select.SummaryPlaceholder),
  selectSummarySelected: stateComponentFactory(`${Select.selector}-summary-selected`, Select.SummarySelected),
  selectSummaryDisabled: stateComponentFactory(`${Select.selector}-summary-disabled`, Select.SummaryDisabled),
  selectBody: (config) => {
    return RawSet.createComponentTargetElement({
      name: `${Select.selector}-body`,
      template: `<div dr-class="{[@this@.classAttr]: @this@.classAttr, 'dr-select-body-container': true,  ['dr-select-body-'+@this@.float+'-container']: @this@.float}">#innerHTML#</div>`,
      objFactory: (e, o, r2, constructorParam) => {
        return DomRender.run({ rootObject: new Select.SelectBody(), config });
      }
    });
  },
  selectOption: (config) => {
    return RawSet.createComponentTargetElement({
      name: `${Select.selector}-option`,
      template: '<a dr-class="{[@this@.classAttr]: @this@.classAttr}" dr-event-click="@this@.toggleSelected($event)">#innerHTML#</a>\n',
      objFactory: (e, o, r2, constructorParam) => DomRender.run({ rootObject: new Select.Option(), config })
    });
  },
  selectOptionSelected: stateComponentFactory(`${Select.selector}-option-selected`, Select.OptionSelected),
  selectOptionUnselected: stateComponentFactory(`${Select.selector}-option-unselected`, Select.OptionUnselected),
  selectOptionDisabled: stateComponentFactory(`${Select.selector}-option-disabled`, Select.OptionDisabled)
};
export {
  Select,
  Select_default as default
};
//# sourceMappingURL=Select.js.map