@xplortech/apollo-core 1.0.0-beta.7 → 1.0.0-beta.9

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

@@ -1,17 +1,15 @@
-import { Component, Element, Host, h, Prop } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 export class XplButton {
   constructor() {
-    /**
-     * @property {"default" | "sm" | "xs"} - button size
-     */
+    this.disabled = undefined;
+    this.link = undefined;
+    this.iconOnly = undefined;
+    this.fullWidth = undefined;
+    this.name = undefined;
     this.size = 'default';
-    /**
-     * @property {"primary" | "secondary" | "subtle"} - button variant
-     */
+    this.type = undefined;
+    this.value = undefined;
     this.variant = 'primary';
-    /**
-     * @property {"neutral" | "warning" | "success"} - button state (color) neutral=purple, success=green, warning=red
-     */
     this.state = 'neutral';
   }
   componentDidRender() {
@@ -50,202 +48,204 @@ export class XplButton {
      * Conditionally render either an <slot> or <button> element
      * depending on if there's an `link` or not
      */
-    this.link ? (h("slot", null)) : (h("button", { disabled: this.disabled, name: this.name, type: this.type, value: this.value },
-      h("slot", null)))));
+    this.link ? (h("slot", null)) : (h("button", { disabled: this.disabled, name: this.name, type: this.type, value: this.value }, h("slot", null)))));
   }
   static get is() { return "xpl-button"; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "whether button should be disabled"
-      },
-      "attribute": "disabled",
-      "reflect": false
-    },
-    "link": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "whether button should yield a slot for a link tag"
-      },
-      "attribute": "link",
-      "reflect": false
-    },
-    "iconOnly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "whether button should render icon only"
-      },
-      "attribute": "icon-only",
-      "reflect": false
-    },
-    "fullWidth": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "whether button should render with full width"
-      },
-      "attribute": "full-width",
-      "reflect": false
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "{string} - button name attribute",
-            "name": "property"
-          }],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'default' | 'sm' | 'xs'",
-        "resolved": "\"default\" | \"sm\" | \"xs\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "{\"default\" | \"sm\" | \"xs\"} - button size",
-            "name": "property"
-          }],
-        "text": ""
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'default'"
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'submit' | 'reset' | 'button'",
-        "resolved": "\"button\" | \"reset\" | \"submit\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "{\"submit\" | \"reset\" | \"button\"} - button type attribute",
-            "name": "property"
-          }],
-        "text": ""
-      },
-      "attribute": "type",
-      "reflect": false
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "{string} - button value attribute",
-            "name": "property"
-          }],
-        "text": ""
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'primary' | 'secondary' | 'subtle'",
-        "resolved": "\"primary\" | \"secondary\" | \"subtle\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "{\"primary\" | \"secondary\" | \"subtle\"} - button variant",
-            "name": "property"
-          }],
-        "text": ""
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "'primary'"
-    },
-    "state": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'neutral' | 'warning' | 'success'",
-        "resolved": "\"neutral\" | \"success\" | \"warning\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "{\"neutral\" | \"warning\" | \"success\"} - button state (color) neutral=purple, success=green, warning=red",
-            "name": "property"
-          }],
-        "text": ""
-      },
-      "attribute": "state",
-      "reflect": false,
-      "defaultValue": "'neutral'"
-    }
-  }; }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "whether button should be disabled"
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "link": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "whether button should yield a slot for a link tag"
+        },
+        "attribute": "link",
+        "reflect": false
+      },
+      "iconOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "whether button should render icon only"
+        },
+        "attribute": "icon-only",
+        "reflect": false
+      },
+      "fullWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "whether button should render with full width"
+        },
+        "attribute": "full-width",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "property",
+              "text": "{string} - button name attribute"
+            }],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'sm' | 'xs'",
+          "resolved": "\"default\" | \"sm\" | \"xs\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "property",
+              "text": "{\"default\" | \"sm\" | \"xs\"} - button size"
+            }],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'submit' | 'reset' | 'button'",
+          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "property",
+              "text": "{\"submit\" | \"reset\" | \"button\"} - button type attribute"
+            }],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "property",
+              "text": "{string} - button value attribute"
+            }],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary' | 'subtle'",
+          "resolved": "\"primary\" | \"secondary\" | \"subtle\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "property",
+              "text": "{\"primary\" | \"secondary\" | \"subtle\"} - button variant"
+            }],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "state": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'neutral' | 'warning' | 'success'",
+          "resolved": "\"neutral\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "property",
+              "text": "{\"neutral\" | \"warning\" | \"success\"} - button state (color) neutral=purple, success=green, warning=red"
+            }],
+          "text": ""
+        },
+        "attribute": "state",
+        "reflect": false,
+        "defaultValue": "'neutral'"
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }
+//# sourceMappingURL=xpl-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xpl-button.js","sourceRoot":"","sources":["../../../../src/components/components/xpl-button/xpl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIlE,MAAM,OAAO,SAAS;;;;;;;gBAyBsB,SAAS;;;mBAYK,SAAS;iBAIZ,SAAS;;EAE5D,kBAAkB;IACd,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC;IACjC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;OAC/B,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;MACV,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;MACnC,IAAI,YAAY,EAAE;QACd,OAAO,CACH,YAAY,CAAC,QAAQ,CAAC,WAAW,CAAC;UAClC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CACjC,CAAC;OACL;MACD,OAAO,KAAK,CAAC;IACjB,CAAC,CAAC;OACD,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;MACf,uCAAY,GAAG,KAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,IAAG;IACvD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEX,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC9C,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;MACjC,KAAK,CAAC,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;MACpC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IAC/B,CAAC,CAAC,CAAC;EACP,CAAC;EAED,MAAM;IACF,IAAI,SAAS,GAAG;kCACU,IAAI,CAAC,IAAI;kCACT,IAAI,CAAC,KAAK;kCACV,IAAI,CAAC,OAAO,EAAE,CAAC;IACzC,IAAI,IAAI,CAAC,QAAQ;MAAE,SAAS,IAAI,wBAAwB,CAAC;IACzD,IAAI,IAAI,CAAC,SAAS;MAAE,SAAS,IAAI,yBAAyB,CAAC;IAC3D,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;MAC1B,SAAS,IAAI,4BAA4B,CAAC;IAE9C,OAAO,CACH,EAAC,IAAI,IAAC,KAAK,EAAE,SAAS;IAEd;;;OAGG;IACH,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACR,eAAa,CAChB,CAAC,CAAC,CAAC,CACA,cACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK;MAEjB,eAAa,CACR,CACZ,CAEF,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\n@Component({\n    tag: 'xpl-button',\n})\nexport class XplButton {\n    @Element() el: HTMLXplButtonElement;\n    /**\n     * whether button should be disabled\n     */\n    @Prop() disabled?: boolean;\n    /**\n     * whether button should yield a slot for a link tag\n     */\n    @Prop() link?: boolean;\n    /**\n     * whether button should render icon only\n     */\n    @Prop() iconOnly?: boolean;\n    /**\n     * whether button should render with full width\n     */\n    @Prop() fullWidth?: boolean;\n    /**\n     * @property {string} - button name attribute\n     */\n    @Prop() name?: string;\n    /**\n     * @property {\"default\" | \"sm\" | \"xs\"} - button size\n     */\n    @Prop() size: 'default' | 'sm' | 'xs' = 'default';\n    /**\n     * @property {\"submit\" | \"reset\" | \"button\"} - button type attribute\n     */\n    @Prop() type?: 'submit' | 'reset' | 'button';\n    /**\n     * @property {string} - button value attribute\n     */\n    @Prop() value?: string;\n    /**\n     * @property {\"primary\" | \"secondary\" | \"subtle\"} - button variant\n     */\n    @Prop() variant: 'primary' | 'secondary' | 'subtle' = 'primary';\n    /**\n     * @property {\"neutral\" | \"warning\" | \"success\"} - button state (color) neutral=purple, success=green, warning=red\n     */\n    @Prop() state: 'neutral' | 'warning' | 'success' = 'neutral';\n\n    componentDidRender() {\n        const attrs = this.el.attributes;\n        const dataAttrs = Object.keys(attrs)\n            .filter((k) => {\n                const propertyName = attrs[k].name;\n                if (propertyName) {\n                    return (\n                        propertyName.includes('data-test') ||\n                        propertyName.includes('aria-')\n                    );\n                }\n                return false;\n            })\n            .reduce((acc, k) => {\n                return { ...acc, [attrs[k].name]: attrs[k].value };\n            }, {});\n\n        const child = this.el.querySelector('button');\n        Object.keys(dataAttrs).forEach((k) => {\n            child.setAttribute(k, dataAttrs[k]);\n            this.el.removeAttribute(k);\n        });\n    }\n\n    render() {\n        let className = `xpl-button\n                    xpl-button--${this.size}\n                    xpl-button--${this.state}\n                    xpl-button--${this.variant}`;\n        if (this.iconOnly) className += ' xpl-button--icon-only';\n        if (this.fullWidth) className += ' xpl-button--full-width';\n        if (this.link && this.disabled)\n            className += ' xpl-button--link-disabled';\n\n        return (\n            <Host class={className}>\n                {\n                    /**\n                     * Conditionally render either an <slot> or <button> element\n                     * depending on if there's an `link` or not\n                     */\n                    this.link ? (\n                        <slot></slot>\n                    ) : (\n                        <button\n                            disabled={this.disabled}\n                            name={this.name}\n                            type={this.type}\n                            value={this.value}\n                        >\n                            <slot></slot>\n                        </button>\n                    )\n                }\n            </Host>\n        );\n    }\n}\n"]}