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 {
  public static demo = () => html`<dees-windowcontrols></dees-windowcontrols>`;

  public static styles = [
    cssManager.defaultStyles,
    css`
      .windowControls {
        position: absolute;
        top: 6px;
        left: 20px;
        width: 200px;
        display: grid;
        grid-template-columns: 24px 24px 24px;
      }

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

      .windowControls div.close {
        background: #ff5f57;
      }

      .windowControls div.toDock {
        background: #ffbd2e;
      }

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

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

  public render(): TemplateResult {
    return html`
      <div class="windowControls">
        <div class="close"></div>
        <div class="toDock"></div>
        <div class="minMax"></div>
      </div>
    `;
  }
}