@boligmappa/web-component-connect/lib/BoligmappaConnect.js

Web Component button for initating the sign in process of the Boligmappa Auth Component

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, css } from "lit";
import { property } from "lit/decorators.js";
import boligmappaIcon from "./assets/icons/boligmappa-icon-without-text.svg";
export class BoligmappaConnect extends LitElement {
    constructor() {
        super();
        this.development = false;
        this.buttonText = "Koble til Boligmappa";
        this.authBaseUrl = "https://auth.boligmappa.no/auth/realms/professional-realm/protocol/openid-connect";
    }
    firstUpdated() {
        if (this.development) {
            this.authBaseUrl =
                "https://testauth.boligmappa.no/auth/realms/professional-realm-staging/protocol/openid-connect";
        }
    }
    onConnectClick() {
        const popupWindowFeatures = "toolbar=no, menubar=no, width=420, height=700, top=100, left=100";
        window.open(`/boligmappa-connect/`, "Connect with Boligmappa", popupWindowFeatures);
    }
    render() {
        return html `
      <button class="connect-button" @click=${() => this.onConnectClick()}>
        <img src=${boligmappaIcon} />
        <span
          class="login-btn"
          style="padding: 0.5em; text-transform: capitalize;"
          >${this.buttonText}</span
        >
      </button>
    `;
    }
}
BoligmappaConnect.styles = css `
    @font-face {
      font-family: Sofia Pro;
      src: url("./assets/fonts/sofia_pro/regular.otf");
      font-weight: 700;
      font-style: normal;
    }
    .login-btn {
      font-family: var(--connect-font-family, Sofia Pro, sans-serif);
      font-size: 14px;
      font-weight: var(--connect-font-weight, 300);
      color: var(--connect-text-color);
      text-align: left;
      letter-spacing: 0px;
      opacity: 1;
    }
    .connect-button {
      padding: 0 16px;
      min-width: 64px;
      border-radius: 4px;
      height: 36px;
      align-items: center;
      justify-content: center;
      display: inline-flex;
      position: relative;
      background-color: #fff;
      border: none;
      margin: 5px;
      transition: box-shadow 600ms cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
        0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    }
    .connect-button:hover {
      cursor: pointer;
      box-shadow: 0px 3px 5px -2px rgba(0, 0, 0, 0.2),
        0px 2px 6px 0px rgba(0, 0, 0, 0.18), 0px 1px 9px 0px rgba(0, 0, 0, 0.16);
    }
  `;
__decorate([
    property()
], BoligmappaConnect.prototype, "development", void 0);
__decorate([
    property()
], BoligmappaConnect.prototype, "buttonText", void 0);
customElements.define("boligmappa-connect", BoligmappaConnect);
//# sourceMappingURL=BoligmappaConnect.js.map