{"version":3,"names":["buttonCss","AtriaButtonStyle0","AtriaButtonComponent","constructor","hostRef","this","buttonId","buttonText","buttonType","buttonIconLeft","buttonIconRight","disabled","loading","active","width","buttonRole","onClick","btnClick","emit","id","text","type","render","classes","filter","Boolean","join","h","key","class","style"],"sources":["src/components/button/button.scss?tag=atria-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["//Defualt button class (global styling)\n.bh-btn {\n  font-family: var(--bh-secondary-font-face);\n  font-size: 15px;\n  font-weight: 500;\n  border-radius: var(--bh-border-radius);\n  height: 36px;\n  letter-spacing: 0.47px;\n  transition: background-color 0.2s ease-out;\n  text-decoration: none;\n  padding: 0 16px;\n  display: inline-block;\n  margin: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n\n  i {\n      vertical-align: middle;\n\n      &.left {\n          margin-right: 5px\n      }\n\n      &.right {\n          margin-left: 5px;\n      }\n\n  }\n\n  //Primary button\n  &.bh-primary {\n      background-color: var(--surface-accent);\n      color: var(--text-inverse);\n      border: 0;\n\n      i {\n          color: var(--text-inverse);\n      }\n\n      &.bh-loading {\n          background-color: var(--surface-accent-pressed);\n\n          &::after {\n              border: 2px solid var(--surface-base);\n              border-top-color: transparent;\n          }\n      }\n\n      &:focus-visible {\n          background-color: var(--surface-accent);\n          box-shadow: 0 0 0 2px var(--border-focus), inset 0 0 0 1px var(--text-inverse);\n          outline-color: transparent;\n          outline-width: 2px;\n          outline-style: dotted;\n      }\n\n      &:hover {\n          background-color: var(--surface-accent-hover);\n          text-decoration: none;\n          color: var(--text-inverse);\n      }\n\n      &:not(:disabled):active,\n      &:not(:disabled).active {\n          background-color: var(--surface-accent-pressed);\n      }\n\n      &:focus:active {\n          box-shadow: none;\n      }\n  }\n\n  //Secondary button\n  &.bh-secondary {\n      background-color: var(--surface-active);\n      color: var(--text-inverse);\n      border: 0;\n\n      &.bh-loading {\n          background-color: var(--surface-active-pressed);\n\n          &::after {\n              border: 2px solid var(--surface-base);\n              border-top-color: transparent;\n          }\n      }\n\n      &:focus-visible {\n          background-color: var(--surface-active);\n          box-shadow: 0 0 0 2px var(--border-focus), inset 0 0 0 3px var(--text-inverse);\n          outline-color: transparent;\n          outline-width: 2px;\n          outline-style: dotted;\n      }\n\n      &:hover {\n          background-color: var(--surface-active-hover);\n          text-decoration: none;\n          color: var(--text-inverse);\n      }\n\n      &:not(:disabled):active,\n      &:not(:disabled).active {\n          background-color: var(--surface-active-hover);\n      }\n\n      &:focus:active {\n          box-shadow: none;\n      }\n  }\n\n  //Outline buttons\n  &.bh-outlined {\n      &.outline-1 {\n          background-color: var(--surface-base);\n          color: var(--text-accent);\n          border: 1px solid var(--border-base);\n\n          &.bh-loading {\n              background-color: var(--surface-base-pressed-accentblue);\n  \n              &::after {\n                  border: 2px solid var(--surface-accent);\n                  border-top-color: transparent;\n              }\n          }\n\n          &:focus-visible {\n              border: 1px solid var(--border-focus);\n              box-shadow: 0 0 0 1px var(--border-focus);\n              color: var(--text-accent);\n              outline-color: transparent;\n              outline-width: 2px;\n              outline-style: dotted;\n          }\n  \n          &:hover {\n              text-decoration: none;\n              background-color: var(--surface-base-hover-accentblue);\n              color: var(--text-accent-hover);\n          }\n\n          &:not(:disabled):active, &:not(:disabled).active {\n              background-color: var(--surface-base-pressed-accentblue);\n              outline: 0;\n              box-shadow: none;\n              border: 1px solid var(--border-base);\n              color: var(--text-accent-hover);\n            }\n          &.button-link {\n              display: flex;\n              justify-content: space-between;\n              align-items: center;\n              width: 304px;\n\n              @media screen and (max-width: 640px) {\n                  width: 100vw;\n              }\n          }\n      }\n\n      &.outline-2 {\n          background-color: transparent;\n          color: var(--text-inverse);\n          border: 1px solid var(--icon-inverse);\n\n          &.bh-loading {\n              background-color: var(--surface-base-pressed);\n\n              &::after {\n                  border: 2px solid var(--surface-accent);\n                  border-top-color: transparent;\n              }\n          }\n\n          &:focus-visible {\n              border: 1px solid var(--border-focus);\n              box-shadow: 0 0 0 1px var(--text-inverse), 0 0 0 1px var(--border-focus);\n              outline-color: transparent;\n              outline-width: 2px;\n              outline-style: dotted;\n            }\n          \n            &:hover {\n              text-decoration: none;\n              background-color: var(--surface-base-hover);\n              color: var(--text-subtle-hover);\n            }\n          \n            &:focus:hover {\n              border: 1px solid var(--border-focus);\n            }\n\n            &:not(:disabled):active, &:not(:disabled).active {\n              background-color: var(--surface-base-pressed);\n              outline: 0;\n              box-shadow: none;\n              color: var(--text-subtle-hover);\n            }\n      }\n\n      &.outline-3 {\n          background-color: var(--surface-base);\n          color: var(--text-subtle);\n          border: 1px solid var(--border-base);\n\n          &.bh-loading {\n              background-color: var(--surface-base-pressed);\n  \n              &::after {\n                  border: 2px solid var(--surface-accent);\n                  border-top-color: transparent;\n              }\n          }\n\n          &:focus-visible {\n              border: 1px solid var(--border-focus);\n              box-shadow: 0 0 0 1px var(--border-focus);\n              color: var(--text-subtle);\n              outline-color: transparent;\n              outline-width: 2px;\n              outline-style: dotted;\n          \n              &.bh-outlined-3-button--loading {\n                color: transparent;\n              }\n            }\n          \n            &:hover {\n              text-decoration: none;\n              background-color: var(--surface-base-hover);\n              color: var(--text-subtle-hover);\n            }\n\n          &:not(:disabled):active, &:not(:disabled).active {\n              background-color: var(--surface-base-pressed);\n              outline: 0;\n              box-shadow: none;\n              border: 1px solid var(--border-base);\n              color: var(--text-subtle-hover);\n            }\n      }\n\n      &:focus:active {\n          box-shadow: none;\n      }\n\n      &.disabled {\n          background-color: var(--surface-disabled);\n          color: var(--text-disabled);\n          border: 1px solid var(--surface-disabled);\n          cursor: not-allowed;\n          pointer-events: none;\n      }\n  }\n\n  //Text button\n  &.bh-text-btn {\n      background-color: var(--surface-base);\n      color: var(--text-accent);\n      border: 1px solid transparent;\n\n      &.bh-loading {\n          background-color: var(--surface-base-pressed-accentblue);\n\n          &::after {\n              border: 2px solid var(--surface-accent);\n              border-top-color: transparent;\n          }\n      }\n\n      &:focus-visible {\n          border: 1px solid var(--border-focus);\n          box-shadow: 0 0 0 1px var(--border-focus);\n          color: var(--text-accent);\n          outline-color: transparent;\n          outline-width: 2px;\n          outline-style: dotted;\n      \n          &.bh-text-button--loading {\n            color: transparent;\n          }\n      }\n\n      &:focus:hover {\n          border: 1px solid var(--border-focus);\n      }\n\n      &:hover {\n          background-color: var(--surface-base-hover-accentblue);\n          color: var(--text-accent-hover);\n          border: 1px solid transparent;\n      }\n\n      &:not(:disabled):active, &:not(:disabled).active {\n          background-color: var(--surface-base-pressed-accentblue);\n          outline: 0;\n          box-shadow: none;\n          border: 1px solid transparent;\n          color: var(--text-accent-hover);\n        }\n\n      &:focus:active {\n          box-shadow: none;\n      }\n  }\n\n  //Default disable class\n  &.disabled {\n      background-color: var(--surface-disabled);\n      color: var(--text-disabled);\n      cursor: not-allowed;\n      pointer-events: none;\n  }\n\n  //Small button class\n  &.bh-sm {\n      height: 30px;\n      padding: 0 8px;\n\n      &.bh-loading {\n          &::after {\n              width: 16px;\n              height: 16px;\n              border-width: 1px;\n          }\n      }\n  }\n\n  //Large button class\n  &.bh-lg {\n      height: 48px;\n\n      &[href] {\n          line-height: 48px;\n      }\n\n      &.bh-loading {\n          &::after {\n              width: 24px;\n              height: 24px;\n          }\n      }\n  }\n\n  &[href] {\n      line-height: 36px;\n  }\n\n  //Default loading class\n  &.bh-loading {\n      color: transparent !important;\n      position: relative;\n\n      &::after {\n          content: '';\n          position: absolute;\n          display: block;\n          width: 20px;\n          height: 20px;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          border-radius: 50%;\n          border-top-color: transparent;\n          transform-origin: center center;\n          animation: rotate 2s infinite linear;\n      }\n\n      &:hover {\n          color: transparent;\n      }\n  }\n\n  &--icon-l,\n  &--icon-r {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n  }\n\n  svg {\n      width: 24px;\n      flex: 0 0 24px;\n      vertical-align: middle;\n\n      path {\n          fill: var(--icon-inverse);\n      }\n  }\n}\n\n/* Animations */\n@keyframes rotate {\n  0% {\n      transform: translate(-50%, -50%) rotate(0deg);\n  }\n  100% {\n      transform: translate(-50%, -50%) rotate(360deg);\n  }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'atria-button',\n  styleUrl: 'button.scss',\n  shadow: true\n})\nexport class AtriaButtonComponent {\n  // Props equivalent to Angular @Input()\n  @Prop() buttonId: string = \"\";\n  @Prop() buttonText: string = \"\";\n  @Prop() buttonType: string = 'primary';\n  @Prop() buttonIconLeft: string = \"\";\n  @Prop() buttonIconRight: string = \"\";\n  @Prop() disabled: boolean = false;\n  @Prop() loading: boolean = false;\n  @Prop() active: boolean = false;\n  @Prop() width: string = \"\";\n  @Prop() buttonRole: string = 'button';\n\n  // Event equivalent to Angular @Output()\n  @Event() btnClick!: EventEmitter<any>;\n\n  // Click Handler\n  private onClick = () => {\n    if (!this.disabled && !this.loading) {\n      this.btnClick.emit({\n        id: this.buttonId,\n        text: this.buttonText,\n        type: this.buttonType,\n        active: this.active\n      });\n    }\n  };\n\n  render() {\n    const classes = [\n      'bh-btn',\n      this.buttonType,\n      this.loading ? 'bh-loading' : '',\n      this.disabled ? 'disabled' : '',\n      this.active ? 'active' : '',\n      !this.buttonText && !this.loading && this.buttonIconLeft ? 'bh-icon-only' : ''\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <button\n        id={this.buttonId}\n        class={classes}\n        style={{ width: this.width }}\n        type={this.buttonRole}\n        onClick={this.onClick}\n        disabled={this.disabled}\n      >\n        {/* Left Icon */}\n        {this.buttonIconLeft && !this.loading && (\n          <i class={`left bh-icon bh-icon-md ${this.buttonIconLeft}`} aria-label={this.buttonText}></i>\n        )}\n\n        {/* Button Text */}\n        {this.buttonText}\n\n        {/* Right Icon */}\n        {this.buttonIconRight && !this.loading && (\n          <i class={`right bh-icon bh-icon-md ${this.buttonIconRight}`} aria-label={this.buttonText}></i>\n        )}\n      </button>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,20OAClB,MAAAC,EAAeD,E,MCMFE,EAAoB,MALjC,WAAAC,CAAAC,G,6CAOUC,KAAAC,SAAmB,GACnBD,KAAAE,WAAqB,GACrBF,KAAAG,WAAqB,UACrBH,KAAAI,eAAyB,GACzBJ,KAAAK,gBAA0B,GAC1BL,KAAAM,SAAoB,MACpBN,KAAAO,QAAmB,MACnBP,KAAAQ,OAAkB,MAClBR,KAAAS,MAAgB,GAChBT,KAAAU,WAAqB,SAMrBV,KAAAW,QAAU,KAChB,IAAKX,KAAKM,WAAaN,KAAKO,QAAS,CACnCP,KAAKY,SAASC,KAAK,CACjBC,GAAId,KAAKC,SACTc,KAAMf,KAAKE,WACXc,KAAMhB,KAAKG,WACXK,OAAQR,KAAKQ,Q,GAKnB,MAAAS,GACE,MAAMC,EAAU,CACd,SACAlB,KAAKG,WACLH,KAAKO,QAAU,aAAe,GAC9BP,KAAKM,SAAW,WAAa,GAC7BN,KAAKQ,OAAS,SAAW,IACxBR,KAAKE,aAAeF,KAAKO,SAAWP,KAAKI,eAAiB,eAAiB,IAE3Ee,OAAOC,SACPC,KAAK,KAER,OACEC,EAAA,UAAAC,IAAA,2CACET,GAAId,KAAKC,SACTuB,MAAON,EACPO,MAAO,CAAEhB,MAAOT,KAAKS,OACrBO,KAAMhB,KAAKU,WACXC,QAASX,KAAKW,QACdL,SAAUN,KAAKM,UAGdN,KAAKI,iBAAmBJ,KAAKO,SAC5Be,EAAA,KAAAC,IAAA,2CAAGC,MAAO,2BAA2BxB,KAAKI,iBAAgB,aAAcJ,KAAKE,aAI9EF,KAAKE,WAGLF,KAAKK,kBAAoBL,KAAKO,SAC7Be,EAAA,KAAAC,IAAA,2CAAGC,MAAO,4BAA4BxB,KAAKK,kBAAiB,aAAcL,KAAKE,a","ignoreList":[]}