@atmgrupomaggioli/iris-button 0.2.3 → 0.2.5

package/dist/iris-button/p-fe0bfee6.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as r,h as t}from"./p-DScl31jK.js";const a={ERROR_REQUIRED_PROP:"REQUIRED_PROP",check(o){const r=Object.entries(o).filter((([o,r])=>r===undefined)).map((([o])=>o));if(r.length>0){console.error(`${a.ERROR_REQUIRED_PROP}: No se han definido las siguientes propiedades: ${r.join(", ")}`);return false}else{return true}}};const c="@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes show-loading{0%{opacity:0}100%{opacity:1}}:host{display:inline-block}button{width:100%;font-size:var(--font-size);padding:8px 12px;color:var(--white);background-color:var(--company-primary-dark);-webkit-transition:background-color 0.2s ease;-ms-transition:background-color 0.2s ease;transition:background-color 0.2s ease;border:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;display:-ms-flexbox;display:-webkit-box;display:flex;align-items:center;justify-content:center;cursor:pointer;gap:0.1rem;font-family:var(--font-primary)}button:hover{background-color:var(--company-primary-focus)}button:focus{outline:2px solid var(--blue_light);outline-offset:1px}button:not([type=icon],[type=fab]) .material-symbols-rounded,button:not([type=icon],[type=fab]) .loading{margin-right:5px}button[type=fab],button[type=icon]{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;height:36px;width:36px;padding:0;display:-ms-flexbox;display:-webkit-box;display:flex;justify-content:center}button iris-icon{display:-ms-flexbox;display:-webkit-box;display:flex}button iris-loading{display:-ms-flexbox;display:-webkit-box;display:flex;height:22px;align-items:center}button[color=primary]{background-color:var(--company-primary-dark)}button[color=primary]:hover{background-color:var(--company-primary-focus)}button[color=primary][type=icon]{background-color:unset;color:var(--company-primary-dark)}button[color=primary][type=icon]:hover{background-color:var(--company-primary-light)}button[color=success]{background-color:var(--company-success-dark)}button[color=success]:hover{background-color:var(--company-success-focus)}button[color=success][type=icon]{background-color:unset;color:var(--company-success-dark)}button[color=success][type=icon]:hover{background-color:var(--company-success-light)}button[color=warning]{background-color:var(--company-warning-dark)}button[color=warning]:hover{background-color:var(--company-warning-focus)}button[color=warning][type=icon]{background-color:unset;color:var(--company-warning-dark)}button[color=warning][type=icon]:hover{background-color:var(--company-warning-light)}button[color=error]{background-color:var(--company-error-dark)}button[color=error]:hover{background-color:var(--company-error-focus)}button[color=error][type=icon]{background-color:unset;color:var(--company-error-dark)}button[color=error][type=icon]:hover{background-color:var(--company-error-light)}button[color=basic]{background-color:var(--company-basic-dark);color:var(--black);background-color:var(--company-basic-light)}button[color=basic]:hover{background-color:var(--company-basic-focus)}button[color=basic][type=icon]{background-color:unset;color:var(--company-basic-dark)}button[color=basic][type=icon]:hover{background-color:var(--company-basic-light)}button:disabled{background-color:var(--company-basic-focus);color:var(--company-basic-light);cursor:not-allowed}button:disabled:hover{background-color:var(--company-basic-focus)}button.small{font-size:calc(var(--font-size) * 0.8)}button.small[type=fab],button.small[type=icon]{height:calc(36px * 0.8);width:calc(36px * 0.8)}button.large{font-size:calc(var(--font-size) * 1.2)}button.large[type=fab],button.large[type=icon]{height:calc(36px * 1.2);width:calc(36px * 1.2)}@media (min-width: 576px){button{width:auto}}";const i=class{constructor(t){o(this,t);this.buttonClicked=r(this,"buttonClicked",1);this.buttonFocused=r(this,"buttonFocused",7);this.color="primary";this.disabled=false;this.type="";this.loading=false;this.size="medium";this.handleClick=o=>{o.stopPropagation();this.button.disabled=true;setTimeout((()=>{if(!this.loading){this.button.disabled=false}}),1e3);this.buttonClicked.emit(o)};this.handleFocus=o=>{this.buttonFocused.emit(o)}}render(){const o={label:this.label,icon:this.icon};if(!a.check(o))return;return t("button",{class:`${this.size}`,color:this.color,type:this.type,onClick:this.handleClick,disabled:this.disabled||this.loading,onFocus:this.handleFocus,ref:o=>this.button=o,title:this.label},!this.loading?t("iris-icon",{icon:this.icon,size:this.size}):t("div",{class:"loading"},t("iris-loading",{size:"small",color:this.color})),this.type=="icon"||this.type=="fab"?"":this.label)}};i.style=c;export{i as iris_button};
+//# sourceMappingURL=p-fe0bfee6.entry.js.map

package/dist/iris-button/p-fe0bfee6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RequieredPropsUtils","ERROR_REQUIRED_PROP","check","props","missing","Object","entries","filter","_","value","undefined","map","key","length","console","error","join","irisButtonCss","IrisButton","constructor","hostRef","this","color","disabled","type","loading","size","handleClick","ev","stopPropagation","button","setTimeout","buttonClicked","emit","handleFocus","buttonFocused","render","requiredFiles","label","icon","h","class","onClick","onFocus","ref","el","title"],"sources":["../iris-utils/dist/esm/required_properties.js","src/components/iris-button/iris-button.scss?tag=iris-button&encapsulation=shadow","src/components/iris-button/iris-button.tsx"],"sourcesContent":["export const RequieredPropsUtils = {\n    ERROR_REQUIRED_PROP: 'REQUIRED_PROP',\n    check(props) {\n        const missing = Object.entries(props)\n            .filter(([_, value]) => value === undefined)\n            .map(([key]) => key);\n        if (missing.length > 0) {\n            console.error(`${RequieredPropsUtils.ERROR_REQUIRED_PROP}: No se han definido las siguientes propiedades: ${missing.join(', ')}`);\n            return false;\n        }\n        else {\n            return true;\n        }\n    },\n};\n//# sourceMappingURL=required_properties.js.map","@use '_mixins.scss' as m;\n\n//#region Keyframes\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes show-loading {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n//#endregion\n\n//#region Mixins\n\n// Mixin para los colores.\n@mixin deco($type) {\n  &[color='#{$type}'] {\n    background-color: var(--company-#{$type}-dark);\n\n    @if $type == 'basic' {\n      color: var(--black);\n      background-color: var(--company-#{$type}-light);\n    }\n\n    &:hover {\n      background-color: var(--company-#{$type}-focus);\n    }\n\n    // Botones tipo icon.\n    &[type='icon'] {\n      background-color: unset;\n      color: var(--company-#{$type}-dark);\n\n      &:hover {\n        background-color: var(--company-#{$type}-light);\n      }\n    }\n  }\n}\n\n// Mixin para los tamaños.\n@mixin size-variant($size, $scale) {\n  &.#{$size} {\n    font-size: calc(var(--font-size) * #{$scale});\n\n    // Botones tipo fab e icono.\n    &[type='fab'],\n    &[type='icon'] {\n      height: calc(36px * #{$scale});\n      width: calc(36px * #{$scale});\n    }\n  }\n}\n\n//#endregion\n\n:host {\n  display: inline-block;\n}\n\n// Estilos genéricos para los botones.\nbutton {\n  // Necesario para que el botón ocupe el 100% en pantallas pequeñas (iris-form).\n  width: 100%;\n  font-size: var(--font-size);\n  padding: 8px 12px;\n  color: var(--white);\n  background-color: var(--company-primary-dark);\n  @include m.animation(background-color);\n  border: none;\n  @include m.border-radius(5px);\n  @include m.flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  gap: 0.1rem;\n  font-family: var(--font-primary);\n\n  &:hover {\n    background-color: var(--company-primary-focus);\n  }\n\n  // Incluye un borde al hacer click y al usar tabs.\n  @include m.focus-border;\n\n  // Aplica un margen al icono en los botones por defecto para separarlo del texto.\n  &:not([type='icon'], [type='fab']) {\n    .material-symbols-rounded,\n    .loading {\n      margin-right: 5px;\n    }\n  }\n\n  // Botones tipo fab e icono.\n  &[type='fab'],\n  &[type='icon'] {\n    @include m.border-radius(50%);\n    height: 36px;\n    width: 36px;\n    padding: 0;\n    // Centramos el icono.\n    @include m.flex;\n    justify-content: center;\n  }\n\n  iris-icon {\n    @include m.flex;\n  }\n\n  iris-loading {\n    @include m.flex;\n    height: 22px;\n    align-items: center;\n  }\n\n  //#region Colores de los botones\n\n  @include deco(primary);\n  @include deco(success);\n  @include deco(warning);\n  @include deco(error);\n  @include deco(basic);\n\n  // Botón deshabilitado + controles de accesibilidad.\n  &:disabled {\n    background-color: var(--company-basic-focus);\n    color: var(--company-basic-light);\n    cursor: not-allowed;\n\n    &:hover {\n      background-color: var(--company-basic-focus);\n    }\n  }\n\n  //#endregion\n\n  //#region Tamaño\n\n  @include size-variant(small, 0.8);\n  @include size-variant(large, 1.2);\n\n  //#endregion\n}\n\n@media (min-width: 576px) {\n  button {\n    width: auto;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\nimport { RequieredPropsUtils } from '@atmgrupomaggioli/iris-utils';\n\n@Component({\n  tag: 'iris-button',\n  styleUrl: 'iris-button.scss',\n  shadow: true,\n})\nexport class IrisButton {\n  //#region Props\n\n  /**\n   * Texto del botón.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad.\n   * Para ver más información al respecto, lea la documentación del componente.\n   */\n  @Prop()\n  color: 'primary' | 'success' | 'warning' | 'error' | 'basic' = 'primary';\n\n  /**\n   * Icono del botón.\n   * Consulta todos los iconos disponibles en: https://fonts.google.com/icons\n   */\n  @Prop()\n  icon!: string;\n\n  /**\n   * Deshabilita el botón para que no pueda ser pulsado.\n   */\n  @Prop()\n  disabled = false;\n\n  /**\n   * Tipo de botón.\n   */\n  @Prop()\n  type: '' | 'icon' | 'fab' = '';\n\n  /**\n   * Permite mostrar una animación de carga mientras se realiza alguna acción.\n   * Al activarse esta opción, el botón se deshabilita.\n   */\n  @Prop()\n  loading = false;\n\n  /**\n   * Tamaño del botón.\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  //#endregion\n\n  //#region Variables privadas\n\n  // Tag <button> del DOM.\n  button!: HTMLButtonElement;\n\n  //#endregion\n\n  //#region Events\n\n  /**\n   * Evento del botón al ser pulsado.\n   */\n  @Event({ bubbles: false, composed: false }) buttonClicked: EventEmitter<Event>;\n\n  /**\n   * Evento del botón al ser enfocado.\n   */\n  @Event() buttonFocused: EventEmitter<Event>;\n\n  //#endregion\n\n  //#region Handlers\n\n  //FIXME: Cuando loading se pone en true, también debería mantenerse disabled en true hasta que termine. Ahora se pone disabled a false antes de tiempo y rompe el funcionamiento.\n\n  /**\n   * Método que se ejecuta al hacer clic y emite el evento.\n   * @param ev\n   */\n  handleClick = (ev: Event) => {\n    // Evitamos que el evento burbujee.\n    ev.stopPropagation();\n\n    // Deshabilitamos el botón durante un segundo para que no sea pulsados repetidas veces.\n    this.button.disabled = true;\n    setTimeout(() => {\n      if (!this.loading) {\n        this.button.disabled = false;\n      }\n    }, 1000);\n\n    // Lanzamos el evento.\n    this.buttonClicked.emit(ev);\n  };\n\n  /**\n   * Método que se ejecuta cuando se ha hecho focus en el botón.\n   * @param ev\n   */\n  handleFocus = (ev: Event) => {\n    this.buttonFocused.emit(ev);\n  };\n\n  //#endregion\n\n  render() {\n    // Validamos que todos los campos están rellenos.\n    const requiredFiles: Record<string, any> = { label: this.label, icon: this.icon };\n    if (!RequieredPropsUtils.check(requiredFiles)) return;\n\n    return (\n      <button\n        class={`${this.size}`}\n        color={this.color}\n        type={this.type}\n        onClick={this.handleClick}\n        disabled={this.disabled || this.loading}\n        onFocus={this.handleFocus}\n        ref={(el) => (this.button = el as HTMLButtonElement)}\n        title={this.label}\n      >\n        {\n          // Comprobamos si se muestra cargando\n          !this.loading ? (\n            <iris-icon icon={this.icon} size={this.size}></iris-icon>\n          ) : (\n            <div class=\"loading\">\n              <iris-loading size=\"small\" color={this.color}></iris-loading>\n            </div>\n          )\n        }\n        {\n          // Solo añadimos el label para los botones normales.\n          this.type == 'icon' || this.type == 'fab' ? '' : this.label\n        }\n      </button>\n    );\n  }\n}\n"],"mappings":"kDAAO,MAAMA,EAAsB,CAC/BC,oBAAqB,gBACrB,KAAAC,CAAMC,GACF,MAAMC,EAAUC,OAAOC,QAAQH,GAC1BI,QAAO,EAAEC,EAAGC,KAAWA,IAAUC,YACjCC,KAAI,EAAEC,KAASA,IACpB,GAAIR,EAAQS,OAAS,EAAG,CACpBC,QAAQC,MAAM,GAAGf,EAAoBC,uEAAuEG,EAAQY,KAAK,SACzH,OAAO,KACnB,KACa,CACD,OAAO,IACnB,CACA,GCbA,MAAMC,EAAgB,w0G,MCQTC,EAAU,MALvB,WAAAC,CAAAC,G,oGAkBEC,KAAKC,MAA0D,UAa/DD,KAAQE,SAAG,MAMXF,KAAIG,KAAwB,GAO5BH,KAAOI,QAAG,MAMVJ,KAAIK,KAAiC,SAiCrCL,KAAAM,YAAeC,IAEbA,EAAGC,kBAGHR,KAAKS,OAAOP,SAAW,KACvBQ,YAAW,KACT,IAAKV,KAAKI,QAAS,CACjBJ,KAAKS,OAAOP,SAAW,K,IAExB,KAGHF,KAAKW,cAAcC,KAAKL,EAAG,EAO7BP,KAAAa,YAAeN,IACbP,KAAKc,cAAcF,KAAKL,EAAG,CAsC9B,CAjCC,MAAAQ,GAEE,MAAMC,EAAqC,CAAEC,MAAOjB,KAAKiB,MAAOC,KAAMlB,KAAKkB,MAC3E,IAAKvC,EAAoBE,MAAMmC,GAAgB,OAE/C,OACEG,EAAA,UACEC,MAAO,GAAGpB,KAAKK,OACfJ,MAAOD,KAAKC,MACZE,KAAMH,KAAKG,KACXkB,QAASrB,KAAKM,YACdJ,SAAUF,KAAKE,UAAYF,KAAKI,QAChCkB,QAAStB,KAAKa,YACdU,IAAMC,GAAQxB,KAAKS,OAASe,EAC5BC,MAAOzB,KAAKiB,QAITjB,KAAKI,QACJe,EAAA,aAAWD,KAAMlB,KAAKkB,KAAMb,KAAML,KAAKK,OAEvCc,EAAA,OAAKC,MAAM,WACTD,EAAc,gBAAAd,KAAK,QAAQJ,MAAOD,KAAKC,SAM3CD,KAAKG,MAAQ,QAAUH,KAAKG,MAAQ,MAAQ,GAAKH,KAAKiB,M","ignoreList":[]}

package/dist/types/components.d.ts

@@ -11,10 +11,12 @@ export namespace Components {
     interface IrisButton {
         /**
           * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad. Para ver más información al respecto, lea la documentación del componente.
+          * @default 'primary'
          */
         "color": 'primary' | 'success' | 'warning' | 'error' | 'basic';
         /**
           * Deshabilita el botón para que no pueda ser pulsado.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -27,14 +29,17 @@ export namespace Components {
         "label": string;
         /**
           * Permite mostrar una animación de carga mientras se realiza alguna acción. Al activarse esta opción, el botón se deshabilita.
+          * @default false
          */
         "loading": boolean;
         /**
           * Tamaño del botón.
+          * @default 'medium'
          */
         "size": 'small' | 'medium' | 'large';
         /**
           * Tipo de botón.
+          * @default ''
          */
         "type": '' | 'icon' | 'fab';
     }
@@ -70,10 +75,12 @@ declare namespace LocalJSX {
     interface IrisButton {
         /**
           * Indica el tipo de botón ayudando al usuario a explicar su funcionalidad. Para ver más información al respecto, lea la documentación del componente.
+          * @default 'primary'
          */
         "color"?: 'primary' | 'success' | 'warning' | 'error' | 'basic';
         /**
           * Deshabilita el botón para que no pueda ser pulsado.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -86,6 +93,7 @@ declare namespace LocalJSX {
         "label": string;
         /**
           * Permite mostrar una animación de carga mientras se realiza alguna acción. Al activarse esta opción, el botón se deshabilita.
+          * @default false
          */
         "loading"?: boolean;
         /**
@@ -98,10 +106,12 @@ declare namespace LocalJSX {
         "onButtonFocused"?: (event: IrisButtonCustomEvent<Event>) => void;
         /**
           * Tamaño del botón.
+          * @default 'medium'
          */
         "size"?: 'small' | 'medium' | 'large';
         /**
           * Tipo de botón.
+          * @default ''
          */
         "type"?: '' | 'icon' | 'fab';
     }

package/dist/types/stencil-public-runtime.d.ts

@@ -1601,7 +1601,7 @@ export declare namespace JSXBase {
         onKeyUp?: (event: KeyboardEvent) => void;
         onKeyUpCapture?: (event: KeyboardEvent) => void;
         onAuxClick?: (event: MouseEvent) => void;
-        onClick?: (event: MouseEvent) => void;
+        onClick?: (event: PointerEvent) => void;
         onClickCapture?: (event: MouseEvent) => void;
         onContextMenu?: (event: MouseEvent) => void;
         onContextMenuCapture?: (event: MouseEvent) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atmgrupomaggioli/iris-button",
   "prettier": "../../common/.prettierrc.js",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "ATM Iris Button component",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -9,7 +9,7 @@
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/iris-button/iris-button.esm.js",
-  "homepage": "https://demos.atm-maggioli.es/iris/",
+  "homepage": "https://iris.atm-maggioli.es",
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
@@ -46,8 +46,10 @@
     "ts-jest": "latest"
   },
   "dependencies": {
+    "@atmgrupomaggioli/iris-styles": "*",
+    "@atmgrupomaggioli/iris-utils": "*",
     "@atmgrupomaggioli/iris-icon": "*",
-    "@atmgrupomaggioli/iris-styles": "*"
+    "@atmgrupomaggioli/iris-loading": "*"
   },
   "license": "MIT"
 }

package/dist/cjs/app-globals-V2Kpy_OQ.js

@@ -1,8 +0,0 @@
-'use strict';
-
-const globalScripts = () => {};
-
-exports.globalScripts = globalScripts;
-//# sourceMappingURL=app-globals-V2Kpy_OQ.js.map
-
-//# sourceMappingURL=app-globals-V2Kpy_OQ.js.map

package/dist/cjs/app-globals-V2Kpy_OQ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"app-globals-V2Kpy_OQ.js","sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"names":[],"mappings":";;AAAY,MAAC,aAAa,GAAG,MAAM;;;;"}