{"version":3,"names":["sewWsButtonCss","SewWsButton","constructor","hostRef","this","updateDisabledState","slottedElement","tagName","el","toggleAttribute","disabled","disabledStateObserver","MutationObserver","handleSlotChange","initialize","clickSlotted","click","checkForSqueezing","_a","offsetWidth","buttonIsSqueezed","emit","onLoading","loading","handleResize","componentWillLoad","querySelector","isIconOnly","addEventListener","e","stopPropagation","disconnect","observe","attributeFilter","icon","iconToUse","showIconOnly","componentDidRender","render","h","Host","key","onClick","class","ellipsis","onSlotchange","counter"],"sources":["src/components/website-components/sew-ws-button/sew-ws-button.scss?tag=sew-ws-button&encapsulation=shadow","src/components/website-components/sew-ws-button/sew-ws-button.tsx"],"sourcesContent":[":host {\n    --background-color: var(--button-background-color-dark, transparent);\n    --border-color: var(--button-border-color-dark, #{$color-red});\n    --typo-color: var(--button-color-dark, #{$color-red});\n\n    @include typo-ws-paragraph-bold;\n\n    align-items: center;\n    justify-content: center;\n    background-color: var(--background-color);\n    border: 1px solid var(--border-color);\n    color: var(--typo-color);\n    cursor: pointer;\n    display: inline-grid;\n    max-width: 100%;\n    position: relative;\n    box-sizing: border-box;\n\n    ::slotted(*) {\n        all: unset;\n        color: inherit;\n        padding: 12px 32px;\n        white-space: nowrap;\n    }\n\n    .svg,\n    .text {\n        grid-area: 1 / 1 / 2 / 2;\n    }\n\n    .svg {\n        opacity: 0;\n        transform: translate3d(2px, 0, 0);\n        transition:\n            opacity 0.2s,\n            transform 0.2s;\n        width: 24px;\n    }\n\n    .text {\n        align-self: stretch;\n        display: flex;\n        max-width: 100%;\n        overflow: hidden;\n        transform: translate3d(0, 0, 0);\n        transition: transform 0.2s;\n    }\n\n    .counter {\n        align-items: center;\n        background-color: $color-red;\n        border: 2px solid $color-white;\n        border-radius: 50%;\n        color: $color-white;\n        display: flex;\n        font-size: 12px;\n        height: 26px;\n        justify-content: center;\n        position: absolute;\n        right: -14px;\n        top: -14px;\n        width: 26px;\n    }\n}\n\n:host([full-width]) {\n    display: grid;\n    width: 100%;\n}\n\n:host([size='small']) {\n    ::slotted(*) {\n        padding: 8px 32px;\n    }\n}\n\n:host(.ellipsis) {\n    ::slotted(*) {\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n}\n\n:host(:hover) {\n    .svg {\n        opacity: 1;\n        transform: translate3d(10px, 0, 0);\n    }\n\n    .text {\n        transform: translate3d(8px, 0, 0);\n        transition: transform 0.2s;\n    }\n}\n\n// selector primary is deprecated\n:host([hierarchy='primary']),\n:host([hierarchy='filled']) {\n    --background-color: #{$color-red};\n    --typo-color: #{$color-white};\n}\n\n:host(:active:not([disabled])) {\n    --border-color: #{$color-red};\n    --background-color: #{$color-red};\n    --typo-color: #{$color-white};\n}\n\n:host([hierarchy='filled']:active:not([disabled])) {\n    --border-color: #{$color-red-dark};\n    --background-color: #{$color-red-dark};\n}\n\n:host([disabled]) {\n    border-color: $color-grey-03;\n    color: $color-grey-03;\n    cursor: auto;\n\n    .svg {\n        opacity: 0;\n        transform: translate3d(8px, 0, 0);\n    }\n\n    .text {\n        transform: translate3d(0, 0, 0);\n        transition: transform 0.2s;\n    }\n}\n\n:host(.icon-only) {\n    .svg {\n        opacity: 1;\n        transform: translate3d(10px, 0, 0);\n        transition: transform 0.2s ease 0s;\n\n        .shaft {\n            opacity: 0;\n            transition: opacity 0.2s ease 0s;\n        }\n    }\n\n    ::slotted(*) {\n        width: 48px;\n        height: 48px;\n        padding: 24px !important;\n        box-sizing: border-box;\n        overflow: hidden;\n        color: transparent;\n        user-select: none;\n    }\n}\n\n:host(.icon-only:hover) {\n    .svg {\n        transform: translate3d(12px, 0, 0);\n\n        .shaft {\n            opacity: 1;\n        }\n    }\n}\n\n:host(.icon-only[icon]) {\n    .svg {\n        transform: translate3d(12px, 0, 0) !important;\n    }\n}\n\n:host([icon]),\n:host(.loading) {\n    .svg {\n        opacity: 1;\n        transform: translate3d(17px, 0, 0);\n        transition: transform 0.2s ease 0s;\n        width: 24px;\n    }\n\n    ::slotted(*) {\n        padding-left: 46px;\n    }\n}\n\n:host([icon]:hover),\n:host(.loading) {\n    .svg {\n        transform: translate3d(17px, 0, 0) scale(1.2);\n    }\n\n    .text {\n        transform: translate3d(2px, 0, 0);\n    }\n}\n\n:host([icon='launch']:hover),\n:host([icon='download']:hover) {\n    .svg {\n        transform: translate3d(17px, 0, 0);\n    }\n\n    .text {\n        transform: translate3d(4px, 0, 0);\n    }\n}\n\n:host([icon='launch']) {\n    .arrow {\n        transition: transform 0.2s;\n    }\n}\n\n:host([icon='launch']:hover) {\n    .arrow {\n        transform: translate(2px, -2px);\n    }\n}\n\n@keyframes download-animation {\n    0% {\n        transform: translateY(0);\n    }\n    50% {\n        transform: translateY(-3px);\n    }\n    100% {\n        transform: translateY(0);\n    }\n}\n\n:host([icon='download']:hover) {\n    .arrow {\n        animation: download-animation 0.5s;\n    }\n}\n\n@include mq-1 {\n    :host(:not(.icon-only)) {\n        width: 100%;\n    }\n\n    :host(:not(.icon-only):not([icon]):not(.loading)) {\n        .svg {\n            display: none;\n        }\n    }\n\n    :host(:hover:not(.loading)) {\n        .text {\n            transform: translate3d(0, 0, 0);\n        }\n    }\n}\n\n@media print {\n    :host {\n        border: 1px solid $color-black;\n        background-color: transparent;\n        color: $color-black;\n    }\n}\n\n:host(:not([hierarchy='filled']).sew-ws-dark) {\n    --button-color-dark: #{$color-white};\n    --button-border-color-dark: #{$color-white};\n}\n\n:host(.loading) {\n    .svg.loading {\n        animation: loading-animation 1s linear infinite;\n        margin-left: 17px;\n    }\n}\n\n@keyframes loading-animation {\n    from {\n        transform: rotate3d(0, 0, 1, 0deg);\n    }\n\n    to {\n        transform: rotate3d(0, 0, 1, 360deg);\n    }\n}\n","import { Component, Host, h, Prop, Element, EventEmitter, Event, Listen, State, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'sew-ws-button',\n    styleUrl: 'sew-ws-button.scss',\n    shadow: true,\n})\nexport class SewWsButton {\n    @Element() el: HTMLSewWsButtonElement;\n\n    /**\n     * Number that get's displayed\n     */\n    @Prop() public counter: string;\n\n    /**\n     * Ellipsis\n     */\n    @Prop({ reflect: true }) ellipsis: boolean;\n\n    @Prop({ reflect: true }) icon: string;\n    @Prop({ reflect: true }) size: string;\n    @Prop({ reflect: true }) hierarchy: string;\n    @Prop({ reflect: true }) fullWidth: boolean;\n\n    /**\n     * If true, the button contains only an icon.\n     */\n    @Prop() showIconOnly: boolean;\n\n    /**\n     * Indicates a loading state\n     */\n    @Prop() loading: boolean;\n\n    @Watch('loading')\n    onLoading(): void {\n        this.slottedElement.tagName === 'BUTTON' &&\n            ((this.slottedElement as HTMLButtonElement).disabled = this.loading);\n    }\n\n    @State() iconToUse: string;\n\n    @Event() buttonIsSqueezed: EventEmitter;\n\n    @Listen('resize', { target: 'window' })\n    public handleResize(): void {\n        this.checkForSqueezing();\n    }\n\n    /**\n     * The slotted button or anchor.\n     */\n    private slottedElement: HTMLButtonElement | HTMLAnchorElement;\n\n    /**\n     * Mirrors the disabled state from the button to the host element.\n     */\n    private updateDisabledState = () => {\n        if (this.slottedElement.tagName !== 'BUTTON') return;\n        this.el.toggleAttribute('disabled', (this.slottedElement as HTMLButtonElement).disabled);\n    };\n\n    private disabledStateObserver = new MutationObserver(this.updateDisabledState);\n\n    componentWillLoad(): void {\n        this.initialize();\n    }\n\n    private initialize() {\n        this.slottedElement = this.el.querySelector('button, a') as HTMLButtonElement | HTMLAnchorElement;\n        this.isIconOnly();\n\n        this.slottedElement.addEventListener('click', e => {\n            e.stopPropagation();\n        });\n\n        this.slottedElement.tagName === 'BUTTON' &&\n            this.loading &&\n            ((this.slottedElement as HTMLButtonElement).disabled = true);\n\n        this.disabledStateObserver.disconnect();\n        this.disabledStateObserver.observe(this.slottedElement, { attributeFilter: ['disabled'] });\n        this.updateDisabledState();\n    }\n\n    private handleSlotChange = () => {\n        this.initialize();\n    };\n\n    private clickSlotted = () => {\n        this.slottedElement.click();\n    };\n\n    private checkForSqueezing = () => {\n        if (this.slottedElement?.offsetWidth > this.el.offsetWidth) {\n            this.buttonIsSqueezed.emit(true);\n        }\n    };\n\n    private isIconOnly(): void {\n        if (this.icon) {\n            this.iconToUse = this.icon;\n        } else {\n            this.iconToUse = this.showIconOnly ? 'arrow-right' : 'arrow-east';\n        }\n    }\n\n    componentDidRender(): void {\n        this.checkForSqueezing();\n    }\n\n    render() {\n        return (\n            <Host\n                onClick={this.clickSlotted}\n                class={{\n                    'ellipsis': this.ellipsis,\n                    'icon-only': this.showIconOnly,\n                    'loading': this.loading,\n                }}\n            >\n                {this.icon && !this.loading && <sew-icon class=\"svg\" icon={this.iconToUse}></sew-icon>}\n                {!this.icon && !this.loading && <sew-icon class=\"svg\" icon={this.iconToUse} />}\n                {this.loading && <sew-icon class=\"svg loading\" icon=\"circle-loader\"></sew-icon>}\n                <div class=\"text\">\n                    <slot onSlotchange={this.handleSlotChange}></slot>\n                </div>\n                {!!this.counter && <span class=\"counter\">{this.counter}</span>}\n            </Host>\n        );\n    }\n}\n"],"mappings":"gEAAA,MAAMA,EAAiB,+/H,MCOVC,EAAW,MALxB,WAAAC,CAAAC,G,6DAwDYC,KAAmBC,oBAAG,KAC1B,GAAID,KAAKE,eAAeC,UAAY,SAAU,OAC9CH,KAAKI,GAAGC,gBAAgB,WAAaL,KAAKE,eAAqCI,SAAS,EAGpFN,KAAqBO,sBAAG,IAAIC,iBAAiBR,KAAKC,qBAuBlDD,KAAgBS,iBAAG,KACvBT,KAAKU,YAAY,EAGbV,KAAYW,aAAG,KACnBX,KAAKE,eAAeU,OAAO,EAGvBZ,KAAiBa,kBAAG,K,MACxB,KAAIC,EAAAd,KAAKE,kBAAgB,MAAAY,SAAA,SAAAA,EAAAC,aAAcf,KAAKI,GAAGW,YAAa,CACxDf,KAAKgB,iBAAiBC,KAAK,K,EAoCtC,CAhGG,SAAAC,GACIlB,KAAKE,eAAeC,UAAY,WAC1BH,KAAKE,eAAqCI,SAAWN,KAAKmB,Q,CAQ7D,YAAAC,GACHpB,KAAKa,mB,CAkBT,iBAAAQ,GACIrB,KAAKU,Y,CAGD,UAAAA,GACJV,KAAKE,eAAiBF,KAAKI,GAAGkB,cAAc,aAC5CtB,KAAKuB,aAELvB,KAAKE,eAAesB,iBAAiB,SAASC,IAC1CA,EAAEC,iBAAiB,IAGvB1B,KAAKE,eAAeC,UAAY,UAC5BH,KAAKmB,UACHnB,KAAKE,eAAqCI,SAAW,MAE3DN,KAAKO,sBAAsBoB,aAC3B3B,KAAKO,sBAAsBqB,QAAQ5B,KAAKE,eAAgB,CAAE2B,gBAAiB,CAAC,cAC5E7B,KAAKC,qB,CAiBD,UAAAsB,GACJ,GAAIvB,KAAK8B,KAAM,CACX9B,KAAK+B,UAAY/B,KAAK8B,I,KACnB,CACH9B,KAAK+B,UAAY/B,KAAKgC,aAAe,cAAgB,Y,EAI7D,kBAAAC,GACIjC,KAAKa,mB,CAGT,MAAAqB,GACI,OACIC,EAACC,EACG,CAAAC,IAAA,2CAAAC,QAAStC,KAAKW,aACd4B,MAAO,CACHC,SAAYxC,KAAKwC,SACjB,YAAaxC,KAAKgC,aAClBb,QAAWnB,KAAKmB,UAGnBnB,KAAK8B,OAAS9B,KAAKmB,SAAWgB,EAAA,YAAAE,IAAA,2CAAUE,MAAM,MAAMT,KAAM9B,KAAK+B,aAC9D/B,KAAK8B,OAAS9B,KAAKmB,SAAWgB,EAAA,YAAAE,IAAA,2CAAUE,MAAM,MAAMT,KAAM9B,KAAK+B,YAChE/B,KAAKmB,SAAWgB,EAAU,YAAAE,IAAA,2CAAAE,MAAM,cAAcT,KAAK,kBACpDK,EAAK,OAAAE,IAAA,2CAAAE,MAAM,QACPJ,EAAA,QAAAE,IAAA,2CAAMI,aAAczC,KAAKS,sBAE1BT,KAAK0C,SAAWP,EAAA,QAAAE,IAAA,2CAAME,MAAM,WAAWvC,KAAK0C,S","ignoreList":[]}