@sankhyalabs/ezui 7.0.15 → 7.0.16

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 {
@@ -86,6 +85,7 @@
   width: 100%;
   display: flex;
   align-items: center;
+  margin-bottom: var(--space--16, 16px);
 }
 
 .popup__title {
@@ -122,6 +122,10 @@
   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,6 +3,11 @@ 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;
@@ -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,7 +77,7 @@ 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';
@@ -146,7 +152,10 @@ export class EzPopup {
       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" }, this.footerButtons.length > 0 && (this.renderFooterButtons()), h("slot", { name: 'footer' })))))));
+      } }, 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"; }
@@ -316,6 +325,11 @@ export class EzPopup {
       }
     };
   }
+  static get states() {
+    return {
+      "_hasFooterSlotContent": {}
+    };
+  }
   static get events() {
     return [{
         "method": "ezClosePopup",

package/dist/collection/components/ez-text-input/ez-text-input.css

@@ -213,7 +213,7 @@ input:read-only {
   white-space: nowrap;
   -webkit-transition: font-size .05s, top .05s;
   transition: font-size .05s, top .05s;
-  width: calc(100% - var(--ez-text-input__label--padding-right));
+  width: calc(100% - (var(--ez-text-input__label--padding-right) + var(--ez-text-input__label--padding-left)));
   left: var(--ez-text-input--space--medium);
 
   /*public*/
@@ -245,7 +245,7 @@ input:read-only {
   text-align: left;
   left: calc(var(--ez-text-input__icon--width) + 2px);
   /*borda*/
-  width: calc(100% - var(--ez-text-input__icon--width));
+  width: calc(100% - (var(--ez-text-input__icon--width) + var(--ez-text-input__label--padding-right)));
 }
 
 .input__label--left.hasError {
@@ -255,7 +255,7 @@ input:read-only {
 .input__label--right {
   /*public*/
   right: var(--ez-text-input__icon--width);
-  width: calc(100% - var(--ez-text-input__icon--width));
+  width: calc(100% - (var(--ez-text-input__icon--width) + var(--ez-text-input__label--padding-left)));
 }
 .input__label--right.hasError {
   width: calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing));