import { customElement, property, html, TemplateResult, DeesElement } from '@designestate/dees-element'; import * as domtools from '@designestate/dees-domtools'; declare global { interface HTMLElementTagNameMap { 'dees-input-quantityselector': DeesInputQuantitySelector; } } @customElement('dees-input-quantityselector') export class DeesInputQuantitySelector extends DeesElement { public static demo = () => html``; // INSTANCE public changeSubject = new domtools.rxjs.Subject(); @property() public key: string; @property({ type: Number }) public value: number = 1; @property({ type: Boolean, }) public required: boolean = false; @property({ type: Boolean }) public disabled: boolean = false; constructor() { super(); } public render(): TemplateResult { return html` ${domtools.elementBasic.styles}
-
${this.value}
+
`; } public increase () { this.value++; this.changeSubject.next(this); } public decrease () { if (this.value > 0) { this.value--; } else { // nothing to do here } this.changeSubject.next(this); } }