@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-08202.0

package/dist/esm/ez-collapsible-box.entry.js

@@ -0,0 +1,129 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-296b8458.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { A as ApplicationUtils } from './ApplicationUtils-d9a34a16.js';
+import './DialogType-54a62731.js';
+import './CheckMode-bdb2ec19.js';
+
+const ezCollapsibleBoxCss = ":host{--ez-collapsible-box--font-size:var(--title--medium, 14px);--ez-collapsible-box--font-family:var(--font-pattern, Arial);--ez-collapsible-box--font-weight:var(--text-weight--large, 600);--ez-collapsible-box--color:var(--title--primary);--ez-collapsible-box--subtitle--font-size:var(--text--medium, 14px);--ez-collapsible-box--subtitle--font-family:var(--font-pattern, 'Roboto');--ez-collapsible-box--subtitle--font-weight:var(--text-weight--medium, 400);--ez-collapsible-box--subtitle--color:var(--text--primary);--ez-collapsible-box--subtitle--margin-bottom:var(--space--medium, 12px);--ez-collapsible-box--focus--color:var(--color--primary-600);--ez-collapsible-box__icon--color:var(--ez-collapsible-box--color);--ez-collapsible-box__header--padding-top:0px;--ez-collapsible-box__header--padding-bottom:0px;--ez-collapsible-box__header--padding-right:0px;--ez-collapsible-box__header--padding-left:0px;display:flex;flex-wrap:wrap;width:100%}ez-icon{--ez-icon--color:inherit}.collapsible-box{display:flex;flex-direction:column;width:100%}.collapsable-box--bordered{border:var(--border--small);border-color:var(--color--strokes);border-radius:var(--border--radius-medium);padding:var(--space--xs)}.collapsible-box__header{display:flex;box-sizing:border-box;padding-top:var(--ez-collapsible-box__header--padding-top);padding-bottom:var(--ez-collapsible-box__header--padding-bottom);padding-right:var(--ez-collapsible-box__header--padding-right);padding-left:var(--ez-collapsible-box__header--padding-left)}.collapsible-box__title{position:relative;width:auto;display:flex;box-sizing:border-box;align-items:center;outline:none;border:none;background-color:unset;cursor:pointer;padding:0px;text-align:left;color:var(--ez-collapsible-box--color);--ez-icon--color:var(--ez-collapsible-box__icon--color);margin-bottom:var(--space--medium, 12px)}.collapsible-box__title:focus{color:var(--ez-collapsible-box--focus--color);--ez-icon--color:var(--ez-collapsible-box--focus--color)}.collapsible-box__label{display:flex;white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;box-sizing:border-box;margin-left:6px;gap:6px;font-family:var(--ez-collapsible-box--font-family);font-size:var(--ez-collapsible-box--font-size);font-weight:var(--ez-collapsible-box--font-weight)}.subtitle-box__label{display:flex;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;font-family:var(--ez-collapsible-box--subtitle--font-family);font-size:var(--ez-collapsible-box--subtitle--font-size);font-weight:var(--ez-collapsible-box--subtitle--font-weight);color:var(--ez-collapsible-box--subtitle--color);margin-bottom:var(--ez-collapsible-box--subtitle--margin-bottom)}.subtitle-box__content{width:100%}.collapsible-box__label ez-icon{visibility:hidden;transition:0.25s linear}.collapsible-box__label:hover ez-icon{visibility:visible}.collapsible-box__text-edit{margin-left:6px}.collapsible-box__icon{transform:rotate(90deg) translate(0px, 14%);transition:transform var(--transition)}.collapsible-box__icon--collapsed{transform:rotate(0deg) translate(-14%, 0px)}.collapsible-box__title--icon-right{flex-direction:row-reverse}.collapsible-box__title--icon-right .collapsible-box__icon{transform:rotate(90deg) translate(0px, -14%)}.collapsible-box__title--icon-right .collapsible-box__icon--collapsed{transform:rotate(0deg) translate(14%, 0px)}.collapsible-box__title--icon-right .collapsible-box__label{margin-left:0px;margin-right:6px}.collapsible-box__title--left{margin-right:auto}.collapsible-box__title--right{margin-left:auto}.collapsible-box__title--center{margin-left:auto;margin-right:auto}.collapsible-box__title--stretch{justify-content:space-between;width:100%}.collapsible-box__title--no-margin{margin-bottom:0}.collapsible-box__content{display:flex;flex-wrap:wrap;width:100%;height:0px;max-height:0px;opacity:0;overflow:hidden;transition:all var(--transition, 0.5s)}.collapsible-box__content--show{height:100%;max-height:none;opacity:1;overflow:visible;transition:all var(--transition, 0.5s)}.font--x-small{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--x-large{font-size:20px}";
+
+const EzCollapsibleBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    this.ezRemove = createEvent(this, "ezRemove", 7);
+    this.ezSaveEditLabel = createEvent(this, "ezSaveEditLabel", 7);
+    this.ezEditLabelMode = createEvent(this, "ezEditLabelMode", 7);
+    this._activeEditText = false;
+    this.value = false;
+    this.boxBordered = false;
+    this.label = undefined;
+    this.subtitle = undefined;
+    this.headerSize = "small";
+    this.iconPlacement = "left";
+    this.headerAlign = "left";
+    this.removable = false;
+    this.editable = false;
+    this.conditionalSave = undefined;
+  }
+  /**
+   * Oculta/mostra o conteúdo do ez-collapsible-box.
+   */
+  async showHide() {
+    this.value = !this.value;
+  }
+  /**
+   * Aplica o foco no campo de edição de título.
+   */
+  async applyFocusTextEdit() {
+    var _a;
+    (_a = this._refTextEdit) === null || _a === void 0 ? void 0 : _a.applyFocusSelect();
+  }
+  /**
+   * Cancela a edição de título.
+   */
+  async cancelEdition() {
+    this._activeEditText = false;
+    this.ezEditLabelMode.emit(this._activeEditText);
+  }
+  observeCollapsedValue() {
+    this.ezChange.emit(this.value);
+  }
+  /**
+   * Retorna o tamanho configurado do texto e do ícone.
+   */
+  getHeaderSize() {
+    const sizeAlias = ["xsmall", "xlarge"];
+    const sizeList = ["x-small", "small", "medium", "large", "x-large"];
+    const sizeLowerCase = this.headerSize && this.headerSize.toLowerCase();
+    const sizeCustom = sizeAlias.includes(sizeLowerCase) ? sizeLowerCase.replace('x', 'x-') : sizeLowerCase;
+    return sizeList.includes(sizeCustom) ? sizeCustom : "small";
+  }
+  removeElement() {
+    this._hostElement && this._hostElement.remove();
+    this.ezRemove.emit(this);
+  }
+  editLabel(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    this._activeEditText = true;
+    this.ezEditLabelMode.emit(this._activeEditText);
+  }
+  confirmRemove(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    ApplicationUtils.confirm("Aviso", `Deseja realmente remover o grupo <b>${this.label}</b>?`)
+      .then((canRemove) => {
+      if (canRemove) {
+        this.removeElement();
+      }
+    });
+  }
+  saveEditionText(editDetails) {
+    const { value, newValue } = editDetails.detail;
+    if (value === newValue) {
+      this.cancelEdition();
+      return;
+    }
+    let canSave = true;
+    if (this.conditionalSave) {
+      canSave = this.conditionalSave(newValue);
+    }
+    if (this.label !== newValue && canSave) {
+      this.label = newValue;
+      this._activeEditText = false;
+      this.ezSaveEditLabel.emit(editDetails.detail);
+      this.ezEditLabelMode.emit(this._activeEditText);
+    }
+  }
+  getStyledLabel() {
+    if (this._refLabel == undefined) {
+      return;
+    }
+    let styledLabel = {
+      fontSize: window.getComputedStyle(this._refLabel).getPropertyValue('font-size'),
+      fontWeight: window.getComputedStyle(this._refLabel).getPropertyValue('font-weight'),
+      fontFamily: window.getComputedStyle(this._refLabel).getPropertyValue('font-family')
+    };
+    return styledLabel;
+  }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElement);
+  }
+  render() {
+    return (h("div", { class: `collapsible-box ${this.boxBordered && 'collapsable-box--bordered'}` }, h("div", { class: "collapsible-box__header" }, h("button", Object.assign({}, (!this._activeEditText ? { onClick: () => { this.showHide(); } } : null), { class: "collapsible-box__title collapsible-box__title--" + (this.headerAlign || "left") +
+        (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
+        (this.value ? " collapsible-box__title--no-margin" : "") }), h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : ""), id: "toggleCollapsible" }), !this._activeEditText ?
+      h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem }, h("span", null, this.label), this.editable &&
+        h("ez-icon", { slot: "icon", "icon-name": "edit", onClick: (evt) => this.editLabel(evt), title: "Editar" }), this.removable &&
+        h("ez-icon", { slot: "icon", "icon-name": "delete", onClick: (evt) => this.confirmRemove(evt), title: "Remover" })) :
+      h("ez-text-edit", { class: "collapsible-box__text-edit", ref: ref => this._refTextEdit = ref, value: this.label, styled: this.getStyledLabel(), onSaveEdition: (ev) => this.saveEditionText(ev), onCancelEdition: () => this.cancelEdition() })), h("slot", { name: "rightSlot" })), h("div", { class: "collapsible-box__content" + (this.value ? "" : " collapsible-box__content--show") }, this.subtitle &&
+      h("div", { class: "subtitle-box__content" }, h("label", { class: "subtitle-box__label", title: this.subtitle }, h("span", null, this.subtitle))), h("slot", null))));
+  }
+  get _hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["observeCollapsedValue"]
+  }; }
+};
+EzCollapsibleBox.style = ezCollapsibleBoxCss;
+
+export { EzCollapsibleBox as ez_collapsible_box };