@decidables/discountable-elements/src/examples/htd-example.js

discountable-elements: Web Components for visualizing Hyperbolic Temporal Discounting

import {html, css} from 'lit';

import DiscountableElement from '../discountable-element';

/*
  CPTExample Base Class - Not intended for instantiation!
  <sdt-example>
*/
export default class HTDExample extends DiscountableElement {
  static get styles() {
    return [
      super.styles,
      css`
        :host {
          ---border: var(--border, 1px solid var(---color-border));
          display: inline-block;

          margin-bottom: 1rem;
        }

        .holder {
          display: flex;
        }

        .body {
          display: flex;

          flex-wrap: wrap;

          align-items: center;
          justify-content: left;

          padding: 0.625rem;

          border: var(---border);
          border-radius: 0.25rem;
        }

        .body ::slotted(*) {
          margin: 0.625rem;
        }

        /* HACK: Sibling selectors not working with ::slotted */
        /* .body > rdk-task + sdt-response,
        ::slotted(rdk-task) + ::slotted(sdt-response) { */
        /* .body ::slotted(sdt-response) {
          margin-left: 0;
        } */

        /* HACK: Sibling selectors not working with ::slotted */
        /* .body > sdt-control + rdk-task,
        ::slotted(sdt-control) + ::slotted(rdk-task) {
          margin-left: 0;
        } */
        /* .body ::slotted(rdk-task) {
          margin-left: 0;
        } */
      `,
    ];
  }

  render() { /* eslint-disable-line class-methods-use-this */
    return html`
      <div class="holder">
        <div class="body">
          <slot>Empty!</slot>
        </div>
      </div>`;
  }
}

customElements.define('htd-example', HTDExample);