andreasbm / focus-trap Goto Github PK

render() {
    if (!this.open) return html``;
    return html`
      ${this._fabricStylesheet}
      <focus-trap>
        <div @click="${this._dismiss}" class="${c.backdrop}">
          <div
            class="${c.modal}"
            tabindex="-1"
            role="dialog"
            aria-modal="true"
            aria-labelledby="fabric_modal_id"
            @click="${this._containerClick}"
            @keydown="${this._containerKeyDown}"
          >
            <div class="${c.title}">
              ${this.left ? html`
              <button type="button" aria-label="Tilbake" class="${this._leftButtonClasses}" @click="${this._dismiss}">
                ${leftButtonSvg}
              </button>` : ''}
              <div id="fabric_modal_id" class="${this._titleClasses}">
                <p class="${c.titleText}">
                  <slot name="title"></slot>
                </p>
              </div>
              ${this.right ? html`
              <button type="button" aria-label="Lukk" class="${this._rightButtonClasses}" @click="${this._dismiss}">
                ${rightButtonSvg}
              </button>` : ''}
            </div>
            <div class="${c.content}">
              <slot></slot>
            </div>
            <div class="${c.footer}">
              <slot name="footer"></slot>
            </div>
          </div>
        </div>
      </focus-trap>
    `;

<f-modal right>
  This is the main content
  <button>one</button>
  <button>two</button>
  <button>three</button>
</f-modal>

<f-modal right>
  <h1 slot="title">
    <button>header button</button>
  </h1>
  This is the main content
  <button>one</button>
  <button>two</button>
  <button>three</button>
</f-modal>

<f-modal right>
  <h1 slot="title">header</h1>
  This is the main content
  <button>one</button>
  <button>two</button>
  <button>three</button>
</f-modal>