@sankhyalabs/ezui 7.1.0-dev.2 → 7.1.0-dev.21

package/dist/collection/components/ez-image-input/ez-image-input.js

@@ -0,0 +1,324 @@
+import { Host, h } from '@stencil/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import initI18n from '../../utils/i18n';
+export class EzImageInput {
+  constructor() {
+    this.handleFileSelect = (event) => {
+      const input = event.target;
+      if (input.files && input.files[0]) {
+        this.processFile(input.files[0]);
+      }
+    };
+    this.handleDrop = (event) => {
+      var _a;
+      event.preventDefault();
+      event.stopPropagation();
+      this._isDragging = false;
+      if (!this.enabled)
+        return;
+      const files = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
+      if (files && files[0]) {
+        this.processFile(files[0]);
+      }
+    };
+    this.handleDragOver = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.enabled) {
+        this._isDragging = true;
+      }
+    };
+    this.handleDragLeave = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this._isDragging = false;
+    };
+    this.handleRemoveImage = (event) => {
+      event.stopPropagation();
+      this.value = undefined;
+      this._hasImage = false;
+      if (this._inputElem) {
+        this._inputElem.value = '';
+      }
+      this.ezChange.emit('');
+    };
+    this.handleClickDropZone = () => {
+      var _a;
+      if (this.enabled && !this._hasImage) {
+        (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.click();
+      }
+    };
+    this.handleImageClick = (event) => {
+      event.stopPropagation();
+      if (this._hasImage && this.value) {
+        this._showImagePopup = true;
+      }
+    };
+    this.handlePopupAction = (event) => {
+      const action = event.detail;
+      if (action === 'CANCEL' || action === 'OK') {
+        this.handleClosePopup();
+      }
+    };
+    this.handleClosePopup = () => {
+      this._showImagePopup = false;
+    };
+    this.enabled = true;
+    this.label = undefined;
+    this.name = undefined;
+    this.value = undefined;
+    this.maxFileSize = 20 * 1024 * 1024;
+    this.accept = 'image/*';
+    this.loading = false;
+    this._hasImage = false;
+    this._isDragging = false;
+    this._showImagePopup = false;
+  }
+  onValueChange(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this._hasImage = !!newValue;
+    }
+    if (!newValue && this._inputElem) {
+      this._inputElem.value = '';
+    }
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._inputElem) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._inputElem, 'image-input', dataInfo);
+    }
+  }
+  processFile(file) {
+    // Validar tipo de arquivo
+    if (!file.type.startsWith('image/')) {
+      const errorMsg = this.i18n('ez-image-input.invalidFileType');
+      this.ezError.emit(errorMsg);
+      return;
+    }
+    // Validar tamanho do arquivo
+    if (this.maxFileSize && file.size > this.maxFileSize) {
+      const maxSizeMB = (this.maxFileSize / (1024 * 1024)).toFixed(2);
+      const errorMsg = this.i18n('ez-image-input.fileTooLarge', { maxSize: `${maxSizeMB}MB` });
+      this.ezError.emit(errorMsg);
+      return;
+    }
+    // Converter para base64
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      var _a;
+      const base64 = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
+      this.value = base64;
+      this._hasImage = true;
+      this.ezChange.emit(base64);
+    };
+    reader.readAsDataURL(file);
+  }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+    this._hasImage = !!this.value;
+  }
+  componentDidLoad() {
+    this.addInfoId();
+  }
+  render() {
+    if (this.loading) {
+      return (h(Host, null, h("ez-skeleton", { width: "280px", height: '200px' })));
+    }
+    const dropZoneLabel = this.label || this.i18n('ez-image-input.defaultLabel');
+    return (h(Host, null, h("div", { class: {
+        'image-input__container': true,
+        'image-input__container--disabled': !this.enabled,
+        'image-input__container--dragging': this._isDragging,
+        'image-input__container--has-image': this._hasImage
+      }, "data-enabled": this.enabled.toString(), "data-has-image": this._hasImage.toString(), onClick: this.handleClickDropZone, onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, role: "button", "aria-label": dropZoneLabel, tabindex: this.enabled ? 0 : -1 }, h("input", { ref: (el) => (this._inputElem = el), type: "file", accept: this.accept, name: this.name, disabled: !this.enabled, onChange: this.handleFileSelect, class: "image-input__file-input", "aria-hidden": "true" }), this._hasImage && this.value ? (h("div", { class: "image-input__preview" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__image", onClick: this.handleImageClick }), this.enabled && (h("ez-button", { class: "image-input__remove-button", variant: "primary", type: "button", mode: "icon", size: "small", iconName: "trash-alt", onClick: this.handleRemoveImage, "aria-label": this.i18n('ez-image-input.removeImage'), title: this.i18n('ez-image-input.removeImage') })))) : (h("div", { class: "image-input__dropzone" }, h("ez-icon", { iconName: "image", size: "x-large" }), h("span", { class: "image-input__label" }, dropZoneLabel)))), h("ez-popup", { opened: this._showImagePopup, ezTitle: this.i18n('ez-image-input.imagePreview'), size: "large", heightMode: "auto", onEzPopupAction: this.handlePopupAction, onEzClosePopup: this.handleClosePopup }, h("div", { class: "image-input__popup-content" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__popup-image" })))));
+  }
+  static get is() { return "ez-image-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-image-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-image-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente est\u00E1 habilitado"
+        },
+        "attribute": "enabled",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Label exibido na \u00E1rea de upload"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome do componente"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Valor da imagem em base64"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "maxFileSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho m\u00E1ximo do arquivo em bytes (padr\u00E3o: 20MB)"
+        },
+        "attribute": "max-file-size",
+        "reflect": false,
+        "defaultValue": "20 * 1024 * 1024"
+      },
+      "accept": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Tipos de arquivo aceitos"
+        },
+        "attribute": "accept",
+        "reflect": false,
+        "defaultValue": "'image/*'"
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente est\u00E1 em estado de carregamento"
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_hasImage": {},
+      "_isDragging": {},
+      "_showImagePopup": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando uma imagem \u00E9 selecionada"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "ezError",
+        "name": "ezError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando ocorre um erro"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "onValueChange"
+      }];
+  }
+}

package/dist/collection/components/ez-modal/ez-modal.css

@@ -6,6 +6,8 @@
   /*@doc Define o padding entre o conteúdo e o modal */
   --ez-modal-content-padding: 24px;
   display: block;
+  /*@doc Define a largura mínima do conteúdo do modal */
+  --ez-modal-content-min-width: auto;
 }
 
 .modal {
@@ -73,6 +75,7 @@
   flex-wrap: wrap;
   box-sizing: border-box;
   max-height: 100%;
+  min-width: var(--ez-modal-content-min-width);
   height: 100%;
   overflow-y: auto;
   background-color: rgb(255, 255, 255);

package/dist/collection/components/ez-modal-container/ez-modal-container.css

@@ -1,8 +1,8 @@
 :host {
   --ez-modal-container-overflow-y: auto;
   --ez-modal-container-overflow-x: hidden;
-  display: grid;
-  grid-template-rows: 0 auto 1fr auto 0;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
 }
@@ -23,6 +23,7 @@
   overflow-y: var(--ez-modal-container-overflow-y);
   overflow-x: var(--ez-modal-container-overflow-x);
   outline: none;
+  flex: 1 1 auto;
 }
 
 .ez-modal-container__content::-webkit-scrollbar {
@@ -35,7 +36,7 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  gap: var(--space--medium);
+  gap: var(--space--8, 8px);
   width: 100%;
   padding-top: var(--space--small, 6px);
 }
@@ -55,9 +56,3 @@
 .ez-modal-container__close-icon {
   --icon--color: var(--title--primary, #2B3A54)
 }
-
-.ez-modal-container__focus-ctrl {
-  height: 0px;
-  background-color: transparent;
-  border: none;
-}

package/dist/collection/components/ez-modal-container/ez-modal-container.js

@@ -13,6 +13,7 @@ export class EzModalContainer {
     this.cancelButtonStatus = undefined;
     this.okButtonStatus = undefined;
     this.showCloseButton = true;
+    this.autoFocus = false;
   }
   async handleEzModalAction(event) {
     var _a;
@@ -26,18 +27,25 @@ export class EzModalContainer {
   okIsVisible() {
     return (this.okButtonStatus !== ModalButtonStatus.HIDDEN && this.okButtonLabel != undefined);
   }
+  emitOkAction() {
+    this.ezModalAction.emit(ModalAction.OK);
+  }
   async componentWillLoad() {
     this.i18n = await initI18n();
   }
+  connectedCallback() {
+    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element })
+      .bind("Enter", () => this.emitOkAction())
+      .bind("Escape", () => this.closeModal())
+      .bind("Esc", () => this.closeModal());
+  }
   componentDidLoad() {
     window.requestAnimationFrame(() => {
       this.ezModalAction.emit(ModalAction.LOAD);
-      this._modalRef.focus();
+      if (this.autoFocus) {
+        this._modalRef.focus();
+      }
     });
-    this._keyboardManager = new KeyboardManager({ propagate: false, element: this._element })
-      .bind("Enter", this.ezModalAction.emit.bind(ModalAction.OK))
-      .bind("Escape", () => this.closeModal())
-      .bind("Esc", () => this.closeModal());
   }
   disconnectedCallback() {
     var _a;
@@ -46,17 +54,8 @@ export class EzModalContainer {
   closeModal() {
     this.ezModalAction.emit("CLOSE");
   }
-  focusLast() {
-    if (this._okButton == undefined) {
-      return;
-    }
-    this._okButton.setFocus();
-  }
-  focusFirst() {
-    this._closeButton.focus();
-  }
   render() {
-    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusLast() }), h("div", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE), "aria-label": this.i18n("app.close") }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("div", { tabIndex: -1, class: "ez-modal-container__content" }, h("slot", null)), h("div", { tabIndex: -1, class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel || this.i18n("app.cancel"), enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel || this.i18n("app.ok"), enabled: this.okButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.OK) }))), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: () => this.focusFirst() })));
+    return (h(Host, null, h("header", { ref: ref => this._modalRef = ref, tabIndex: -1, class: "ez-modal-container__header-container" }, this.showTitleBar && (h("div", { class: "ez-modal-container__header ez-margin-bottom--medium" }, h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle && (h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle))), (this.showCloseButton && h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE), "aria-label": this.i18n("app.close") }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" })))))), h("main", { tabIndex: -1, class: "ez-modal-container__content" }, h("slot", null)), h("footer", { tabIndex: -1, class: "ez-modal-container__footer" }, this.cancelIsVisible() && (h("ez-button", { label: this.cancelButtonLabel || this.i18n("app.cancel"), isDisabled: this.cancelButtonStatus === ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) })), this.okIsVisible() && (h("ez-button", { ref: ref => this._okButton = ref, class: "ez-button--primary", label: this.okButtonLabel || this.i18n("app.ok"), isDisabled: this.okButtonStatus === ModalButtonStatus.DISABLED, onClick: () => this.emitOkAction() })))));
   }
   static get is() { return "ez-modal-container"; }
   static get encapsulation() { return "scoped"; }
@@ -209,6 +208,24 @@ export class EzModalContainer {
         "attribute": "show-close-button",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Se true o modal container receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/ez-number-input/ez-number-input.js

@@ -149,6 +149,7 @@ export class EzNumberInput {
     if (parsedNumber !== this.value) {
       this._focused = true;
       this._changePending = true;
+      this.ezInput.emit(parsedNumber);
       this.ezStartChange.emit({ waitmessage: "", blocking: false });
     }
   }
@@ -446,6 +447,21 @@ export class EzNumberInput {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "ezInput",
+        "name": "ezInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando o usu\u00E1rio digita no campo."
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
       }];
   }
   static get methods() {

package/dist/collection/components/ez-popup/ez-popup.css

@@ -38,7 +38,7 @@
 }
 
 .popup__container {
-  width: 100%;
+  width: auto;
   max-height: 90%;
   height: 100%;
   display: flex;
@@ -54,7 +54,6 @@
   margin: 0;
   border: none;
   position: unset;
-  gap: var(--space--16, 16px);
 }
 
 .popup__container--auto {
@@ -72,20 +71,21 @@
 }
 
 .popup__expandable-content {
+  flex-grow: 1;
   box-sizing: border-box;
   width: 100%;
-  flex: 1;
   font-family: var(--font--pattern, "Roboto");
   font-size: var(--font-size--default, 14px);
   color: var(--title--primary, #00281D);
   font-weight: var(--font-weight--regular, 400);
-  line-height: var(--line-height--24, 24px);
 }
 
 .popup__header {
+  flex-shrink: 0;
   width: 100%;
   display: flex;
   align-items: center;
+  margin-bottom: var(--space--16, 16px);
 }
 
 .popup__title {
@@ -115,12 +115,17 @@
 }
 
 .popup__footer {
+  flex-shrink: 0;
   display: flex;
   width: 100%;
   flex-direction: row-reverse;
   gap: var(--space--8, 8px);
 }
 
+.popup_margin-top {
+  margin-top: var(--space--16, 16px);
+}
+
 /* //////// GRID SYSTEM //////// */
 
 .row {

package/dist/collection/components/ez-popup/ez-popup.js

@@ -3,12 +3,17 @@ import { h, Host } from "@stencil/core";
 import initI18n from '../../utils/i18n';
 export class EzPopup {
   constructor() {
+    this.handleFooterSlotChange = (event) => {
+      const slot = event.target;
+      this._hasFooterSlotContent = slot.assignedElements().length > 0;
+    };
+    this._hasFooterSlotContent = false;
     this.size = "medium";
     this.opened = false;
     this.useHeader = true;
     this.heightMode = "full";
     this.ezTitle = undefined;
-    this.enabledScroll = false;
+    this.enabledScroll = true;
     this.autoClose = true;
     this.footerButtons = [];
   }
@@ -59,6 +64,7 @@ export class EzPopup {
     }
   }
   getGridSize() {
+    var _a;
     const _sizeClasses = {
       "x-small": "col--sd-3 ez-popup__size-limit--x-small",
       "small": "col--sd-5",
@@ -71,16 +77,13 @@ export class EzPopup {
     if (!this.size || !_sizeClasses.hasOwnProperty(this.size)) {
       return _sizeClasses["medium"];
     }
-    return _sizeClasses[this.size] || _sizeClasses["medium"];
+    return (_a = _sizeClasses[this.size]) !== null && _a !== void 0 ? _a : _sizeClasses["medium"];
   }
   getDialogClass() {
     let className = 'popup__container';
     if (this.heightMode === 'auto') {
       className += ' popup__container--auto';
     }
-    if (this.enabledScroll) {
-      className += ' popup__overflow-y--auto';
-    }
     className += ` ${this.getGridSize()}`;
     return className;
   }
@@ -141,9 +144,18 @@ export class EzPopup {
         };
     }
   }
+  renderFooterButtons() {
+    return this.footerButtons.slice(0, 3).map((buttonProps, index) => (h("ez-button", Object.assign({ key: index }, this.handleDefaultPropsButtonsByIndex(index), buttonProps))));
+  }
   render() {
     return (h(Host, null, this.opened && (h("div", { class: "overlay", tabIndex: -1, onClick: this.handleAutoClose.bind(this) }, h("dialog", { ref: ref => this._popupRef = ref, class: this.getDialogClass() }, this.useHeader &&
-      h("header", { class: "popup__header" }, !!this.ezTitle && h("h1", { class: "popup__title" }, this.ezTitle), h("ez-button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", variant: "tertiary", mode: "icon", iconName: "close", size: "small", onClick: this.closePopup.bind(this) })), h("main", { class: "popup__expandable-content" }, h("slot", null)), this.footerButtons.length > 0 && (h("footer", { class: "popup__footer" }, this.footerButtons.slice(0, 3).map((buttonProps, index) => (h("ez-button", Object.assign({ key: index }, this.handleDefaultPropsButtonsByIndex(index), buttonProps)))))))))));
+      h("header", { class: "popup__header" }, !!this.ezTitle && h("h1", { class: "popup__title" }, this.ezTitle), h("ez-button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", variant: "tertiary", mode: "icon", iconName: "close", size: "small", onClick: this.closePopup.bind(this) })), h("main", { class: {
+        "popup__expandable-content": true,
+        "popup__overflow-y--auto": this.enabledScroll
+      } }, h("slot", null)), h("footer", { class: {
+        "popup__footer": true,
+        "popup_margin-top": this.footerButtons.length > 0 || this._hasFooterSlotContent
+      } }, this.footerButtons.length > 0 && (this.renderFooterButtons()), h("slot", { name: 'footer', onSlotchange: this.handleFooterSlotChange })))))));
   }
   static get is() { return "ez-popup"; }
   static get encapsulation() { return "shadow"; }
@@ -264,7 +276,7 @@ export class EzPopup {
         },
         "attribute": "enabled-scroll",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "true"
       },
       "autoClose": {
         "type": "boolean",
@@ -313,6 +325,11 @@ export class EzPopup {
       }
     };
   }
+  static get states() {
+    return {
+      "_hasFooterSlotContent": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezClosePopup",