@design.estate/dees-catalog 1.0.173

package/dist_ts_web/elements/dees-input-dropdown.js

@@ -0,0 +1,185 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { customElement, DeesElement, property, html, css, cssManager, } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+export let DeesInputDropdown = class DeesInputDropdown extends DeesElement {
+    constructor() {
+        super(...arguments);
+        // INSTANCE
+        this.changeSubject = new domtools.rxjs.Subject();
+        this.label = 'Label';
+        this.options = [];
+        this.selectedOption = {
+            key: null,
+            option: null,
+            payload: null
+        };
+        this.required = false;
+        this.disabled = false;
+    }
+    static { this.demo = () => html `
+    <dees-input-dropdown
+      .options=${[
+        { option: 'option 1', key: 'option1' },
+        { option: 'option 2', key: 'option2' },
+        { option: 'option 3', key: 'option3' }
+    ]}
+    ></dees-input-dropdown>
+  `; }
+    static { this.styles = [
+        cssManager.defaultStyles,
+        css `
+      * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          position: relative;
+          display: block;
+          height: 40px;
+          color: ${cssManager.bdTheme('#222', '#fff')};
+        }
+
+        .maincontainer {
+          display: block;
+        }
+
+        .label {
+          font-size: 14px;
+          margin-bottom: 15px;
+        }
+
+        .selectedBox {
+          cursor: pointer;
+          position: relative;
+          max-width: 420px;
+          height: 40px;
+          line-height: 40px;
+          padding: 0px 8px;
+          z-index: 0px;
+          background: ${cssManager.bdTheme('#ffffff', '#333333')};
+          box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
+          border-radius: 3px;
+          border-top: 1px solid #CCCCCC00;
+          border-bottom: 1px solid #66666600;
+        }
+
+        .selectedBox.show {
+          border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#666666')};
+          border-bottom: 1px solid ${cssManager.bdTheme('#fafafa', '#222222')};
+        }
+
+        .selectionBox {
+          will-change:transform;
+          pointer-events: none;
+          cursor: pointer;
+          transition: all 0.2s ease;
+          opacity: 0;
+          position: relative;
+          background: ${cssManager.bdTheme('#ffffff', '#222222')};
+          max-width: 420px;
+          box-shadow: 0px 0px 5px  rgba(0,0,0,0.2);
+          min-height: 40px;
+          margin-top: -40px;
+          z-index: 100;
+          border-radius: 3px;
+          padding: 4px;
+          transform: scale(0.99,0.99);
+        }
+
+        .selectionBox.show {
+          pointer-events: all;
+          opacity: 1;
+          transform: scale(1,1);
+        }
+
+        .option {
+          transition: all 0.1s;
+          line-height: 40px;
+          padding: 0px 4px;
+          border-radius: 3px;
+        }
+
+        .option:hover {
+          color: #fff;
+          padding-left: 8px;
+          background: #0277bd;
+        }
+    `
+    ]; }
+    render() {
+        return html `
+      ${domtools.elementBasic.styles}
+      <style>
+        
+      </style>
+      <div class="maincontainer">
+        <div class="selectedBox show" @click="${event => { this.toggleSelectionBox(); }}">
+          ${this.selectedOption?.option}
+        </div>
+        <div class="selectionBox">
+          ${this.options.map(option => {
+            return html `
+              <div class="option" @click=${() => { this.updateSelection(option); }}>${option.option}</div>
+            `;
+        })}
+        </div>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        this.selectedOption = this.options[0] || null;
+    }
+    async updateSelection(selectedOption) {
+        this.selectedOption = selectedOption;
+        this.dispatchEvent(new CustomEvent('selectedOption', {
+            detail: selectedOption,
+            bubbles: true
+        }));
+        this.toggleSelectionBox();
+        this.changeSubject.next(this);
+    }
+    toggleSelectionBox() {
+        this.shadowRoot.querySelector('.selectedBox').classList.toggle('show');
+        this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], DeesInputDropdown.prototype, "label", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], DeesInputDropdown.prototype, "key", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Array)
+], DeesInputDropdown.prototype, "options", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], DeesInputDropdown.prototype, "selectedOption", void 0);
+__decorate([
+    property({
+        type: Boolean
+    }),
+    __metadata("design:type", Boolean)
+], DeesInputDropdown.prototype, "required", void 0);
+__decorate([
+    property({
+        type: Boolean
+    }),
+    __metadata("design:type", Boolean)
+], DeesInputDropdown.prototype, "disabled", void 0);
+DeesInputDropdown = __decorate([
+    customElement('dees-input-dropdown')
+], DeesInputDropdown);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1kcm9wZG93bi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9kZWVzLWlucHV0LWRyb3Bkb3duLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsV0FBVyxFQUF1QixRQUFRLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBRSxVQUFVLEdBQW1CLE1BQU0sNkJBQTZCLENBQUM7QUFDaEosT0FBTyxLQUFLLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQztBQVNsRCxXQUFNLGlCQUFpQixHQUF2QixNQUFNLGlCQUFrQixTQUFRLFdBQVc7SUFBM0M7O1FBV0wsV0FBVztRQUNKLGtCQUFhLEdBQUcsSUFBSSxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBRzVDLFVBQUssR0FBVyxPQUFPLENBQUM7UUFNeEIsWUFBTyxHQUFtRCxFQUFFLENBQUM7UUFHN0QsbUJBQWMsR0FBaUQ7WUFDcEUsR0FBRyxFQUFFLElBQUk7WUFDVCxNQUFNLEVBQUUsSUFBSTtZQUNaLE9BQU8sRUFBRSxJQUFJO1NBQ2QsQ0FBQztRQUtLLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFLMUIsYUFBUSxHQUFZLEtBQUssQ0FBQztJQTRIbkMsQ0FBQzthQWpLZSxTQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOztpQkFFaEI7UUFDVCxFQUFDLE1BQU0sRUFBRSxVQUFVLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBQztRQUNwQyxFQUFDLE1BQU0sRUFBRSxVQUFVLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBQztRQUNwQyxFQUFDLE1BQU0sRUFBRSxVQUFVLEVBQUUsR0FBRyxFQUFFLFNBQVMsRUFBQztLQUNyQzs7R0FFSixBQVJpQixDQVFqQjthQStCYSxXQUFNLEdBQUc7UUFDckIsVUFBVSxDQUFDLGFBQWE7UUFDeEIsR0FBRyxDQUFBOzs7Ozs7Ozs7bUJBU1ksVUFBVSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsTUFBTSxDQUFDOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozt3QkFvQjdCLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzt3QkFDeEMsVUFBVSxDQUFDLE9BQU8sQ0FBQyw2QkFBNkIsRUFBRSxNQUFNLENBQUM7Ozs7Ozs7a0NBTy9DLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQztxQ0FDckMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDOzs7Ozs7Ozs7O3dCQVVyRCxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0tBNkIzRDtLQUNGLEFBaEZtQixDQWdGbkI7SUFFTSxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7UUFDUCxRQUFRLENBQUMsWUFBWSxDQUFDLE1BQU07Ozs7O2dEQUtZLEtBQUssQ0FBQyxFQUFFLEdBQUUsSUFBSSxDQUFDLGtCQUFrQixFQUFFLENBQUMsQ0FBQSxDQUFDO1lBQ3pFLElBQUksQ0FBQyxjQUFjLEVBQUUsTUFBTTs7O1lBRzNCLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxFQUFFO1lBQzFCLE9BQU8sSUFBSSxDQUFBOzJDQUNvQixHQUFHLEVBQUUsR0FBRSxJQUFJLENBQUMsZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUEsQ0FBQyxJQUFJLE1BQU0sQ0FBQyxNQUFNO2FBQ3BGLENBQUE7UUFDSCxDQUFDLENBQUM7OztLQUdQLENBQUM7SUFDSixDQUFDO0lBRUQsWUFBWTtRQUNWLElBQUksQ0FBQyxjQUFjLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxJQUFJLENBQUM7SUFDaEQsQ0FBQztJQUVNLEtBQUssQ0FBQyxlQUFlLENBQUMsY0FBYztRQUN6QyxJQUFJLENBQUMsY0FBYyxHQUFHLGNBQWMsQ0FBQztRQUVyQyxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksV0FBVyxDQUFDLGdCQUFnQixFQUFFO1lBQ25ELE1BQU0sRUFBRSxjQUFjO1lBQ3RCLE9BQU8sRUFBRSxJQUFJO1NBQ2QsQ0FBQyxDQUFDLENBQUM7UUFDSixJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQztRQUMxQixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNoQyxDQUFDO0lBRU0sa0JBQWtCO1FBQ3ZCLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLGNBQWMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDdkUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsZUFBZSxDQUFDLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUMxRSxDQUFDOztBQWxKTTtJQUROLFFBQVEsRUFBRTs7Z0RBQ29CO0FBR3hCO0lBRE4sUUFBUSxFQUFFOzs4Q0FDUTtBQUdaO0lBRE4sUUFBUSxFQUFFOztrREFDeUQ7QUFHN0Q7SUFETixRQUFRLEVBQUU7O3lEQUtUO0FBS0s7SUFITixRQUFRLENBQUM7UUFDUixJQUFJLEVBQUUsT0FBTztLQUNkLENBQUM7O21EQUMrQjtBQUsxQjtJQUhOLFFBQVEsQ0FBQztRQUNSLElBQUksRUFBRSxPQUFPO0tBQ2QsQ0FBQzs7bURBQytCO0FBdEN0QixpQkFBaUI7SUFEN0IsYUFBYSxDQUFDLHFCQUFxQixDQUFDO0dBQ3hCLGlCQUFpQixDQWtLN0IifQ==

package/dist_ts_web/elements/dees-input-fileupload.d.ts

@@ -0,0 +1,24 @@
+import { DeesElement, type TemplateResult, type CSSResult } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+declare global {
+    interface HTMLElementTagNameMap {
+        'dees-input-fileupload': DeesInputFileupload;
+    }
+}
+export declare class DeesInputFileupload extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    changeSubject: domtools.rxjs.Subject<unknown>;
+    label: string;
+    key: string;
+    value: File[];
+    state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed';
+    required: boolean;
+    disabled: boolean;
+    buttonText: string;
+    constructor();
+    static styles: CSSResult[];
+    render(): TemplateResult;
+    openFileSelector(): Promise<void>;
+    updateValue(eventArg: Event): Promise<void>;
+    firstUpdated(): void;
+}

package/dist_ts_web/elements/dees-input-fileupload.js

@@ -0,0 +1,196 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { customElement, DeesElement, property, html, css, unsafeCSS, cssManager, } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+export let DeesInputFileupload = class DeesInputFileupload extends DeesElement {
+    static { this.demo = () => html `<dees-input-fileupload .label=${'Attachments'}></dees-input-fileupload>`; }
+    constructor() {
+        super();
+        // INSTANCE
+        this.changeSubject = new domtools.rxjs.Subject();
+        this.label = null;
+        this.value = [];
+        this.state = 'idle';
+        this.required = false;
+        this.disabled = false;
+        this.buttonText = 'Upload File...';
+    }
+    static { this.styles = [
+        cssManager.defaultStyles,
+        css `
+      :host {
+        position: relative;
+        display: grid;
+        margin: 10px 0px;
+        margin-bottom: 24px;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      .maincontainer {
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+        
+      }
+
+      .label {
+        font-size: 14px;
+        margin-bottom: 5px;
+      }
+
+      .uploadButton {
+        position: relative;
+        cursor: pointer;
+        padding: 8px;
+        max-width: 600px;
+        background: ${cssManager.bdTheme('#fafafa', '#333333')};
+        border-radius: 3px;
+        text-align: center;
+      }
+
+      .uploadButton:hover {
+        color: #fff;
+        background: rgb(3, 155, 229);
+      }
+
+      .uploadButton::after {
+        top: 2px;
+        right: 2px;
+        left: 2px;
+        bottom: 2px;
+        transform: scale3d(0.98, 0.9, 1);
+        position: absolute;
+        content: '';
+        display: block;
+        border: 2px dashed rgba(255, 255, 255, 0);
+        transition: all 0.2s;
+      }
+      .uploadButton.dragOver::after {
+        transform: scale3d(1, 1, 1);
+        border: 2px dashed rgba(255, 255, 255, 0.3);
+      }
+
+      .uploadCandidate {
+        text-align: left;
+        border-bottom: 1px dashed #444;
+        color: ${cssManager.bdTheme('#666', '#ccc')};
+        padding: 8px;
+        font-family: 'Mona Sans', 'Inter', sans-serif;
+      }
+
+      .uploadButton:hover .uploadCandidate {
+        color: ${cssManager.bdTheme('#fff', '#fff')};
+        border-bottom: 1px dashed #fff;
+      }
+
+      .uploadCandidate:last-child {
+        margin-bottom: 8px;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="hidden">
+        <input type="file"></div>
+      </div>
+      <div class="maincontainer">
+        ${this.label ? html `<div class="label">${this.label}</div>` : null}
+        ${this.value.map((fileArg) => html ` <div class="uploadCandidate">${fileArg.name} | ${fileArg.size}</div> `)}
+        <div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}" @click=${this.openFileSelector}>
+          ${this.buttonText}
+        </div>
+      </div>
+    `;
+    }
+    async openFileSelector() {
+        const inputFile = this.shadowRoot.querySelector('input[type="file"]');
+        inputFile.click();
+    }
+    async updateValue(eventArg) {
+        const target = eventArg.target;
+        this.value = target.value;
+        this.changeSubject.next(this);
+    }
+    firstUpdated() {
+        const dropArea = this.shadowRoot.querySelector('.uploadButton');
+        const handlerFunction = (eventArg) => {
+            eventArg.preventDefault();
+            switch (eventArg.type) {
+                case 'dragover':
+                    this.state = 'dragOver';
+                    this.buttonText = 'release to upload file...';
+                    break;
+                case 'dragleave':
+                    this.state = 'idle';
+                    this.buttonText = 'Upload File...';
+                    break;
+                case 'drop':
+                    this.state = 'idle';
+                    this.buttonText = 'Upload more files...';
+            }
+            console.log(eventArg);
+            for (const file of Array.from(eventArg.dataTransfer.files)) {
+                this.value.push(file);
+                this.requestUpdate();
+            }
+            console.log(`Got ${this.value.length} files!`);
+        };
+        dropArea.addEventListener('dragenter', handlerFunction, false);
+        dropArea.addEventListener('dragleave', handlerFunction, false);
+        dropArea.addEventListener('dragover', handlerFunction, false);
+        dropArea.addEventListener('drop', handlerFunction, false);
+    }
+};
+__decorate([
+    property({
+        type: String,
+    }),
+    __metadata("design:type", String)
+], DeesInputFileupload.prototype, "label", void 0);
+__decorate([
+    property({
+        type: String,
+    }),
+    __metadata("design:type", String)
+], DeesInputFileupload.prototype, "key", void 0);
+__decorate([
+    property({
+        attribute: false,
+    }),
+    __metadata("design:type", Array)
+], DeesInputFileupload.prototype, "value", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], DeesInputFileupload.prototype, "state", void 0);
+__decorate([
+    property({
+        type: Boolean,
+    }),
+    __metadata("design:type", Boolean)
+], DeesInputFileupload.prototype, "required", void 0);
+__decorate([
+    property({
+        type: Boolean,
+    }),
+    __metadata("design:type", Boolean)
+], DeesInputFileupload.prototype, "disabled", void 0);
+__decorate([
+    property({
+        type: String,
+    }),
+    __metadata("design:type", String)
+], DeesInputFileupload.prototype, "buttonText", void 0);
+DeesInputFileupload = __decorate([
+    customElement('dees-input-fileupload'),
+    __metadata("design:paramtypes", [])
+], DeesInputFileupload);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1maWxldXBsb2FkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2RlZXMtaW5wdXQtZmlsZXVwbG9hZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsYUFBYSxFQUNiLFdBQVcsRUFFWCxRQUFRLEVBQ1IsSUFBSSxFQUNKLEdBQUcsRUFDSCxTQUFTLEVBQ1QsVUFBVSxHQUVYLE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxLQUFLLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQztBQVNsRCxXQUFNLG1CQUFtQixHQUF6QixNQUFNLG1CQUFvQixTQUFRLFdBQVc7YUFDcEMsU0FBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQSxpQ0FBaUMsYUFBYSwyQkFBMkIsQUFBdEYsQ0FBdUY7SUFzQ3pHO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFyQ1YsV0FBVztRQUNKLGtCQUFhLEdBQUcsSUFBSSxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBSzVDLFVBQUssR0FBVyxJQUFJLENBQUM7UUFVckIsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUduQixVQUFLLEdBQWdFLE1BQU0sQ0FBQztRQUs1RSxhQUFRLEdBQVksS0FBSyxDQUFDO1FBSzFCLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFLMUIsZUFBVSxHQUFXLGdCQUFnQixDQUFDO0lBSTdDLENBQUM7YUFFYSxXQUFNLEdBQUc7UUFDckIsVUFBVSxDQUFDLGFBQWE7UUFDeEIsR0FBRyxDQUFBOzs7Ozs7Ozs7Ozs7O2lCQWFVLFVBQVUsQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQzs7Ozs7Ozs7Ozs7Ozs7c0JBYzdCLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O2lCQThCN0MsVUFBVSxDQUFDLE9BQU8s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

package/dist_ts_web/elements/dees-input-quantityselector.d.ts

@@ -0,0 +1,19 @@
+import { type TemplateResult, DeesElement } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+declare global {
+    interface HTMLElementTagNameMap {
+        'dees-input-quantityselector': DeesInputQuantitySelector;
+    }
+}
+export declare class DeesInputQuantitySelector extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    changeSubject: domtools.rxjs.Subject<unknown>;
+    key: string;
+    value: number;
+    required: boolean;
+    disabled: boolean;
+    constructor();
+    render(): TemplateResult;
+    increase(): void;
+    decrease(): void;
+}

package/dist_ts_web/elements/dees-input-quantityselector.js

@@ -0,0 +1,122 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { customElement, property, html, DeesElement, } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+export let DeesInputQuantitySelector = class DeesInputQuantitySelector extends DeesElement {
+    static { this.demo = () => html `<dees-input-quantityselector></dees-input-quantityselector>`; }
+    constructor() {
+        super();
+        // INSTANCE
+        this.changeSubject = new domtools.rxjs.Subject();
+        this.value = 1;
+        this.required = false;
+        this.disabled = false;
+    }
+    render() {
+        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;
+          color: ${this.goBright ? '#666' : '#CCC'};
+          border: ${this.goBright ? '1px solid #333' : '1px solid #CCC'};
+          border-radius: 4px;
+        }
+
+        .mainContainer:hover {
+          color: ${this.goBright ? '#333' : '#fff'};
+          border: ${this.goBright ? '1px solid #333' : '1px solid #fff'};
+        }
+
+        .minus {
+          padding-left: 5px;
+        }
+
+        .plus {
+          padding-right: 5px;
+        }
+
+        .selector {
+          text-align: center;
+          font-size: 20px;
+        }
+
+        .selector:hover {
+          cursor: pointer;
+        }
+
+        .quantity {
+          text-align: center;
+        }
+
+        
+      </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>
+    `;
+    }
+    increase() {
+        this.value++;
+        this.changeSubject.next(this);
+    }
+    decrease() {
+        if (this.value > 0) {
+            this.value--;
+        }
+        else {
+            // nothing to do here
+        }
+        this.changeSubject.next(this);
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], DeesInputQuantitySelector.prototype, "key", void 0);
+__decorate([
+    property({
+        type: Number
+    }),
+    __metadata("design:type", Number)
+], DeesInputQuantitySelector.prototype, "value", void 0);
+__decorate([
+    property({
+        type: Boolean,
+    }),
+    __metadata("design:type", Boolean)
+], DeesInputQuantitySelector.prototype, "required", void 0);
+__decorate([
+    property({
+        type: Boolean
+    }),
+    __metadata("design:type", Boolean)
+], DeesInputQuantitySelector.prototype, "disabled", void 0);
+DeesInputQuantitySelector = __decorate([
+    customElement('dees-input-quantityselector'),
+    __metadata("design:paramtypes", [])
+], DeesInputQuantitySelector);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1xdWFudGl0eXNlbGVjdG9yLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2RlZXMtaW5wdXQtcXVhbnRpdHlzZWxlY3Rvci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQXVCLFdBQVcsR0FBbUIsTUFBTSw2QkFBNkIsQ0FBQztBQUMvSCxPQUFPLEtBQUssUUFBUSxNQUFNLDhCQUE4QixDQUFDO0FBU2xELFdBQU0seUJBQXlCLEdBQS9CLE1BQU0seUJBQTBCLFNBQVEsV0FBVzthQUMxQyxTQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBLDZEQUE2RCxBQUExRSxDQUEyRTtJQXVCN0Y7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQXRCVixXQUFXO1FBQ0osa0JBQWEsR0FBRyxJQUFJLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFRNUMsVUFBSyxHQUFXLENBQUMsQ0FBQztRQUtsQixhQUFRLEdBQVksS0FBSyxDQUFDO1FBSzFCLGFBQVEsR0FBWSxLQUFLLENBQUM7SUFJakMsQ0FBQztJQUVNLE1BQU07UUFDWCxPQUFPLElBQUksQ0FBQTtRQUNQLFFBQVEsQ0FBQyxZQUFZLENBQUMsTUFBTTs7Ozs7Ozs7Ozs7Ozs7Ozs7bUJBaUJqQixJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU07b0JBQzlCLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxnQkFBZ0I7Ozs7O21CQUtwRCxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU07b0JBQzlCLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxnQkFBZ0I7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OENBNEJ6QixHQUFHLEVBQUUsR0FBRSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQSxDQUFDO2dDQUN0QyxJQUFJLENBQUMsS0FBSzs2Q0FDRyxHQUFHLEVBQUUsR0FBRSxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQSxDQUFDOztLQUVoRSxDQUFDO0lBQ0osQ0FBQztJQUVNLFFBQVE7UUFDYixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDYixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNoQyxDQUFDO0lBRU0sUUFBUTtRQUNiLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLEVBQUU7WUFDbEIsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQ2Q7YUFBTTtZQUNMLHFCQUFxQjtTQUN0QjtRQUNELElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ2hDLENBQUM7O0FBOUZNO0lBRE4sUUFBUSxFQUFFOztzREFDUTtBQUtaO0lBSE4sUUFBUSxDQUFDO1FBQ1IsSUFBSSxFQUFFLE1BQU07S0FDYixDQUFDOzt3REFDdUI7QUFLbEI7SUFITixRQUFRLENBQUM7UUFDUixJQUFJLEVBQUUsT0FBTztLQUNkLENBQUM7OzJEQUMrQjtBQUsxQjtJQUhOLFFBQVEsQ0FBQztRQUNSLElBQUksRUFBRSxPQUFPO0tBQ2QsQ0FBQzs7MkRBQytCO0FBdEJ0Qix5QkFBeUI7SUFEckMsYUFBYSxDQUFDLDZCQUE2QixDQUFDOztHQUNoQyx5QkFBeUIsQ0FzR3JDIn0=

package/dist_ts_web/elements/dees-input-radio.d.ts

@@ -0,0 +1,19 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+declare global {
+    interface HTMLElementTagNameMap {
+        'dees-input-radio': DeesInputRadio;
+    }
+}
+export declare class DeesInputRadio extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    changeSubject: domtools.rxjs.Subject<unknown>;
+    key: string;
+    label: string;
+    value: boolean;
+    required: boolean;
+    disabled: boolean;
+    constructor();
+    render(): TemplateResult;
+    toggleSelected(): Promise<void>;
+}