@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

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

@@ -1,1104 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { __decorate, __metadata } from "tslib";
-import { h, Host } from "@stencil/core";
-import { ariaBooleanToString, inheritAttributes, Logger, hasValue, OneOf, Required, Type, } from "../../utils/index";
-import { BUTTON_BRAND_SIZES, BUTTON_COLORS, BUTTON_ELEMENT_TYPES, BUTTON_SIZES, BUTTON_TARGETS, } from "./button.interfaces";
-/**
- * Button provides a clickable element for triggering actions, submitting forms, or navigating — supporting text, icons, or both.
- *
- * @slot - Button label text and/or icon children. Rendered inside a `<span part="label">` wrapper.
- * @part native - The native `<button>` or `<a>` element.
- * @part spinner - The loading spinner shown when `loading` is true.
- * @part icon - The leading icon wrapper (or the brand icon wrapper when `brandIcon` is set).
- * @part label - The text label wrapper (`<span>`).
- * @part icon-right - The trailing icon wrapper.
- */
-export class Button {
-    constructor() {
-        this.inheritAttributes = {};
-        /**
-         * PUBLIC PROPERTY API
-         * ─────────────────────────────────────────────────────
-         */
-        /**
-         * The color to use from your application's color palette.
-         */
-        this.color = 'primary';
-        /**
-         * The type of button.
-         */
-        this.elementType = 'button';
-        /**
-         * If `true`, the user cannot interact with the button.
-         */
-        this.disabled = false;
-        /**
-         * Specifies the URL of the page the link goes to
-         */
-        this.href = '';
-        /**
-         * Specifies where to display the linked URL.
-         * Only applies when an `href` is provided.
-         */
-        this.target = '_self';
-        /**
-         * Specifies the relationship of the target object to the link object.
-         * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
-         */
-        this.rel = '';
-        /**
-         * This attribute instructs browsers to download a URL instead of navigating to
-         * it, so the user will be prompted to save it as a local file. If the attribute
-         * has a value, it is used as the pre-filled file name in the Save prompt
-         * (the user can still change the file name if they want).
-         */
-        this.download = '';
-        /**
-         * If `true` adds a box shadow to improve readability on image background
-         * */
-        this.shadow = false;
-        /**
-         * If `true` the width of the buttons is limited
-         */
-        this.square = false;
-        /**
-         * If `true` the button has a full width
-         */
-        this.wide = false;
-        /**
-         * If `true` the button has no padding and a reduced height
-         */
-        this.flat = false;
-        /**
-         * If `true` the button is outlined
-         */
-        this.outlined = false;
-        /**
-         * If `true` the button is inverted
-         */
-        this.inverted = false;
-        /**
-         * If `true` the label is hidden and a loading spinner is shown instead.
-         */
-        this.loading = false;
-        // /**
-        //  * If `true` the button is a popup.
-        //  */
-        // @Prop() dsPopup = undefined
-        /**
-         * Name of the left button icon
-         */
-        this.icon = '';
-        /**
-         * If `true` the icon turns
-         */
-        this.iconTurn = false;
-        /**
-         * Name of the right button icon
-         */
-        this.iconRight = '';
-        /**
-         * A brand icon shown above the label instead of the regular leading/trailing icons.
-         * Accepts either a URL to an SVG file or raw `<svg>` markup.
-         * When set, `icon` and `iconRight` are ignored.
-         */
-        this.brandIcon = '';
-        /**
-         * The label of the button will not break
-         */
-        this.noWrap = false;
-        /**
-         * The name of the button, which is submitted with the form data.
-         */
-        this.name = '';
-        /**
-         * The value of the button, which is submitted with the form data.
-         */
-        this.value = '';
-        /**
-         * A11y attributes for the native button element.
-         */
-        this.a11yControls = '';
-        /**
-         * A11y attributes for the native button element.
-         */
-        this.a11yTitle = '';
-        /**
-         * A11y attributes for the native button element.
-         */
-        this.a11yLabel = '';
-        /**
-         * A11y attributes for the native button element.
-         */
-        this.a11yHaspopup = '';
-        this.handleHostClick = (ev) => {
-            if (this.disabled) {
-                ev.preventDefault();
-                ev.stopPropagation();
-            }
-        };
-        this.handleFocus = () => {
-            this.dsFocus.emit();
-        };
-        this.handleBlur = () => {
-            this.dsBlur.emit();
-        };
-        this.handleClick = (ev) => {
-            var _a, _b;
-            if (!this.disabled) {
-                if (this.elementType === 'submit') {
-                    (_a = this.internals.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
-                }
-                if (this.elementType === 'reset') {
-                    (_b = this.internals.form) === null || _b === void 0 ? void 0 : _b.reset();
-                }
-                this.dsClick.emit(ev);
-                if (hasValue(this.href)) {
-                    this.dsNavigate.emit(ev);
-                }
-            }
-        };
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    /**
-     * LIFECYCLE
-     * ─────────────────────────────────────────────────────
-     */
-    componentWillLoad() {
-        this.inheritAttributes = inheritAttributes(this.el, [
-            'title',
-            'aria-label',
-            'aria-controls',
-            'aria-hidden',
-            'tabindex',
-            'aria-haspopup',
-        ]);
-        if (this.el.hasAttribute('ds-popup') && !this.a11yHaspopup) {
-            this.a11yHaspopup = 'true';
-        }
-    }
-    componentDidRender() {
-        this.dsDidRender.emit();
-    }
-    /**
-     * PUBLIC LISTENERS
-     * ─────────────────────────────────────────────────────
-     */
-    listenToClick(ev) {
-        if (this.disabled && ev.target && ev.target === this.el) {
-            ev.preventDefault();
-            ev.stopPropagation();
-        }
-    }
-    /**
-     * EVENT HANDLERS
-     * ─────────────────────────────────────────────────────
-     */
-    get isIconInverted() {
-        return this.inverted;
-    }
-    get hasBrandIcon() {
-        return hasValue(this.brandIcon);
-    }
-    get isBrandIconSvg() {
-        return this.brandIcon.trim().startsWith('<');
-    }
-    get brandIconColor() {
-        const match = this.color.match(/^brand-(purple|red|yellow|green)$/);
-        return match ? match[1] : undefined;
-    }
-    get leftIconAttrs() {
-        if (!hasValue(this.icon) || this.loading) {
-            return {
-                style: { display: 'none' },
-            };
-        }
-        return {};
-    }
-    get leftRightAttrs() {
-        if (!hasValue(this.iconRight) || this.loading) {
-            return {
-                style: { display: 'none' },
-            };
-        }
-        return {};
-    }
-    get loadingAttrs() {
-        if (!this.loading) {
-            return {
-                style: { display: 'none' },
-            };
-        }
-        return {};
-    }
-    /**
-     * RENDER
-     * ─────────────────────────────────────────────────────
-     */
-    render() {
-        const { elementType, download, href, rel, target, name, value } = this;
-        const size = this.size || undefined;
-        const TagType = !hasValue(this.href) ? 'button' : 'a';
-        const attrs = TagType === 'button'
-            ? { type: elementType, name, value }
-            : {
-                download,
-                href,
-                rel,
-                target,
-            };
-        const ariaAttributes = {
-            'title': this.a11yTitle || this.inheritAttributes['title'],
-            'aria-label': this.a11yLabel || this.inheritAttributes['aria-label'] || this.a11yTitle || this.inheritAttributes['title'],
-            'aria-controls': this.a11yControls || this.inheritAttributes['aria-controls'],
-            'aria-haspopup': this.a11yHaspopup || this.inheritAttributes['aria-haspopup'],
-        };
-        return (h(Host, { key: '85b2982aee768f39de050fd6638d3bdfa70107fd', onClick: this.handleHostClick, class: {
-                'is-wide': this.wide,
-                [`is-${this.color || 'primary'}`]: true,
-                [`is-${size}`]: hasValue(size),
-                [`is-inverted`]: this.inverted,
-                [`is-disabled`]: this.disabled,
-                [`is-loading`]: this.loading,
-                [`is-flat`]: this.flat,
-                [`is-square`]: this.square,
-                [`has-shadow`]: this.shadow,
-                [`has-no-wrap`]: this.noWrap,
-                [`has-brand-icon`]: this.hasBrandIcon,
-            } }, h(TagType, Object.assign({ key: '4f583350232534317e81b44bad7d2261c3665f96' }, attrs, this.inheritAttributes, { type: this.elementType, id: "button", part: "native", disabled: this.disabled || this.loading, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, "aria-busy": ariaBooleanToString(!!this.loading), "aria-disabled": ariaBooleanToString(this.disabled || this.loading) }, ariaAttributes), this.loading ? (h("ds-spinner", Object.assign({}, this.loadingAttrs, { part: "spinner", size: "sm", deactivated: !this.loading }))) : (''), this.hasBrandIcon ? (h("ds-brand-icon", { part: "icon", svg: this.isBrandIconSvg ? this.brandIcon : '', src: this.isBrandIconSvg ? '' : this.brandIcon, size: this.brandSize, color: this.brandIconColor })) : hasValue(this.icon) ? (h("ds-icon", Object.assign({}, this.leftIconAttrs, { part: "icon", class: this.square ? '' : 'icon-left', name: this.icon, size: size, turn: this.iconTurn, inverted: this.isIconInverted }))) : (''), h("span", { key: 'c15e826bc0727e10674a2953ef6074fe840b512c', part: "label" }, h("slot", { key: '929fdc12e0a0ab50a04f8188043ba3269172d38f' })), !this.hasBrandIcon && hasValue(this.iconRight) ? (h("ds-icon", Object.assign({}, this.leftRightAttrs, { part: "icon-right", class: "icon-right", name: this.iconRight, size: 'sm', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''))));
-    }
-    static get is() { return "ds-button"; }
-    static get encapsulation() { return "shadow"; }
-    static get formAssociated() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["button.host.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["button.host.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ButtonColor",
-                    "resolved": "\"brand-green\" | \"brand-purple\" | \"brand-red\" | \"brand-yellow\" | \"danger\" | \"ghost\" | \"info\" | \"link\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
-                    "references": {
-                        "ButtonColor": {
-                            "location": "import",
-                            "path": "./button.interfaces",
-                            "id": "src/components/button/button.interfaces.ts::ButtonColor",
-                            "referenceLocation": "ButtonColor"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The color to use from your application's color palette."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "color",
-                "defaultValue": "'primary'"
-            },
-            "elementType": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ButtonElementType",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
-                    "references": {
-                        "ButtonElementType": {
-                            "location": "import",
-                            "path": "./button.interfaces",
-                            "id": "src/components/button/button.interfaces.ts::ButtonElementType",
-                            "referenceLocation": "ButtonElementType"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The type of button."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "element-type",
-                "defaultValue": "'button'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the user cannot interact with the button."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ButtonSize",
-                    "resolved": "\"lg\" | \"sm\" | undefined",
-                    "references": {
-                        "ButtonSize": {
-                            "location": "import",
-                            "path": "./button.interfaces",
-                            "id": "src/components/button/button.interfaces.ts::ButtonSize",
-                            "referenceLocation": "ButtonSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Size of the button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size"
-            },
-            "href": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies the URL of the page the link goes to"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "href",
-                "defaultValue": "''"
-            },
-            "target": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ButtonTarget",
-                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
-                    "references": {
-                        "ButtonTarget": {
-                            "location": "import",
-                            "path": "./button.interfaces",
-                            "id": "src/components/button/button.interfaces.ts::ButtonTarget",
-                            "referenceLocation": "ButtonTarget"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "target",
-                "defaultValue": "'_self'"
-            },
-            "rel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "rel",
-                "defaultValue": "''"
-            },
-            "download": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "download",
-                "defaultValue": "''"
-            },
-            "shadow": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` adds a box shadow to improve readability on image background"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "shadow",
-                "defaultValue": "false"
-            },
-            "square": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the width of the buttons is limited"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "square",
-                "defaultValue": "false"
-            },
-            "wide": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the button has a full width"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "wide",
-                "defaultValue": "false"
-            },
-            "flat": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the button has no padding and a reduced height"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "flat",
-                "defaultValue": "false"
-            },
-            "outlined": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the button is outlined"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "outlined",
-                "defaultValue": "false"
-            },
-            "inverted": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the button is inverted"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "inverted",
-                "defaultValue": "false"
-            },
-            "loading": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the label is hidden and a loading spinner is shown instead."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "loading",
-                "defaultValue": "false"
-            },
-            "icon": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Name of the left button icon"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon",
-                "defaultValue": "''"
-            },
-            "iconTurn": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the icon turns"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon-turn",
-                "defaultValue": "false"
-            },
-            "iconRight": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Name of the right button icon"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon-right",
-                "defaultValue": "''"
-            },
-            "brandIcon": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A brand icon shown above the label instead of the regular leading/trailing icons.\nAccepts either a URL to an SVG file or raw `<svg>` markup.\nWhen set, `icon` and `iconRight` are ignored."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "brand-icon",
-                "defaultValue": "''"
-            },
-            "brandSize": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "ButtonBrandSize",
-                    "resolved": "\"lg\" | \"sm\" | undefined",
-                    "references": {
-                        "ButtonBrandSize": {
-                            "location": "import",
-                            "path": "./button.interfaces",
-                            "id": "src/components/button/button.interfaces.ts::ButtonBrandSize",
-                            "referenceLocation": "ButtonBrandSize"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Size of the brand icon."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "brand-size"
-            },
-            "noWrap": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The label of the button will not break"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "no-wrap",
-                "defaultValue": "false"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the button, which is submitted with the form data."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "name",
-                "defaultValue": "''"
-            },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the button, which is submitted with the form data."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value",
-                "defaultValue": "''"
-            },
-            "a11yControls": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A11y attributes for the native button element."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "a-1-1y-controls",
-                "defaultValue": "''"
-            },
-            "a11yTitle": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A11y attributes for the native button element."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "a-1-1y-title",
-                "defaultValue": "''"
-            },
-            "a11yLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A11y attributes for the native button element."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "a-1-1y-label",
-                "defaultValue": "''"
-            },
-            "a11yHaspopup": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "A11y attributes for the native button element."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "a-1-1y-haspopup",
-                "defaultValue": "''"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dsClick",
-                "name": "dsClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the link element has clicked."
-                },
-                "complexType": {
-                    "original": "ButtonClickDetail",
-                    "resolved": "MouseEvent",
-                    "references": {
-                        "ButtonClickDetail": {
-                            "location": "import",
-                            "path": "./button.interfaces",
-                            "id": "src/components/button/button.interfaces.ts::ButtonClickDetail",
-                            "referenceLocation": "ButtonClickDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsNavigate",
-                "name": "dsNavigate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the link element has clicked."
-                },
-                "complexType": {
-                    "original": "ButtonNavigateDetail",
-                    "resolved": "MouseEvent",
-                    "references": {
-                        "ButtonNavigateDetail": {
-                            "location": "import",
-                            "path": "./button.interfaces",
-                            "id": "src/components/button/button.interfaces.ts::ButtonNavigateDetail",
-                            "referenceLocation": "ButtonNavigateDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsFocus",
-                "name": "dsFocus",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the button has focus."
-                },
-                "complexType": {
-                    "original": "ButtonFocusDetail",
-                    "resolved": "void",
-                    "references": {
-                        "ButtonFocusDetail": {
-                            "location": "import",
-                            "path": "./button.interfaces",
-                            "id": "src/components/button/button.interfaces.ts::ButtonFocusDetail",
-                            "referenceLocation": "ButtonFocusDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsBlur",
-                "name": "dsBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the button loses focus."
-                },
-                "complexType": {
-                    "original": "ButtonBlurDetail",
-                    "resolved": "void",
-                    "references": {
-                        "ButtonBlurDetail": {
-                            "location": "import",
-                            "path": "./button.interfaces",
-                            "id": "src/components/button/button.interfaces.ts::ButtonBlurDetail",
-                            "referenceLocation": "ButtonBlurDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsDidRender",
-                "name": "dsDidRender",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the button has been  rendered."
-                },
-                "complexType": {
-                    "original": "ButtonDidRenderDetail",
-                    "resolved": "void",
-                    "references": {
-                        "ButtonDidRenderDetail": {
-                            "location": "import",
-                            "path": "./button.interfaces",
-                            "id": "src/components/button/button.interfaces.ts::ButtonDidRenderDetail",
-                            "referenceLocation": "ButtonDidRenderDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "listenToClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }];
-    }
-    static get attachInternalsMemberName() { return "internals"; }
-}
-__decorate([
-    Logger('button'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], Button.prototype, "createLogger", null);
-__decorate([
-    OneOf(BUTTON_COLORS),
-    __metadata("design:type", String)
-], Button.prototype, "color", void 0);
-__decorate([
-    Required(),
-    OneOf(BUTTON_ELEMENT_TYPES),
-    __metadata("design:type", String)
-], Button.prototype, "elementType", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Button.prototype, "disabled", void 0);
-__decorate([
-    OneOf(BUTTON_SIZES),
-    __metadata("design:type", Object)
-], Button.prototype, "size", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Button.prototype, "href", void 0);
-__decorate([
-    Required(),
-    OneOf(BUTTON_TARGETS),
-    __metadata("design:type", String)
-], Button.prototype, "target", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Button.prototype, "rel", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Button.prototype, "download", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Button.prototype, "shadow", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Button.prototype, "square", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Button.prototype, "wide", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Button.prototype, "flat", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Button.prototype, "outlined", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Button.prototype, "inverted", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Button.prototype, "loading", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Button.prototype, "icon", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Button.prototype, "iconTurn", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Button.prototype, "iconRight", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Button.prototype, "brandIcon", void 0);
-__decorate([
-    OneOf(BUTTON_BRAND_SIZES),
-    __metadata("design:type", Object)
-], Button.prototype, "brandSize", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Button.prototype, "noWrap", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Button.prototype, "name", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Button.prototype, "value", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Button.prototype, "a11yControls", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Button.prototype, "a11yTitle", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Button.prototype, "a11yLabel", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], Button.prototype, "a11yHaspopup", void 0);