dees-catalog/ts_web/elements/dees-input-typelist.ts

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

const { demoFunc } = await import('./dees-input-typelist.demo.js');

@customElement('dees-input-typelist')
export class DeesInputTypelist extends DeesElement {
  public static demo = demoFunc;


  // INSTANCE

  @property({
    type: String,
  })
  public label: string;

  constructor() {
    super();
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        color: ${cssManager.bdTheme('#333', '#fff')};
        margin: 8px 0px 24px 0px;
      }
      .label {
        font-size: 14px;
        margin-bottom: 8px;
      }
      .mainbox {
        border-radius: 3px;
        background: #222;
        overflow: hidden;
        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
        border-right: ${cssManager.bdTheme('1px solid #CCC', 'none')};
        border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')};
      }

      .tags {
        padding: 16px;
        cursor: default;
      }

      .notags {
        text-align: center;
        opacity: 0.5;
        font-size: 12px;
      }

      input {
        display: block;
        box-sizing: border-box;
        background: #181818;
        width: 100%;
        outline: none;
        border: none;
        color: inherit;
        padding: 0px 16px;
        overflow: hidden;
        line-height: 32px;
        height: 0px;
        transition: height 0.2s;
      }

      input:focus {
        height: 32px;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="label">${this.label}</div>
      <div class="mainbox">
        <div class="tags" @click=${() => {
          this.shadowRoot.querySelector('input').focus();
        }}>
          <div class="notags">No tags yet</div>
        </div>
        <input type="text" placeholder="Type, press Enter to add it..." />
      </div>
    `;
  }
}