@haiilo/catalyst 8.1.0 → 8.2.0

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

@@ -12,713 +12,713 @@ import { MediaMatcher } from "../../utils/media-matcher";
  * @part suffix - The suffix icon.
  */
 export class CatButton {
-  constructor() {
-    this._iconOnly = true;
-    this.variant = 'outlined';
-    this.color = 'secondary';
-    this.active = false;
-    this.size = 'm';
-    this.name = undefined;
-    this.value = undefined;
-    this.disabled = false;
-    this.loading = false;
-    this.submit = false;
-    this.noEllipsis = false;
-    this.round = false;
-    this.url = undefined;
-    this.urlTarget = undefined;
-    this.icon = undefined;
-    this.iconOnly = false;
-    this.iconRight = false;
-    this.buttonId = undefined;
-    this.a11yLabel = undefined;
-    this.a11yCurrent = undefined;
-    this.nativeAttributes = undefined;
-    this.nativeContentAttributes = undefined;
-    this.buttonGroupPosition = undefined;
-  }
-  onIconOnlyChanged(value) {
-    // teardown
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener);
-    this.mediaQueryList = undefined;
-    this.mediaQueryListener = undefined;
-    // setup
-    if (isBreakpoint(value)) {
-      this.mediaMatcher ?? (this.mediaMatcher = new MediaMatcher());
-      this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);
-      this.mediaQueryListener = (event) => (this._iconOnly = event.matches);
-      this.mediaQueryList.addEventListener('change', this.mediaQueryListener);
-      this._iconOnly = this.mediaQueryList.matches;
+    constructor() {
+        this._iconOnly = true;
+        this.variant = 'outlined';
+        this.color = 'secondary';
+        this.active = false;
+        this.size = 'm';
+        this.name = undefined;
+        this.value = undefined;
+        this.disabled = false;
+        this.loading = false;
+        this.submit = false;
+        this.noEllipsis = false;
+        this.round = false;
+        this.url = undefined;
+        this.urlTarget = undefined;
+        this.icon = undefined;
+        this.iconOnly = false;
+        this.iconRight = false;
+        this.buttonId = undefined;
+        this.a11yLabel = undefined;
+        this.a11yCurrent = undefined;
+        this.nativeAttributes = undefined;
+        this.nativeContentAttributes = undefined;
+        this.buttonGroupPosition = undefined;
     }
-    else {
-      this._iconOnly = value;
+    onIconOnlyChanged(value) {
+        // teardown
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener);
+        this.mediaQueryList = undefined;
+        this.mediaQueryListener = undefined;
+        // setup
+        if (isBreakpoint(value)) {
+            this.mediaMatcher ?? (this.mediaMatcher = new MediaMatcher());
+            this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);
+            this.mediaQueryListener = (event) => (this._iconOnly = event.matches);
+            this.mediaQueryList.addEventListener('change', this.mediaQueryListener);
+            this._iconOnly = this.mediaQueryList.matches;
+        }
+        else {
+            this._iconOnly = value;
+        }
     }
-  }
-  componentWillLoad() {
-    this.onIconOnlyChanged(this.iconOnly);
-  }
-  componentWillRender() {
-    if (this.isIconButton && !this.a11yLabel) {
-      log.warn('[A11y] Missing ARIA label on icon button', this);
+    componentWillLoad() {
+        this.onIconOnlyChanged(this.iconOnly);
     }
-  }
-  haltDisabledEvents(event) {
-    if (this.disabled || this.loading) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
+    componentWillRender() {
+        if (this.isIconButton && !this.a11yLabel) {
+            log.warn('[A11y] Missing ARIA label on icon button', this);
+        }
     }
-  }
-  /**
-   * Programmatically move focus to the button. Use this method instead of
-   * `button.focus()`.
-   *
-   * @param options An optional object providing options to control aspects of
-   * the focusing process.
-   */
-  async doFocus(options) {
-    this.button.focus(options);
-  }
-  /**
-   * Programmatically remove focus from the button. Use this method instead of
-   * `button.blur()`.
-   */
-  async doBlur() {
-    this.button.blur();
-  }
-  /**
-   * Programmatically simulate a click on the button.
-   */
-  async doClick() {
-    this.button.click();
-  }
-  render() {
-    if (this.url) {
-      return (h("a", { ...this.nativeAttributes, ref: el => (this.button = el), href: this.disabled ? undefined : this.url, target: this.urlTarget, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
-          'cat-button': true,
-          'cat-button-active': this.active,
-          'cat-button-icon': this.isIconButton,
-          'cat-button-round': this.round,
-          'cat-button-loading': this.loading,
-          'cat-button-disabled': this.disabled,
-          'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
-          [`cat-button-${this.variant}`]: Boolean(this.variant),
-          [`cat-button-${this.color}`]: Boolean(this.color),
-          [`cat-button-${this.size}`]: Boolean(this.size)
-        }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+    haltDisabledEvents(event) {
+        if (this.disabled || this.loading) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
     }
-    else {
-      return (h("button", { ...this.nativeAttributes, ref: el => (this.button = el), type: this.submit ? 'submit' : 'button', name: this.name, value: this.value, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
-          'cat-button': true,
-          'cat-button-active': this.active,
-          'cat-button-icon': this.isIconButton,
-          'cat-button-round': this.round ?? this.isIconButton,
-          'cat-button-loading': this.loading,
-          'cat-button-disabled': this.disabled,
-          'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
-          [`cat-button-${this.variant}`]: Boolean(this.variant),
-          [`cat-button-${this.color}`]: Boolean(this.color),
-          [`cat-button-${this.size}`]: Boolean(this.size),
-          [`cat-group-button-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition),
-          'cat-group-button': Boolean(this.buttonGroupPosition)
-        }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
+    /**
+     * Programmatically move focus to the button. Use this method instead of
+     * `button.focus()`.
+     *
+     * @param options An optional object providing options to control aspects of
+     * the focusing process.
+     */
+    async doFocus(options) {
+        this.button.focus(options);
     }
-  }
-  get iconSize() {
-    switch (this.size) {
-      case 'xs':
-        return 's';
-      default:
-        return 'l';
+    /**
+     * Programmatically remove focus from the button. Use this method instead of
+     * `button.blur()`.
+     */
+    async doBlur() {
+        this.button.blur();
     }
-  }
-  get spinnerSize() {
-    switch (this.size) {
-      case 'xs':
-        return 'xs';
-      default:
-        return 'm';
+    /**
+     * Programmatically simulate a click on the button.
+     */
+    async doClick() {
+        this.button.click();
     }
-  }
-  get isIconButton() {
-    return Boolean(this.icon) && this._iconOnly;
-  }
-  get hasPrefixIcon() {
-    return Boolean(this.icon) && !this._iconOnly && !this.iconRight;
-  }
-  get hasSuffixIcon() {
-    return Boolean(this.icon) && !this._iconOnly && this.iconRight;
-  }
-  get content() {
-    return [
-      this.hasPrefixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null,
-      this.isIconButton ? (h("cat-icon", { icon: this.icon, size: this.iconSize })) : (h("span", { class: "cat-button-content", part: "content", ...this.nativeContentAttributes }, h("span", { class: "cat-button-content-inner" }, h("slot", null)))),
-      this.hasSuffixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "suffix" }) : null,
-      this.loading ? h("cat-spinner", { size: this.spinnerSize }) : null
-    ];
-  }
-  onClick(event) {
-    this.catClick.emit(event);
-  }
-  onFocus(event) {
-    this.catFocus.emit(event);
-  }
-  onBlur(event) {
-    this.catBlur.emit(event);
-  }
-  static get is() { return "cat-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cat-button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cat-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'filled' | 'outlined' | 'text' | 'link'",
-          "resolved": "\"filled\" | \"link\" | \"outlined\" | \"text\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The rendering style of the button."
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "'outlined'"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
-          "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The color palette of the button."
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'secondary'"
-      },
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set the button into an active state."
-        },
-        "attribute": "active",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
-          "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The size of the button."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'m'"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The name of the button, which gets paired with the button's value when\nsubmitted as part of a form. Corresponds with the native HTML name\nattribute."
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The value of the button, which gets paired with the button's name when\nsubmitted as part of a form. Corresponds with the native HTML value\nattribute."
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Specifies that the button should be disabled. A disabled button is unusable\nand un-clickable. Corresponds with the native HTML disabled attribute."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "loading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Displays the button in a loading state with a spinner. Just like a disabled\nbutton, an inactive button is unusable and un-clickable. However, it\nretains the current focus state."
-        },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "submit": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Allows the button to submit a form."
-        },
-        "attribute": "submit",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "noEllipsis": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disables ellipse overflowing button content."
-        },
-        "attribute": "no-ellipsis",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "round": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use round button edges."
-        },
-        "attribute": "round",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "url": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "A destination to link to, rendered in the href attribute of a link."
-        },
-        "attribute": "url",
-        "reflect": false
-      },
-      "urlTarget": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'_blank' | '_self'",
-          "resolved": "\"_blank\" | \"_self\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Specifies where to open the linked document."
-        },
-        "attribute": "url-target",
-        "reflect": false
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The name of an icon to be displayed in the button."
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "iconOnly": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean | Breakpoint",
-          "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\" | boolean",
-          "references": {
-            "Breakpoint": {
-              "location": "import",
-              "path": "../../utils/breakpoints",
-              "id": "src/utils/breakpoints.ts::Breakpoint"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Hide the actual button content and only display the icon."
-        },
-        "attribute": "icon-only",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "iconRight": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Display the icon on the right."
-        },
-        "attribute": "icon-right",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "buttonId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Adds a unique identifier for the button. Please note that with this\nparticular component this ID is added inside the web component. If you need\nan ID on the HTML element, use the regular `id` attribute instead."
-        },
-        "attribute": "button-id",
-        "reflect": false
-      },
-      "a11yLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Adds accessible label for the button that is only shown for screen\nreaders. Typically, this label text replaces the visible text on the\nbutton for users who use assistive technology."
-        },
-        "attribute": "a11y-label",
-        "reflect": false
-      },
-      "a11yCurrent": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Sets the `aria-current` attribute on the button."
-        },
-        "attribute": "a11y-current",
-        "reflect": false
-      },
-      "nativeAttributes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "{ [key: string]: string }",
-          "resolved": "undefined | { [key: string]: string; }",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Attributes that will be added to the native HTML button element"
-        }
-      },
-      "nativeContentAttributes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "{ [key: string]: string }",
-          "resolved": "undefined | { [key: string]: string; }",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Attributes that will be added to the native HTML button content element"
+    render() {
+        if (this.url) {
+            return (h("a", { ...this.nativeAttributes, ref: el => (this.button = el), href: this.disabled ? undefined : this.url, target: this.urlTarget, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
+                    'cat-button': true,
+                    'cat-button-active': this.active,
+                    'cat-button-icon': this.isIconButton,
+                    'cat-button-round': this.round,
+                    'cat-button-loading': this.loading,
+                    'cat-button-disabled': this.disabled,
+                    'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
+                    [`cat-button-${this.variant}`]: Boolean(this.variant),
+                    [`cat-button-${this.color}`]: Boolean(this.color),
+                    [`cat-button-${this.size}`]: Boolean(this.size)
+                }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
         }
-      },
-      "buttonGroupPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'first' | 'last' | 'middle'",
-          "resolved": "\"first\" | \"last\" | \"middle\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The index of a button that is used inside a cat-button-group component"
-        },
-        "attribute": "button-group-position",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_iconOnly": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "catClick",
-        "name": "catClick",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the button is clicked."
-        },
-        "complexType": {
-          "original": "MouseEvent",
-          "resolved": "MouseEvent",
-          "references": {
-            "MouseEvent": {
-              "location": "global",
-              "id": "global::MouseEvent"
-            }
-          }
+        else {
+            return (h("button", { ...this.nativeAttributes, ref: el => (this.button = el), type: this.submit ? 'submit' : 'button', name: this.name, value: this.value, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
+                    'cat-button': true,
+                    'cat-button-active': this.active,
+                    'cat-button-icon': this.isIconButton,
+                    'cat-button-round': this.round ?? this.isIconButton,
+                    'cat-button-loading': this.loading,
+                    'cat-button-disabled': this.disabled,
+                    'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
+                    [`cat-button-${this.variant}`]: Boolean(this.variant),
+                    [`cat-button-${this.color}`]: Boolean(this.color),
+                    [`cat-button-${this.size}`]: Boolean(this.size),
+                    [`cat-group-button-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition),
+                    'cat-group-button': Boolean(this.buttonGroupPosition)
+                }, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
         }
-      }, {
-        "method": "catFocus",
-        "name": "catFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the button received focus."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
-            }
-          }
+    }
+    get iconSize() {
+        switch (this.size) {
+            case 'xs':
+                return 's';
+            default:
+                return 'l';
         }
-      }, {
-        "method": "catBlur",
-        "name": "catBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the button loses focus."
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
-            }
-          }
+    }
+    get spinnerSize() {
+        switch (this.size) {
+            case 'xs':
+                return 'xs';
+            default:
+                return 'm';
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "doFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "options An optional object providing options to control aspects of\nthe focusing process."
-                }],
-              "text": "An optional object providing options to control aspects of\nthe focusing process."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    get isIconButton() {
+        return Boolean(this.icon) && this._iconOnly;
+    }
+    get hasPrefixIcon() {
+        return Boolean(this.icon) && !this._iconOnly && !this.iconRight;
+    }
+    get hasSuffixIcon() {
+        return Boolean(this.icon) && !this._iconOnly && this.iconRight;
+    }
+    get content() {
+        return [
+            this.hasPrefixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null,
+            this.isIconButton ? (h("cat-icon", { icon: this.icon, size: this.iconSize })) : (h("span", { class: "cat-button-content", part: "content", ...this.nativeContentAttributes }, h("span", { class: "cat-button-content-inner" }, h("slot", null)))),
+            this.hasSuffixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "suffix" }) : null,
+            this.loading ? h("cat-spinner", { size: this.spinnerSize }) : null
+        ];
+    }
+    onClick(event) {
+        this.catClick.emit(event);
+    }
+    onFocus(event) {
+        this.catFocus.emit(event);
+    }
+    onBlur(event) {
+        this.catBlur.emit(event);
+    }
+    static get is() { return "cat-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cat-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cat-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'filled' | 'outlined' | 'text' | 'link'",
+                    "resolved": "\"filled\" | \"link\" | \"outlined\" | \"text\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The rendering style of the button."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'outlined'"
             },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Programmatically move focus to the button. Use this method instead of\n`button.focus()`.",
-          "tags": [{
-              "name": "param",
-              "text": "options An optional object providing options to control aspects of\nthe focusing process."
-            }]
-        }
-      },
-      "doBlur": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
+                    "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color palette of the button."
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'secondary'"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the button into an active state."
+                },
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xs' | 's' | 'm' | 'l' | 'xl'",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the button."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'m'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the button, which gets paired with the button's value when\nsubmitted as part of a form. Corresponds with the native HTML name\nattribute."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the button, which gets paired with the button's name when\nsubmitted as part of a form. Corresponds with the native HTML value\nattribute."
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies that the button should be disabled. A disabled button is unusable\nand un-clickable. Corresponds with the native HTML disabled attribute."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays the button in a loading state with a spinner. Just like a disabled\nbutton, an inactive button is unusable and un-clickable. However, it\nretains the current focus state."
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "submit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the button to submit a form."
+                },
+                "attribute": "submit",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noEllipsis": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables ellipse overflowing button content."
+                },
+                "attribute": "no-ellipsis",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "round": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use round button edges."
+                },
+                "attribute": "round",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A destination to link to, rendered in the href attribute of a link."
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "urlTarget": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_self'",
+                    "resolved": "\"_blank\" | \"_self\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies where to open the linked document."
+                },
+                "attribute": "url-target",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of an icon to be displayed in the button."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "iconOnly": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | Breakpoint",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\" | boolean",
+                    "references": {
+                        "Breakpoint": {
+                            "location": "import",
+                            "path": "../../utils/breakpoints",
+                            "id": "src/utils/breakpoints.ts::Breakpoint"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the actual button content and only display the icon."
+                },
+                "attribute": "icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "iconRight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display the icon on the right."
+                },
+                "attribute": "icon-right",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "buttonId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds a unique identifier for the button. Please note that with this\nparticular component this ID is added inside the web component. If you need\nan ID on the HTML element, use the regular `id` attribute instead."
+                },
+                "attribute": "button-id",
+                "reflect": false
+            },
+            "a11yLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds accessible label for the button that is only shown for screen\nreaders. Typically, this label text replaces the visible text on the\nbutton for users who use assistive technology."
+                },
+                "attribute": "a11y-label",
+                "reflect": false
+            },
+            "a11yCurrent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the `aria-current` attribute on the button."
+                },
+                "attribute": "a11y-current",
+                "reflect": false
+            },
+            "nativeAttributes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "undefined | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attributes that will be added to the native HTML button element"
+                }
+            },
+            "nativeContentAttributes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [key: string]: string }",
+                    "resolved": "undefined | { [key: string]: string; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attributes that will be added to the native HTML button content element"
+                }
+            },
+            "buttonGroupPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'first' | 'last' | 'middle'",
+                    "resolved": "\"first\" | \"last\" | \"middle\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The index of a button that is used inside a cat-button-group component"
+                },
+                "attribute": "button-group-position",
+                "reflect": false
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Programmatically remove focus from the button. Use this method instead of\n`button.blur()`.",
-          "tags": []
-        }
-      },
-      "doClick": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "_iconOnly": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "catClick",
+                "name": "catClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button is clicked."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "catFocus",
+                "name": "catFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button received focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "catBlur",
+                "name": "catBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button loses focus."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "doFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "tags": [{
+                                    "name": "param",
+                                    "text": "options An optional object providing options to control aspects of\nthe focusing process."
+                                }],
+                            "text": "An optional object providing options to control aspects of\nthe focusing process."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically move focus to the button. Use this method instead of\n`button.focus()`.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "options An optional object providing options to control aspects of\nthe focusing process."
+                        }]
+                }
+            },
+            "doBlur": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically remove focus from the button. Use this method instead of\n`button.blur()`.",
+                    "tags": []
+                }
+            },
+            "doClick": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically simulate a click on the button.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Programmatically simulate a click on the button.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "iconOnly",
-        "methodName": "onIconOnlyChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "haltDisabledEvents",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "iconOnly",
+                "methodName": "onIconOnlyChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "haltDisabledEvents",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=cat-button.js.map