catalog/ts_web/elements/sio-fab.ts

import {
  DeesElement,
  property,
  html,
  customElement,
  type TemplateResult,
  cssManager,
  css,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';

import { SioCombox } from './sio-combox.js';
import { SioIcon } from './sio-icon.js';
import { state } from '@design.estate/dees-element';
SioCombox;
SioIcon;

// Import design tokens
import { colors, bdTheme } from './00colors.js';
import { spacing, radius, shadows, transitions, sizes } from './00tokens.js';
import { fontFamilies, typography } from './00fonts.js';

declare global {
  interface HTMLElementTagNameMap {
    'sio-fab': SioFab;
  }
}

@customElement('sio-fab')
export class SioFab extends DeesElement {
  @property({ type: Boolean })
  public showCombox = false;

  @state()
  private hasShownOnce = false;

  public static demo = () => html` <sio-fab .showCombox=${true}></sio-fab> `;

  constructor() {
    super();
    domtools.DomTools.setupDomTools();
  }

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        :host {
          will-change: transform;
          position: absolute;
          display: block;
          bottom: 20px;
          right: 20px;
          z-index: 10000;
          color: #fff;
        }

        #mainbox {
          transition: ${transitions.all};
          position: absolute;
          bottom: 0px;
          right: 0px;
          height: 56px;
          width: 56px;
          box-shadow: ${cssManager.bdTheme(shadows.md, shadows.lg)};
          line-height: 56px;
          text-align: center;
          cursor: pointer;
          background: ${bdTheme('primary')};
          color: ${bdTheme('primaryForeground')};
          border-radius: ${radius.full};
          user-select: none;
          border: 1px solid ${bdTheme('border')};
          animation: fabEntrance 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        
        @keyframes fabEntrance {
          from {
            transform: scale(0) rotate(-180deg);
            opacity: 0;
          }
          to {
            transform: scale(1) rotate(0deg);
            opacity: 1;
          }
        }

        #mainbox:hover {
          box-shadow: ${cssManager.bdTheme(shadows.lg, shadows.xl)};
          transform: translateY(-2px) scale(1.05);
        }

        #mainbox:active {
          transform: translateY(0) scale(0.98);
          box-shadow: ${cssManager.bdTheme(shadows.sm, shadows.md)};
        }

        #mainbox .icon {
          position: absolute;
          top: 0px;
          left: 0px;
          will-change: transform;
          transform: ${this.showCombox ? 'rotate(180deg)' : 'rotate(0deg)'};
          transition: transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
          height: 100%;
          width: 100%;
          object-fit: contain;
          -webkit-user-drag: none;
          -khtml-user-drag: none;
          -moz-user-drag: none;
          -o-user-drag: none;
        }

        #mainbox .icon img {
          filter: ${cssManager.bdTheme('brightness(0) invert(1)', 'brightness(1)')};
          position: absolute;
          width: 100%;
          top: 0px;
          left: 0px;
          will-change: transform;
          transform: scale(0.2, 0.2) translateY(-5px);
        }
        #mainbox .icon.open:hover img {
          filter: ${cssManager.bdTheme('brightness(0) invert(1)', 'brightness(1.2)')};
        }

        #mainbox .icon.open {
          opacity: ${this.showCombox ? '0' : '1'};
          pointer-events: ${this.showCombox ? 'none' : 'all'};
        }

        #mainbox .icon.close {
          opacity: ${this.showCombox ? '1' : '0'};
          pointer-events: ${this.showCombox ? 'all' : 'none'};
        }
        #mainbox .icon.close:hover sio-icon {
          color: ${bdTheme('primaryForeground')};
        }

        #mainbox .icon.open sio-icon {
          position: absolute;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: ${bdTheme('primaryForeground')};
        }

        #mainbox .icon.close sio-icon {
          position: absolute;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: ${bdTheme('primaryForeground')};
        }

        #comboxContainer {
          position: absolute;
          bottom: 0;
          right: 0;
          pointer-events: none;
        }

        #comboxContainer sio-combox {
          position: absolute;
          bottom: calc(56px + ${spacing["4"]});
          right: 0;
          transition: ${transitions.all};
          will-change: transform;
          transform: translateY(${spacing["5"]});
          opacity: 0;
          pointer-events: none;
        }

        #comboxContainer.show {
          pointer-events: all;
        }

        #comboxContainer.show sio-combox {
          transform: translateY(0px);
          opacity: 1;
          pointer-events: all;
        }
      </style>
      <div id="mainbox" @click=${this.toggleCombox}>
        <div class="icon open">
          <sio-icon icon="message-square" size="28"></sio-icon>
          <img src="https://assetbroker.lossless.one/brandfiles/00general/favicon_socialio.svg" />
        </div>
        <div class="icon close">
          <sio-icon icon="x" size="22"></sio-icon>
        </div>
      </div>
      <div id="comboxContainer" class="${this.showCombox ? 'show' : ''}">
        ${this.showCombox || this.hasShownOnce ? html`
          <sio-combox @close=${() => this.showCombox = false}></sio-combox>
        ` : ''}
      </div>
    `;
  }

  /**
   * toggles the combox
   */
  public async toggleCombox() {
    console.log('toggle combox');
    this.showCombox = !this.showCombox;
    if (this.showCombox) {
      this.hasShownOnce = true;
    }
  }

  public async firstUpdated(args) {
    super.firstUpdated(args);
    const domtools = await this.domtoolsPromise;
    const sioCombox: SioCombox = this.shadowRoot.querySelector('sio-combox');
    const mainBox: HTMLElement = this.shadowRoot.querySelector('#mainbox');
    sioCombox.referenceObject = mainBox;

    domtools.keyboard
      .on([domtools.keyboard.keyEnum.Ctrl, domtools.keyboard.keyEnum.S])
      .subscribe((event) => {
        this.toggleCombox();
      });
  }
}