npm - @sankhyalabs/ezui - Versions diffs - 2.3.10 → 2.3.12 - Mend

@sankhyalabs/ezui 2.3.10 → 2.3.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/README.md CHANGED Viewed

@@ -76,3 +76,4 @@ o build do ezui, link do react-output e ezui, build do react-output e a disponib
 - [Diretrizes de documentação](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Diretrizes-de-documenta%C3%A7%C3%A3o)
 - [Link ente projetos](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Link-ente-projetos)
 - [Definindo bons data-element-id de testabilidade no design system](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Definindo-bons-data-element-id-de-testabilidade-no-design-system)
+- [Criando exemplos de componentes](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Criando-exemplos-de-componentes)

package/dist/cjs/ez-actions-button.cjs.entry.js CHANGED Viewed

@@ -9,12 +9,13 @@ const CSSVarsUtils = require('./CSSVarsUtils-af809e73.js');
 require('./DialogType-aa435c52.js');
 require('./CheckMode-ecb90b87.js');
-const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:fixed;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;margin-left:6px;z-index:calc(var(--more-visible, 2) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 3px) * -1)}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}";
+const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;z-index:calc(var(--more-visible, 2) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 2px) * -1)}.ez-actions-button__arrow--small{margin-left:6px}.ez-actions-button__arrow--medium{margin-left:11px}.ez-actions-button__arrow--large{margin-left:13px}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}";
 let EzActionsButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.ezAction = index.createEvent(this, "ezAction", 7);
+    this._arrowOffset = 5;
     /**
      * Se false o usuário não pode interagir com o componente.
      */
@@ -71,25 +72,61 @@ let EzActionsButton = class {
     return this._floatingID != undefined;
   }
   showActions() {
-    var _a, _b;
+    var _a;
     if (!this.enabled) {
       return;
     }
-    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    let posLeft = boundingHost ? (boundingHost.x - (this.arrowActive ? 5 : 0)) + "px" : null;
-    let options = { autoClose: true, innerClickTest: this.innerClickCheck, isFixed: true, left: posLeft };
+    let options = {
+      autoClose: true,
+      innerClickTest: this.innerClickCheck,
+      isFixed: true,
+      top: this.getPositionTop(),
+      left: this.getPositionLeft()
+    };
     this._floatingID = core.FloatingManager.float(this._actionsList, this._listContainer, options);
     const docWidth = document.body.clientWidth;
-    const boundingList = (_b = this._actionsList) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    const boundingList = (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
     if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
-      posLeft = (docWidth - boundingList.width) + "px";
-      options = { autoClose: true, innerClickTest: this.innerClickCheck, left: posLeft };
+      options = {
+        autoClose: true,
+        innerClickTest: this.innerClickCheck,
+        isFixed: true,
+        top: this.getPositionTop(),
+        left: (docWidth - boundingList.width) + "px"
+      };
       core.FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
     }
     window.requestAnimationFrame(() => {
       this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
     });
   }
+  getPositionTop() {
+    var _a;
+    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return null;
+    }
+    return (boundingHost.y + boundingHost.height) + "px";
+  }
+  getBoundingLeft() {
+    var _a;
+    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return null;
+    }
+    const arrowOffset = this.arrowActive ? this._arrowOffset : 0;
+    return (boundingHost.x - arrowOffset) + "px";
+  }
+  getPositionLeft() {
+    const boundingLeft = this.getBoundingLeft();
+    if (boundingLeft) {
+      return boundingLeft;
+    }
+    else if (this.arrowActive) {
+      return `-${this._arrowOffset}px`;
+    }
+    return null;
+  }
   hasLabelOrCheckOption() {
     var _a;
     return (this.showLabel || this.checkOption) && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
@@ -98,6 +135,10 @@ let EzActionsButton = class {
     var _a;
     return (_a = this.actions) === null || _a === void 0 ? void 0 : _a.some(action => action.iconName != undefined);
   }
+  controlScrollPage() {
+    window.removeEventListener("scroll", this.hideActions.bind(this));
+    window.addEventListener("scroll", this.hideActions.bind(this));
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -131,6 +172,7 @@ let EzActionsButton = class {
   }
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsButton(this._element, this._button);
+    this.controlScrollPage();
   }
   componentDidRender() {
     if (this._floatingID == undefined) {
@@ -150,7 +192,7 @@ let EzActionsButton = class {
     return (index.h(index.Host, null, index.h("ez-button", { ref: elem => this._button = elem, class: (this.isTransparent ? "ez-actions-button__btn-transparent" : "") +
         (this.showLabel ? " ez-actions-button__btn-label" : ""), label: this.showLabel && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.label), enabled: this.enabled, mode: this.showLabel ? undefined : "icon", iconName: this.showLabel ? "" : this.displayIcon || "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }, this.showLabel &&
       index.h("ez-icon", { class: "ez-actions-button__icon-right", slot: "rightIcon", iconName: this.displayIcon || "dots-vertical" })), index.h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem }, this.arrowActive &&
-      index.h("div", { class: "ez-actions-button__arrow" +
+      index.h("div", { class: "ez-actions-button__arrow ez-actions-button__arrow--" + (this.size || "small") +
           (this.isTransparent ? " ez-actions-button__arrow--upped" : "") }), index.h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list" +
         (this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => {
       var _a;

package/dist/cjs/ez-modal-container.cjs.entry.js CHANGED Viewed

@@ -21,7 +21,7 @@ var ModalButtonStatus;
 })(ModalButtonStatus || (ModalButtonStatus = {}));
 const ModalButtonStatus$1 = ModalButtonStatus;
-const ezModalContainerCss = ".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto;width:100%;height:100%}@media screen and (min-width: 480px){.sc-ez-modal-container-h{width:359px;max-width:359px}}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
+const ezModalContainerCss = ".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto;width:100%;height:100%}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{overflow-y:auto;scrollbar-gutter:stable}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
 let EzModalContainer = class {
   constructor(hostRef) {
@@ -50,7 +50,7 @@ let EzModalContainer = class {
     this._closeButton.focus();
   }
   render() {
-    return (index.h(index.Host, null, index.h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusLast(evt) }), this.showTitleBar && index.h("div", { class: "ez-modal-container__header ez-margin-bottom--large ez-align--middle" }, index.h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, index.h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle ? index.h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle) : undefined), index.h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, index.h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))), index.h("div", null, index.h("slot", null)), index.h("div", { class: "ez-col ez-margin-left--auto" }, this.cancelIsVisible() ? index.h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) }) : undefined, this.okIsVisible() ? index.h("ez-button", { ref: ref => this._okButton = ref, label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, class: "ez-button--primary ez-margin-left--medium", onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }) : undefined), index.h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusFirst(evt) })));
+    return (index.h(index.Host, null, index.h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusLast(evt) }), this.showTitleBar && index.h("div", { class: "ez-modal-container__header ez-margin-bottom--large ez-align--middle" }, index.h("div", { class: "ez-col ez-align--middle ez-modal-container__title" }, index.h("h2", { class: "ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small" }, this.modalTitle), this.modalSubTitle ? index.h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle) : undefined), index.h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, index.h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))), index.h("div", { class: "ez-modal-container__content" }, index.h("slot", null)), index.h("div", { class: "ez-col ez-margin-left--auto" }, this.cancelIsVisible() ? index.h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) }) : undefined, this.okIsVisible() ? index.h("ez-button", { ref: ref => this._okButton = ref, label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, class: "ez-button--primary ez-margin-left--medium", onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }) : undefined), index.h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusFirst(evt) })));
   }
 };
 EzModalContainer.style = ezModalContainerCss;

package/dist/collection/components/ez-actions-button/ez-actions-button.css CHANGED Viewed

@@ -88,12 +88,11 @@
 .ez-actions-button__arrow {
   /*private*/
-	position: fixed;
+	position: absolute;
 	border-left: 10px solid transparent;
 	border-right: 10px solid transparent;
   width: 0;
   height: 0;
-  margin-left: 6px;
   /*public*/
   z-index: calc(var(--more-visible, 2) + 1);
@@ -102,7 +101,19 @@
 .ez-actions-button__arrow--upped {
   /*private*/
-  margin-top: calc((var(--ez-actions-button__actions-list--top-margin) + 3px) * -1);
+  margin-top: calc((var(--ez-actions-button__actions-list--top-margin) + 2px) * -1);
+}
+.ez-actions-button__arrow--small {
+  margin-left: 6px;
+}
+.ez-actions-button__arrow--medium {
+  margin-left: 11px;
+}
+.ez-actions-button__arrow--large {
+  margin-left: 13px;
 }
 .ez-actions-button__arrow:only-child {

package/dist/collection/components/ez-actions-button/ez-actions-button.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { Component, Element, Event, h, Host, Prop, State, Method } from '@stenci
 import { CSSVarsUtils } from '../../utils';
 export class EzActionsButton {
   constructor() {
+    this._arrowOffset = 5;
     /**
      * Se false o usuário não pode interagir com o componente.
      */
@@ -59,25 +60,61 @@ export class EzActionsButton {
     return this._floatingID != undefined;
   }
   showActions() {
-    var _a, _b;
+    var _a;
     if (!this.enabled) {
       return;
     }
-    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    let posLeft = boundingHost ? (boundingHost.x - (this.arrowActive ? 5 : 0)) + "px" : null;
-    let options = { autoClose: true, innerClickTest: this.innerClickCheck, isFixed: true, left: posLeft };
+    let options = {
+      autoClose: true,
+      innerClickTest: this.innerClickCheck,
+      isFixed: true,
+      top: this.getPositionTop(),
+      left: this.getPositionLeft()
+    };
     this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, options);
     const docWidth = document.body.clientWidth;
-    const boundingList = (_b = this._actionsList) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    const boundingList = (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
     if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
-      posLeft = (docWidth - boundingList.width) + "px";
-      options = { autoClose: true, innerClickTest: this.innerClickCheck, left: posLeft };
+      options = {
+        autoClose: true,
+        innerClickTest: this.innerClickCheck,
+        isFixed: true,
+        top: this.getPositionTop(),
+        left: (docWidth - boundingList.width) + "px"
+      };
       FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
     }
     window.requestAnimationFrame(() => {
       this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
     });
   }
+  getPositionTop() {
+    var _a;
+    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return null;
+    }
+    return (boundingHost.y + boundingHost.height) + "px";
+  }
+  getBoundingLeft() {
+    var _a;
+    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return null;
+    }
+    const arrowOffset = this.arrowActive ? this._arrowOffset : 0;
+    return (boundingHost.x - arrowOffset) + "px";
+  }
+  getPositionLeft() {
+    const boundingLeft = this.getBoundingLeft();
+    if (boundingLeft) {
+      return boundingLeft;
+    }
+    else if (this.arrowActive) {
+      return `-${this._arrowOffset}px`;
+    }
+    return null;
+  }
   hasLabelOrCheckOption() {
     var _a;
     return (this.showLabel || this.checkOption) && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
@@ -86,6 +123,10 @@ export class EzActionsButton {
     var _a;
     return (_a = this.actions) === null || _a === void 0 ? void 0 : _a.some(action => action.iconName != undefined);
   }
+  controlScrollPage() {
+    window.removeEventListener("scroll", this.hideActions.bind(this));
+    window.addEventListener("scroll", this.hideActions.bind(this));
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -119,6 +160,7 @@ export class EzActionsButton {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsButton(this._element, this._button);
+    this.controlScrollPage();
   }
   componentDidRender() {
     if (this._floatingID == undefined) {
@@ -141,7 +183,7 @@ export class EzActionsButton {
         h("ez-icon", { class: "ez-actions-button__icon-right", slot: "rightIcon", iconName: this.displayIcon || "dots-vertical" })),
       h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem },
         this.arrowActive &&
-          h("div", { class: "ez-actions-button__arrow" +
+          h("div", { class: "ez-actions-button__arrow ez-actions-button__arrow--" + (this.size || "small") +
               (this.isTransparent ? " ez-actions-button__arrow--upped" : "") }),
         h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list" +
             (this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => {

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

@@ -5,13 +5,6 @@
   height: 100%;
 }
-@media screen and (min-width: 480px) {
-  :host {
-    width: 359px;
-    max-width: 359px;
-  }
-}
 .ez-modal-container__header{
   display: flex;
   flex-wrap: nowrap;
@@ -19,6 +12,11 @@
   justify-content: space-between;
 }
+.ez-modal-container__content {
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
 .ez-modal-container__title{
   display: grid;
 }

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

@@ -34,7 +34,7 @@ export class EzModalContainer {
           this.modalSubTitle ? h("div", { class: "ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small" }, this.modalSubTitle) : undefined),
         h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction.CLOSE) },
           h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))),
-      h("div", null,
+      h("div", { class: "ez-modal-container__content" },
         h("slot", null)),
       h("div", { class: "ez-col ez-margin-left--auto" },
         this.cancelIsVisible() ? h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction.CANCEL) }) : undefined,

package/dist/custom-elements/index.js CHANGED Viewed

@@ -145,7 +145,7 @@ var CheckMode;
   CheckMode["SWITCH"] = "SWITCH";
 })(CheckMode || (CheckMode = {}));
-const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:fixed;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;margin-left:6px;z-index:calc(var(--more-visible, 2) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 3px) * -1)}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}";
+const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;z-index:calc(var(--more-visible, 2) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 2px) * -1)}.ez-actions-button__arrow--small{margin-left:6px}.ez-actions-button__arrow--medium{margin-left:11px}.ez-actions-button__arrow--large{margin-left:13px}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}";
 let EzActionsButton$1 = class extends HTMLElement$1 {
   constructor() {
@@ -153,6 +153,7 @@ let EzActionsButton$1 = class extends HTMLElement$1 {
     this.__registerHost();
     this.__attachShadow();
     this.ezAction = createEvent(this, "ezAction", 7);
+    this._arrowOffset = 5;
     /**
      * Se false o usuário não pode interagir com o componente.
      */
@@ -209,25 +210,61 @@ let EzActionsButton$1 = class extends HTMLElement$1 {
     return this._floatingID != undefined;
   }
   showActions() {
-    var _a, _b;
+    var _a;
     if (!this.enabled) {
       return;
     }
-    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    let posLeft = boundingHost ? (boundingHost.x - (this.arrowActive ? 5 : 0)) + "px" : null;
-    let options = { autoClose: true, innerClickTest: this.innerClickCheck, isFixed: true, left: posLeft };
+    let options = {
+      autoClose: true,
+      innerClickTest: this.innerClickCheck,
+      isFixed: true,
+      top: this.getPositionTop(),
+      left: this.getPositionLeft()
+    };
     this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, options);
     const docWidth = document.body.clientWidth;
-    const boundingList = (_b = this._actionsList) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    const boundingList = (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
     if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
-      posLeft = (docWidth - boundingList.width) + "px";
-      options = { autoClose: true, innerClickTest: this.innerClickCheck, left: posLeft };
+      options = {
+        autoClose: true,
+        innerClickTest: this.innerClickCheck,
+        isFixed: true,
+        top: this.getPositionTop(),
+        left: (docWidth - boundingList.width) + "px"
+      };
       FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
     }
     window.requestAnimationFrame(() => {
       this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
     });
   }
+  getPositionTop() {
+    var _a;
+    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return null;
+    }
+    return (boundingHost.y + boundingHost.height) + "px";
+  }
+  getBoundingLeft() {
+    var _a;
+    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return null;
+    }
+    const arrowOffset = this.arrowActive ? this._arrowOffset : 0;
+    return (boundingHost.x - arrowOffset) + "px";
+  }
+  getPositionLeft() {
+    const boundingLeft = this.getBoundingLeft();
+    if (boundingLeft) {
+      return boundingLeft;
+    }
+    else if (this.arrowActive) {
+      return `-${this._arrowOffset}px`;
+    }
+    return null;
+  }
   hasLabelOrCheckOption() {
     var _a;
     return (this.showLabel || this.checkOption) && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
@@ -236,6 +273,10 @@ let EzActionsButton$1 = class extends HTMLElement$1 {
     var _a;
     return (_a = this.actions) === null || _a === void 0 ? void 0 : _a.some(action => action.iconName != undefined);
   }
+  controlScrollPage() {
+    window.removeEventListener("scroll", this.hideActions.bind(this));
+    window.addEventListener("scroll", this.hideActions.bind(this));
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -269,6 +310,7 @@ let EzActionsButton$1 = class extends HTMLElement$1 {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsButton(this._element, this._button);
+    this.controlScrollPage();
   }
   componentDidRender() {
     if (this._floatingID == undefined) {
@@ -288,7 +330,7 @@ let EzActionsButton$1 = class extends HTMLElement$1 {
     return (h(Host, null, h("ez-button", { ref: elem => this._button = elem, class: (this.isTransparent ? "ez-actions-button__btn-transparent" : "") +
         (this.showLabel ? " ez-actions-button__btn-label" : ""), label: this.showLabel && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.label), enabled: this.enabled, mode: this.showLabel ? undefined : "icon", iconName: this.showLabel ? "" : this.displayIcon || "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }, this.showLabel &&
       h("ez-icon", { class: "ez-actions-button__icon-right", slot: "rightIcon", iconName: this.displayIcon || "dots-vertical" })), h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem }, this.arrowActive &&
-      h("div", { class: "ez-actions-button__arrow" +
+      h("div", { class: "ez-actions-button__arrow ez-actions-button__arrow--" + (this.size || "small") +
           (this.isTransparent ? " ez-actions-button__arrow--upped" : "") }), h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list" +
         (this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => {
       var _a;
@@ -119180,7 +119222,7 @@ var ModalButtonStatus;
 })(ModalButtonStatus || (ModalButtonStatus = {}));
 const ModalButtonStatus$1 = ModalButtonStatus;
-const ezModalContainerCss = ".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto;width:100%;height:100%}@media screen and (min-width: 480px){.sc-ez-modal-container-h{width:359px;max-width:359px}}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
+const ezModalContainerCss = ".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto;width:100%;height:100%}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{overflow-y:auto;scrollbar-gutter:stable}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
 let EzModalContainer$1 = class extends HTMLElement$1 {
   constructor() {
@@ -119210,7 +119252,7 @@ let EzModalContainer$1 = class extends HTMLElement$1 {
     this._closeButton.focus();
   }
   render() {
-    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusLast(evt) }), this.showTitleBar && h("div", { class: "ez-modal-container__header ez-margin-bottom--large ez-align--middle" }, 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) : undefined), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))), h("div", null, h("slot", null)), h("div", { class: "ez-col ez-margin-left--auto" }, this.cancelIsVisible() ? h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) }) : undefined, this.okIsVisible() ? h("ez-button", { ref: ref => this._okButton = ref, label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, class: "ez-button--primary ez-margin-left--medium", onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }) : undefined), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusFirst(evt) })));
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusLast(evt) }), this.showTitleBar && h("div", { class: "ez-modal-container__header ez-margin-bottom--large ez-align--middle" }, 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) : undefined), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-col ez-margin-left--auto" }, this.cancelIsVisible() ? h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) }) : undefined, this.okIsVisible() ? h("ez-button", { ref: ref => this._okButton = ref, label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, class: "ez-button--primary ez-margin-left--medium", onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }) : undefined), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusFirst(evt) })));
   }
   static get style() { return ezModalContainerCss; }
 };

package/dist/esm/ez-actions-button.entry.js CHANGED Viewed

@@ -5,12 +5,13 @@ import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
 import './DialogType-4059dc4d.js';
 import './CheckMode-bdb2ec19.js';
-const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:fixed;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;margin-left:6px;z-index:calc(var(--more-visible, 2) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 3px) * -1)}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}";
+const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;z-index:calc(var(--more-visible, 2) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 2px) * -1)}.ez-actions-button__arrow--small{margin-left:6px}.ez-actions-button__arrow--medium{margin-left:11px}.ez-actions-button__arrow--large{margin-left:13px}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}";
 let EzActionsButton = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ezAction = createEvent(this, "ezAction", 7);
+    this._arrowOffset = 5;
     /**
      * Se false o usuário não pode interagir com o componente.
      */
@@ -67,25 +68,61 @@ let EzActionsButton = class {
     return this._floatingID != undefined;
   }
   showActions() {
-    var _a, _b;
+    var _a;
     if (!this.enabled) {
       return;
     }
-    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    let posLeft = boundingHost ? (boundingHost.x - (this.arrowActive ? 5 : 0)) + "px" : null;
-    let options = { autoClose: true, innerClickTest: this.innerClickCheck, isFixed: true, left: posLeft };
+    let options = {
+      autoClose: true,
+      innerClickTest: this.innerClickCheck,
+      isFixed: true,
+      top: this.getPositionTop(),
+      left: this.getPositionLeft()
+    };
     this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, options);
     const docWidth = document.body.clientWidth;
-    const boundingList = (_b = this._actionsList) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    const boundingList = (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
     if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
-      posLeft = (docWidth - boundingList.width) + "px";
-      options = { autoClose: true, innerClickTest: this.innerClickCheck, left: posLeft };
+      options = {
+        autoClose: true,
+        innerClickTest: this.innerClickCheck,
+        isFixed: true,
+        top: this.getPositionTop(),
+        left: (docWidth - boundingList.width) + "px"
+      };
       FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
     }
     window.requestAnimationFrame(() => {
       this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
     });
   }
+  getPositionTop() {
+    var _a;
+    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return null;
+    }
+    return (boundingHost.y + boundingHost.height) + "px";
+  }
+  getBoundingLeft() {
+    var _a;
+    const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (boundingHost == undefined) {
+      return null;
+    }
+    const arrowOffset = this.arrowActive ? this._arrowOffset : 0;
+    return (boundingHost.x - arrowOffset) + "px";
+  }
+  getPositionLeft() {
+    const boundingLeft = this.getBoundingLeft();
+    if (boundingLeft) {
+      return boundingLeft;
+    }
+    else if (this.arrowActive) {
+      return `-${this._arrowOffset}px`;
+    }
+    return null;
+  }
   hasLabelOrCheckOption() {
     var _a;
     return (this.showLabel || this.checkOption) && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
@@ -94,6 +131,10 @@ let EzActionsButton = class {
     var _a;
     return (_a = this.actions) === null || _a === void 0 ? void 0 : _a.some(action => action.iconName != undefined);
   }
+  controlScrollPage() {
+    window.removeEventListener("scroll", this.hideActions.bind(this));
+    window.addEventListener("scroll", this.hideActions.bind(this));
+  }
   //---------------------------------------------
   // Event handlers
   //---------------------------------------------
@@ -127,6 +168,7 @@ let EzActionsButton = class {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsButton(this._element, this._button);
+    this.controlScrollPage();
   }
   componentDidRender() {
     if (this._floatingID == undefined) {
@@ -146,7 +188,7 @@ let EzActionsButton = class {
     return (h(Host, null, h("ez-button", { ref: elem => this._button = elem, class: (this.isTransparent ? "ez-actions-button__btn-transparent" : "") +
         (this.showLabel ? " ez-actions-button__btn-label" : ""), label: this.showLabel && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.label), enabled: this.enabled, mode: this.showLabel ? undefined : "icon", iconName: this.showLabel ? "" : this.displayIcon || "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }, this.showLabel &&
       h("ez-icon", { class: "ez-actions-button__icon-right", slot: "rightIcon", iconName: this.displayIcon || "dots-vertical" })), h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem }, this.arrowActive &&
-      h("div", { class: "ez-actions-button__arrow" +
+      h("div", { class: "ez-actions-button__arrow ez-actions-button__arrow--" + (this.size || "small") +
           (this.isTransparent ? " ez-actions-button__arrow--upped" : "") }), h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list" +
         (this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => {
       var _a;

package/dist/esm/ez-modal-container.entry.js CHANGED Viewed

@@ -17,7 +17,7 @@ var ModalButtonStatus;
 })(ModalButtonStatus || (ModalButtonStatus = {}));
 const ModalButtonStatus$1 = ModalButtonStatus;
-const ezModalContainerCss = ".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto;width:100%;height:100%}@media screen and (min-width: 480px){.sc-ez-modal-container-h{width:359px;max-width:359px}}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
+const ezModalContainerCss = ".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto;width:100%;height:100%}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{overflow-y:auto;scrollbar-gutter:stable}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
 let EzModalContainer = class {
   constructor(hostRef) {
@@ -46,7 +46,7 @@ let EzModalContainer = class {
     this._closeButton.focus();
   }
   render() {
-    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusLast(evt) }), this.showTitleBar && h("div", { class: "ez-modal-container__header ez-margin-bottom--large ez-align--middle" }, 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) : undefined), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))), h("div", null, h("slot", null)), h("div", { class: "ez-col ez-margin-left--auto" }, this.cancelIsVisible() ? h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) }) : undefined, this.okIsVisible() ? h("ez-button", { ref: ref => this._okButton = ref, label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, class: "ez-button--primary ez-margin-left--medium", onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }) : undefined), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusFirst(evt) })));
+    return (h(Host, null, h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusLast(evt) }), this.showTitleBar && h("div", { class: "ez-modal-container__header ez-margin-bottom--large ez-align--middle" }, 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) : undefined), h("button", { ref: ref => this._closeButton = ref, class: "ez-modal-container__close-button", onClick: () => this.ezModalAction.emit(ModalAction$1.CLOSE) }, h("ez-icon", { class: "ez-modal-container__close-icon", size: "medium", iconName: "close" }))), h("div", { class: "ez-modal-container__content" }, h("slot", null)), h("div", { class: "ez-col ez-margin-left--auto" }, this.cancelIsVisible() ? h("ez-button", { label: this.cancelButtonLabel, enabled: this.cancelButtonStatus !== ModalButtonStatus$1.DISABLED, onClick: () => this.ezModalAction.emit(ModalAction$1.CANCEL) }) : undefined, this.okIsVisible() ? h("ez-button", { ref: ref => this._okButton = ref, label: this.okButtonLabel, enabled: this.okButtonStatus !== ModalButtonStatus$1.DISABLED, class: "ez-button--primary ez-margin-left--medium", onClick: () => this.ezModalAction.emit(ModalAction$1.OK) }) : undefined), h("button", { class: "ez-modal-container__focus-ctrl", onFocusin: evt => this.focusFirst(evt) })));
   }
 };
 EzModalContainer.style = ezModalContainerCss;

package/dist/ezui/ezui.esm.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{p as e,b as o}from"./p-3c7ea91b.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-~~96265e26~~",[[1,"ez-actions-button",{enabled:[516],actions:[1040],size:[513],showLabel:[516,"show-label"],displayIcon:[513,"display-icon"],checkOption:[516,"check-option"],value:[513],isTransparent:[516,"is-transparent"],arrowActive:[516,"arrow-active"],_selectedAction:[32],hideActions:[64],isOpened:[64]}]]],["p-f13f3123",[[1,"ez-dialog",{confirm:[1028],dialogType:[1025,"dialog-type"],message:[1025],opened:[1540],personalizedIconPath:[1025,"personalized-icon-path"],ezTitle:[1025,"ez-title"],show:[64]}]]],["p-ccbe8272",[[1,"ez-filter-input",{label:[1],value:[1537],enabled:[4],errorMessage:[1537,"error-message"],restrict:[1],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-ff5be174",[[6,"ez-grid",{multipleSelection:[4,"multiple-selection"],config:[1040],serverUrl:[1,"server-url"],dataUnit:[16],statusResolver:[16],_paginationInfo:[32],_paginationChangedByKeyboard:[32],setColumnsDef:[64],addColumnMenuItem:[64],setColumnsState:[64],setData:[64],getSelection:[64],getColumnsState:[64],getColumns:[64],quickFilter:[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["p-~~def4cd05~~",[[6,"ez-modal-container",{modalTitle:[1,"modal-title"],modalSubTitle:[1,"modal-sub-title"],showTitleBar:[4,"show-title-bar"],cancelButtonLabel:[1,"cancel-button-label"],okButtonLabel:[1,"ok-button-label"],cancelButtonStatus:[1,"cancel-button-status"],okButtonStatus:[1,"ok-button-status"]}]]],["p-66ebdf34",[[1,"ez-chip",{label:[513],enabled:[516],removePosition:[513,"remove-position"],mode:[513],value:[1540],setFocus:[64],setBlur:[64]}]]],["p-1cc11468",[[0,"ez-application"]]],["p-3cfefc57",[[1,"ez-card-item",{item:[16]}]]],["p-1214c5ce",[[1,"ez-list",{dataSource:[1040],useGroups:[1540,"use-groups"],ezDraggable:[1028,"ez-draggable"],ezSelectable:[1028,"ez-selectable"],itemSlotBuilder:[1040],_listItems:[32],_listGroupItems:[32],clearHistory:[64],scrollToTop:[64],setSelection:[64],getSelection:[64],getList:[64]}]]],["p-f6111077",[[1,"ez-loading-bar",{_showLoading:[32],hide:[64],show:[64]}]]],["p-7c227b86",[[1,"ez-modal",{modalSize:[1,"modal-size"],align:[1],opened:[1028],closeEsc:[4,"close-esc"],closeOutsideClick:[4,"close-outside-click"]}]]],["p-bffae598",[[1,"ez-popover",{autoClose:[516,"auto-close"],top:[1537],left:[1537],bottom:[1537],right:[1537],boxWidth:[513,"box-width"],opened:[1540],innerElement:[1537,"inner-element"],updatePosition:[64],show:[64],hide:[64]}]]],["p-cfcc23e6",[[1,"ez-popup",{size:[1],opened:[1540],useHeader:[516,"use-header"],heightMode:[513,"height-mode"],ezTitle:[1,"ez-title"]}]]],["p-8964287f",[[1,"ez-radio-button",{value:[1544],options:[1040],enabled:[516],label:[513],direction:[1537]}]]],["p-e165c3ef",[[1,"ez-scroller",{direction:[1],locked:[4],activeShadow:[4,"active-shadow"],isFirefox:[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]]],["p-482c3dd8",[[1,"ez-toast",{message:[1025],fadeTime:[1026,"fade-time"],useIcon:[1028,"use-icon"],canClose:[1028,"can-close"],show:[64]}]]],["p-04fab1e9",[[0,"ez-view-stack",{show:[64],getSelectedIndex:[64]}]]],["p-ac15d77e",[[1,"ez-text-input",{label:[513],value:[1537],enabled:[516],errorMessage:[1537,"error-message"],mask:[1],canShowError:[516,"can-show-error"],restrict:[1],mode:[513],noBorder:[516,"no-border"],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-8c874b58",[[1,"ez-collapsible-box",{value:[1540],label:[513],headerSize:[513,"header-size"],iconPlacement:[513,"icon-placement"],stretchTitle:[516,"stretch-title"],removable:[516],editable:[516],conditionalSave:[16],_activeEditText:[32],showHide:[64],applyFocusTextEdit:[64],cancelEdition:[64]}]]],["p-ede1328a",[[1,"ez-search",{value:[1537],label:[1537],enabled:[1540],errorMessage:[1537,"error-message"],optionLoader:[16],showSelectedValue:[4,"show-selected-value"],showOptionValue:[4,"show-option-value"],suppressEmptyOption:[4,"suppress-empty-option"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-c2ebc450",[[1,"ez-date-input",{label:[513],value:[1040],enabled:[516],errorMessage:[1537,"error-message"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-7cf71eb3",[[1,"ez-date-time-input",{label:[513],value:[1040],enabled:[516],errorMessage:[1537,"error-message"],showSeconds:[516,"show-seconds"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-72d755a8",[[1,"ez-time-input",{label:[513],value:[1026],enabled:[516],errorMessage:[1537,"error-message"],showSeconds:[516,"show-seconds"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-941d9bf9",[[1,"ez-number-input",{label:[1],value:[1538],enabled:[4],errorMessage:[1537,"error-message"],precision:[2],prettyPrecision:[2,"pretty-precision"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-f4d2438e",[[1,"ez-tabselector",{selectedIndex:[1538,"selected-index"],selectedTab:[1537,"selected-tab"],tabs:[1],_processedTabs:[32]}]]],["p-e2337c61",[[1,"ez-check",{label:[513],value:[1540],enabled:[1540],indeterminate:[516],mode:[513],getMode:[64],setFocus:[64]}]]],["p-6bcf35fd",[[1,"ez-text-area",{label:[513],value:[1537],enabled:[516],errorMessage:[1537,"error-message"],rows:[1538],canShowError:[516,"can-show-error"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-a713a1aa",[[1,"ez-upload",{label:[1],enabled:[4],maxFileSize:[2,"max-file-size"],maxFiles:[2,"max-files"],requestHeaders:[8,"request-headers"],urlUpload:[1,"url-upload"],urlDelete:[1,"url-delete"],value:[1040],addFiles:[64],setFocus:[64],setBlur:[64]}]]],["p-81fb0c90",[[1,"ez-text-edit",{value:[1],styled:[16],_newValue:[32],applyFocusSelect:[64]}]]],["p-ca9a0a49",[[1,"ez-combo-box",{value:[1537],label:[513],enabled:[516],options:[1040],errorMessage:[1537,"error-message"],searchMode:[4,"search-mode"],showSelectedValue:[4,"show-selected-value"],showOptionValue:[4,"show-option-value"],suppressSearch:[4,"suppress-search"],optionLoader:[16],suppressEmptyOption:[4,"suppress-empty-option"],canShowError:[516,"can-show-error"],mode:[513],_preSelection:[32],_visibleOptions:[32],_startLoading:[32],_showLoading:[32],_criteria:[32],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-9d57e44a",[[1,"ez-calendar",{value:[1040],floating:[516],time:[516],showSeconds:[516,"show-seconds"],show:[64],fitVertical:[64],hide:[64]}]]],["p-ec9decf2",[[1,"ez-icon",{size:[513],href:[513],iconName:[513,"icon-name"]}]]],["p-88d0fc06",[[1,"ez-button",{label:[513],enabled:[516],mode:[513],image:[513],iconName:[513,"icon-name"],size:[513],setFocus:[64],setBlur:[64]}]]],["p-fcee02c6",[[0,"ez-form",{dataUnit:[1040],config:[16],recordsValidator:[16],validate:[64]}]]]],e)));
1	+ import{p as e,b as o}from"./p-3c7ea91b.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-205fc8bc",[[1,"ez-actions-button",{enabled:[516],actions:[1040],size:[513],showLabel:[516,"show-label"],displayIcon:[513,"display-icon"],checkOption:[516,"check-option"],value:[513],isTransparent:[516,"is-transparent"],arrowActive:[516,"arrow-active"],_selectedAction:[32],hideActions:[64],isOpened:[64]}]]],["p-f13f3123",[[1,"ez-dialog",{confirm:[1028],dialogType:[1025,"dialog-type"],message:[1025],opened:[1540],personalizedIconPath:[1025,"personalized-icon-path"],ezTitle:[1025,"ez-title"],show:[64]}]]],["p-ccbe8272",[[1,"ez-filter-input",{label:[1],value:[1537],enabled:[4],errorMessage:[1537,"error-message"],restrict:[1],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-ff5be174",[[6,"ez-grid",{multipleSelection:[4,"multiple-selection"],config:[1040],serverUrl:[1,"server-url"],dataUnit:[16],statusResolver:[16],_paginationInfo:[32],_paginationChangedByKeyboard:[32],setColumnsDef:[64],addColumnMenuItem:[64],setColumnsState:[64],setData:[64],getSelection:[64],getColumnsState:[64],getColumns:[64],quickFilter:[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["p-739d60d1",[[6,"ez-modal-container",{modalTitle:[1,"modal-title"],modalSubTitle:[1,"modal-sub-title"],showTitleBar:[4,"show-title-bar"],cancelButtonLabel:[1,"cancel-button-label"],okButtonLabel:[1,"ok-button-label"],cancelButtonStatus:[1,"cancel-button-status"],okButtonStatus:[1,"ok-button-status"]}]]],["p-66ebdf34",[[1,"ez-chip",{label:[513],enabled:[516],removePosition:[513,"remove-position"],mode:[513],value:[1540],setFocus:[64],setBlur:[64]}]]],["p-1cc11468",[[0,"ez-application"]]],["p-3cfefc57",[[1,"ez-card-item",{item:[16]}]]],["p-1214c5ce",[[1,"ez-list",{dataSource:[1040],useGroups:[1540,"use-groups"],ezDraggable:[1028,"ez-draggable"],ezSelectable:[1028,"ez-selectable"],itemSlotBuilder:[1040],_listItems:[32],_listGroupItems:[32],clearHistory:[64],scrollToTop:[64],setSelection:[64],getSelection:[64],getList:[64]}]]],["p-f6111077",[[1,"ez-loading-bar",{_showLoading:[32],hide:[64],show:[64]}]]],["p-7c227b86",[[1,"ez-modal",{modalSize:[1,"modal-size"],align:[1],opened:[1028],closeEsc:[4,"close-esc"],closeOutsideClick:[4,"close-outside-click"]}]]],["p-bffae598",[[1,"ez-popover",{autoClose:[516,"auto-close"],top:[1537],left:[1537],bottom:[1537],right:[1537],boxWidth:[513,"box-width"],opened:[1540],innerElement:[1537,"inner-element"],updatePosition:[64],show:[64],hide:[64]}]]],["p-cfcc23e6",[[1,"ez-popup",{size:[1],opened:[1540],useHeader:[516,"use-header"],heightMode:[513,"height-mode"],ezTitle:[1,"ez-title"]}]]],["p-8964287f",[[1,"ez-radio-button",{value:[1544],options:[1040],enabled:[516],label:[513],direction:[1537]}]]],["p-e165c3ef",[[1,"ez-scroller",{direction:[1],locked:[4],activeShadow:[4,"active-shadow"],isFirefox:[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]]],["p-482c3dd8",[[1,"ez-toast",{message:[1025],fadeTime:[1026,"fade-time"],useIcon:[1028,"use-icon"],canClose:[1028,"can-close"],show:[64]}]]],["p-04fab1e9",[[0,"ez-view-stack",{show:[64],getSelectedIndex:[64]}]]],["p-ac15d77e",[[1,"ez-text-input",{label:[513],value:[1537],enabled:[516],errorMessage:[1537,"error-message"],mask:[1],canShowError:[516,"can-show-error"],restrict:[1],mode:[513],noBorder:[516,"no-border"],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-8c874b58",[[1,"ez-collapsible-box",{value:[1540],label:[513],headerSize:[513,"header-size"],iconPlacement:[513,"icon-placement"],stretchTitle:[516,"stretch-title"],removable:[516],editable:[516],conditionalSave:[16],_activeEditText:[32],showHide:[64],applyFocusTextEdit:[64],cancelEdition:[64]}]]],["p-ede1328a",[[1,"ez-search",{value:[1537],label:[1537],enabled:[1540],errorMessage:[1537,"error-message"],optionLoader:[16],showSelectedValue:[4,"show-selected-value"],showOptionValue:[4,"show-option-value"],suppressEmptyOption:[4,"suppress-empty-option"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-c2ebc450",[[1,"ez-date-input",{label:[513],value:[1040],enabled:[516],errorMessage:[1537,"error-message"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-7cf71eb3",[[1,"ez-date-time-input",{label:[513],value:[1040],enabled:[516],errorMessage:[1537,"error-message"],showSeconds:[516,"show-seconds"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-72d755a8",[[1,"ez-time-input",{label:[513],value:[1026],enabled:[516],errorMessage:[1537,"error-message"],showSeconds:[516,"show-seconds"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-941d9bf9",[[1,"ez-number-input",{label:[1],value:[1538],enabled:[4],errorMessage:[1537,"error-message"],precision:[2],prettyPrecision:[2,"pretty-precision"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-f4d2438e",[[1,"ez-tabselector",{selectedIndex:[1538,"selected-index"],selectedTab:[1537,"selected-tab"],tabs:[1],_processedTabs:[32]}]]],["p-e2337c61",[[1,"ez-check",{label:[513],value:[1540],enabled:[1540],indeterminate:[516],mode:[513],getMode:[64],setFocus:[64]}]]],["p-6bcf35fd",[[1,"ez-text-area",{label:[513],value:[1537],enabled:[516],errorMessage:[1537,"error-message"],rows:[1538],canShowError:[516,"can-show-error"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-a713a1aa",[[1,"ez-upload",{label:[1],enabled:[4],maxFileSize:[2,"max-file-size"],maxFiles:[2,"max-files"],requestHeaders:[8,"request-headers"],urlUpload:[1,"url-upload"],urlDelete:[1,"url-delete"],value:[1040],addFiles:[64],setFocus:[64],setBlur:[64]}]]],["p-81fb0c90",[[1,"ez-text-edit",{value:[1],styled:[16],_newValue:[32],applyFocusSelect:[64]}]]],["p-ca9a0a49",[[1,"ez-combo-box",{value:[1537],label:[513],enabled:[516],options:[1040],errorMessage:[1537,"error-message"],searchMode:[4,"search-mode"],showSelectedValue:[4,"show-selected-value"],showOptionValue:[4,"show-option-value"],suppressSearch:[4,"suppress-search"],optionLoader:[16],suppressEmptyOption:[4,"suppress-empty-option"],canShowError:[516,"can-show-error"],mode:[513],_preSelection:[32],_visibleOptions:[32],_startLoading:[32],_showLoading:[32],_criteria:[32],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-9d57e44a",[[1,"ez-calendar",{value:[1040],floating:[516],time:[516],showSeconds:[516,"show-seconds"],show:[64],fitVertical:[64],hide:[64]}]]],["p-ec9decf2",[[1,"ez-icon",{size:[513],href:[513],iconName:[513,"icon-name"]}]]],["p-88d0fc06",[[1,"ez-button",{label:[513],enabled:[516],mode:[513],image:[513],iconName:[513,"icon-name"],size:[513],setFocus:[64],setBlur:[64]}]]],["p-fcee02c6",[[0,"ez-form",{dataUnit:[1040],config:[16],recordsValidator:[16],validate:[64]}]]]],e)));

package/dist/ezui/p-205fc8bc.entry.js ADDED Viewed

@@ -0,0 +1 @@

+ import{r as t,c as i,h as o,H as n,g as s}from"./p-3c7ea91b.js";import{FloatingManager as a}from"@sankhyalabs/core";import"./p-0b44cf1c.js";import{C as e}from"./p-4a5e37a7.js";import"./p-e1148f5c.js";import"./p-b853763b.js";let c=class{constructor(o){t(this,o),this.ezAction=i(this,"ezAction",7),this._arrowOffset=5,this.enabled=!0,this.size="medium",this.showLabel=!1,this.checkOption=!1,this.isTransparent=!1,this.arrowActive=!1,this.innerClickCheck=(t,i)=>{var o;if(i&&t){if(i===t)return!0;const n=t.children;for(let t=0;t<n.length;t++)if(null===(o=n[t].shadowRoot)||void 0===o?void 0:o.contains(i))return!0}return!1}}async hideActions(){null!=this._floatingID&&a.close(this._floatingID),this._floatingID=void 0}async isOpened(){return null!=this._floatingID}showActions(){var t;if(!this.enabled)return;let i={autoClose:!0,innerClickTest:this.innerClickCheck,isFixed:!0,top:this.getPositionTop(),left:this.getPositionLeft()};this._floatingID=a.float(this._actionsList,this._listContainer,i);const o=document.body.clientWidth,n=null===(t=this._actionsList)||void 0===t?void 0:t.getBoundingClientRect();(null==n?void 0:n.right)>o&&(i={autoClose:!0,innerClickTest:this.innerClickCheck,isFixed:!0,top:this.getPositionTop(),left:o-n.width+"px"},a.updateFloatPosition(this._actionsList,this._listContainer,i)),window.requestAnimationFrame((()=>{this._actionsList.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}))}getPositionTop(){var t;const i=null===(t=this._element)||void 0===t?void 0:t.getBoundingClientRect();return null==i?null:i.y+i.height+"px"}getBoundingLeft(){var t;const i=null===(t=this._element)||void 0===t?void 0:t.getBoundingClientRect();return null==i?null:i.x-(this.arrowActive?this._arrowOffset:0)+"px"}getPositionLeft(){return this.getBoundingLeft()||(this.arrowActive?`-${this._arrowOffset}px`:null)}hasLabelOrCheckOption(){var t;return(this.showLabel||this.checkOption)&&(null===(t=this.actions)||void 0===t?void 0:t.length)>0}hasIconName(){var t;return null===(t=this.actions)||void 0===t?void 0:t.some((t=>null!=t.iconName))}controlScrollPage(){window.removeEventListener("scroll",this.hideActions.bind(this)),window.addEventListener("scroll",this.hideActions.bind(this))}handlerButtonClick(){this.showActions()}actionClick(t){this._selectedAction=t,this.hideActions(),this.ezAction.emit(t)}componentWillLoad(){if(null==this.actions){this.actions=[];const t=this._element.querySelectorAll("action");t&&t.forEach((t=>{let i=t.innerText,o=t.getAttribute("value");o||(o=i),this.actions.push({label:i,value:o}),t.hidden=!0}))}}componentDidLoad(){e.applyVarsButton(this._element,this._button),this.controlScrollPage()}componentDidRender(){null==this._floatingID&&this._actionsList.remove(),this.hasLabelOrCheckOption()&&(this.value?this._selectedAction=this.actions.find((t=>t.value===this.value)):this._selectedAction||(this._selectedAction=this.actions[0]))}render(){var t;return o(n,null,o("ez-button",{ref:t=>this._button=t,class:(this.isTransparent?"ez-actions-button__btn-transparent":"")+(this.showLabel?" ez-actions-button__btn-label":""),label:this.showLabel&&(null===(t=this._selectedAction)||void 0===t?void 0:t.label),enabled:this.enabled,mode:this.showLabel?void 0:"icon",iconName:this.showLabel?"":this.displayIcon||"dots-vertical",size:this.size,onClick:()=>this.handlerButtonClick()},this.showLabel&&o("ez-icon",{class:"ez-actions-button__icon-right",slot:"rightIcon",iconName:this.displayIcon||"dots-vertical"})),o("section",{class:"ez-actions-button__list-container",ref:t=>this._listContainer=t},this.arrowActive&&o("div",{class:"ez-actions-button__arrow ez-actions-button__arrow--"+(this.size||"small")+(this.isTransparent?" ez-actions-button__arrow--upped":"")}),o("div",{ref:t=>this._actionsList=t,class:"ez-actions-button__actions-list"+(this.arrowActive&&!this.isTransparent?" ez-actions-button__actions-list--lowered":"")},this.actions.map((t=>{var i;return o("ez-button",{size:"small",label:t.label,onClick:()=>this.actionClick(t),class:"ez-actions-button__btn-action"+(this.checkOption||this.hasIconName()?" ez-actions-button__btn-action--spaced":"")},this.checkOption&&(null===(i=this._selectedAction)||void 0===i?void 0:i.value)===t.value&&o("ez-icon",{class:"ez-actions-button__icon-check",slot:"leftIcon",size:"small",iconName:"check"}),!this.checkOption&&t.iconName&&o("ez-icon",{class:"ez-actions-button__icon-item",slot:"leftIcon",size:"small",iconName:t.iconName}))})))))}get _element(){return s(this)}};c.style=":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;z-index:calc(var(--more-visible, 2) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 2px) * -1)}.ez-actions-button__arrow--small{margin-left:6px}.ez-actions-button__arrow--medium{margin-left:11px}.ez-actions-button__arrow--large{margin-left:13px}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}";export{c as ez_actions_button}

package/dist/ezui/p-739d60d1.entry.js ADDED Viewed

@@ -0,0 +1 @@

+ import{r as e,c as t,h as o,H as i}from"./p-3c7ea91b.js";var a;!function(e){e.CLOSE="CLOSE",e.OK="OK",e.CANCEL="CANCEL",e.LOAD="LOAD"}(a||(a={}));const n=a;var l;!function(e){e.ENABLED="ENABLED",e.DISABLED="DISABLED",e.HIDDEN="HIDDEN"}(l||(l={}));const s=l;let r=class{constructor(o){e(this,o),this.ezModalAction=t(this,"ezModalAction",7),this.showTitleBar=!0}cancelIsVisible(){return this.cancelButtonStatus!==s.HIDDEN&&null!=this.cancelButtonLabel}okIsVisible(){return this.okButtonStatus!==s.HIDDEN&&null!=this.okButtonLabel}componentDidLoad(){window.requestAnimationFrame((()=>{this.ezModalAction.emit(n.LOAD)}))}focusLast(e){this._okButton.setFocus()}focusFirst(e){this._closeButton.focus()}render(){return o(i,null,o("button",{class:"ez-modal-container__focus-ctrl",onFocusin:e=>this.focusLast(e)}),this.showTitleBar&&o("div",{class:"ez-modal-container__header ez-margin-bottom--large ez-align--middle"},o("div",{class:"ez-col ez-align--middle ez-modal-container__title"},o("h2",{class:"ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small"},this.modalTitle),this.modalSubTitle?o("div",{class:"ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small"},this.modalSubTitle):void 0),o("button",{ref:e=>this._closeButton=e,class:"ez-modal-container__close-button",onClick:()=>this.ezModalAction.emit(n.CLOSE)},o("ez-icon",{class:"ez-modal-container__close-icon",size:"medium",iconName:"close"}))),o("div",{class:"ez-modal-container__content"},o("slot",null)),o("div",{class:"ez-col ez-margin-left--auto"},this.cancelIsVisible()?o("ez-button",{label:this.cancelButtonLabel,enabled:this.cancelButtonStatus!==s.DISABLED,onClick:()=>this.ezModalAction.emit(n.CANCEL)}):void 0,this.okIsVisible()?o("ez-button",{ref:e=>this._okButton=e,label:this.okButtonLabel,enabled:this.okButtonStatus!==s.DISABLED,class:"ez-button--primary ez-margin-left--medium",onClick:()=>this.ezModalAction.emit(n.OK)}):void 0),o("button",{class:"ez-modal-container__focus-ctrl",onFocusin:e=>this.focusFirst(e)}))}};r.style=".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto;width:100%;height:100%}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{overflow-y:auto;scrollbar-gutter:stable}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";export{r as ez_modal_container}

package/dist/types/components/ez-actions-button/ez-actions-button.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export declare class EzActionsButton {
   private _listContainer;
   private _button;
   private _floatingID;
+  private _arrowOffset;
   private _element;
   private _selectedAction;
   /**
@@ -57,8 +58,12 @@ export declare class EzActionsButton {
   isOpened(): Promise<boolean>;
   innerClickCheck: (floatingContainer: HTMLElement, node: HTMLElement) => boolean;
   private showActions;
+  private getPositionTop;
+  private getBoundingLeft;
+  private getPositionLeft;
   private hasLabelOrCheckOption;
   private hasIconName;
+  private controlScrollPage;
   private handlerButtonClick;
   private actionClick;
   componentWillLoad(): void;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sankhyalabs/ezui",
-  "version": "2.3.10",
+  "version": "2.3.12",
   "description": "Biblioteca de componentes Sankhya.",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",

package/dist/ezui/p-96265e26.entry.js DELETED Viewed

@@ -1 +0,0 @@

- import{r as t,c as i,h as o,H as n,g as s}from"./p-3c7ea91b.js";import{FloatingManager as a}from"@sankhyalabs/core";import"./p-0b44cf1c.js";import{C as e}from"./p-4a5e37a7.js";import"./p-e1148f5c.js";import"./p-b853763b.js";let c=class{constructor(o){t(this,o),this.ezAction=i(this,"ezAction",7),this.enabled=!0,this.size="medium",this.showLabel=!1,this.checkOption=!1,this.isTransparent=!1,this.arrowActive=!1,this.innerClickCheck=(t,i)=>{var o;if(i&&t){if(i===t)return!0;const n=t.children;for(let t=0;t<n.length;t++)if(null===(o=n[t].shadowRoot)||void 0===o?void 0:o.contains(i))return!0}return!1}}async hideActions(){null!=this._floatingID&&a.close(this._floatingID),this._floatingID=void 0}async isOpened(){return null!=this._floatingID}showActions(){var t,i;if(!this.enabled)return;const o=null===(t=this._element)||void 0===t?void 0:t.getBoundingClientRect();let n=o?o.x-(this.arrowActive?5:0)+"px":null,s={autoClose:!0,innerClickTest:this.innerClickCheck,isFixed:!0,left:n};this._floatingID=a.float(this._actionsList,this._listContainer,s);const e=document.body.clientWidth,c=null===(i=this._actionsList)||void 0===i?void 0:i.getBoundingClientRect();(null==c?void 0:c.right)>e&&(n=e-c.width+"px",s={autoClose:!0,innerClickTest:this.innerClickCheck,left:n},a.updateFloatPosition(this._actionsList,this._listContainer,s)),window.requestAnimationFrame((()=>{this._actionsList.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}))}hasLabelOrCheckOption(){var t;return(this.showLabel||this.checkOption)&&(null===(t=this.actions)||void 0===t?void 0:t.length)>0}hasIconName(){var t;return null===(t=this.actions)||void 0===t?void 0:t.some((t=>null!=t.iconName))}handlerButtonClick(){this.showActions()}actionClick(t){this._selectedAction=t,this.hideActions(),this.ezAction.emit(t)}componentWillLoad(){if(null==this.actions){this.actions=[];const t=this._element.querySelectorAll("action");t&&t.forEach((t=>{let i=t.innerText,o=t.getAttribute("value");o||(o=i),this.actions.push({label:i,value:o}),t.hidden=!0}))}}componentDidLoad(){e.applyVarsButton(this._element,this._button)}componentDidRender(){null==this._floatingID&&this._actionsList.remove(),this.hasLabelOrCheckOption()&&(this.value?this._selectedAction=this.actions.find((t=>t.value===this.value)):this._selectedAction||(this._selectedAction=this.actions[0]))}render(){var t;return o(n,null,o("ez-button",{ref:t=>this._button=t,class:(this.isTransparent?"ez-actions-button__btn-transparent":"")+(this.showLabel?" ez-actions-button__btn-label":""),label:this.showLabel&&(null===(t=this._selectedAction)||void 0===t?void 0:t.label),enabled:this.enabled,mode:this.showLabel?void 0:"icon",iconName:this.showLabel?"":this.displayIcon||"dots-vertical",size:this.size,onClick:()=>this.handlerButtonClick()},this.showLabel&&o("ez-icon",{class:"ez-actions-button__icon-right",slot:"rightIcon",iconName:this.displayIcon||"dots-vertical"})),o("section",{class:"ez-actions-button__list-container",ref:t=>this._listContainer=t},this.arrowActive&&o("div",{class:"ez-actions-button__arrow"+(this.isTransparent?" ez-actions-button__arrow--upped":"")}),o("div",{ref:t=>this._actionsList=t,class:"ez-actions-button__actions-list"+(this.arrowActive&&!this.isTransparent?" ez-actions-button__actions-list--lowered":"")},this.actions.map((t=>{var i;return o("ez-button",{size:"small",label:t.label,onClick:()=>this.actionClick(t),class:"ez-actions-button__btn-action"+(this.checkOption||this.hasIconName()?" ez-actions-button__btn-action--spaced":"")},this.checkOption&&(null===(i=this._selectedAction)||void 0===i?void 0:i.value)===t.value&&o("ez-icon",{class:"ez-actions-button__icon-check",slot:"leftIcon",size:"small",iconName:"check"}),!this.checkOption&&t.iconName&&o("ez-icon",{class:"ez-actions-button__icon-item",slot:"leftIcon",size:"small",iconName:t.iconName}))})))))}get _element(){return s(this)}};c.style=":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:fixed;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;margin-left:6px;z-index:calc(var(--more-visible, 2) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 3px) * -1)}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}";export{c as ez_actions_button}

package/dist/ezui/p-def4cd05.entry.js DELETED Viewed

@@ -1 +0,0 @@

- import{r as e,c as t,h as i,H as o}from"./p-3c7ea91b.js";var n;!function(e){e.CLOSE="CLOSE",e.OK="OK",e.CANCEL="CANCEL",e.LOAD="LOAD"}(n||(n={}));const a=n;var s;!function(e){e.ENABLED="ENABLED",e.DISABLED="DISABLED",e.HIDDEN="HIDDEN"}(s||(s={}));const l=s;let r=class{constructor(i){e(this,i),this.ezModalAction=t(this,"ezModalAction",7),this.showTitleBar=!0}cancelIsVisible(){return this.cancelButtonStatus!==l.HIDDEN&&null!=this.cancelButtonLabel}okIsVisible(){return this.okButtonStatus!==l.HIDDEN&&null!=this.okButtonLabel}componentDidLoad(){window.requestAnimationFrame((()=>{this.ezModalAction.emit(a.LOAD)}))}focusLast(e){this._okButton.setFocus()}focusFirst(e){this._closeButton.focus()}render(){return i(o,null,i("button",{class:"ez-modal-container__focus-ctrl",onFocusin:e=>this.focusLast(e)}),this.showTitleBar&&i("div",{class:"ez-modal-container__header ez-margin-bottom--large ez-align--middle"},i("div",{class:"ez-col ez-align--middle ez-modal-container__title"},i("h2",{class:"ez-text ez-title--large ez-title--primary ez-text--bold ez-margin-vertical--extra-small"},this.modalTitle),this.modalSubTitle?i("div",{class:"ez-text ez-text--medium ez-text--primary ez-margin-vertical--extra-small"},this.modalSubTitle):void 0),i("button",{ref:e=>this._closeButton=e,class:"ez-modal-container__close-button",onClick:()=>this.ezModalAction.emit(a.CLOSE)},i("ez-icon",{class:"ez-modal-container__close-icon",size:"medium",iconName:"close"}))),i("div",null,i("slot",null)),i("div",{class:"ez-col ez-margin-left--auto"},this.cancelIsVisible()?i("ez-button",{label:this.cancelButtonLabel,enabled:this.cancelButtonStatus!==l.DISABLED,onClick:()=>this.ezModalAction.emit(a.CANCEL)}):void 0,this.okIsVisible()?i("ez-button",{ref:e=>this._okButton=e,label:this.okButtonLabel,enabled:this.okButtonStatus!==l.DISABLED,class:"ez-button--primary ez-margin-left--medium",onClick:()=>this.ezModalAction.emit(a.OK)}):void 0),i("button",{class:"ez-modal-container__focus-ctrl",onFocusin:e=>this.focusFirst(e)}))}};r.style=".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto;width:100%;height:100%}@media screen and (min-width: 480px){.sc-ez-modal-container-h{width:359px;max-width:359px}}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";export{r as ez_modal_container}