@sankhyalabs/ezui 7.2.0-rc.8 → 7.2.0

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

@@ -123,7 +123,22 @@
   border-radius: calc(var(--ez-image-input--border-radius) - var(--ez-image-input--border-width));
 }
 
-ez-button {
+.image-input__actions {
+  position: absolute;
+  top: var(--space--8);
+  right: var(--space--8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space--4);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.image-input__container:hover .image-input__actions {
+  opacity: 1;
+}
+
+.image-input__remove-button {
   --ez-button--background-color: var(--ez-image-input--remove-button-bg);
   --ez-button--hover--background-color: var(--ez-image-input--remove-button-bg-hover);
   --ez-button--color: var(--ez-image-input--remove-button-color);
@@ -131,13 +146,14 @@ ez-button {
   --ez-button--hover--border: var(--ez-image-input--remove-button-border);
 }
 
-.image-input__remove-button {
-  position: absolute;
-  top: var(--space--8);
-  right: var(--space--8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.image-input__edit-button {
+  --ez-button--background-color: var(--ez-image-input--edit-button-bg);
+  --ez-button--hover--background-color: var(--ez-image-input--edit-button-bg-hover);
+  --ez-button--color: var(--ez-image-input--edit-button-color);
+  --ez-button--border: var(--ez-image-input--edit-button-border);
+  --ez-button--hover--border: var(--ez-image-input--edit-button-border);
+  --ez-button--left-icon--color: var(--ez-image-input--edit-button-color);
+  --ez-button--right-icon--color: var(--ez-image-input--edit-button-color);
 }
 
 .image-input__popup-content {

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

@@ -42,6 +42,11 @@ export class EzImageInput {
       }
       this.ezChange.emit('');
     };
+    this.handleEditImage = (event) => {
+      var _a;
+      event.stopPropagation();
+      (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.click();
+    };
     this.handleClickDropZone = () => {
       var _a;
       if (this.enabled && !this._hasImage) {
@@ -133,7 +138,7 @@ export class EzImageInput {
         'image-input__container--disabled': !this.enabled,
         'image-input__container--dragging': this._isDragging,
         'image-input__container--has-image': this._hasImage
-      }, "data-enabled": this.enabled.toString(), "data-has-image": this._hasImage.toString(), onClick: this.handleClickDropZone, onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, role: "button", "aria-label": dropZoneLabel, tabindex: this.enabled ? 0 : -1 }, h("input", { ref: (el) => (this._inputElem = el), type: "file", accept: this.accept, name: this.name, disabled: !this.enabled, onChange: this.handleFileSelect, class: "image-input__file-input", "aria-hidden": "true" }), this._hasImage && this.value ? (h("div", { class: "image-input__preview" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__image", onClick: this.handleImageClick }), this.enabled && (h("ez-button", { class: "image-input__remove-button", variant: "primary", type: "button", mode: "icon", size: "small", iconName: "trash-alt", onClick: this.handleRemoveImage, "aria-label": this.i18n('ez-image-input.removeImage'), title: this.i18n('ez-image-input.removeImage') })))) : (h("div", { class: "image-input__dropzone" }, h("ez-icon", { iconName: "image", size: "x-large" }), h("span", { class: "image-input__label" }, dropZoneLabel)))), h("ez-popup", { opened: this._showImagePopup, ezTitle: this.i18n('ez-image-input.imagePreview'), size: "large", heightMode: "auto", onEzPopupAction: this.handlePopupAction, onEzClosePopup: this.handleClosePopup }, h("div", { class: "image-input__popup-content" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__popup-image" })))));
+      }, "data-enabled": this.enabled.toString(), "data-has-image": this._hasImage.toString(), onClick: this.handleClickDropZone, onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, role: "button", "aria-label": dropZoneLabel, tabindex: this.enabled ? 0 : -1 }, h("input", { ref: (el) => (this._inputElem = el), type: "file", accept: this.accept, name: this.name, disabled: !this.enabled, onChange: this.handleFileSelect, class: "image-input__file-input", "aria-hidden": "true" }), this._hasImage && this.value ? (h("div", { class: "image-input__preview" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__image", onClick: this.handleImageClick }), this.enabled && (h("div", { class: "image-input__actions" }, h("ez-button", { class: "image-input__remove-button", variant: "primary", type: "button", mode: "icon", size: "small", iconName: "trash-alt", onClick: this.handleRemoveImage, "aria-label": this.i18n('ez-image-input.removeImage'), title: this.i18n('ez-image-input.removeImage') }), h("ez-button", { class: "image-input__edit-button", variant: "secondary", type: "button", mode: "icon", size: "small", iconName: "edit", onClick: this.handleEditImage, "aria-label": this.i18n('ez-image-input.editImage'), title: this.i18n('ez-image-input.editImage') }))))) : (h("div", { class: "image-input__dropzone" }, h("ez-icon", { iconName: "image", size: "x-large" }), h("span", { class: "image-input__label" }, dropZoneLabel)))), h("ez-popup", { opened: this._showImagePopup, ezTitle: this.i18n('ez-image-input.imagePreview'), size: "large", heightMode: "auto", onEzPopupAction: this.handlePopupAction, onEzClosePopup: this.handleClosePopup }, h("div", { class: "image-input__popup-content" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__popup-image" })))));
   }
   static get is() { return "ez-image-input"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/ez-multi-select-input/ez-multi-select-input.css

@@ -0,0 +1,221 @@
+:host {
+  /* dimensões — iguais ao ez-text-input */
+  /*@doc Define a altura do componente.*/
+  --ez-multi-select-input--height: 42px;
+  /*@doc Define a altura do componente em modo "slim".*/
+  --ez-multi-select-input--height--slim: 32px;
+  /*@doc Define a largura do componente.*/
+  --ez-multi-select-input--width: 100%;
+  /*@doc Define a largura mínima do componente.*/
+  --ez-multi-select-input__min-width: 0px;
+  /*@doc Define a largura máxima do componente.*/
+  --ez-multi-select-input__max-width: 100%;
+  /*@doc Define a largura reservada para o ícone à direita.*/
+  --ez-multi-select-input__icon--width: 30px;
+
+  /* tipografia */
+  /*@doc Define o tamanho da fonte do componente.*/
+  --ez-multi-select-input--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte do componente.*/
+  --ez-multi-select-input--font-family: var(--font-pattern, Arial);
+  /*@doc Define o peso da fonte do componente.*/
+  --ez-multi-select-input--font-weight: var(--text-weight--medium, 400);
+  /*@doc Define a cor da fonte do componente.*/
+  --ez-multi-select-input--color: var(--title--primary, #2B3A54);
+  /*@doc Define o raio da borda do componente.*/
+  --ez-multi-select-input--border-radius: var(--border--radius-medium, 12px);
+
+  /* borda */
+  /*@doc Define o estilo da borda.*/
+  --ez-multi-select-input__input--border: var(--border--small, 1px solid);
+  /*@doc Define a cor da borda.*/
+  --ez-multi-select-input__input--border-color: var(--color--strokes, #DCE0E8);
+  /*@doc Define a cor da borda quando focado.*/
+  --ez-multi-select-input__input--focus--border-color: var(--color--primary, #008561);
+  /*@doc Define a cor da borda quando com erro.*/
+  --ez-multi-select-input__input--error--border-color: var(--color-alert--error-800, #BD0025);
+
+  /* fundo */
+  /*@doc Define a cor de fundo do campo.*/
+  --ez-multi-select-input__input--background-color: var(--background--light, #ffffff);
+  /*@doc Define a cor de fundo quando desabilitado.*/
+  --ez-multi-select-input__input--disabled--background-color: var(--background--medium, #F0F3F7);
+  /*@doc Define a cor do texto quando desabilitado.*/
+  --ez-multi-select-input__input--disabled--color: var(--text--primary, #626E82);
+
+  /* label */
+  /*@doc Define o posicionamento do label flutuante.*/
+  --ez-multi-select-input__label--floating--top: 6px;
+  /*@doc Define o espaçamento superior do label.*/
+  --ez-multi-select-input__label--padding-top: 12px;
+  /*@doc Define o espaçamento esquerdo do label.*/
+  --ez-multi-select-input__label--padding-left: 14px;
+
+  /* placeholder */
+  /*@doc Define a cor do placeholder.*/
+  --ez-multi-select-input__placeholder--color: var(--text--secondary, #a2abb9);
+
+  /* tooltip de erro */
+  /*@doc Define a cor do ícone de erro.*/
+  --ez-multi-select-input__tooltip_icon--error--color: var(--color-alert--error-800, #BD0025);
+  /*@doc Define a largura do ícone de erro.*/
+  --ez-multi-select-input__tooltip-icon---width: var(--space--large);
+  /*@doc Define a margem horizontal do ícone de erro.*/
+  --ez-multi-select-input__tooltip-icon---horizontal-margin: var(--space--medium, 12px);
+  /*@doc Define a margem vertical do ícone de erro.*/
+  --ez-multi-select-input__tooltip-icon---vertical-margin: 10px;
+
+  /***************
+  host style
+  ***************/
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  /*public*/
+  width: var(--ez-multi-select-input--width);
+  min-width: var(--ez-multi-select-input__min-width);
+  max-width: var(--ez-multi-select-input__max-width);
+}
+
+.trigger {
+  /*private*/
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  width: 100%;
+  overflow: hidden;
+  /*public*/
+  height: var(--ez-multi-select-input--height);
+  border-radius: var(--ez-multi-select-input--border-radius);
+  font-family: var(--ez-multi-select-input--font-family);
+  font-size: var(--ez-multi-select-input--font-size);
+  font-weight: var(--ez-multi-select-input--font-weight);
+  color: var(--ez-multi-select-input--color);
+  background-color: var(--ez-multi-select-input__input--background-color);
+  border: var(--ez-multi-select-input__input--border);
+  border-color: var(--ez-multi-select-input__input--border-color);
+  padding: 0 var(--ez-multi-select-input__icon--width) 0 14px;
+  margin-bottom: var(--space--small);
+}
+
+.trigger:focus {
+  outline: none;
+}
+
+.trigger--focused {
+  /*private*/
+  border: var(--border--medium, 2px solid);
+  outline: none;
+  /*public*/
+  border-color: var(--ez-multi-select-input__input--focus--border-color);
+}
+
+.trigger--error {
+  /*private*/
+  border: var(--border--medium, 2px solid);
+  /*public*/
+  border-color: var(--ez-multi-select-input__input--error--border-color);
+}
+
+.trigger--disabled {
+  /*private*/
+  cursor: not-allowed;
+  /*public*/
+  background-color: var(--ez-multi-select-input__input--disabled--background-color);
+  color: var(--ez-multi-select-input__input--disabled--color);
+}
+
+.trigger--no-border {
+  box-shadow: none;
+  border: none;
+}
+
+.trigger--slim {
+  height: var(--ez-multi-select-input--height--slim);
+}
+
+.trigger__label {
+  /*private*/
+  position: absolute;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+  -webkit-transition: font-size .05s, top .05s;
+  transition: font-size .05s, top .05s;
+  /*public*/
+  font-family: var(--ez-multi-select-input--font-family);
+  font-size: var(--ez-multi-select-input--font-size);
+  font-weight: var(--ez-multi-select-input--font-weight);
+  color: var(--ez-multi-select-input--color);
+  top: var(--ez-multi-select-input__label--padding-top);
+  left: var(--ez-multi-select-input__label--padding-left);
+}
+
+.trigger__label--floated {
+  font-size: var(--text--extra-small);
+  color: var(--text--primary);
+  top: var(--ez-multi-select-input__label--floating--top);
+}
+
+.trigger__label--disabled {
+  color: var(--ez-multi-select-input__input--disabled--color);
+}
+
+.trigger__label--error {
+  color: var(--ez-multi-select-input__tooltip_icon--error--color);
+}
+
+.trigger__value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.trigger__value--placeholder {
+  color: var(--ez-multi-select-input__placeholder--color);
+}
+
+.trigger__value--with-label {
+  padding-top: 14px;
+}
+
+.trigger__chevron {
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  color: var(--ez-multi-select-input--color);
+}
+
+.trigger--disabled .trigger__chevron {
+  color: var(--ez-multi-select-input__input--disabled--color);
+}
+
+ez-icon.tooltip-icon {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  width: var(--ez-multi-select-input__tooltip-icon---width);
+  height: 22px;
+  margin: var(--ez-multi-select-input__tooltip-icon---vertical-margin)
+          var(--ez-multi-select-input__tooltip-icon---horizontal-margin);
+  top: 0;
+  right: var(--ez-multi-select-input__icon--width);
+  border-radius: var(--ez-multi-select-input--border-radius);
+}
+
+ez-icon.tooltip-icon.hasError {
+  --ez-icon--color: var(--ez-multi-select-input__tooltip_icon--error--color);
+}
+
+ez-popover-core ez-multi-selection-list {
+  padding: var(--space--2xs, 8px);
+  --ez-multi-selection-default-width: 100%;
+}