{"version":3,"names":["ProgressAnimation","h","width","height","viewBox","version","xmlns","stroke","fill","d","opacity","attributeName","from","to","dur","begin","repeatCount","buttonCss","Button","tabIndex","this","disabled","hasTabIndex","host","hasAttribute","getAttribute","render","Proxy","href","props","target","download","hasCustomIcon","querySelector","Object","assign","class","selected","loading","name","icon","label"],"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/* eslint-disable */\nexport const ProgressAnimation = () => (\n    <svg width='100%' height='100%' viewBox='0 0 48 48' version='1.1' xmlns='http://www.w3.org/2000/svg'>\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 attributeName='opacity' from='1' to='0' dur='1.5s' begin='1.25s' repeatCount='indefinite' />\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 attributeName='opacity' from='1' to='0' dur='1.5s' begin='1s' repeatCount='indefinite' />\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 attributeName='opacity' from='1' to='0' dur='1.5s' begin='0.75s' repeatCount='indefinite' />\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 attributeName='opacity' from='1' to='0' dur='1.5s' begin='0.5s' repeatCount='indefinite' />\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 attributeName='opacity' from='1' to='0' dur='1.5s' begin='0.25s' repeatCount='indefinite' />\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 attributeName='opacity' from='1' to='0' dur='1.5s' begin='0s' repeatCount='indefinite' />\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, ComponentInterface, Element, h, Prop } from \"@stencil/core\";\nimport { ProgressAnimation } from \"../icons\";\n\nexport type ButtonVariant = \"content\" | \"content-primary\" | \"footer\" | \"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    readonly 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() readonly 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 }) readonly variant: ButtonVariant = \"content\";\n\n    /**\n     * If set to `true`, the user cannot interact with the button.\n     */\n    @Prop({ reflect: true }) readonly disabled: boolean = false;\n\n    /**\n     * If set to `true`, the button is considered selected or toggled.\n     */\n    @Prop({ reflect: true }) readonly selected: boolean = false;\n\n    /**\n     * The size of the button.\n     * Use `icon` for a button with just an icon.\n     */\n    @Prop({ reflect: true }) readonly size: ButtonSize = \"default\";\n\n    /**\n     * If set to `true`, the button is currently loading.\n     */\n    @Prop({ reflect: true }) readonly loading: boolean = 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    readonly 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    readonly 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    readonly 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            // eslint-disable-next-line @typescript-eslint/no-explicit-any\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'>{this.icon && <uic-icon name={this.icon}></uic-icon>}</slot>\n                </span>\n                <span class='uic-button__label'>\n                    <slot>{this.label}</slot>\n                </span>\n                {this.loading && <span class='uic-button__loading'>{ProgressAnimation()}</span>}\n            </Proxy>\n        );\n    }\n}\n"],"mappings":"kDAEO,MAAMA,EAAoB,IAC7BC,EAAA,OAAKC,MAAM,OAAOC,OAAO,OAAOC,QAAQ,YAAYC,QAAQ,MAAMC,MAAM,8BACpEL,EAAA,iCACAA,EAAA,KAAGM,OAAO,OAAM,eAAc,IAAIC,KAAK,OAAM,YAAW,WACpDP,EAAA,QACIQ,EAAE,+MACFD,KAAK,eACLE,QAAQ,KAERT,EAAA,WAASU,cAAc,UAAUC,KAAK,IAAIC,GAAG,IAAIC,IAAI,OAAOC,MAAM,QAAQC,YAAY,gBAG1Ff,EAAA,QACIQ,EAAE,gVACFD,KAAK,eACLE,QAAQ,KAERT,EAAA,WAASU,cAAc,UAAUC,KAAK,IAAIC,GAAG,IAAIC,IAAI,OAAOC,MAAM,KAAKC,YAAY,gBAGvFf,EAAA,QACIQ,EAAE,8MACFD,KAAK,eACLE,QAAQ,KAERT,EAAA,WAASU,cAAc,UAAUC,KAAK,IAAIC,GAAG,IAAIC,IAAI,OAAOC,MAAM,QAAQC,YAAY,gBAG1Ff,EAAA,QACIQ,EAAE,8MACFD,KAAK,eACLE,QAAQ,KAERT,EAAA,WAASU,cAAc,UAAUC,KAAK,IAAIC,GAAG,IAAIC,IAAI,OAAOC,MAAM,OAAOC,YAAY,gBAGzFf,EAAA,QACIQ,EAAE,oVACFD,KAAK,eACLE,QAAQ,KAERT,EAAA,WAASU,cAAc,UAAUC,KAAK,IAAIC,GAAG,IAAIC,IAAI,OAAOC,MAAM,QAAQC,YAAY,gBAG1Ff,EAAA,QACIQ,EAAE,yMACFD,KAAK,eACLE,QAAQ,KAERT,EAAA,WAASU,cAAc,UAAUC,KAAK,IAAIC,GAAG,IAAIC,IAAI,OAAOC,MAAM,KAAKC,YAAY,kBCnDnG,MAAMC,EAAY,ulV,MCeLC,EAAM,M,+EAqB4C,U,cAKL,M,cAKA,M,UAMD,U,aAKA,M,kEAoBrD,YAAYC,GACR,GAAIC,KAAKC,SAAU,CACf,OAAQ,C,CAEZ,MAAMC,EAAcF,KAAKG,KAAKC,aAAa,YAE3C,GAAIF,EAAa,CAEb,OAAOF,KAAKG,KAAKE,aAAa,W,CAGlC,OAAO,C,CAGX,MAAAC,GACI,MAAMC,EAAQP,KAAKQ,KAAO,IAAM,SAChC,MAAMC,EAAQT,KAAKQ,KACb,CAAEA,KAAMR,KAAKQ,KAAME,OAAQV,KAAKU,OAAQC,SAAUX,KAAKW,UACvD,CAAEZ,SAAUC,KAAKD,SAAUE,SAAUD,KAAKC,UAChD,MAAMW,IAAkBZ,KAAKG,KAAKU,cAAc,iBAEhD,OACIhC,EAAC0B,EAAKO,OAAAC,OAAA,CACFC,MAAO,CACH,4BAA6B,KAC7BC,SAAUjB,KAAKiB,SACfC,QAASlB,KAAKkB,UAEdT,GAEJ5B,EAAA,QACImC,MAAO,CACH,mBAAoB,KACpB,2BAA4BJ,IAGhC/B,EAAA,QAAMsC,KAAK,QAAQnB,KAAKoB,MAAQvC,EAAA,YAAUsC,KAAMnB,KAAKoB,SAEzDvC,EAAA,QAAMmC,MAAM,qBACRnC,EAAA,YAAOmB,KAAKqB,QAEfrB,KAAKkB,SAAWrC,EAAA,QAAMmC,MAAM,uBAAuBpC,K"}