@sankhyalabs/ezui 5.0.7 → 5.2.0

package/dist/types/components.d.ts

@@ -23,6 +23,7 @@ import { IGuideItem } from "./components/ez-guide-navigator/interfaces";
 import { ListGroup, ListItem, TListMode } from "./components/ez-list/ez-list";
 import { THeightMode } from "./components/ez-modal/ez-modal";
 import { IMultiSelectionOption } from "./components/ez-multi-selection-list/interfaces/IMultiSelectionOption";
+import { IEzPopoverAnchorOptions } from "./components/ez-popover/ez-popover";
 import { Radio } from "./components/ez-radio-button/ez-radio-button";
 import { EzScrollDirection } from "./components/ez-scroller/EzScrollDirection";
 import { IOption as IOption1, ISearchArgument as ISearchArgument1 } from "./components/ez-combo-box/ez-combo-box";
@@ -928,10 +929,6 @@ export namespace Components {
           * Define que será fechado automaticamente quando o usuário clicar fora do conteúdo.
          */
         "autoClose": boolean;
-        /**
-          * Define a distância de baixo. Devem ser usados valores válidos de CSS.
-         */
-        "bottom": string;
         /**
           * Ajusta o comportamento da largura do popover.
          */
@@ -944,10 +941,6 @@ export namespace Components {
           * Define as tags que serão consideradas conteúdo.
          */
         "innerElement": Array<string> | string;
-        /**
-          * Define a distância do lado esquerdo. Devem ser usados valores válidos de CSS.
-         */
-        "left": string;
         /**
           * Define se o ez-popover está aberto.
          */
@@ -956,22 +949,18 @@ export namespace Components {
           * Define o tipo de overlay do popover.
          */
         "overlayType": "medium" | "light" | "none";
-        /**
-          * Define a distância do lado direito. Devem ser usados valores válidos de CSS.
-         */
-        "right": string;
         /**
           * Exibe o ez-popover.
          */
-        "show": (top?: string, left?: string, bottom?: string, right?: string) => Promise<void>;
+        "show": (top?: string, left?: string) => Promise<void>;
         /**
-          * Define a distância do topo. Devem ser usados valores válidos de CSS.
+          * Ancora a exibição do popOver a um elemento HTML.
          */
-        "top": string;
+        "showUnder": (element: HTMLElement, options?: IEzPopoverAnchorOptions) => Promise<void>;
         /**
           * Atualiza a posição do popover.
          */
-        "updatePosition": (top?: string, left?: string, bottom?: string, right?: string) => Promise<void>;
+        "updatePosition": (top?: string, left?: string) => Promise<void>;
     }
     interface EzPopup {
         /**
@@ -1143,6 +1132,11 @@ export namespace Components {
         "tabs": string | Array<Tab>;
     }
     interface EzTextArea {
+        /**
+          * Adiciona o argumento text no value do text area, seguindo as regras: - Se o cursor do mouse está posicionado em algum local do texto, o argumento será adicionado nesse local. - Se existir uma seleção no texto, o trecho selecionado deve ser substituído pelo argumento. - Se não existir seleção nem posicionamento do cursor do mouse, o argumento será adicionado no final do texto.
+          * @param text : texto que irá ser adicionado
+         */
+        "appendTextToSelection": (text: string) => Promise<void>;
         /**
           * Se false deixa de exibir a mensagem de erro dentro do campo.
          */
@@ -2790,10 +2784,6 @@ declare namespace LocalJSX {
           * Define que será fechado automaticamente quando o usuário clicar fora do conteúdo.
          */
         "autoClose"?: boolean;
-        /**
-          * Define a distância de baixo. Devem ser usados valores válidos de CSS.
-         */
-        "bottom"?: string;
         /**
           * Ajusta o comportamento da largura do popover.
          */
@@ -2802,10 +2792,6 @@ declare namespace LocalJSX {
           * Define as tags que serão consideradas conteúdo.
          */
         "innerElement"?: Array<string> | string;
-        /**
-          * Define a distância do lado esquerdo. Devem ser usados valores válidos de CSS.
-         */
-        "left"?: string;
         /**
           * Emitido quando acontece a alteração de estado do componente.
          */
@@ -2818,14 +2804,6 @@ declare namespace LocalJSX {
           * Define o tipo de overlay do popover.
          */
         "overlayType"?: "medium" | "light" | "none";
-        /**
-          * Define a distância do lado direito. Devem ser usados valores válidos de CSS.
-         */
-        "right"?: string;
-        /**
-          * Define a distância do topo. Devem ser usados valores válidos de CSS.
-         */
-        "top"?: string;
     }
     interface EzPopup {
         /**

package/package.json

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

package/dist/ezui/p-6f11ddf8.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as a,H as r,g as o}from"./p-bfc7b8ca.js";import{ElementIDUtils as i}from"@sankhyalabs/core";const s=class{constructor(a){t(this,a),this.ezChange=e(this,"ezChange",7),this.label=void 0,this.value=void 0,this.enabled=!0,this.errorMessage=void 0,this.rows=4,this.canShowError=!0,this.mode="regular"}observeErrorMessage(){var t,e,a,r;"string"==typeof this.errorMessage&&""!==this.errorMessage?(null===(t=this._container)||void 0===t||t.classList.add("hasError"),null===(e=this._messageBoxElem)||void 0===e||e.classList.add("hasError")):(null===(a=this._container)||void 0===a||a.classList.remove("hasError"),null===(r=this._messageBoxElem)||void 0===r||r.classList.remove("hasError"))}observeValue(t,e){this._inputElem&&t!=e&&(this.canChangeValue()&&(this._inputElem.value=this.value||""),this.adjustFloatingLabel(),this.errorMessage="",this.ezChange.emit(this.value))}observeMode(){null==this._initialRows&&(this._initialRows=this.rows>0?this.rows:void 0);const t=this._initialRows>0?this._initialRows:"slim"!=this.mode?4:2;t!==this.rows&&(this.rows=t)}observeRows(){const t=this.rows>0?this.rows:"slim"!=this.mode?4:2;t!==this.rows&&(this.rows=t,this._initialRows=t)}async setFocus(){this._inputElem.focus()}async setBlur(){this._inputElem.blur()}async isInvalid(){return"string"==typeof this.errorMessage&&""!==this.errorMessage.trim()}canChangeValue(){return this._inputElem&&(this.value||"")!==this._inputElem.value}adjustFloatingLabel(){if(this.label&&this._labelElem){const t=this.value&&this.value.toString().length>0,e=this._labelElem.classList.contains("textarea__label--floated");t||this.isFocused()?e||this._labelElem.classList.add("textarea__label--floated"):e&&this._labelElem.classList.remove("textarea__label--floated")}}isFocused(){return null!==this._hostElement.shadowRoot.activeElement}handleFocusout(){this.adjustFloatingLabel(),this._container&&this._container.classList.contains("textarea--focus")&&this._container.classList.remove("textarea--focus")}handleChange(){this.canChangeValue()&&(this.value=this._inputElem.value)}handleFocus(){this.label&&this._labelElem&&!this._labelElem.classList.contains("textarea__label--floated")&&this._labelElem.classList.add("textarea__label--floated"),this._container&&!this._container.classList.contains("textarea--focus")&&this._container.classList.add("textarea--focus")}componentDidLoad(){this.observeErrorMessage(),this.adjustFloatingLabel(),this.observeMode()}render(){return i.addIDInfoIfNotExists(this._hostElement,"input"),a(r,null,a("div",{class:"textarea",ref:t=>this._container=t},this.label&&"slim"!=this.mode?a("label",{ref:t=>this._labelElem=t,class:this.enabled?"textarea__label":"textarea__label textarea__label--disabled",onClick:()=>this._inputElem.focus(),title:this.label},this.label):null,a("textarea",{onFocus:()=>this.handleFocus(),"data-element-id":i.getInternalIDInfo("input"),ref:t=>this._inputElem=t,value:this.value,disabled:!this.enabled,class:"slim"===this.mode?"textarea--slim":"",placeholder:"slim"===this.mode&&this.label?this.label:"",onInput:()=>{this.handleChange()},onFocusout:()=>{this.handleFocusout()},onKeyDown:t=>t.stopPropagation(),rows:this.rows})),this.canShowError&&"slim"!=this.mode&&a("span",{class:"message-box",ref:t=>this._messageBoxElem=t,title:this.errorMessage},this.errorMessage))}get _hostElement(){return o(this)}static get watchers(){return{errorMessage:["observeErrorMessage"],value:["observeValue"],mode:["observeMode"],rows:["observeRows"]}}};s.style=":host{--text-area--width:100%;--text-area--border-radius:var(--border--radius-medium, 12px);--text-area--font-size:var(--text--medium, 14px);--text-area--font-family:var(--font-pattern, Arial);--text-area--font-weight:var(--text-weight--medium, 400);--text-area--color:var(--title--primary, #000);--text-area__input--background-color:var(--background--medium, #e0e0e0);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--text-area__input--background-color);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--text-area__input--disabled--color:var(--text--disable, #AFB6C0);--text-area__input--error--border-color:#CC2936;--text-area__message_box--font-size:var(--text--small, 12px);--text-area__message_box--info--color:var(--color--success, #22085d);--text-area__message_box--error--color:var(--color--error, #FF0000);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--text-area--width)}textarea{box-sizing:border-box;border:none;resize:none;width:100%;padding:0;background:none;font-weight:var(--text-area--font-weight);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);color:var(--text-area--color);margin-top:calc(var(--space--medium, 12px) + 4px)}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color)}.textarea{width:100%;box-sizing:border-box;padding-left:var(--space--medium);padding-right:var(--space--extra-small);border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--border-color);background-color:var(--text-area__input--background-color)}.textarea--focus{border-color:var(--text-area__input--focus--border-color)}.textarea.hasError{color:var(--text-area--color);border-color:var(--text-area__input--error--border-color)}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--text-area--font-family);font-size:var(--text-area__message_box--font-size);color:var(--text-area__message_box--info--color)}.hasError{color:var(--text-area__message_box--error--color)}.textarea__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--text-area__label--padding-right));left:var(--text-area--space--medium);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color);top:var(--text-area__label--padding-top);left:var(--text-area__label--padding-left);padding-right:var(--text-area__label--padding-right)}.textarea__label--floated{font-family:var(--text-area--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--text-area__label--floating--top)}.textarea__label--disabled{color:var(--text-area__input--disabled--color)}.textarea--slim{margin-top:var(--space--small, 6px)}.textarea--slim::-webkit-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-ms-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:disabled::-webkit-input-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled:-moz-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled::-moz-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled:-ms-input-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled::placeholder{color:var(--text-area__input--disabled--color)}";export{s as ez_text_area}

package/dist/ezui/p-e8a29680.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as o,H as s,g as e}from"./p-bfc7b8ca.js";import{FloatingManager as r}from"@sankhyalabs/core";const h=class{constructor(o){t(this,o),this.ezVisibilityChange=i(this,"ezVisibilityChange",7),this._firstRender=!0,this.innerClickTest=(t,i,o)=>{const s=[t];this.innerElement&&("string"==typeof this.innerElement?s.push(document.querySelector(`#${this.innerElement}`)):this.innerElement.forEach((t=>{s.push(document.querySelector(`#${t}`))})));const e=(null==o?void 0:o.composedPath())||[];for(var r=0;r<s.length;r++){let t=s[r];if(null!=t){if(e.includes(t))return!0;if(t.contains(i))return!0;if(o&&"nodeType"in(null==o?void 0:o.target)&&t.contains(o.target))return!0;if(t.shadowRoot&&t.shadowRoot.contains(i))return!0;if(t=this._host,t.lastElementChild.shadowRoot?t.lastElementChild.shadowRoot.contains(i):t.contains(i))return!0}}return!1},this.backClickListener=()=>{this.ezVisibilityChange.emit(!1)},this.autoClose=!0,this.top="0px",this.left="0px",this.bottom="0px",this.right="0px",this.boxWidth="fit-content",this.opened=void 0,this.innerElement=void 0,this.overlayType="light"}observeOpened(t,i){t!=i&&(i?this.hide():this.show(),this.ezVisibilityChange.emit(t))}async updatePosition(t=this.top,i=this.left,o=this.bottom,s=this.right){r.updateFloatPosition(this._box,this._container,{autoClose:this.autoClose,top:t,left:i,bottom:o,right:s,innerClickTest:this.innerClickTest,backClickListener:this.backClickListener})}async show(t=this.top,i=this.left,o=this.bottom,s=this.right){const e="none"!==this.overlayType,h=`ez-scrim ez-scrim--${this.overlayType}`;let n={autoClose:this.autoClose,top:t,left:i,bottom:o,right:s,innerClickTest:this.innerClickTest,backClickListener:this.backClickListener};e&&(n=Object.assign(Object.assign({},n),{autoClose:!0,useOverlay:e,overlayClassName:h})),this._floatingID=r.float(this._box,this._container,n),this.opened=!0}async hide(){void 0!==this._floatingID&&(r.close(this._floatingID),this._floatingID=void 0,this.opened=!1)}componentDidRender(){this._firstRender&&(this._box.remove(),this._firstRender=!1)}render(){return o(s,null,o("section",{ref:t=>this._container=t},o("div",{class:"popover__box "+("fit-content"===this.boxWidth?"popover__box--fit-content":"popover__box--full-width"),ref:t=>this._box=t},o("slot",null))))}get _host(){return e(this)}static get watchers(){return{opened:["observeOpened"]}}};h.style=":host{--ez-popover__box--border-radius:var(--border--radius-medium, 12px);--ez-popover__box--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-popover__box--background-color:var(--background--xlight, #fff);--ez-popover__box--z-index:var(--most-visible, 3);position:relative;display:flex;user-select:none}.popover__box{z-index:var(--ez-popover__box--z-index);display:flex;flex-direction:column;height:fit-content;background-color:var(--ez-popover__box--background-color);border-radius:var(--ez-popover__box--border-radius);box-shadow:var(--ez-popover__box--box-shadow)}.popover__box--fit-content{width:fit-content}.popover__box--full-width{width:100%}";export{h as ez_popover}