@atmgrupomaggioli/iris-button 0.0.1

package/dist/collection/components/iris-button/iris-button.css

@@ -0,0 +1,86 @@
+@charset "UTF-8";
+:host {
+  display: inline-block;
+}
+
+button {
+  padding: 10px 12px;
+  color: var(--white);
+  background-color: var(--company-primary-dark);
+  -webkit-transition: background-color 0.5s ease;
+  -ms-transition: background-color 0.5s ease;
+  transition: background-color 0.5s 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;
+  cursor: pointer;
+  gap: 0.1rem;
+  /*#region Colores de los botones.*/
+  /*Este mixin recibe el tipo
+  y se utiliza para concatenar strings, de tal modo que se pasa por parámetro parte de las clases y propiedades.*/
+  /*#endregion*/
+}
+button:hover {
+  background-color: var(--company-primary-focus);
+}
+button:focus {
+  outline: 2px solid var(--blue_light);
+  outline-offset: 1px;
+}
+button .material-symbols-outlined,
+button i {
+  font-size: var(--font-size-icon);
+}
+button:not(.icon) .material-symbols-outlined {
+  margin-right: 5px;
+}
+button.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.success {
+  background-color: var(--company-success-dark);
+}
+button.success:hover {
+  background-color: var(--company-success-focus);
+}
+button.warning {
+  background-color: var(--company-warning-dark);
+}
+button.warning:hover {
+  background-color: var(--company-warning-focus);
+}
+button.error {
+  background-color: var(--company-error-dark);
+}
+button.error:hover {
+  background-color: var(--company-error-focus);
+}
+button.basic {
+  background-color: var(--company-basic-light);
+  color: var(--company-basic-dark);
+}
+button.basic:hover {
+  background-color: var(--company-basic-focus);
+}
+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);
+}

package/dist/collection/components/iris-button/iris-button.js

@@ -0,0 +1,101 @@
+import { h } from "@stencil/core";
+export class AtmButton {
+    constructor() {
+        this.color = '';
+        this.icon = undefined;
+        this.disabled = false;
+        this.isIcon = false;
+    }
+    render() {
+        return (h("button", { key: '7570a5749b80d8f3b46ed979a8b4dac5d7ac210d', class: this.color }, this.icon != null
+            ? h("span", { class: "material-symbols-rounded" }, this.icon)
+            : "", h("slot", { key: 'ab234a494a6cf24f2d6c453af4db0e362fa67643' })));
+    }
+    static get is() { return "iris-button"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["iris-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["iris-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'' | 'primary' | 'success' | 'warning' | 'error' | 'basic'",
+                    "resolved": "\"\" | \"basic\" | \"error\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica el tipo de bot\u00F3n ayudando al usuario a explicar su funcionalidad.\nPara ver m\u00E1s informaci\u00F3n al respecto, lea la documentaci\u00F3n del componente."
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icono del bot\u00F3n.\nConsulta todos los iconos disponibles en: https://fonts.google.com/icons"
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilita el bot\u00F3n para que no pueda ser pulsado."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica el tipo de bot\u00F3n."
+                },
+                "attribute": "is-icon",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=iris-button.js.map

package/dist/collection/components/iris-button/iris-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iris-button.js","sourceRoot":"","sources":["../../../src/components/iris-button/iris-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;;qBAMgD,EAAE;;wBAa3D,KAAK;sBAMP,KAAK;;IAEd,MAAM;QACJ,OAAO,CACL,+DAAQ,KAAK,EAAE,IAAI,CAAC,KAAK;YAErB,IAAI,CAAC,IAAI,IAAI,IAAI;gBACjB,CAAC,CAAC,YAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAQ;gBAC3D,CAAC,CAAC,EAAE;YAEN,8DAAa,CACN,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'iris-button', // Nombre del componente.\n  styleUrl: 'iris-button.scss', // [default=null] Ruta de la hoja de estilos del componente.\n  shadow: false, // [default=false] Indica si el componente Irá alojado en el DOM o en el ShadowDom.\n})\nexport class AtmButton {\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' = '';\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   * Indica el tipo de botón.\n   */\n  @Prop()\n  isIcon = false;\n\n  render() {\n    return (\n      <button class={this.color}>\n        {\n          this.icon != null\n          ? <span class=\"material-symbols-rounded\">{this.icon}</span>\n          : \"\"\n        }\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"]}

package/dist/collection/index.js

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export { format } from './utils/utils';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC","sourcesContent":["/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport { format } from './utils/utils';\nexport type * from './components';\n"]}

package/dist/collection/utils/utils.js

@@ -0,0 +1,4 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+//# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa;IACnE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC","sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"]}

package/dist/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/dist/components/index.js

@@ -0,0 +1,9 @@
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-9678c037.js';
+
+function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+
+export { format };
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"file":"index.js","mappings":";;SAAgB,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa;IACnE,OAAO,CAAC,KAAK,IAAI,EAAE,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,IAAI,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AACjF;;;;","names":[],"sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n"],"version":3}

package/dist/components/iris-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface IrisButton extends Components.IrisButton, HTMLElement {}
+export const IrisButton: {
+    prototype: IrisButton;
+    new (): IrisButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/iris-button.js

@@ -0,0 +1,47 @@
+import { p as proxyCustomElement, H, h } from './p-9678c037.js';
+
+const irisButtonCss = "@charset \"UTF-8\";:host{display:inline-block}button{padding:10px 12px;color:var(--white);background-color:var(--company-primary-dark);-webkit-transition:background-color 0.5s ease;-ms-transition:background-color 0.5s ease;transition:background-color 0.5s 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;cursor:pointer;gap:0.1rem;}button:hover{background-color:var(--company-primary-focus)}button:focus{outline:2px solid var(--blue_light);outline-offset:1px}button .material-symbols-outlined,button i{font-size:var(--font-size-icon)}button:not(.icon) .material-symbols-outlined{margin-right:5px}button.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.success{background-color:var(--company-success-dark)}button.success:hover{background-color:var(--company-success-focus)}button.warning{background-color:var(--company-warning-dark)}button.warning:hover{background-color:var(--company-warning-focus)}button.error{background-color:var(--company-error-dark)}button.error:hover{background-color:var(--company-error-focus)}button.basic{background-color:var(--company-basic-light);color:var(--company-basic-dark)}button.basic:hover{background-color:var(--company-basic-focus)}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)}";
+const IrisButtonStyle0 = irisButtonCss;
+
+const AtmButton = /*@__PURE__*/ proxyCustomElement(class AtmButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.color = '';
+        this.icon = undefined;
+        this.disabled = false;
+        this.isIcon = false;
+    }
+    render() {
+        return (h("button", { key: '7570a5749b80d8f3b46ed979a8b4dac5d7ac210d', class: this.color }, this.icon != null
+            ? h("span", { class: "material-symbols-rounded" }, this.icon)
+            : "", h("slot", { key: 'ab234a494a6cf24f2d6c453af4db0e362fa67643' })));
+    }
+    static get style() { return IrisButtonStyle0; }
+}, [4, "iris-button", {
+        "color": [1],
+        "icon": [1],
+        "disabled": [4],
+        "isIcon": [4, "is-icon"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["iris-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "iris-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AtmButton);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const IrisButton = AtmButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { IrisButton, defineCustomElement };
+
+//# sourceMappingURL=iris-button.js.map

package/dist/components/iris-button.js.map

@@ -0,0 +1 @@
+{"file":"iris-button.js","mappings":";;AAAA,MAAM,aAAa,GAAG,4jDAA4jD,CAAC;AACnlD,yBAAe,aAAa;;MCMf,SAAS;;;;qBAMgD,EAAE;;wBAa3D,KAAK;sBAMP,KAAK;;IAEd,MAAM;QACJ,QACE,+DAAQ,KAAK,EAAE,IAAI,CAAC,KAAK,IAErB,IAAI,CAAC,IAAI,IAAI,IAAI;cACf,YAAM,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,IAAI,CAAQ;cACzD,EAAE,EAEN,8DAAa,CACN,EACT;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/iris-button/iris-button.scss?tag=iris-button","src/components/iris-button/iris-button.tsx"],"sourcesContent":["@use \"_mixins.scss\" as m;\n\n:host {\n  display: inline-block;\n}\n\n// Estilos genéricos para los botones.\nbutton {\n  padding: 10px 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  cursor: pointer;\n  gap: .1rem;\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  .material-symbols-outlined,\n  i {\n    font-size: var(--font-size-icon);\n  }\n  //Aplica un margen al icono en los botones por defecto para separarlo del texto.\n  &:not(.icon) .material-symbols-outlined {\n    margin-right: 5px;\n  }\n\n  //Estilos por defecto de los iconos\n  &.icon {\n    @include m.border-radius(50%);\n    height: 36px;\n    width: 36px;\n    padding: 0;\n    @include m.flex;\n    justify-content: center;\n  }\n\n  /*#region Colores de los botones.*/\n\n  /*Este mixin recibe el tipo\n  y se utiliza para concatenar strings, de tal modo que se pasa por parámetro parte de las clases y propiedades.*/\n  @mixin deco($type) {\n    &.#{$type} {\n      background-color: var(--company-#{$type}-dark);\n\n      &:hover {\n        background-color: var(--company-#{$type}-focus);\n      }\n    }\n  }\n\n  @include deco(success);\n  @include deco(warning);\n  @include deco(error);\n\n  &.basic {\n    background-color: var(--company-basic-light);\n    color: var(--company-basic-dark);\n\n    &:hover {\n      background-color: var(--company-basic-focus);\n    }\n  }\n  // Botón desabilitado + 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  /*#endregion*/\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'iris-button', // Nombre del componente.\n  styleUrl: 'iris-button.scss', // [default=null] Ruta de la hoja de estilos del componente.\n  shadow: false, // [default=false] Indica si el componente Irá alojado en el DOM o en el ShadowDom.\n})\nexport class AtmButton {\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' = '';\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   * Indica el tipo de botón.\n   */\n  @Prop()\n  isIcon = false;\n\n  render() {\n    return (\n      <button class={this.color}>\n        {\n          this.icon != null\n          ? <span class=\"material-symbols-rounded\">{this.icon}</span>\n          : \"\"\n        }\n        <slot></slot>\n      </button>\n    );\n  }\n}\n"],"version":3}