@sankhyalabs/ezui 1.1.9 → 1.1.10

package/dist/esm/ez-label-chip.entry.js

@@ -2,126 +2,126 @@ import { r as registerInstance, c as createEvent, h } from './index-95bb3fd9.js'
 
 const ezLabelChipCss = ":host{--lc--height:36px;--lc--width:100%;--lc__icon--width:48px;--lc--border-radius:var(--border--radius-large, 24px);--lc--font-size:var(--text--medium, 14px);--lc--font-family:var(--font-pattern, Arial);--lc--font-weight:var(--text-weight--large, 500);--lc--space--medium:var(--space--medium, 6px);--lc__border:1px solid;--lc__border-color-strokes:var(--color--strokes, #DCE0E8);--lc__label--title--primary:var(--title--primary, #919191);--lc__label--color-primary:var(--color--primary, #008561);--lc__label-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--lc__label--background-color:#0085610F;--lc__label__default--background-color--hover:var(--color--primary-200, #f2faf8);--lc__label__default--border-color--hover:var(--color--primary-600, #007a5a);--lc__label--text--disabled:var(--text--disable, #AFB6C0);--lc__label--text--primary:var(--text--primary, #626e82);--lc__message_box--font-size:var(--text--small, 12px);--lc__message_box--info--color:var(--color--success, #22085d);--lc__message_box--error--color:var(--color--error, #FF0000);width:100%}.padding-right--small{padding-right:var(--lc--space--medium)}.padding-left--small{padding-left:var(--lc--space--medium)}.label__container{width:fit-content;display:flex;flex-wrap:wrap;position:relative;align-items:center;align-self:center;color:var(--lc__label--title--primary);fill:var(--lc__label--title--primary);border:var(--lc__border);border-radius:var(--lc--border-radius);border-color:var( --lc__border-color-strokes);padding-right:var(--space--large, 12px);padding-left:var(--space--large, 12px)}.label__container:hover{border-color:var(--lc__label__default--border-color--hover);background-color:var(--lc__label__default--background-color--hover)}.label__container--active{width:fit-content;display:flex;flex-wrap:wrap;position:relative;align-items:center;align-self:center;border:var(--lc__border);border-radius:var(--lc--border-radius);padding-right:var(--space--large, 12px);padding-left:var(--space--large, 12px);fill:var(--lc__label--color-primary);color:var(--lc__label--color-primary);border-color:var(--lc__label--background-color);background-color:var(--lc__label--background-color)}.label__container--disabled{width:fit-content;display:flex;flex-wrap:wrap;position:relative;align-items:center;align-self:center;border:var(--lc__border);border-color:var(--lc__label-color--disable-secondary);border-radius:var(--lc--border-radius);padding-right:var(--space--large, 12px);padding-left:var(--space--large, 12px);fill:var(--lc__label--text--disabled);color:var(--lc__label--text--disabled);background-color:var(--lc__label-color--disable-secondary)}label{display:flex;align-items:center;width:calc(100% - var(--lc__icon--width));width:fit-content;font-weight:var(--text-weight--large, 600);cursor:pointer;height:var(--lc--height);font-family:var(--lc--font-family);font-size:var(--lc--font-size)}.label__icon{display:flex;cursor:pointer}";
 
-const EzLabelChip = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.removeChip = createEvent(this, "removeChip", 7);
-    this.valueChange = createEvent(this, "valueChange", 7);
-    /**
-     * Deixa o componente disponível ou não para seleção.
-     */
-    this.enabled = true;
-    /**
-     * Indica se o componente terá a opção de ser removido.
-     */
-    this.removable = false;
-    /**
-     * Indica se o componente está ou não ativado.
-     */
-    this.value = false;
-  }
-  //---------------------------------------------
-  // Public methods
-  //---------------------------------------------
-  /**
-   * Faz o foco no componente de input
-   */
-  async setFocus() {
-    this._labelElem.focus();
-  }
-  /**
-   * Remove o foco no componente de input
-   */
-  async setBlur() {
-    this._labelElem.blur();
-  }
-  //---------------------------------------------
-  // Event handlers
-  //---------------------------------------------
-  handleClick(ev) {
-    const target = ev.target;
-    if (target.assignedSlot === null && !target.classList.contains('label__icon')) {
-      this.valueChange.emit(this.value);
-      this.swichState();
-    }
-  }
-  swichState() {
-    if (this.enabled) {
-      this.value = !this.value;
-    }
-  }
-  reflectChange() {
-    if (this._divElem) {
-      this._divElem.classList.remove('label__container--active');
-      this._divElem.classList.remove('label__container');
-      if (this.value) {
-        this._divElem.classList.add('label__container--active');
-      }
-      else {
-        this._divElem.classList.add('label__container');
-      }
-    }
-  }
-  handleSlotChange(ev) {
-    const slot = ev.target;
-    const content = slot.assignedElements()[0];
-    if (content) {
-      content.style.position = "absolute";
-      content.style.display = "flex";
-      content.style.alignItems = "center";
-      content.style.justifyContent = "center";
-      content.style.overflow = "hidden";
-      content.style.top = "0px";
-      content.style.width = "var(--lc__icon--width)";
-      content.style.height = "var(--lc--height)";
-      if (slot.name == "leftIcon") {
-        content.style.left = "0px";
-        this._labelElem.classList.add('padding-left--small');
-      }
-      else if (slot.name == "rightIcon") {
-        content.style.right = "0px";
-        if (this.removable) {
-          this._iconElement.classList.add('padding-right--small');
-        }
-        else {
-          this._labelElem.classList.add('padding-right--small');
-        }
-      }
-    }
-  }
-  //---------------------------------------------
-  // Lifecycle web component
-  //---------------------------------------------
-  componentDidLoad() {
-    if (this._divElem) {
-      if (this.value) {
-        this._divElem.classList.add('label__container--active');
-      }
-      else {
-        this.handleEnabledState();
-      }
-    }
-  }
-  handleEnabledState() {
-    this._divElem.classList.remove('label__container--disabled');
-    if (!this.enabled) {
-      this._divElem.classList.remove('label__container');
-      this._divElem.classList.add('label__container--disabled');
-      if (this._labelElem) {
-        this._labelElem.style.cursor = 'default';
-      }
-    }
-  }
-  render() {
-    return (h("div", { onClick: (ev) => this.handleClick(ev), class: this.value ? "label__container--active" : "label__container", ref: (el) => this._divElem = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("label", { class: this.removable ? "padding-right--small" : " ", ref: (el) => this._labelElem = el }, this.label), this.removable ?
-      h("ez-icon", { class: "label__icon align--middle padding-horizontal--medium", onClick: () => { this.removeChip.emit(); }, ref: (el) => this._iconElement = el, href: "/themes/default/images/icons/actions-sprite.svg#close", size: "x-small" })
-      : null, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
-  }
-  static get watchers() { return {
-    "value": ["reflectChange"],
-    "enabled": ["handleEnabledState"]
-  }; }
-};
+const EzLabelChip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.removeChip = createEvent(this, "removeChip", 7);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    /**
+     * Deixa o componente disponível ou não para seleção.
+     */
+    this.enabled = true;
+    /**
+     * Indica se o componente terá a opção de ser removido.
+     */
+    this.removable = false;
+    /**
+     * Indica se o componente está ou não ativado.
+     */
+    this.value = false;
+  }
+  //---------------------------------------------
+  // Public methods
+  //---------------------------------------------
+  /**
+   * Faz o foco no componente de input
+   */
+  async setFocus() {
+    this._labelElem.focus();
+  }
+  /**
+   * Remove o foco no componente de input
+   */
+  async setBlur() {
+    this._labelElem.blur();
+  }
+  //---------------------------------------------
+  // Event handlers
+  //---------------------------------------------
+  handleClick(ev) {
+    const target = ev.target;
+    if (target.assignedSlot === null && !target.classList.contains('label__icon')) {
+      this.valueChange.emit(this.value);
+      this.swichState();
+    }
+  }
+  swichState() {
+    if (this.enabled) {
+      this.value = !this.value;
+    }
+  }
+  reflectChange() {
+    if (this._divElem) {
+      this._divElem.classList.remove('label__container--active');
+      this._divElem.classList.remove('label__container');
+      if (this.value) {
+        this._divElem.classList.add('label__container--active');
+      }
+      else {
+        this._divElem.classList.add('label__container');
+      }
+    }
+  }
+  handleSlotChange(ev) {
+    const slot = ev.target;
+    const content = slot.assignedElements()[0];
+    if (content) {
+      content.style.position = "absolute";
+      content.style.display = "flex";
+      content.style.alignItems = "center";
+      content.style.justifyContent = "center";
+      content.style.overflow = "hidden";
+      content.style.top = "0px";
+      content.style.width = "var(--lc__icon--width)";
+      content.style.height = "var(--lc--height)";
+      if (slot.name == "leftIcon") {
+        content.style.left = "0px";
+        this._labelElem.classList.add('padding-left--small');
+      }
+      else if (slot.name == "rightIcon") {
+        content.style.right = "0px";
+        if (this.removable) {
+          this._iconElement.classList.add('padding-right--small');
+        }
+        else {
+          this._labelElem.classList.add('padding-right--small');
+        }
+      }
+    }
+  }
+  //---------------------------------------------
+  // Lifecycle web component
+  //---------------------------------------------
+  componentDidLoad() {
+    if (this._divElem) {
+      if (this.value) {
+        this._divElem.classList.add('label__container--active');
+      }
+      else {
+        this.handleEnabledState();
+      }
+    }
+  }
+  handleEnabledState() {
+    this._divElem.classList.remove('label__container--disabled');
+    if (!this.enabled) {
+      this._divElem.classList.remove('label__container');
+      this._divElem.classList.add('label__container--disabled');
+      if (this._labelElem) {
+        this._labelElem.style.cursor = 'default';
+      }
+    }
+  }
+  render() {
+    return (h("div", { onClick: (ev) => this.handleClick(ev), class: this.value ? "label__container--active" : "label__container", ref: (el) => this._divElem = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), h("label", { class: this.removable ? "padding-right--small" : " ", ref: (el) => this._labelElem = el }, this.label), this.removable ?
+      h("ez-icon", { class: "label__icon align--middle padding-horizontal--medium", onClick: () => { this.removeChip.emit(); }, ref: (el) => this._iconElement = el, href: "/themes/default/images/icons/actions-sprite.svg#close", size: "x-small" })
+      : null, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
+  }
+  static get watchers() { return {
+    "value": ["reflectChange"],
+    "enabled": ["handleEnabledState"]
+  }; }
+};
 EzLabelChip.style = ezLabelChipCss;
 
 export { EzLabelChip as ez_label_chip };

package/dist/esm/ez-modal.entry.js

@@ -2,110 +2,108 @@ import { r as registerInstance, c as createEvent, h, H as Host } from './index-9
 
 const ezModalCss = ":host{--modal-z-index:var(--most-visible, 3);--modal-vertical-padding:var(--space--extra-large, 48px);display:block}.modal{position:fixed;padding:var(--modal-vertical-padding) 0;display:flex;top:0px;z-index:var(--modal-z-index);left:0px;width:100%;height:100vh;backdrop-filter:blur(4px);background:rgb(0 4 12 / 40%)}@keyframes expand-modal--left{from{transform:translate(-100%)}}@keyframes expand-modal--right{from{transform:translate(100%)}}.modal__container{display:flex;flex-wrap:wrap;width:100%;align-items:flex-start}.modal__container--right{animation:expand-modal--right .2s ease-in-out 1;justify-content:flex-end}.modal__container--left{animation:expand-modal--left .2s ease-in-out 1;justify-content:flex-start}.modal__content{display:flex;flex-wrap:wrap;max-height:89.6vh;overflow-y:auto;background-color:#fff;padding:24px;border-radius:12px 0px 0px 12px;box-shadow:0px 0px 16px 0px rgba(0, 38, 111, 0.12)}.modal__content--right{border-radius:12px 0px 0px 12px}.modal__content--left{border-radius:0px 12px 12px 0px}.modal__box__container{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;border-radius:12px}.small{width:30%}.medium{width:50%}.large{width:70%}";
 
-const EzModal = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ezChange = createEvent(this, "ezChange", 7);
-    /**
-    * Controle de exibição do Modal
-    */
-    this.oppened = true;
-    /**
-    * Define se o modal será fechado ao digitar ESC
-    */
-    this.closeesc = false;
-    /**
-    * Define se o modal será fechado ao clicar fora do conteúdo.
-    */
-    this.closeoutsideclick = false;
-    this.handleKeyboardEvent = (ev) => {
-      console.log(ev === null || ev === void 0 ? void 0 : ev.key);
-      if ((ev === null || ev === void 0 ? void 0 : ev.key) === 'Escape' && this.closeesc) {
-        this.oppened = false;
-        debugger;
-        this.ezChange.emit(this.oppened);
-      }
-    };
-  }
-  handleClickOverlay(ev) {
-    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
-    if (ev instanceof PointerEvent && this.closeoutsideclick) {
-      this.oppened = false;
-      debugger;
-      this.ezChange.emit(this.oppened);
-    }
-  }
-  handleOppenedChange() {
-    if (this.oppened) {
-      document.addEventListener('keydown', this.handleKeyboardEvent);
-    }
-    else {
-      document.removeEventListener('keydown', this.handleKeyboardEvent);
-    }
-  }
-  ///////
-  // trapTabKey(e) {
-  //   // Check for TAB key press
-  //   if (e.keyCode === 9) {
-  //     // SHIFT + TAB
-  //     if (e.shiftKey) {
-  //       if (document.activeElement === this._firstTabStop) {
-  //         e.preventDefault();
-  //         this._lastTabStop.focus();
-  //       }
-  //       // TAB
-  //     } else {
-  //       if (document.activeElement === this._lastTabStop) {
-  //         e.preventDefault();
-  //         this._firstTabStop.focus();
-  //       }
-  //     }
-  //   }
-  //   if (e.keyCode === 27) {
-  //     this.closeModal();
-  //   }
-  // }
-  // closeModal() {
-  //   this.oppened = false;
-  //   this._focusedElementBeforeModal.focus();
-  // }
-  // componentDidLoad() {
-  //   this._overlay.addEventListener('keydown', (ev) => { this.trapTabKey(ev) });
-  //   // Save current focus
-  //   this._focusedElementBeforeModal = document.activeElement;
-  //   // Find all focusable children
-  //   var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
-  //   var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
-  //   // Convert NodeList to Array
-  //   focusableElements = Array.prototype.slice.call(focusableElements);
-  //   this._firstTabStop = focusableElements[0];
-  //   this._lastTabStop = focusableElements[focusableElements.length - 1];
-  //   // Focus first child
-  //   this._firstTabStop.focus();
-  // }
-  // componentDidUpdate() {
-  //   var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
-  //   var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
-  // }
-  /////
-  componentDidLoad() {
-    this.handleOppenedChange();
-  }
-  //Ainda teremos ajustes visuais
-  render() {
-    return (h(Host, null, this.oppened ?
-      h("div", { class: 'modal' /* ref={el => this._overlay = el} */, onClick: (ev) => this.handleClickOverlay(ev) }, this.align === 'left'
-        ?
-          h("div", { onClick: (ev) => this.handleClickOverlay(ev), class: "modal__container modal__container--left" }, h("div", { onClick: (ev) => ev.stopPropagation(), class: "modal__content modal__content--left " + this.modalsize }, h("slot", null)))
-        : undefined, this.align === 'right' ?
-        h("div", { onClick: (ev) => this.handleClickOverlay(ev), class: "modal__container modal__container--right" }, h("div", { onClick: (ev) => ev.stopPropagation(), class: "modal__content modal__content--right " + this.modalsize }, h("slot", null)))
-        : undefined)
-      : undefined));
-  }
-  static get watchers() { return {
-    "oppened": ["handleOppenedChange"]
-  }; }
-};
+const EzModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ezChange = createEvent(this, "ezChange", 7);
+    /**
+    * Controle de exibição do Modal
+    */
+    this.oppened = true;
+    /**
+    * Define se o modal será fechado ao digitar ESC
+    */
+    this.closeesc = false;
+    /**
+    * Define se o modal será fechado ao clicar fora do conteúdo.
+    */
+    this.closeoutsideclick = false;
+    this.handleKeyboardEvent = (ev) => {
+      console.log(ev === null || ev === void 0 ? void 0 : ev.key);
+      if ((ev === null || ev === void 0 ? void 0 : ev.key) === 'Escape' && this.closeesc) {
+        this.oppened = false;
+        this.ezChange.emit(this.oppened);
+      }
+    };
+  }
+  handleClickOverlay(ev) {
+    ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
+    if (ev instanceof PointerEvent && this.closeoutsideclick) {
+      this.oppened = false;
+      this.ezChange.emit(this.oppened);
+    }
+  }
+  handleOppenedChange() {
+    if (this.oppened) {
+      document.addEventListener('keydown', this.handleKeyboardEvent);
+    }
+    else {
+      document.removeEventListener('keydown', this.handleKeyboardEvent);
+    }
+  }
+  ///////
+  // trapTabKey(e) {
+  //   // Check for TAB key press
+  //   if (e.keyCode === 9) {
+  //     // SHIFT + TAB
+  //     if (e.shiftKey) {
+  //       if (document.activeElement === this._firstTabStop) {
+  //         e.preventDefault();
+  //         this._lastTabStop.focus();
+  //       }
+  //       // TAB
+  //     } else {
+  //       if (document.activeElement === this._lastTabStop) {
+  //         e.preventDefault();
+  //         this._firstTabStop.focus();
+  //       }
+  //     }
+  //   }
+  //   if (e.keyCode === 27) {
+  //     this.closeModal();
+  //   }
+  // }
+  // closeModal() {
+  //   this.oppened = false;
+  //   this._focusedElementBeforeModal.focus();
+  // }
+  // componentDidLoad() {
+  //   this._overlay.addEventListener('keydown', (ev) => { this.trapTabKey(ev) });
+  //   // Save current focus
+  //   this._focusedElementBeforeModal = document.activeElement;
+  //   // Find all focusable children
+  //   var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
+  //   var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
+  //   // Convert NodeList to Array
+  //   focusableElements = Array.prototype.slice.call(focusableElements);
+  //   this._firstTabStop = focusableElements[0];
+  //   this._lastTabStop = focusableElements[focusableElements.length - 1];
+  //   // Focus first child
+  //   this._firstTabStop.focus();
+  // }
+  // componentDidUpdate() {
+  //   var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
+  //   var focusableElements = this._modalContainer.querySelectorAll(focusableElementsString);
+  // }
+  /////
+  componentDidLoad() {
+    this.handleOppenedChange();
+  }
+  //Ainda teremos ajustes visuais
+  render() {
+    return (h(Host, null, this.oppened ?
+      h("div", { class: 'modal' /* ref={el => this._overlay = el} */, onClick: (ev) => this.handleClickOverlay(ev) }, this.align === 'left'
+        ?
+          h("div", { onClick: (ev) => this.handleClickOverlay(ev), class: "modal__container modal__container--left" }, h("div", { onClick: (ev) => ev.stopPropagation(), class: "modal__content modal__content--left " + this.modalsize }, h("slot", null)))
+        : undefined, this.align === 'right' ?
+        h("div", { onClick: (ev) => this.handleClickOverlay(ev), class: "modal__container modal__container--right" }, h("div", { onClick: (ev) => ev.stopPropagation(), class: "modal__content modal__content--right " + this.modalsize }, h("slot", null)))
+        : undefined)
+      : undefined));
+  }
+  static get watchers() { return {
+    "oppened": ["handleOppenedChange"]
+  }; }
+};
 EzModal.style = ezModalCss;
 
 export { EzModal as ez_modal };