{"version":3,"names":["buttonCss","LgrButtonStyle0","Button","this","handleClick","ev","el","type","formEl","findForm","form","undefined","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","HTMLFormElement","getElementById","componentDidRender","anchor","download","_a","tag","setAttribute","render","Tag","h","Host","key","onClick","pointerEvents","disabled","loading","ref","href","reference","target","class","addClass","size","variant","inverse","fullWidth","icon"],"sources":["src/components/button/button.scss?tag=lgr-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["@use '../../global/icons';\n\n:host {\n display: inline-flex;\n\n button, a {\n display: inline-flex;\n position: relative;\n align-items: center;\n justify-content: center;\n width: auto;\n max-width: 100%;\n padding: 0 var(--lgr-spacing-xxxs);\n border-radius: var(--lgr-border-radius-xx-lg);\n font-family: var(--lgr-font-family-regular);\n font-size: var(--lgr-font-size-md);\n line-height: normal;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n\n lgr-icon {\n margin-right: var(--lgr-spacing-nano);\n font-size: var(--lgr-font-size-lg);\n }\n\n span {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n\n .spinner {\n @keyframes spinning {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n }\n\n display: inline-block;\n position: absolute;\n aspect-ratio: 1;\n width: var(--lgr-font-size-xl);\n height: var(--lgr-font-size-xl);\n border: 2px solid;\n border-radius: 50%;\n border-bottom-color: transparent;\n box-sizing: border-box;\n animation: spinning 1s linear infinite;\n }\n\n &.primary {\n border: none;\n background-color: var(--lgr-color-brand-primary);\n color: var(--lgr-color-neutral-high-pure);\n\n &:hover {\n background-color: var(--lgr-color-brand-primary-dark);\n }\n\n &:active {\n background-color: var(--lgr-color-brand-primary-light);\n }\n\n &:disabled,\n &[disabled] {\n background-color: var(--lgr-color-neutral-low-light);\n }\n }\n\n &.white {\n border: none;\n background-color: var(--lgr-color-neutral-high-pure) ;\n color: var(--lgr-color-brand-primary);\n\n &:hover {\n color: var(--lgr-color-neutral-high-pure);\n background-color: var(--lgr-color-brand-primary-dark);\n }\n\n &:active {\n color: var(--lgr-color-neutral-high-pure);\n background-color: var(--lgr-color-brand-primary-light);\n }\n\n &:disabled,\n &[disabled] {\n color: var(--lgr-color-neutral-high-pure);\n background-color: var(--lgr-color-neutral-low-light);\n }\n }\n\n &.secondary {\n border-width: var(--lgr-border-size-default);\n border-style: solid;\n border-color: var(--lgr-color-brand-primary);\n background-color: transparent;\n color: var(--lgr-color-brand-primary);\n\n &:hover {\n border-color: var(--lgr-color-brand-primary-dark);\n color: var(--lgr-color-brand-primary-dark);\n }\n\n &:active {\n border-color: var(--lgr-color-brand-primary-light);\n color: var(--lgr-color-brand-primary-light);\n }\n\n &:disabled {\n border-color: var(--lgr-color-neutral-low-light);\n color: var(--lgr-color-neutral-low-light);\n }\n\n &.inverse {\n border-width: var(--lgr-border-size-default);\n border-style: solid;\n border-color: var(--lgr-color-neutral-high-pure);\n background-color: transparent;\n color: var(--lgr-color-neutral-high-pure);\n\n &:hover {\n opacity: var(--lgr-alpha-semi-opaque);\n }\n\n &:active {\n opacity: 1;\n }\n\n &:disabled {\n opacity: var(--lgr-alpha-intense);\n }\n }\n }\n\n &.text {\n border: none;\n background-color: transparent;\n color: var(--lgr-color-brand-primary);\n\n &:hover {\n color: var(--lgr-color-brand-primary-dark);\n }\n\n &:active {\n color: var(--lgr-color-brand-primary-light);\n }\n\n &:disabled {\n color: var(--lgr-color-neutral-low-light);\n }\n\n &.inverse {\n color: var(--lgr-color-neutral-high-pure);\n\n &:hover {\n opacity: var(--lgr-alpha-semi-opaque);\n }\n\n &:active {\n opacity: 1;\n }\n\n &:disabled {\n opacity: var(--lgr-alpha-intense);\n }\n }\n }\n\n &.large {\n height: var(--lgr-spacing-md);\n\n .spinner {\n width: var(--lgr-font-size-xl);\n height: var(--lgr-font-size-xl);\n }\n }\n\n &.small {\n height: var(--lgr-spacing-xs);\n font-size: var(--lgr-font-size-sm);\n\n .spinner {\n width: var(--lgr-font-size-md);\n height: var(--lgr-font-size-md);\n }\n }\n\n &.loading {\n .label,\n .icon {\n visibility: hidden;\n }\n }\n\n &.full-width {\n width: 100%;\n }\n\n &:disabled {\n cursor: default;\n }\n\n .label {\n display: flex;\n align-items: center;\n gap: var(--lgr-spacing-nano);\n }\n }\n}\n","import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { addClass } from '../../utils/helpers/helpers';\n\n@Component({\n tag: 'lgr-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class Button {\n @Element() el!: HTMLLgrButtonElement;\n /**\n * disabled state\n */\n @Prop({ reflect: true }) disabled = false;\n /**\n * icon: material-icons\n */\n @Prop({ reflect: true }) icon?: string;\n /**\n * size: large or small\n */\n @Prop({ reflect: true }) size?: 'large' | 'small' = 'large';\n /**\n * full width of lgr-button\n */\n @Prop({ reflect: true }) fullWidth: boolean = false;\n /**\n * variant: primary, secondary or text\n */\n @Prop({ reflect: true }) variant?: 'primary' | 'white' | 'secondary' | 'text' = 'primary';\n /**\n * variant: inverse or not. This property has no effect if the variant is set to 'primary'.\n */\n @Prop({ reflect: true }) inverse?: boolean = false;\n /**\n * loading state\n */\n @Prop({ reflect: true }) loading: boolean = false;\n /**\n * The type of the button.\n */\n @Prop() type: 'submit' | 'reset' | 'button' = 'button';\n /**\n * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.\n */\n @Prop() form?: string | HTMLFormElement;\n /**\n * Anchor tag instead of button tag\n */\n @Prop() anchor?: boolean = false;\n /**\n * the URL that the hyperlink points to.\n */\n @Prop() reference?: string = '';\n /**\n * where to display the linked URL\n */\n @Prop() target?: 'self' | 'blank' | 'parent' | 'top' = 'self';\n /**\n * download files\n */\n @Prop() download: boolean = false;\n\n private tag: HTMLAnchorElement | HTMLButtonElement | undefined;\n\n private findForm(): HTMLFormElement | null {\n const { form } = this;\n if (form instanceof HTMLFormElement) {\n return form;\n }\n if (typeof form === 'string') {\n const el = document.getElementById(form);\n if (el instanceof HTMLFormElement) {\n return el;\n }\n }\n return null;\n }\n\n private handleClick = (ev: Event) => {\n const { el } = this;\n if (this.type === 'submit') {\n let formEl = this.findForm();\n const { form } = this;\n\n if (!formEl && form !== undefined) {\n return;\n }\n\n if (!formEl) {\n /**\n * If the form element is not set, the button may be inside\n * of a form element. Query the closest form element to the button.\n */\n formEl = el.closest('form');\n }\n\n if (formEl) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n formEl.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n };\n\n componentDidRender() {\n if (this.anchor && this.download) {\n this.tag?.setAttribute('download', '');\n }\n }\n\n render() {\n const Tag = this.anchor ? 'a' : 'button';\n return (\n \n this.tag = el}\n href={Tag === 'a' ? this.reference : undefined}\n target={Tag === 'a' ? `_${this.target}` : undefined}\n disabled={this.disabled}\n class={`${addClass([this.size, this.variant, this.inverse ? 'inverse' : null, this.loading ? 'loading' : null, this.fullWidth ? 'full-width' : null])}`}\n >\n {this.loading && }\n {this.icon && {this.icon}}\n \n \n \n \n \n );\n }\n}\n"],"mappings":"mFAAA,MAAMA,EAAY,4jKAClB,MAAAC,EAAeD,E,MCOFE,EAAM,M,yBAuETC,KAAAC,YAAeC,IACrB,MAAMC,GAAEA,GAAOH,KACf,GAAIA,KAAKI,OAAS,SAAU,CAC1B,IAAIC,EAASL,KAAKM,WAClB,MAAMC,KAAEA,GAASP,KAEjB,IAAKK,GAAUE,IAASC,UAAW,CACjC,M,CAGF,IAAKH,EAAQ,CAKXA,EAASF,EAAGM,QAAQ,O,CAGtB,GAAIJ,EAAQ,CACVH,EAAGQ,iBAEH,MAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWP,KAAOJ,KAAKI,KACvBO,EAAWG,MAAMC,QAAU,OAC3BV,EAAOW,YAAYL,GACnBA,EAAWM,QACXN,EAAWO,Q,kBA5FmB,M,8BAQgB,Q,eAIN,M,aAIkC,U,aAInC,M,aAID,M,UAIE,S,gCAQnB,M,eAIE,G,YAI0B,O,cAI3B,K,CAIpB,QAAAZ,GACN,MAAMC,KAAEA,GAASP,KACjB,GAAIO,aAAgBY,gBAAiB,CACnC,OAAOZ,C,CAET,UAAWA,IAAS,SAAU,CAC5B,MAAMJ,EAAKS,SAASQ,eAAeb,GACnC,GAAIJ,aAAcgB,gBAAiB,CACjC,OAAOhB,C,EAGX,OAAO,I,CAkCT,kBAAAkB,G,MACE,GAAIrB,KAAKsB,QAAUtB,KAAKuB,SAAU,EAChCC,EAAAxB,KAAKyB,OAAG,MAAAD,SAAA,SAAAA,EAAEE,aAAa,WAAY,G,EAIvC,MAAAC,GACE,MAAMC,EAAM5B,KAAKsB,OAAS,IAAM,SAChC,OACEO,EAACC,EAAI,CAAAC,IAAA,2CAACC,QAAShC,KAAKC,YAAaG,KAAMJ,KAAKI,KAAMU,MAAO,CAAEmB,cAAejC,KAAKkC,UAAYlC,KAAKmC,QAAU,OAAS3B,WAAW,gBAAiBR,KAAKkC,SAAW,OAAS,MACtKL,EAACD,EAAG,CAAAG,IAAA,2CACFK,IAAKjC,GAAMH,KAAKyB,IAAMtB,EACtBkC,KAAMT,IAAQ,IAAM5B,KAAKsC,UAAY9B,UACrC+B,OAAQX,IAAQ,IAAM,IAAI5B,KAAKuC,SAAW/B,UAC1C0B,SAAUlC,KAAKkC,SACfM,MAAO,GAAGC,EAAS,CAACzC,KAAK0C,KAAM1C,KAAK2C,QAAS3C,KAAK4C,QAAU,UAAY,KAAM5C,KAAKmC,QAAU,UAAY,KAAMnC,KAAK6C,UAAY,aAAe,UAE9I7C,KAAKmC,SAAWN,EAAA,QAAMW,MAAM,YAC5BxC,KAAK8C,MAAQjB,EAAA,YAAUW,MAAM,QAAQxC,KAAK8C,MAC3CjB,EAAA,QAAAE,IAAA,2CAAMS,MAAM,SACVX,EAAA,QAAAE,IAAA,+C"}