ct/modules/task-repeater-sk/task-repeater-sk.ts

/**
 * @module modules/task-repeater-sk
 * @description A custom element for allowing the user to choose whether
 * their task should be repeated either never, daily, every other day,
 * or weekly.
 */

import { html } from 'lit-html';
import { $$ } from '../../../infra-sk/modules/dom';
import { define } from '../../../elements-sk/modules/define';

import { SelectSk } from '../../../elements-sk/modules/select-sk/select-sk';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import '../../../elements-sk/modules/select-sk';

const frequencies = [
  { num: '0', desc: 'Never repeat' },
  { num: '1', desc: 'Repeat daily' },
  { num: '2', desc: 'Repeat every other day' },
  { num: '7', desc: 'Repeat weekly' },
];

export class TaskRepeaterSk extends ElementSk {
  private _selector: SelectSk | null = null;

  constructor() {
    super(TaskRepeaterSk.template);
  }

  private static template = () => html`
    <div class="tr-container">
      <select-sk>
        ${frequencies.map(
          (f) => html` <div>
            <span class="num">${f.num}</span><span>${f.desc}</span>
          </div>`
        )}
      </select-sk>
    </div>
  `;

  connectedCallback(): void {
    super.connectedCallback();
    this._render();
    this._selector = $$('select-sk', this);
    this._selector!.selection = 0;
  }

  /**
   * @prop {string} frequency - Number string representing user selected
   * frequency of their task.
   */
  get frequency(): string {
    return frequencies[this._selector!.selection as number].num;
  }

  set frequency(val: string) {
    this._selector!.selection = frequencies.findIndex((f) => f.num === val);
  }
}

define('task-repeater-sk', TaskRepeaterSk);