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

114 lines
2.5 KiB
TypeScript
Raw Normal View History

2020-12-09 23:05:13 +00:00
import { customElement, property, html, TemplateResult, DeesElement } from '@designestate/dees-element';
2020-09-13 16:24:48 +00:00
import * as domtools from '@designestate/dees-domtools';
2021-03-06 15:48:02 +00:00
declare global {
interface HTMLElementTagNameMap {
'dees-input-quantityselector': DeesInputQuantitySelector;
}
}
2020-09-13 16:24:48 +00:00
@customElement('dees-input-quantityselector')
2020-12-09 23:05:13 +00:00
export class DeesInputQuantitySelector extends DeesElement {
2020-09-13 16:24:48 +00:00
public static demo = () => html`<dees-input-quantityselector></dees-input-quantityselector>`;
2021-08-19 22:25:14 +00:00
// INSTANCE
public changeSubject = new domtools.rxjs.Subject();
2020-09-13 16:24:48 +00:00
@property()
public key: string;
@property({
type: Number
})
public value: number = 1;
2021-08-25 11:51:55 +00:00
@property({
type: Boolean,
})
public required: boolean = false;
2021-08-26 19:30:35 +00:00
@property({
type: Boolean
})
public disabled: boolean = false;
2021-08-25 11:51:55 +00:00
constructor() {
super();
}
2020-09-13 16:24:48 +00:00
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<style>
:host {
display: block;
width: 110px;
user-select: none;
}
.maincontainer {
transition: all 0.1s;
font-size: 14px;
display: grid;
grid-template-columns: 33% 34% 33%;
text-align: center;
background:none;
line-height: 40px;
padding: 0px;
min-width: 100px;
2020-12-09 23:05:13 +00:00
color: ${this.goBright ? '#666' : '#CCC'};
border: ${this.goBright ? '1px solid #333' : '1px solid #CCC'};
2022-12-07 01:28:31 +00:00
border-radius: 4px;
2020-12-09 23:05:13 +00:00
}
.mainContainer:hover {
color: ${this.goBright ? '#333' : '#fff'};
border: ${this.goBright ? '1px solid #333' : '1px solid #fff'};
2020-09-13 16:24:48 +00:00
}
.minus {
padding-left: 5px;
}
.plus {
padding-right: 5px;
}
.selector {
text-align: center;
font-size: 20px;
}
.selector:hover {
cursor: pointer;
}
.quantity {
text-align: center;
}
2020-12-09 23:05:13 +00:00
2020-09-13 16:24:48 +00:00
</style>
<div class="maincontainer">
<div class="selector minus" @click="${() => {this.decrease();}}">-</div>
<div class="quantity">${this.value}</div>
<div class="selector plus" @click="${() => {this.increase();}}">+</div>
</div>
`;
}
public increase () {
this.value++;
2021-08-19 22:25:14 +00:00
this.changeSubject.next(this);
2020-09-13 16:24:48 +00:00
}
public decrease () {
if (this.value > 0) {
this.value--;
} else {
// nothing to do here
}
2021-08-19 22:25:14 +00:00
this.changeSubject.next(this);
2020-09-13 16:24:48 +00:00
}
}