dees-catalog/ts_web/elements/dees-windowcontrols.ts

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

declare global {
  interface HTMLElementTagNameMap {
    'dees-windowcontrols': DeesWindowControls;
  }
}

@customElement('dees-windowcontrols')
export class DeesWindowControls extends DeesElement {
  // STATIC
  public static demo = () => html`<dees-windowcontrols></dees-windowcontrols>`;

  // Instance
  @property({
    reflect: true,
  })
  public type: 'mac' | 'linux' | 'windows' = 'mac';

  @property({
    reflect: true,
  })
  public position: 'left' | 'right' = 'left';

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        position: relative;
        display: block;
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
      }

      .windowControls {
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .windowControls div {
        width: 12px;
        height: 12px;
        display: inline-block;
        border-radius: 50%;
        margin: 0px;
        padding: 0px;
        background: #222222;
      }

      .windowControls div.close {
        background: #ff5f57;
        margin-right: 12px;
      }

      .windowControls div.toDock {
        background: #ffbd2e;
        margin-right: 12px;
      }

      .windowControls div.minMax {
        background: #27c93f;
      }

      .windowControls div:hover {
        background: #333333;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      ${(this.type === 'mac' && this.position === 'left') ||
      ((this.type === 'linux' || this.type === 'windows') && this.position === 'right')
        ? html`
            <div class="windowControls">
              <div class="close"></div>
              <div class="toDock"></div>
              <div class="minMax"></div>
            </div>
          `
        : html``}
    `;
  }
}