@sankhyalabs/ezui 1.1.161 → 1.2.0-beta.1

package/dist/collection/components/ez-radio-button/ez-radio-button.js

@@ -0,0 +1,160 @@
+import { Event, Prop, Element, Component, Host, h } from '@stencil/core';
+export class EzRadioButton {
+  constructor() {
+    /**
+     * Define as opções que serão apresentadas
+     */
+    this.options = [];
+    /**
+    * Define se o componente está habilitado ou desabilitado
+    */
+    this.enabled = true;
+    /**
+     * Define a direção em que os itens são apresentadoss, podendo ser horizontal ou vertical.
+     */
+    this.direction = "vertical";
+  }
+  componentWillLoad() {
+    this._options = this.options;
+    const optionsTags = this.hostElement.querySelectorAll("ez-radio-button-option");
+    if (optionsTags) {
+      optionsTags.forEach(e => {
+        let label = e.getAttribute("label");
+        let value = e.getAttribute("value");
+        this._options.push({ label, value });
+      });
+    }
+  }
+  handleInputChange(ev) {
+    const slot = ev.target;
+    this.value = slot.value;
+    this.ezChange.emit(this.value);
+  }
+  render() {
+    return (h(Host, null,
+      this.label && h("label", { class: "label" }, this.label),
+      h("div", { class: "form--" + this.direction }, this._options.map((option, key) => h("div", { class: "form__group" },
+        h("input", { id: "rad" + key, class: "form__radio", name: "theradio", type: "radio", value: option.value, onChange: (ev) => { this.handleInputChange(ev); }, disabled: !this.enabled, checked: option.value === this.value }),
+        h("label", { htmlFor: "rad" + key, class: "form__label" }, option.label))))));
+  }
+  static get is() { return "ez-radio-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-radio-button.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-radio-button.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Representa o valor atualmente selecionado entre as op\u00E7\u00F5es"
+      },
+      "attribute": "value",
+      "reflect": true
+    },
+    "options": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Array<Radio>",
+        "resolved": "Radio[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          },
+          "Radio": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define as op\u00E7\u00F5es que ser\u00E3o apresentadas"
+      },
+      "defaultValue": "[]"
+    },
+    "enabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define se o componente est\u00E1 habilitado ou desabilitado"
+      },
+      "attribute": "enabled",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determina a descri\u00E7\u00E3o do grupo"
+      },
+      "attribute": "label",
+      "reflect": true
+    },
+    "direction": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "\"vertical\" | \"horizontal\"",
+        "resolved": "\"horizontal\" | \"vertical\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define a dire\u00E7\u00E3o em que os itens s\u00E3o apresentadoss, podendo ser horizontal ou vertical."
+      },
+      "attribute": "direction",
+      "reflect": true,
+      "defaultValue": "\"vertical\""
+    }
+  }; }
+  static get events() { return [{
+      "method": "ezChange",
+      "name": "ezChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Evento disparado quando uma op\u00E7\u00E3o for selecionada"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+}

package/dist/collection/utils/ApplicationUtils.js

@@ -1,5 +1,6 @@
+import { DialogType } from "../components/ez-dialog/DialogType";
 export default class ApplicationUtils {
-  static async showDialog(title, message, icon = null, confirm, critical = false, options) {
+  static async showDialog(title, message, icon = null, confirm, dialogType = DialogType.DEFAULT, options) {
     if (options) {
       options = Object.assign(Object.assign({}, ApplicationUtils.defaultMessageOptions), options);
     }
@@ -9,25 +10,42 @@ export default class ApplicationUtils {
         dialog = document.createElement("ez-dialog");
         window.document.body.appendChild(dialog);
       }
-      dialog.show(title, message, critical, confirm, icon, options.labelCancel, options.labelConfirm, options.btnConfirmDanger).then(ok => resolve(ok));
+      dialog.show(title, message, dialogType, confirm, icon, options.labelCancel, options.labelConfirm, options.btnConfirmDanger).then(ok => resolve(ok));
     });
   }
   static async alert(title, message, icon = null, options = ApplicationUtils.defaultMessageOptions) {
-    return ApplicationUtils.showDialog(title, message, icon, false, false, options);
+    return ApplicationUtils.showDialog(title, message, icon, false, DialogType.WARN, options);
   }
   static async error(title, message, icon = null, options = ApplicationUtils.defaultMessageOptions) {
-    return ApplicationUtils.showDialog(title, message, icon, false, true, options);
+    return ApplicationUtils.showDialog(title, message, icon, false, DialogType.CRITICAL, options);
   }
-  static async confirm(title, message, icon = null, critical = false, options = ApplicationUtils.defaultMessageOptions) {
-    return ApplicationUtils.showDialog(title, message, icon, true, critical, options);
+  static async confirm(title, message, icon = null, dialogType = DialogType.WARN, options = ApplicationUtils.defaultMessageOptions) {
+    return ApplicationUtils.showDialog(title, message, icon, true, dialogType, options);
+  }
+  static async message(title, message, icon = null, options = ApplicationUtils.defaultMessageOptions) {
+    return ApplicationUtils.showDialog(title, message, icon, false, DialogType.DEFAULT, options);
   }
   static async info(message, options = ApplicationUtils.defaultMessageOptions) {
     let toast = document.querySelector("ez-toast");
     if (!toast) {
       toast = document.createElement("ez-toast");
+      const icon = document.createElement("ez-icon");
+      icon.className = "ez-margin-right--small toast__icon--color";
+      icon.slot = "icon";
+      toast.appendChild(icon);
       window.document.body.appendChild(toast);
     }
-    toast.show(message, 4000, false, options.canClose);
+    if (options.iconName) {
+      const iconElem = toast.querySelector("ez-icon");
+      if (iconElem) {
+        iconElem.iconName = options.iconName;
+        toast.useIcon = true;
+      }
+    }
+    else {
+      toast.useIcon = false;
+    }
+    toast.show(message, 5000, false, options.canClose);
   }
 }
 ApplicationUtils.defaultMessageOptions = {

package/dist/collection/utils/CSSVarsUtils.js

@@ -8,6 +8,40 @@ export default class CSSVarsUtils {
       CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--disabled--color');
     }
   }
+  static applyVarsButton(host, child) {
+    if (child) {
+      ["--ez-button--min-width",
+        "--ez-button--height",
+        "--ez-button__icon--width",
+        "--ez-button__inline__icon--padding",
+        "--ez-button--padding-top",
+        "--ez-button--padding-bottom",
+        "--ez-button--padding-right",
+        "--ez-button--padding-left",
+        "--ez-button--color",
+        "--ez-button--font-size",
+        "--ez-button--font-family",
+        "--ez-button--font-weight",
+        "--ez-button--background-color",
+        "--ez-button--border-radius",
+        "--ez-button--border",
+        "--ez-button--hover-color",
+        "--ez-button--hover--background-color",
+        "--ez-button--disabled-color",
+        "--ez-button--disabled--background-color",
+        "--ez-button--focus--border",
+        "--ez-button--focus--box-shadow",
+        "--ez-button--active-color",
+        "--ez-button--active--background-color",
+        "--ez-button--link-color",
+        "--ez-button--link--hover-color",
+        "--ez-button--link--small--font-size",
+        "--ez-button--link--medium--font-size",
+        "--ez-button--link--large--font-size",].forEach(prop => {
+        CSSVarsUtils.applyIfExists(host, child, prop);
+      });
+    }
+  }
   static applyIfExists(host, element, varName) {
     const prop = getComputedStyle(host).getPropertyValue(varName);
     if (prop) {

package/dist/collection/utils/index.js

@@ -1,2 +1,3 @@
 export { default as ApplicationUtils } from './ApplicationUtils';
 export { default as CSSVarsUtils } from './CSSVarsUtils';
+export { DialogType } from '../components/ez-dialog/DialogType';

package/dist/custom-elements/index.d.ts

@@ -2,6 +2,12 @@
 
 import type { Components, JSX } from "../types/components";
 
+interface EzActionsButton extends Components.EzActionsButton, HTMLElement {}
+export const EzActionsButton: {
+  prototype: EzActionsButton;
+  new (): EzActionsButton;
+};
+
 interface EzApplication extends Components.EzApplication, HTMLElement {}
 export const EzApplication: {
   prototype: EzApplication;
@@ -134,6 +140,12 @@ export const EzPopup: {
   new (): EzPopup;
 };
 
+interface EzRadioButton extends Components.EzRadioButton, HTMLElement {}
+export const EzRadioButton: {
+  prototype: EzRadioButton;
+  new (): EzRadioButton;
+};
+
 interface EzSearch extends Components.EzSearch, HTMLElement {}
 export const EzSearch: {
   prototype: EzSearch;
@@ -188,12 +200,6 @@ export const EzViewStack: {
   new (): EzViewStack;
 };
 
-interface TestDu extends Components.TestDu, HTMLElement {}
-export const TestDu: {
-  prototype: TestDu;
-  new (): TestDu;
-};
-
 /**
  * Utility to define all custom elements within this package using the tag name provided in the component's source. 
  * When defining each custom element, it will also check it's safe to define by: