{"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\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"],"mappings":"kDAEO,MAAMA,EAAoB,IAC7BC,EAAA,OACIC,MAAM,OACNC,OAAO,OACPC,QAAQ,YACRC,QAAQ,MACRC,MAAM,8BAENL,EAAA,iCACAA,EAAA,KAAGM,OAAO,OAAM,eAAc,IAAIC,KAAK,OAAM,YAAW,WACpDP,EAAA,QACIQ,EAAE,+MACFD,KAAK,eACLE,QAAQ,KAERT,EAAA,WACIU,cAAc,UACdC,KAAK,IACLC,GAAG,IACHC,IAAI,OACJC,MAAM,QACNC,YAAY,gBAIpBf,EAAA,QACIQ,EAAE,gVACFD,KAAK,eACLE,QAAQ,KAERT,EAAA,WACIU,cAAc,UACdC,KAAK,IACLC,GAAG,IACHC,IAAI,OACJC,MAAM,KACNC,YAAY,gBAIpBf,EAAA,QACIQ,EAAE,8MACFD,KAAK,eACLE,QAAQ,KAERT,EAAA,WACIU,cAAc,UACdC,KAAK,IACLC,GAAG,IACHC,IAAI,OACJC,MAAM,QACNC,YAAY,gBAIpBf,EAAA,QACIQ,EAAE,8MACFD,KAAK,eACLE,QAAQ,KAERT,EAAA,WACIU,cAAc,UACdC,KAAK,IACLC,GAAG,IACHC,IAAI,OACJC,MAAM,OACNC,YAAY,gBAIpBf,EAAA,QACIQ,EAAE,oVACFD,KAAK,eACLE,QAAQ,KAERT,EAAA,WACIU,cAAc,UACdC,KAAK,IACLC,GAAG,IACHC,IAAI,OACJC,MAAM,QACNC,YAAY,gBAIpBf,EAAA,QACIQ,EAAE,yMACFD,KAAK,eACLE,QAAQ,KAERT,EAAA,WACIU,cAAc,UACdC,KAAK,IACLC,GAAG,IACHC,IAAI,OACJC,MAAM,KACNC,YAAY,kBClGhC,MAAMC,EAAY,ulV,MCmBLC,EAAM,M,+EAqBmC,U,cAKd,M,cAKA,M,UAMQ,U,aAKT,M,kEAoBvBC,eACR,GAAIC,KAAKC,SAAU,CACf,OAAQ,C,CAEZ,MAAMC,EAAcF,KAAKG,KAAKC,aAAa,YAE3C,GAAIF,EAAa,CACb,OAAOF,KAAKG,KAAKE,aAAa,W,CAGlC,OAAO,C,CAGXC,SACI,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,QACNnB,KAAKoB,MAAQvC,EAAA,YAAUsC,KAAMnB,KAAKoB,SAG3CvC,EAAA,QAAMmC,MAAM,qBACRnC,EAAA,YAAOmB,KAAKqB,QAEfrB,KAAKkB,SACFrC,EAAA,QAAMmC,MAAM,uBACPpC,K"}