{"file":"button.js","mappings":"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","names":[],"sources":["./src/components/icons/animated-loading.tsx","./src/components/button/button.scss?tag=uic-button","./src/components/button/button.tsx"],"sourcesContent":["import { h } from \"@stencil/core\";\n\nexport const ProgressAnimation = () => (\n    <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=\"0 0 48 48\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <title>animated-loading</title>\n        <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n            <path\n                d=\"M17.9592757,9.18231582 L19.5308353,15.0520462 C17.6920831,15.9680245 16.2220369,17.4113297 15.2606438,19.1395666 L9.35402463,17.5568896 C10.9886197,13.8475596 14.0134414,10.7851342 17.9592757,9.18231582 Z\"\n                fill=\"currentColor\"\n                opacity=\"0\"\n            >\n                <animate\n                    attributeName=\"opacity\"\n                    from=\"1\"\n                    to=\"0\"\n                    dur=\"1.5s\"\n                    begin=\"1.25s\"\n                    repeatCount=\"indefinite\"\n                />\n            </path>\n\n            <path\n                d=\"M8.21024261,21.3905738 L14.0518311,22.9569858 C13.92737,24.141698 14.0140148,25.3688289 14.3407417,26.5881905 C14.5869753,27.5071468 14.9535059,28.361745 15.4188507,29.1395822 L11.0945433,33.4650268 C9.95251686,31.9086827 9.07488485,30.1179648 8.54518678,28.1411047 C7.93540256,25.865359 7.84828199,23.5726992 8.21024261,21.3905738 Z\"\n                fill=\"currentColor\"\n                opacity=\"0\"\n            >\n                <animate\n                    attributeName=\"opacity\"\n                    from=\"1\"\n                    to=\"0\"\n                    dur=\"1.5s\"\n                    begin=\"1s\"\n                    repeatCount=\"indefinite\"\n                />\n            </path>\n\n            <path\n                d=\"M24.6035668,33.9837377 L26.1774214,39.8528531 C21.6561224,40.4796525 17.2127215,39.125525 13.8477152,36.3681076 L18.1245792,32.0923408 C19.9657535,33.4274244 22.2479372,34.1286276 24.6035668,33.9837377 Z\"\n                fill=\"currentColor\"\n                opacity=\"0\"\n            >\n                <animate\n                    attributeName=\"opacity\"\n                    from=\"1\"\n                    to=\"0\"\n                    dur=\"1.5s\"\n                    begin=\"0.75s\"\n                    repeatCount=\"indefinite\"\n                />\n            </path>\n\n            <path\n                d=\"M33.1344341,28.0704623 L38.9761904,29.6349529 C37.4408309,33.7051508 34.2701494,37.0993605 30.0416557,38.8173058 L28.4682515,32.9484087 C30.5811762,31.8961213 32.2073386,30.147565 33.1344341,28.0704623 Z\"\n                fill=\"currentColor\"\n                opacity=\"0\"\n            >\n                <animate\n                    attributeName=\"opacity\"\n                    from=\"1\"\n                    to=\"0\"\n                    dur=\"1.5s\"\n                    begin=\"0.5s\"\n                    repeatCount=\"indefinite\"\n                />\n            </path>\n\n            <path\n                d=\"M39.4548132,19.8588953 C39.9845113,21.8357554 40.1198186,23.8253786 39.9089667,25.7442253 L34.0012844,24.1604342 C34.0153662,23.254135 33.9054919,22.3307659 33.6592583,21.4118095 C33.3324332,20.1920819 32.7936791,19.0857349 32.0932292,18.1217708 L36.3703147,13.8461397 C37.7745019,15.5547587 38.8451298,17.5835259 39.4548132,19.8588953 Z\"\n                fill=\"currentColor\"\n                opacity=\"0\"\n            >\n                <animate\n                    attributeName=\"opacity\"\n                    from=\"1\"\n                    to=\"0\"\n                    dur=\"1.5s\"\n                    begin=\"0.25s\"\n                    repeatCount=\"indefinite\"\n                />\n            </path>\n\n            <path\n                d=\"M33.4622315,11.097115 L29.1382878,15.421063 C27.4412976,14.4048944 25.4461681,13.8899762 23.3954149,14.016325 L21.8235745,8.1470089 C26.0418338,7.56249057 30.192223,8.70222701 33.4622315,11.097115 Z\"\n                fill=\"currentColor\"\n                opacity=\"0\"\n            >\n                <animate\n                    attributeName=\"opacity\"\n                    from=\"1\"\n                    to=\"0\"\n                    dur=\"1.5s\"\n                    begin=\"0s\"\n                    repeatCount=\"indefinite\"\n                />\n            </path>\n        </g>\n    </svg>\n);\n","@import \"variants\";\n\n/**\n    @prop --uic-button-min-width: min-width of the default button\n    @prop --uic-button-height: height of the default button\n    @prop --uic-icon-button-width: width of the icon-sized button\n    @prop --uic-icon-button-height: height of the icon-sized button\n    @prop --uic-stretched-button-width: width of the stretched-sized button\n    @prop --uic-stretched-button-height: height of the stretched-sized button\n*/\n\nuic-button {\n    display: inline-block;\n    box-sizing: border-box;\n    position: relative;\n    padding: 8px;\n\n    .uic-button__native-button {\n        @include font(normal, bold);\n        width: 100%;\n        display: flex;\n        box-sizing: border-box;\n        align-items: center;\n        justify-content: center;\n        position: relative;\n        border-radius: 0;\n        border: 1px solid transparent;\n        padding: 0 16px;\n        outline: 2px solid transparent;\n        outline-offset: -2px;\n        user-select: none;\n        cursor: pointer;\n        text-decoration: none;\n        // prevent distracting highlight when pressing\n        -webkit-tap-highlight-color: transparent;\n\n        .uic-button__loading {\n            height: 100%;\n            position: relative;\n        }\n\n        &.loading {\n            pointer-events: none;\n\n            .uic-button__label,\n            .uic-button__icon {\n                display: none;\n            }\n\n            svg {\n                width: auto; // Added for safari. Else SVG has full width.\n            }\n        }\n\n        &::before {\n            @include absolute();\n            content: \"\";\n            background: transparent;\n        }\n\n        &:disabled {\n            font-weight: normal;\n            pointer-events: none;\n        }\n    }\n\n    .uic-button__label {\n        @include truncate();\n    }\n\n    &[loading],\n    &[disabled]:not([disabled=\"false\"]) {\n        pointer-events: none;\n    }\n}\n\nuic-button[size=\"default\"] .uic-button__native-button {\n    min-width: var(--uic-button-min-width);\n    height: var(--uic-button-height);\n}\n\nuic-button[size=\"icon\"] .uic-button__native-button {\n    width: var(--uic-icon-button-width);\n    height: var(--uic-icon-button-height);\n    padding: 0;\n}\n\nuic-button[size=\"icon-stretched\"] .uic-button__native-button {\n    width: var(--uic-stretched-button-width);\n    height: var(--uic-stretched-button-height);\n    padding: 0;\n}\n\n// SLOT SUPPORT\n\nuic-button slot-fb {\n    display: flex;\n}\n\nuic-button[size=\"default\"] .uic-button__icon--custom,\nuic-button[size=\"default\"][icon] .uic-button__icon {\n    margin-right: 8px;\n}\n\n.uic-button__icon--custom {\n    width: var(--uic-icon-width);\n    height: var(--uic-icon-height);\n\n    svg {\n        width: 100%;\n        height: 100%;\n    }\n}\n","import { Component, h, Prop, ComponentInterface, Element } from \"@stencil/core\";\nimport { ProgressAnimation } from \"../icons\";\n\nexport type ButtonVariant =\n    | \"content\"\n    | \"content-primary\"\n    | \"footer\"\n    | \"footer-primary\";\n\nexport type ButtonSize = \"icon\" | \"icon-stretched\" | \"default\";\n\n/**\n * @slot - Content is placed inside the button if provided without a slot name\n * @slot icon - Should be used to place a custom icon\n */\n@Component({\n    tag: \"uic-button\",\n    styleUrl: \"button.scss\",\n})\nexport class Button implements ComponentInterface {\n    @Element() host: HTMLUicButtonElement;\n\n    /**\n     * The name of the icon to show next to the label.\n     */\n    @Prop()\n    icon?: string;\n\n    /**\n     * The text shown inside the button.\n     * Please prefer the use of the default slot (content within the button element).\n     * Becasue of a bug (https://github.com/ionic-team/stencil/issues/2054),\n     * this text may not be visible when nesting button within other elements even if there is not default slot for the button.\n     */\n    @Prop() label?: string;\n\n    /**\n     * The color variant to use. You can choose between color schemes that are suited for content or footer areas.\n     * Use the `primary` variants to show visually more pronounced versions of these schemes.\n     */\n    @Prop({ reflect: true }) variant: ButtonVariant = \"content\";\n\n    /**\n     * If set to `true`, the user cannot interact with the button.\n     */\n    @Prop({ reflect: true }) disabled = false;\n\n    /**\n     * If set to `true`, the button is considered selected or toggled.\n     */\n    @Prop({ reflect: true }) selected = false;\n\n    /**\n     * The size of the button.\n     * Use `icon` for a button with just an icon.\n     */\n    @Prop({ reflect: true }) size: ButtonSize = \"default\";\n\n    /**\n     * If set to `true`, the button is currently loading.\n     */\n    @Prop({ reflect: true }) loading = false;\n\n    /**\n     * If a value is set, an <a> tag with the specified href will be rendered instead of a button.\n     */\n    @Prop()\n    href?: string;\n\n    /**\n     * If the `href` value is set, this value will be used for target attribute of the <a> tag.\n     */\n    @Prop()\n    target?: string;\n\n    /**\n     * If the `href` value is set, this value will be used for download attribute of the <a> tag.\n     */\n    @Prop()\n    download?: string;\n\n    private get tabIndex() {\n        if (this.disabled) {\n            return -1;\n        }\n        const hasTabIndex = this.host.hasAttribute(\"tabindex\");\n\n        if (hasTabIndex) {\n            return this.host.getAttribute(\"tabindex\") as any;\n        }\n\n        return 0;\n    }\n\n    render() {\n        const Proxy = this.href ? \"a\" : \"button\";\n        const props = this.href\n            ? { href: this.href, target: this.target, download: this.download }\n            : { tabIndex: this.tabIndex, disabled: this.disabled };\n        const hasCustomIcon = !!this.host.querySelector(\"[slot='icon']\");\n\n        return (\n            <Proxy\n                class={{\n                    \"uic-button__native-button\": true,\n                    selected: this.selected,\n                    loading: this.loading,\n                }}\n                {...props}\n            >\n                <span\n                    class={{\n                        \"uic-button__icon\": true,\n                        \"uic-button__icon--custom\": hasCustomIcon,\n                    }}\n                >\n                    <slot name=\"icon\">\n                        {this.icon && <uic-icon name={this.icon}></uic-icon>}\n                    </slot>\n                </span>\n                <span class=\"uic-button__label\">\n                    <slot>{this.label}</slot>\n                </span>\n                {this.loading && (\n                    <span class=\"uic-button__loading\">\n                        {ProgressAnimation()}\n                    </span>\n                )}\n            </Proxy>\n        );\n    }\n}\n"],"version":3}