@sankhyalabs/ezui 6.1.0 → 6.2.0

package/dist/custom-elements/index.js

@@ -5382,6 +5382,34 @@ const EzDropdown$1 = class extends HTMLElement$1 {
   static get style() { return ezDropdownCss; }
 };
 
+const ezEmptyCardCss = ":host{--ez-empty-card--width:335px;--ez-empty-card--height:155px;--ez-empty-card--padding:var(--space--24, 24px);--ez-empty-card--border-radius:var(--border--radius-24, 24px);--ez-empty-card--background-color:var(--color--gray-70, #ffffff)}div{width:var(--ez-empty-card--custom-width, var(--ez-empty-card--width));height:var(--ez-empty-card--custom-height, var(--ez-empty-card--height));border-radius:var(--ez-empty-card--border-radius);background-color:var(--ez-empty-card--background-color);padding:var(--ez-empty-card--padding);display:block;overflow:hidden;outline:none;box-shadow:none;border:none;box-sizing:border-box}.gray{--ez-empty-card--background-color:var(--color--gray-80)}.green{--ez-empty-card--background-color:var(--color--ocean-green-90)}.yellow{--ez-empty-card--background-color:var(--color--yellow-100)}.red{--ez-empty-card--background-color:var(--color--red-100)}.petroleum{--ez-empty-card--background-color:var(--color--petroleum-90)}";
+
+const EzEmptyCard$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.color = "default";
+    this.height = undefined;
+    this.width = undefined;
+  }
+  componentDidRender() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._container) {
+      const dataInfo = { id: 'container' };
+      ElementIDUtils.addIDInfo(this._container, 'empty-card', dataInfo);
+    }
+  }
+  render() {
+    const customStyleVars = Object.assign(Object.assign({}, (this.height ? { '--ez-empty-card--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-empty-card--custom-width': `${this.width}px` } : {}));
+    return (h(Host, { style: customStyleVars }, h("div", { ref: element => this._container = element, class: `card_container ${this.color}` }, h("slot", null))));
+  }
+  get _element() { return this; }
+  static get style() { return ezEmptyCardCss; }
+};
+
 const ezFileItemCss = ":host{display:flex;width:100%;--ez-file-item--height:42px;--ez-file-item--padding:9px;--ez-file-item--border-radius:var(--border--radius-medium, 12px);--ez-file-item--border-color:var(--color--strokes, #DCE0E8);--ez-file-item--border-style:var(--border--small, 1px solid);--ez-file-item--font-family:var(--font-pattern, Arial);--ez-file-item--font-size:var(--text--medium, 14px);--ez-file-item--font-weight:var(--text-weight--medium, 400);--ez-file-item--color:var(--title--primary, #2B3A54);--ez-file-item__file-size--font-weight:var(--text-weight--large, 600);--ez-file-item__file-size--color:var(--color--primary, #008561);--ez-file-item__background-progress--color:var(--color--primary-300, E2F4EF);--ez-file-item--icon-color:var(--title--primary, #2B3A54)}.box{display:flex;box-sizing:border-box;position:relative;align-items:center;justify-content:space-between;width:100%;padding:var(--ez-file-item--padding);border:var(--ez-file-item--border-color) var(--ez-file-item--border-style);border-radius:var(--ez-file-item--border-radius);height:var(--ez-file-item--height)}.box::before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;clip-path:inset(2px calc(var(--ez-file-item--upload-progress, 0%) + 2px) 2px 2px round calc(var(--ez-file-item--border-radius) - 4px));background-color:var(--ez-file-item__background-progress--color)}.content{display:flex;align-items:center;z-index:0;overflow:hidden}.file-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item--font-weight);color:var(--ez-file-item--color)}.file-type-icon{flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color);padding-right:var(--ez-file-item--padding)}.file-size{padding-left:2px;overflow:hidden;flex-shrink:0;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item__file-size--font-weight);color:var(--ez-file-item__file-size--color)}.btn-remove{cursor:pointer;flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color)}";
 
 const EzFileItem$1 = class extends HTMLElement$1 {
@@ -82450,6 +82478,38 @@ const EzTabselector$1 = class extends HTMLElement$1 {
   static get style() { return ezTabselectorCss; }
 };
 
+const ezTagCss = ":host{--ez-tag--padding-x:var(--space--8, 8px);--ez-tag--padding-y:var(--space--4, 4px);--ez-tag--min-width:var(--space--6, 6px);--ez-tag--min-height:var(--space--14, 14px);--ez-tag--border-radius:var(--border--radius-24, 24px);--ez-tag--background-color:var(--color--ocean-green-600, #008561);--ez-tag_label--font-weight:var(--font-weight--regular, 400);--ez-tag_label--font-size:var(--font-size--default, 14px);--ez-tag_label--color:var(--color--gray-70, #FFFFFF)}.tag{background-color:var(--ez-tag--custom-background-color, var(--ez-tag--background-color));padding:var(--ez-tag--padding-y) var(--ez-tag--padding-x);border-radius:var(--ez-tag--border-radius);min-width:var(--ez-tag--min-width);min-height:var(--ez-tag--min-height);display:inline-flex;justify-content:center;align-items:center}label{font-weight:var(--ez-tag_label--font-weight);font-size:var(--ez-tag_label--font-size);color:var(--ez-tag_label--custom-color, var(--ez-tag_label--color));font-family:var(--font--pattern, Arial);line-height:var(--ez-tag_label--font-size);text-align:center;line-height:normal}.light-ocean-green{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--ocean-green-100));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--ocean-green-600))}.green{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--green-600));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--gray-70))}.light-green{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--green-200));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--green-600))}.yellow{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--yellow-600));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--yellow-900))}.light-yellow{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--yellow-200));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--yellow-800))}.red{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--red-600));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--gray-70))}.light-red{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--red-200));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--red-600))}.gray{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--gray-500));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--gray-100))}.light-gray{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--gray-100));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--gray-400))}.petroleum{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--petroleum-600));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--petroleum-200))}.light-petroleum{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--petroleum-100));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--petroleum-400))}";
+
+const EzTag$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.label = undefined;
+    this.color = "ocean-green";
+    this.customBackgroundColor = undefined;
+    this.customLabelColor = undefined;
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._tag) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._tag, 'EzTag', dataInfo);
+    }
+  }
+  validateLabel() {
+    return (this.label) && this.label.trim() !== "";
+  }
+  render() {
+    const customStyleVars = Object.assign({}, this.customBackgroundColor && { '--ez-tag--custom-background-color': `var(${this.customBackgroundColor})` }, this.customLabelColor && { '--ez-tag_label--custom-color': `var(${this.customLabelColor})` });
+    return (h(Host, { style: customStyleVars }, h("div", { ref: el => { this._tag = el; }, class: `tag ${this.color || ''}` }, this.validateLabel() && h("label", { title: this.label }, this.label))));
+  }
+  get _element() { return this; }
+  static get style() { return ezTagCss; }
+};
+
 const ezTextAreaCss = ":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, #2B3A54);--text-area__input--background-color:var(--background--light, #FFFFFF);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--color--strokes,#DCE0E8);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--background--medium, #F0F3F7);--text-area__input--disabled--color:var(--text--primary, #626E82);--text-area__input--disabled--border--color:var(--color--strokes,#DCE0E8);--text-area__input--error--border-color:var(--color-alert--error-800,#BD0025);--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-alert--error-800,#BD0025);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;--text-area__scrollbar--color-default:var(--scrollbar--default, #626e82);--text-area__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--text-area__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--text-area__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--text-area__scrollbar--border-radius:var(--border--radius-small, 6px);--text-area__scrollbar--width:var(--space--small, 6px);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;min-height:42px;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);scrollbar-width:thin;scrollbar-color:var(--text-area__scrollbar--color-clicked) var(--text-area__scrollbar--color-background)}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color);border:var(--text-area__input--disabled--border);cursor:not-allowed}textarea::-webkit-scrollbar{background-color:var(--text-area__scrollbar--color-background);width:var(--text-area__scrollbar--width);max-width:var(--text-area__scrollbar--width);min-width:var(--text-area__scrollbar--width)}textarea::-webkit-scrollbar-thumb{background-color:var(--text-area__scrollbar--color-default);border-radius:var(--text-area__scrollbar--border-radius)}textarea::-webkit-scrollbar-track{background-color:var(--text-area__scrollbar--color-background);border-radius:var(--text-area__scrollbar--border-radius)}textarea::-webkit-scrollbar-thumb:vertical:hover,textarea::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--text-area__scrollbar--color-hover)}textarea::-webkit-scrollbar-thumb:vertical:active,textarea::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--text-area__scrollbar--color-clicked)}.textarea{width:100%;min-height:42px;max-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--disabled{border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--disabled--border--color);background-color:var(--text-area__input--disabled--background-color);cursor:not-allowed}.textarea--resizable{resize:vertical}.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);cursor:not-allowed}.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,.textarea--slim:disabled:-moz-placeholder,.textarea--slim:disabled::-moz-placeholder,.textarea--slim:disabled:-ms-input-placeholder,.textarea--slim:disabled::placeholder{color:var(--text-area__input--disabled--color);cursor:not-allowed}";
 
 const EzTextArea$1 = class extends HTMLElement$1 {
@@ -83165,6 +83225,135 @@ const EzTextInput$1 = class extends HTMLElement$1 {
   static get style() { return ezTextInputCss; }
 };
 
+const ezTileCss = ":host{--ez-tile--width:120px;--ez-tile--height:80px;--ez-tile--padding:var(--space--12, 12px);--ez-tile--icon--margin-bottom:var(--space--8);--ez-tile--border-radius:var(--border--radius-16, 16px);--ez-tile--background-color:var(--color--gray-70, #ffffff);--ez-tile--color:var(--color--ocean-green-900, #003D2D);--ez-tile--icon-color:var(--color--ocean-green-400, #42A58A);--ez-tile--hover-background-color:var(--color--gray-80, #F9F9F9);--ez-tile--hover-color:var(--color--ocean-green-900, #003D2D);--ez-tile--hover-icon-color:var(--color--ocean-green-400, #42A58A);--ez-tile--focus-visible-border:2px solid var(--color--petroleum-400, #626D80);--ez-tile--font-family:var(--font-pattern, Arial);--ez-tile--font-weight:var(--font-weight--regular, 400);--ez-tile--font-size:var(--font-size--default, 14px);--ez-tile--title-line-height:var(--line-height--20, 20px);--ez-tile--icon-line-height:var(--line-height--24, 24px)}button{display:flex;flex-wrap:wrap;align-content:space-between;overflow:hidden;outline:none;box-shadow:none;width:var(--ez-tile--custom-width, var(--ez-tile--width));height:var(--ez-tile--custom-height, var(--ez-tile--height));border-radius:var(--ez-tile--border-radius);background-color:var(--ez-tile--background-color);color:var(--ez-tile--color);box-sizing:border-box;padding:var(--ez-tile--padding);border:2px solid var(--ez-tile--background-color)}button:focus-visible{border:var(--ez-tile--focus-visible-border)}.medium{--ez-tile--width:var(--ez-tile--custom-width, 120px);--ez-tile--height:var(--ez-tile--custom-height, 170px)}.isInteractive:hover,.isInteractive:focus{--ez-icon--color:var(--ez-tile--hover-icon-color);--ez-tile--background-color:var(--ez-tile--hover-background-color);--ez-tile--color:var(--ez-tile--hover-color);cursor:pointer}span{-webkit-line-clamp:var(--ez-tile--custom-maximum-lines, 1);line-clamp:var(--ez-tile--custom-maximum-lines,1);font-family:var(--ez-tile--font-family);font-weight:var(--ez-tile--font-weight);font-size:var(--ez-tile--font-size);line-height:var(--ez-tile--title-line-height);display:-webkit-box;-webkit-box-orient:vertical;width:100%;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:pre-wrap}ez-icon{--ez-icon--color:var(--ez-tile--icon-color);margin-bottom:var(--ez-tile--icon--margin-bottom);line-height:var(--ez-tile--icon-line-height)}.isInteractive:hover,.isInteractive:focus{outline:none}.green{--ez-tile--background-color:var(--color--ocean-green-90);--ez-tile--icon-color:var(--color--ocean-green-500)}.isInteractive.green:hover,.isInteractive.green:focus{--ez-tile--hover-background-color:var(--color--ocean-green-100);--ez-tile--icon-color:var(--color--ocean-green-500);outline:none}.gray{--ez-tile--background-color:var(--color--gray-80);--ez-tile--icon-color:var(--color--ocean-green-400)}.isInteractive.gray:hover,.isInteractive.gray:focus{--ez-tile--hover-background-color:var(--color--gray-90);--ez-tile--hover-icon-color:var(--color--ocean-green-400)}.red{--ez-tile--background-color:var(--color--red-100);--ez-tile--icon-color:var(--color--red-300)}.isInteractive.red:hover,.isInteractive.red:focus{--ez-tile--hover-background-color:var(--color--red-200);--ez-tile--hover-icon-color:var(--color--red-300)}.yellow{--ez-tile--background-color:var(--color--yellow-100);--ez-tile--icon-color:var(--color--yellow-400)}.isInteractive.yellow:hover,.isInteractive.yellow:focus{--ez-tile--hover-background-color:var(--color--yellow-200);--ez-tile--hover-icon-color:var(--color--yellow-400)}";
+
+const EzTile$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.tileClick = createEvent(this, "tileClick", 7);
+    this.text = undefined;
+    this.size = "small";
+    this.height = undefined;
+    this.width = undefined;
+    this.color = "default";
+    this.iconName = "home";
+    this.maximumLines = undefined;
+    this.isInteractive = false;
+  }
+  /**
+   * Aplica o foco no componente.
+   */
+  async setFocus() {
+    this._container.focus();
+  }
+  /**
+   * Remove o foco do componente.
+   */
+  async setBlur() {
+    this._container.blur();
+  }
+  clickListener(evt) {
+    if (!this.isInteractive) {
+      evt.stopImmediatePropagation();
+    }
+  }
+  handleClick() {
+    if (this.isInteractive) {
+      this.tileClick.emit();
+    }
+  }
+  componentDidRender() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._container) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._container, 'tile-button', dataInfo);
+    }
+  }
+  render() {
+    const customStyleVars = Object.assign(Object.assign(Object.assign({}, (this.height ? { '--ez-tile--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-tile--custom-width': `${this.width}px` } : {})), (this.maximumLines ? { '--ez-tile--custom-maximum-lines': `${this.maximumLines}` } : {}));
+    return (h(Host, { style: customStyleVars }, h("button", { ref: element => this._container = element, class: `${this.color} ${this.size} ${this.isInteractive ? "isInteractive" : ""}`, onClick: () => this.handleClick() }, h("ez-icon", { class: "icon", iconName: this.iconName, size: "large" }), h("span", { title: this.text }, this.text))));
+  }
+  get _element() { return this; }
+  static get style() { return ezTileCss; }
+};
+
+const ezTileMediumCss = ":host{--ez-tile-medium--width:446px;--ez-tile-medium--height:257px;--ez-tile-medium--padding:var(--space--24, 24px);--ez-tile-medium--border-radius:var(--border--radius-16, 16px);--ez-tile-medium--background-color:var(--color--ocean-gray-70, #ffffff);--ez-tile-medium--color:var(--color--ocean-green-900, #003D2D);--ez-tile-medium--icon-color:var(--color--ocean-green-400, #42A58A);--ez-tile-medium--font-family:var(--font-pattern, Arial);--ez-tile-medium--header-gap:var(--space--16, 16px);--ez-tile-medium--icon-line-height:var(--line-height--30, 30px);--ez-tile-medium--tag-group-gap:var(--space--4, 4px);--ez-tile-medium_button--background-color:var(--color--ocean-green-600, #1A9171);--ez-tile-medium_button--color:var(--color--gray-70, #ffffff);--ez-tile-medium_button--hover--background-color:var(--color--ocean-green-700, #00684C);--ez-tile-medium_button--hover-color:var(--color--gray-70, #ffffff);--ez-tile-medium_button--active--background-color:var(--color--ocean-green-500, #1A9171);--ez-tile-medium_button--active-color:var(--color--gray-70, #ffffff)}.tile-medium_container{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;overflow:hidden;outline:none;box-shadow:none;width:var(--ez-tile-medium--custom-width, var(--ez-tile-medium--width));height:var(--ez-tile-medium--custom-height, var(--ez-tile-medium--height));border-radius:var(--ez-tile-medium--border-radius);background-color:var(--ez-tile-medium--background-color);color:var(--ez-tile-medium--color);box-sizing:border-box;padding:var(--ez-tile-medium--padding)}.tile-medium_header{display:flex;flex-direction:row;align-items:flex-start;align-self:stretch;width:100%;gap:var(--ez-tile-medium--header-gap)}.tile-medium_header-image{display:flex;align-items:flex-start;gap:var(--space--10, 10px);flex:1 0 0}.tag_group{display:flex;flex-direction:row;gap:var(--ez-tile-medium--tag-group-gap);flex-wrap:wrap;justify-content:flex-end}.tile-medium_content{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:var(--space--14, 14px);align-self:stretch}span{font-family:var(--ez-tile-medium--font-family);display:-webkit-box;-webkit-box-orient:vertical;width:100%;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:pre-wrap;align-self:stretch;font-style:normal}.small_title{color:var(--color--gray-400, #77777A);font-size:var(--font-size--default, 14px);font-weight:var(--font-weight--regular);line-height:var(--line-height--20, 20px);-webkit-line-clamp:var(--ez-tile-medium--small-title--maximum-lines, 1);line-clamp:var(--ez-tile-medium--small-title--maximum-lines,1)}.main_title{color:var(--color--ocean-green-900, #003D2D);font-size:var(--font-size--xxlarge, 22px);font-weight:var(--font-weight--bold);line-height:var(--line-height--32, 32px);-webkit-line-clamp:var(--ez-tile-medium--title--maximum-lines, 1);line-clamp:var(--ez-tile-medium--title--maximum-lines,1)}.description{color:var(--color--ocean-green-900, #003D2D);font-size:var(--font-size--default, 14px);font-weight:var(--font-weight--regular);line-height:var(--line-height--24, 24px);-webkit-line-clamp:var(--ez-tile-medium--description--maximum-lines, 3);line-clamp:var(--ez-tile-medium--description--maximum-lines, 3)}.tile-medium_button{--ez-button--background-color:var(--ez-tile-medium_button--background-color);--ez-button--color:var(--ez-tile-medium_button--color);--ez-button--hover--background-color:var(--ez-tile-medium_button--hover--background-color);--ez-button--hover-color:var(--ez-tile-medium_button--hover-color);--ez-button--active--background-color:var(--ez-tile-medium_button--active--background-color);--ez-button--active-color:var(--ez-tile-medium_button--active-color)}ez-icon{--ez-icon--color:var(--ez-tile-medium--custom-icon-color, var(--ez-tile-medium--icon-color));line-height:var(--ez-tile-medium--icon-line-height)}.green{--ez-tile-medium--background-color:var(--color--ocean-green-90);--ez-tile-medium--icon-color:var(--ez-tile-medium--custom-icon-color, var(--color--ocean-green-500))}.gray{--ez-tile-medium--background-color:var(--color--gray-80);--ez-tile-medium--icon-color:var(--ez-tile-medium--custom-icon-color, var(--color--ocean-green-400))}.red{--ez-tile-medium--background-color:var(--color--red-100);--ez-tile-medium--icon-color:var(--ez-tile-medium--custom-icon-color, var(--color--red-300))}.yellow{--ez-tile-medium--background-color:var(--color--yellow-100);--ez-tile-medium--icon-color:var(--ez-tile-medium--custom-icon-color, var(--color--yellow-400))}";
+
+const EzTileMedium$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.color = "default";
+    this.iconName = undefined;
+    this.iconColor = undefined;
+    this.smallTitleText = undefined;
+    this.smallTitleMaximumLines = undefined;
+    this.titleText = undefined;
+    this.titleMaximumLines = undefined;
+    this.descriptionText = undefined;
+    this.descriptionMaximumLines = undefined;
+    this.height = undefined;
+    this.width = undefined;
+    this.avatarProps = undefined;
+    this.buttonProps = undefined;
+    this.tags = undefined;
+  }
+  /**
+   * Aplica o foco no botão.
+   */
+  async setButtonFocus() {
+    var _a;
+    if (!this._button)
+      return;
+    (_a = this._button) === null || _a === void 0 ? void 0 : _a.setFocus();
+  }
+  /**
+   * Remove o foco do botão.
+   */
+  async setButtonBlur() {
+    var _a;
+    if (!this._button)
+      return;
+    (_a = this._button) === null || _a === void 0 ? void 0 : _a.setBlur();
+  }
+  renderBadges() {
+    if (!this.tags || this.tags.length === 0)
+      return null;
+    return this.tags.slice(0, 3).map((tag, index) => (h("ez-badge", { id: `tag-${tag.label}`, key: `tag-${index}`, label: tag.label, size: 'medium', style: { "--ez-badge--background-color": `var(${tag.color}, #008561)` } })));
+  }
+  setCustomCSSProperties() {
+    var _a, _b;
+    const colors = (_b = (_a = this.buttonProps) === null || _a === void 0 ? void 0 : _a.colors) !== null && _b !== void 0 ? _b : {};
+    const { background, backgroundHover, backgroundActive, text, textHover, textActive } = colors;
+    const customCSSVars = Object.assign({}, this.height && { '--ez-tile-medium--custom-height': `${this.height}` }, this.width && { '--ez-tile-medium--custom-width': `${this.width}` }, this.smallTitleMaximumLines && { '--ez-tile-medium--small-title--maximum-lines': `${this.smallTitleMaximumLines}` }, this.titleMaximumLines && { '--ez-tile-medium--title--maximum-lines': `${this.titleMaximumLines}` }, this.descriptionMaximumLines && { '--ez-tile-medium--description--maximum-lines': `${this.descriptionMaximumLines}` }, this.iconColor && { '--ez-tile-medium--custom-icon-color': `var(${this.iconColor})` }, (background && { "--ez-tile-medium_button--background-color": `var(${background}, #008561)` }), (backgroundHover && { "--ez-tile-medium_button--hover--background-color": `var(${backgroundHover}, #00684C)` }), (backgroundActive && { "--ez-tile-medium_button--active--background-color": `var(${backgroundActive}, #1A9171)` }), (text && { "--ez-tile-medium_button--color": `var(${text}, #ffffff)` }), (textHover && { "--ez-tile-medium_button--hover-color": `var(${textHover}, #ffffff)` }), (textActive && { "--ez-tile-medium_button--active-color": `var(${textActive}, #ffffff)` }));
+    return customCSSVars;
+  }
+  componentDidLoad() {
+    this.setCustomCSSProperties();
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._button) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._button, 'tile-medium_button', dataInfo);
+    }
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    return (h(Host, { style: this.setCustomCSSProperties() }, h("div", { class: `tile-medium_container ${this.color}` }, h("div", { class: `tile-medium_header` }, h("div", { class: "tile-medium_header-image" }, this.avatarProps
+      ? h("ez-avatar", { size: "60", name: (_a = this.avatarProps) === null || _a === void 0 ? void 0 : _a.name, imageSrc: (_b = this.avatarProps) === null || _b === void 0 ? void 0 : _b.imageSrc, shape: ((_c = this.avatarProps) === null || _c === void 0 ? void 0 : _c.shape) || "square" })
+      : this.iconName && h("ez-icon", { size: "x-large", class: "icon", iconName: this.iconName })), h("div", { class: `tag_group` }, this.renderBadges())), h("div", { class: "tile-medium_content" }, h("div", null, this.smallTitleText && h("span", { class: "small_title", title: this.smallTitleText }, this.smallTitleText), this.titleText && h("span", { class: "main_title", title: this.titleText }, this.titleText), this.descriptionText && h("span", { class: "description", title: this.descriptionText }, this.descriptionText)), this.buttonProps &&
+      h("ez-button", { ref: el => this._button = el, class: "tile-medium_button", label: ((_d = this.buttonProps) === null || _d === void 0 ? void 0 : _d.label) || undefined, enabled: (_f = (_e = this.buttonProps) === null || _e === void 0 ? void 0 : _e.enabled) !== null && _f !== void 0 ? _f : true, mode: (_g = this.buttonProps) === null || _g === void 0 ? void 0 : _g.mode, iconName: (_h = this.buttonProps) === null || _h === void 0 ? void 0 : _h.iconName, size: (_j = this.buttonProps) === null || _j === void 0 ? void 0 : _j.size, onClick: (_k = this.buttonProps) === null || _k === void 0 ? void 0 : _k.onClick })))));
+  }
+  get _element() { return this; }
+  static get style() { return ezTileMediumCss; }
+};
+
 const ezTimeInputCss = ":host{display:flex;flex-wrap:wrap;position:relative;width:100%}.time__input{height:100%}";
 
 const EzTimeInput$1 = class extends HTMLElement$1 {
@@ -84151,6 +84340,35 @@ const EzTree$1 = class extends HTMLElement$1 {
   static get style() { return ezTreeCss; }
 };
 
+const ezUnderfaceCss = ":host{--ez-underface--width:693px;--ez-underface--height:247px;--ez-underface--padding:var(--space--24, 24px);--ez-underface--border-radius:var(--border--radius-26, 26px)}div{width:var(--ez-underface--custom-width, var(--ez-underface--width));height:var(--ez-underface--custom-height, var(--ez-underface--height));border-radius:var(--ez-underface--border-radius);padding:var(--ez-underface--padding);display:block;overflow:hidden;outline:none;box-shadow:none;border:none;box-sizing:border-box;background-color:var(--ez-underface--custom-background-color, var(--color--petroleum-700, #222D42))}.light-green{background-color:var(--ez-underface--custom-background-color, var(--color--ocean-green-90))}.green{background-color:var(--ez-underface--custom-background-color, var(--color--green-600))}.light-gray{background-color:var(--ez-underface--custom-background-color, var(--color--gray-80))}.dark-petroleum{background-color:var(--ez-underface--custom-background-color, var(--color--petroleum-900))}.ocean-green{background-color:var(--ez-underface--custom-background-color, var(--color--ocean-green-600))}";
+
+const EzUnderface$1 = class extends HTMLElement$1 {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.color = "default";
+    this.customColor = undefined;
+    this.height = undefined;
+    this.width = undefined;
+  }
+  componentDidRender() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._container) {
+      const dataInfo = { id: 'container' };
+      ElementIDUtils.addIDInfo(this._container, 'underface', dataInfo);
+    }
+  }
+  render() {
+    const customStyleVars = Object.assign({}, this.customColor && { '--ez-underface--custom-background-color': `var(${this.customColor})` }, this.height && { '--ez-underface--custom-height': `${this.height}px` }, this.width && { '--ez-underface--custom-width': `${this.width}px` });
+    return (h(Host, { style: customStyleVars }, h("div", { ref: element => this._container = element, class: `underface_container ${this.color}` }, h("slot", null))));
+  }
+  get _element() { return this; }
+  static get style() { return ezUnderfaceCss; }
+};
+
 class RemoteFile {
   constructor(file) {
     this.file = file;
@@ -84893,6 +85111,7 @@ const EzDateTimeInput = /*@__PURE__*/proxyCustomElement(EzDateTimeInput$1, [1,"e
 const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"dialogType":[1025,"dialog-type"],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"beforeClose":[1040]}]);
 const EzDoubleList = /*@__PURE__*/proxyCustomElement(EzDoubleList$1, [2,"ez-double-list",{"leftList":[1040],"leftTitle":[1,"left-title"],"rightList":[1040],"entityLabel":[1,"entity-label"],"entityLabelPlural":[1,"entity-label-plural"],"leftListLabel":[1,"left-list-label"],"rightListLabel":[1,"right-list-label"],"useOnlyRightList":[4,"use-only-right-list"],"rightTitle":[1,"right-title"],"emptyMessage":[16],"slotsListBuilder":[1040],"leftFilteredList":[32],"rightFilteredList":[32],"selectedLeftList":[32],"selectedRightList":[32],"isFilteringLeft":[32],"isFilteringRight":[32]}]);
 const EzDropdown = /*@__PURE__*/proxyCustomElement(EzDropdown$1, [1,"ez-dropdown",{"items":[1040],"value":[1040],"itemBuilder":[16]},[[4,"click","handleClickOutside"]]]);
+const EzEmptyCard = /*@__PURE__*/proxyCustomElement(EzEmptyCard$1, [1,"ez-empty-card",{"color":[513],"height":[514],"width":[514]}]);
 const EzFileItem = /*@__PURE__*/proxyCustomElement(EzFileItem$1, [1,"ez-file-item",{"canRemove":[4,"can-remove"],"fileName":[1,"file-name"],"iconName":[1,"icon-name"],"fileSize":[2,"file-size"],"progress":[2]}]);
 const EzFilterInput = /*@__PURE__*/proxyCustomElement(EzFilterInput$1, [1,"ez-filter-input",{"label":[1],"value":[1537],"enabled":[4],"errorMessage":[1537,"error-message"],"restrict":[1],"mode":[513],"asyncSearch":[516,"async-search"],"canShowError":[516,"can-show-error"],"autoFocus":[4,"auto-focus"]}]);
 const EzForm = /*@__PURE__*/proxyCustomElement(EzForm$1, [2,"ez-form",{"dataUnit":[1040],"config":[16],"recordsValidator":[16],"fieldToFocus":[1,"field-to-focus"],"onlyStaticFields":[4,"only-static-fields"],"useSearchField":[4,"use-search-field"],"elementFocusSearchField":[16],"_fieldsProps":[32],"_singleColumn":[32]}]);
@@ -84923,13 +85142,17 @@ const EzSplitButton = /*@__PURE__*/proxyCustomElement(EzSplitButton$1, [1,"ez-sp
 const EzSplitItem = /*@__PURE__*/proxyCustomElement(SplitItem, [4,"ez-split-item",{"label":[1],"enableExpand":[516,"enable-expand"],"size":[1],"structural":[4],"_expanded":[32]}]);
 const EzSplitPanel = /*@__PURE__*/proxyCustomElement(SplitPanel, [0,"ez-split-panel",{"direction":[1],"anchorToExpand":[4,"anchor-to-expand"],"structural":[4]}]);
 const EzTabselector = /*@__PURE__*/proxyCustomElement(EzTabselector$1, [1,"ez-tabselector",{"selectedIndex":[1538,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1],"_processedTabs":[32]}]);
+const EzTag = /*@__PURE__*/proxyCustomElement(EzTag$1, [1,"ez-tag",{"label":[513],"color":[513],"customBackgroundColor":[1,"custom-background-color"],"customLabelColor":[1,"custom-label-color"]}]);
 const EzTextArea = /*@__PURE__*/proxyCustomElement(EzTextArea$1, [1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"canShowError":[516,"can-show-error"],"mode":[513],"enableResize":[516,"enable-resize"],"autoRows":[516,"auto-rows"],"autoFocus":[4,"auto-focus"],"alternativePlaceholder":[513,"alternative-placeholder"],"forceLabelFloat":[32]}]);
 const EzTextEdit = /*@__PURE__*/proxyCustomElement(EzTextEdit$1, [1,"ez-text-edit",{"value":[1],"styled":[16],"_newValue":[32]}]);
 const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"alternativePlaceholder":[513,"alternative-placeholder"],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"hasInvalid":[1540,"has-invalid"],"mask":[1],"cleanValueMask":[4,"clean-value-mask"],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"password":[4],"autoFocus":[4,"auto-focus"],"hasRightSlotContent":[32],"forceLabelFloat":[32]}]);
+const EzTile = /*@__PURE__*/proxyCustomElement(EzTile$1, [1,"ez-tile",{"text":[513],"size":[513],"height":[514],"width":[514],"color":[513],"iconName":[513,"icon-name"],"maximumLines":[514,"maximum-lines"],"isInteractive":[516,"is-interactive"]},[[2,"click","clickListener"]]]);
+const EzTileMedium = /*@__PURE__*/proxyCustomElement(EzTileMedium$1, [1,"ez-tile-medium",{"color":[1],"iconName":[1,"icon-name"],"iconColor":[1,"icon-color"],"smallTitleText":[1,"small-title-text"],"smallTitleMaximumLines":[2,"small-title-maximum-lines"],"titleText":[1,"title-text"],"titleMaximumLines":[2,"title-maximum-lines"],"descriptionText":[1,"description-text"],"descriptionMaximumLines":[2,"description-maximum-lines"],"height":[1],"width":[1],"avatarProps":[16],"buttonProps":[16],"tags":[16]}]);
 const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"canShowError":[516,"can-show-error"],"autoFocus":[4,"auto-focus"],"alternativePlaceholder":[1,"alternative-placeholder"]}]);
 const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"]}]);
 const EzTooltip = /*@__PURE__*/proxyCustomElement(EzTooltip$1, [1,"ez-tooltip",{"message":[1],"anchoringElement":[16],"placement":[1],"gapOptions":[16],"type":[1],"debouncingTime":[2,"debouncing-time"],"active":[4],"maxWidth":[2,"max-width"],"useAnchorSize":[4,"use-anchor-size"]}]);
 const EzTree = /*@__PURE__*/proxyCustomElement(EzTree$1, [1,"ez-tree",{"items":[1040],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_tree":[32],"_waintingForLoad":[32]},[[2,"keydown","onKeyDownListener"]]]);
+const EzUnderface = /*@__PURE__*/proxyCustomElement(EzUnderface$1, [1,"ez-underface",{"color":[513],"customColor":[513,"custom-color"],"height":[514],"width":[514]}]);
 const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"label":[1],"subtitle":[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]}]);
 const EzViewStack = /*@__PURE__*/proxyCustomElement(EzViewStack$1, [0,"ez-view-stack"]);
 const FilterColumn = /*@__PURE__*/proxyCustomElement(FilterColumn$1, [0,"filter-column",{"opened":[4],"columnName":[1,"column-name"],"columnLabel":[1,"column-label"],"gridHeaderHidden":[4,"grid-header-hidden"],"noHeaderTaskBar":[1028,"no-header-task-bar"],"dataSource":[16],"dataUnit":[16],"options":[1040],"selectedItems":[32],"fieldDescriptor":[32],"useOptions":[32],"isTextSearch":[32]}]);
@@ -84960,6 +85183,7 @@ const defineCustomElements = (opts) => {
   EzDialog,
   EzDoubleList,
   EzDropdown,
+  EzEmptyCard,
   EzFileItem,
   EzFilterInput,
   EzForm,
@@ -84990,13 +85214,17 @@ const defineCustomElements = (opts) => {
   EzSplitItem,
   EzSplitPanel,
   EzTabselector,
+  EzTag,
   EzTextArea,
   EzTextEdit,
   EzTextInput,
+  EzTile,
+  EzTileMedium,
   EzTimeInput,
   EzToast,
   EzTooltip,
   EzTree,
+  EzUnderface,
   EzUpload,
   EzViewStack,
   FilterColumn,
@@ -85010,4 +85238,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzAvatar, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzComboBoxList, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDoubleList, EzDropdown, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopoverCore, EzPopoverPlus, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSearchPlus, EzSearchResultList, EzSidebarButton, EzSidebarNavigator, EzSkeleton, EzSortableList, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTextArea, EzTextEdit, EzTextInput, EzTimeInput, EzToast, EzTooltip, EzTree, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, SearchList, defineCustomElements };
+export { EzActionsButton, EzAlert, EzAlertList, EzApplication, EzAvatar, EzBadge, EzBreadcrumb, EzButton, EzCalendar, EzCardItem, EzChart, EzCheck, EzChip, EzCollapsibleBox, EzComboBox, EzComboBoxList, EzCustomFormInput, EzDateInput, EzDateTimeInput, EzDialog, EzDoubleList, EzDropdown, EzEmptyCard, EzFileItem, EzFilterInput, EzForm, EzFormView, EzGrid, EzGuideNavigator, EzIcon, EzList, EzLoadingBar, EzModal, EzModalContainer, EzMultiSelectionList, EzNumberInput, EzPopover, EzPopoverCore, EzPopoverPlus, EzPopup, EzRadioButton, EzScroller, EzSearch, EzSearchPlus, EzSearchResultList, EzSidebarButton, EzSidebarNavigator, EzSkeleton, EzSortableList, EzSplitButton, EzSplitItem, EzSplitPanel, EzTabselector, EzTag, EzTextArea, EzTextEdit, EzTextInput, EzTile, EzTileMedium, EzTimeInput, EzToast, EzTooltip, EzTree, EzUnderface, EzUpload, EzViewStack, FilterColumn, MultiSelectionBoxMessage, SearchList, defineCustomElements };

package/dist/esm/ez-empty-card.entry.js

@@ -0,0 +1,30 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-baa5e267.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+
+const ezEmptyCardCss = ":host{--ez-empty-card--width:335px;--ez-empty-card--height:155px;--ez-empty-card--padding:var(--space--24, 24px);--ez-empty-card--border-radius:var(--border--radius-24, 24px);--ez-empty-card--background-color:var(--color--gray-70, #ffffff)}div{width:var(--ez-empty-card--custom-width, var(--ez-empty-card--width));height:var(--ez-empty-card--custom-height, var(--ez-empty-card--height));border-radius:var(--ez-empty-card--border-radius);background-color:var(--ez-empty-card--background-color);padding:var(--ez-empty-card--padding);display:block;overflow:hidden;outline:none;box-shadow:none;border:none;box-sizing:border-box}.gray{--ez-empty-card--background-color:var(--color--gray-80)}.green{--ez-empty-card--background-color:var(--color--ocean-green-90)}.yellow{--ez-empty-card--background-color:var(--color--yellow-100)}.red{--ez-empty-card--background-color:var(--color--red-100)}.petroleum{--ez-empty-card--background-color:var(--color--petroleum-90)}";
+
+const EzEmptyCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.color = "default";
+    this.height = undefined;
+    this.width = undefined;
+  }
+  componentDidRender() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._container) {
+      const dataInfo = { id: 'container' };
+      ElementIDUtils.addIDInfo(this._container, 'empty-card', dataInfo);
+    }
+  }
+  render() {
+    const customStyleVars = Object.assign(Object.assign({}, (this.height ? { '--ez-empty-card--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-empty-card--custom-width': `${this.width}px` } : {}));
+    return (h(Host, { style: customStyleVars }, h("div", { ref: element => this._container = element, class: `card_container ${this.color}` }, h("slot", null))));
+  }
+  get _element() { return getElement(this); }
+};
+EzEmptyCard.style = ezEmptyCardCss;
+
+export { EzEmptyCard as ez_empty_card };

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

@@ -0,0 +1,34 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-baa5e267.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
+
+const ezTagCss = ":host{--ez-tag--padding-x:var(--space--8, 8px);--ez-tag--padding-y:var(--space--4, 4px);--ez-tag--min-width:var(--space--6, 6px);--ez-tag--min-height:var(--space--14, 14px);--ez-tag--border-radius:var(--border--radius-24, 24px);--ez-tag--background-color:var(--color--ocean-green-600, #008561);--ez-tag_label--font-weight:var(--font-weight--regular, 400);--ez-tag_label--font-size:var(--font-size--default, 14px);--ez-tag_label--color:var(--color--gray-70, #FFFFFF)}.tag{background-color:var(--ez-tag--custom-background-color, var(--ez-tag--background-color));padding:var(--ez-tag--padding-y) var(--ez-tag--padding-x);border-radius:var(--ez-tag--border-radius);min-width:var(--ez-tag--min-width);min-height:var(--ez-tag--min-height);display:inline-flex;justify-content:center;align-items:center}label{font-weight:var(--ez-tag_label--font-weight);font-size:var(--ez-tag_label--font-size);color:var(--ez-tag_label--custom-color, var(--ez-tag_label--color));font-family:var(--font--pattern, Arial);line-height:var(--ez-tag_label--font-size);text-align:center;line-height:normal}.light-ocean-green{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--ocean-green-100));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--ocean-green-600))}.green{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--green-600));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--gray-70))}.light-green{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--green-200));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--green-600))}.yellow{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--yellow-600));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--yellow-900))}.light-yellow{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--yellow-200));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--yellow-800))}.red{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--red-600));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--gray-70))}.light-red{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--red-200));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--red-600))}.gray{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--gray-500));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--gray-100))}.light-gray{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--gray-100));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--gray-400))}.petroleum{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--petroleum-600));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--petroleum-200))}.light-petroleum{--ez-tag--background-color:var(--ez-tag--custom-background-color, var(--color--petroleum-100));--ez-tag_label--color:var(--ez-tag_label--custom-color, var(--color--petroleum-400))}";
+
+const EzTag = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.label = undefined;
+    this.color = "ocean-green";
+    this.customBackgroundColor = undefined;
+    this.customLabelColor = undefined;
+  }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._tag) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._tag, 'EzTag', dataInfo);
+    }
+  }
+  validateLabel() {
+    return (this.label) && this.label.trim() !== "";
+  }
+  render() {
+    const customStyleVars = Object.assign({}, this.customBackgroundColor && { '--ez-tag--custom-background-color': `var(${this.customBackgroundColor})` }, this.customLabelColor && { '--ez-tag_label--custom-color': `var(${this.customLabelColor})` });
+    return (h(Host, { style: customStyleVars }, h("div", { ref: el => { this._tag = el; }, class: `tag ${this.color || ''}` }, this.validateLabel() && h("label", { title: this.label }, this.label))));
+  }
+  get _element() { return getElement(this); }
+};
+EzTag.style = ezTagCss;
+
+export { EzTag as ez_tag };