@design.estate/dees-catalog 1.0.173

package/dist_ts_web/elements/dees-stepper.js

@@ -0,0 +1,231 @@
+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 { DeesElement, customElement, html, css, unsafeCSS, cssManager, property, } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+export let DeesStepper = class DeesStepper extends DeesElement {
+    static { this.demo = () => html `
+      <dees-stepper
+        .steps=${[
+        {
+            title: 'Whats your name?',
+            content: html `
+              <dees-form>
+                <dees-input-text
+                  key="email"
+                  label="Your Email"
+                  value="hello@something.com"
+                  disabled
+                ></dees-input-text>
+                <dees-input-text key="firstName" required label="Vorname"></dees-input-text>
+                <dees-input-text key="lastName" required label="Nachname"></dees-input-text>
+                <dees-form-submit>Next</dees-form-submit>
+              </dees-form>
+            `,
+            validationFunc: async (stepperArg, elementArg) => {
+                const deesForm = elementArg.querySelector('dees-form');
+                deesForm.addEventListener('formData', (eventArg) => {
+                    stepperArg.goNext();
+                });
+            },
+        },
+        {
+            title: 'Whats your mobile number?',
+            content: html ``,
+        },
+    ]}
+      ></dees-stepper>
+    `; }
+    constructor() {
+        super();
+        this.steps = [];
+        this.getIndexOfStep = (stepArg) => {
+            return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
+        };
+    }
+    static { this.styles = [
+        cssManager.defaultStyles,
+        css `
+      :host {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+      }
+      .stepperContainer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
+        overflow: hidden;
+      }
+
+      .step {
+        position: relative;
+        pointer-events: none;
+        overflow: hidden;
+        transition: all 0.7s ease-in-out;
+        max-width: 500px;
+        min-height: 300px;
+        border-radius: 3px;
+        background: ${cssManager.bdTheme('#ffffff', '#181818')};
+        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#181818')};
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        margin: auto;
+        margin-bottom: 20px;
+        filter: opacity(0.5) grayscale(1);
+        box-shadow: 0px 0px 3px #00000010;
+        user-select: none;
+      }
+
+      .step.selected {
+        border-top: 1px solid #e4002b;
+        pointer-events: all;
+        filter: opacity(1) grayscale(0);
+        box-shadow: 0px 0px 5px #00000010;
+        user-select: auto;
+      }
+
+      .step.hiddenStep {
+        filter: opacity(0);
+      }
+
+      .step:last-child {
+        margin-bottom: 100vh;
+      }
+
+      .step .stepCounter {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        padding: 10px 15px;
+        font-size: 12px;
+        border-bottom-left-radius: 3px;
+        background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
+      }
+
+      .step .goBack {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        padding: 10px 15px;
+        font-size: 12px;
+        border-bottom-right-radius: 3px;
+        background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
+        cursor: pointer;
+      }
+
+      .step .goBack:hover {
+        background: ${cssManager.bdTheme('#00000012', '#ffffff12')};
+      }
+
+      .step .title {
+        text-align: center;
+        padding-top: 50px;
+        font-family: 'Mona Sans', 'Inter', sans-serif;
+        font-size: 25px;
+        font-weight: 300;
+      }
+
+      .step .content {
+        padding: 20px;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="stepperContainer">
+        ${this.steps.map((stepArg) => html `<div
+              class="step ${stepArg === this.selectedStep
+            ? 'selected'
+            : null} ${this.getIndexOfStep(stepArg) > this.getIndexOfStep(this.selectedStep)
+            ? 'hiddenStep'
+            : ''}"
+            >
+              ${this.getIndexOfStep(stepArg) > 0
+            ? html `<div class="goBack" @click=${this.goBack}><- go to previous step</div>`
+            : ``}
+              <div class="stepCounter">
+                Step ${this.steps.findIndex((elementArg) => elementArg === stepArg) + 1} of
+                ${this.steps.length}
+              </div>
+              <div class="title">${stepArg.title}</div>
+              <div class="content">${stepArg.content}</div>
+            </div> `)}
+      </div>
+    `;
+    }
+    async firstUpdated() {
+        await this.domtoolsPromise;
+        await this.domtools.convenience.smartdelay.delayFor(0);
+        this.selectedStep = this.steps[0];
+        this.setScrollStatus();
+    }
+    async updated() {
+        this.setScrollStatus();
+    }
+    async setScrollStatus() {
+        const stepperContainer = this.shadowRoot.querySelector('.stepperContainer');
+        const firstStepElement = this.shadowRoot.querySelector('.step');
+        const selectedStepElement = this.shadowRoot.querySelector('.selected');
+        if (!selectedStepElement) {
+            return;
+        }
+        if (!stepperContainer.style.paddingTop) {
+            stepperContainer.style.paddingTop = `${stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2}px`;
+        }
+        console.log('Setting scroll status');
+        console.log(selectedStepElement);
+        const scrollPosition = selectedStepElement.offsetTop -
+            stepperContainer.offsetHeight / 2 +
+            selectedStepElement.offsetHeight / 2;
+        console.log(scrollPosition);
+        const domtoolsInstance = await domtools.DomTools.setupDomTools();
+        if (!this.scroller) {
+            this.scroller = new domtools.plugins.SweetScroll({
+                vertical: true,
+                horizontal: false,
+                easing: 'easeInOutExpo',
+                duration: 700,
+            }, stepperContainer);
+        }
+        if (!this.selectedStep.validationFuncCalled && this.selectedStep.validationFunc) {
+            this.selectedStep.validationFuncCalled = true;
+            await this.selectedStep.validationFunc(this, selectedStepElement);
+        }
+        this.scroller.to(scrollPosition);
+    }
+    async goBack() {
+        const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
+        this.selectedStep = this.steps[currentIndex - 1];
+        await this.domtoolsPromise;
+        await this.domtools.convenience.smartdelay.delayFor(100);
+        this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot.querySelector('.selected'));
+    }
+    goNext() {
+        const currentIndex = this.steps.findIndex((stepArg) => stepArg === this.selectedStep);
+        this.selectedStep = this.steps[currentIndex + 1];
+    }
+};
+__decorate([
+    property({
+        type: Array,
+    }),
+    __metadata("design:type", Array)
+], DeesStepper.prototype, "steps", void 0);
+__decorate([
+    property({
+        type: Object,
+    }),
+    __metadata("design:type", Object)
+], DeesStepper.prototype, "selectedStep", void 0);
+DeesStepper = __decorate([
+    customElement('dees-stepper'),
+    __metadata("design:paramtypes", [])
+], DeesStepper);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1zdGVwcGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2RlZXMtc3RlcHBlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLGFBQWEsRUFDYixJQUFJLEVBQ0osR0FBRyxFQUNILFNBQVMsRUFFVCxVQUFVLEVBQ1YsUUFBUSxHQUVULE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxLQUFLLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQztBQWlCbEQsV0FBTSxXQUFXLEdBQWpCLE1BQU0sV0FBWSxTQUFRLFdBQVc7YUFDNUIsU0FBSSxHQUFHLEdBQUcsRUFBRSxDQUN4QixJQUFJLENBQUE7O2lCQUVTO1FBQ1A7WUFDRSxLQUFLLEVBQUUsa0JBQWtCO1lBQ3pCLE9BQU8sRUFBRSxJQUFJLENBQUE7Ozs7Ozs7Ozs7OzthQVlaO1lBQ0QsY0FBYyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsVUFBVSxFQUFFLEVBQUU7Z0JBQy9DLE1BQU0sUUFBUSxHQUFHLFVBQVUsQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFDLENBQUM7Z0JBQ3ZELFFBQVEsQ0FBQyxnQkFBZ0IsQ0FBQyxVQUFVLEVBQUUsQ0FBQyxRQUFRLEVBQUUsRUFBRTtvQkFDakQsVUFBVSxDQUFDLE1BQU0sRUFBRSxDQUFDO2dCQUN0QixDQUFDLENBQUMsQ0FBQztZQUNMLENBQUM7U0FDRjtRQUNEO1lBQ0UsS0FBSyxFQUFFLDJCQUEyQjtZQUNsQyxPQUFPLEVBQUUsSUFBSSxDQUFBLEVBQUU7U0FDaEI7S0FDUzs7S0FFZixBQWhDZSxDQWdDZDtJQVlKO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFSSCxVQUFLLEdBQVksRUFBRSxDQUFDO1FBK0hwQixtQkFBYyxHQUFHLENBQUMsT0FBYyxFQUFVLEVBQUU7WUFDakQsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxDQUFDLFFBQVEs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

package/dist_ts_web/elements/dees-table.d.ts

@@ -0,0 +1,28 @@
+import { DeesElement, type TemplateResult, type CSSResult } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'dees-table': DeesTable<any>;
+    }
+}
+export interface IDataAction<T = any> {
+    name: string;
+    iconName: string;
+    useTableBehaviour?: 'upload' | 'cancelUpload' | 'none';
+    actionFunc: (itemArg: T) => Promise<any>;
+}
+export declare class DeesTable<T> extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    heading1: string;
+    heading2: string;
+    data: T[];
+    dataActions: IDataAction[];
+    selectedDataRow: T;
+    type: 'normal' | 'highlighted' | 'discreet' | 'big';
+    status: 'normal' | 'pending' | 'success' | 'error';
+    files: File[];
+    fileWeakMap: WeakMap<object, any>;
+    constructor();
+    static styles: CSSResult[];
+    render(): TemplateResult;
+    firstUpdated(): Promise<void>;
+}

package/dist_ts_web/elements/dees-table.js

@@ -0,0 +1,348 @@
+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, html, DeesElement, property, cssManager, css, unsafeCSS, state, } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+export let DeesTable = class DeesTable extends DeesElement {
+    static { this.demo = () => html `
+    <style>
+      .demoWrapper {
+        box-sizing: border-box;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        padding: 60px;
+        background: #000000;
+      }
+    </style>
+    <div class="demoWrapper">
+      <dees-table
+        heading1="Current Account Statement"
+        heading2="Bunq - Payment Account 2 - April 2021"
+        .data=${[
+        {
+            date: '2021-04-01',
+            amount: '2464.65 €',
+            description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
+        },
+        {
+            date: '2021-04-02',
+            amount: '165.65 €',
+            description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
+        },
+        {
+            date: '2021-04-03',
+            amount: '2999,00 €',
+            description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
+        },
+        {
+            date: '2021-04-01',
+            amount: '2464.65 €',
+            description: 'Office-Supplies - STAPLES BREMEN',
+        },
+        {
+            date: '2021-04-01',
+            amount: '2464.65 €',
+            description: 'Office-Supplies - STAPLES BREMEN',
+        },
+    ]}
+        .dataActions="${[{
+            name: 'upload',
+            iconName: 'upload',
+            useTableBehaviour: 'upload',
+            actionFunc: async (itemArg) => {
+            },
+        }, {
+            name: 'visibility',
+            iconName: 'visibility',
+            useTableBehaviour: 'preview',
+            actionFunc: async (itemArg) => {
+            },
+        }]}"
+        >This is a slotted Text</dees-table>
+    </div>
+  `; }
+    constructor() {
+        super();
+        // INSTANCE
+        this.heading1 = 'heading 1';
+        this.heading2 = 'heading 2';
+        this.data = [];
+        this.dataActions = [];
+        this.type = 'normal';
+        this.status = 'normal';
+        this.files = [];
+        this.fileWeakMap = new WeakMap();
+    }
+    static { this.styles = [
+        cssManager.defaultStyles,
+        css `
+      .mainbox {
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        font-family: 'Mona Sans', 'Inter', sans-serif;
+        font-weight: 400;
+        font-size: 16px;
+        padding: 16px;
+        display: block;
+        width: 100%;
+        min-height: 50px;
+        background: ${cssManager.bdTheme('#ffffff', '#333333')};
+        border-radius: 3px;
+        border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
+        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
+        overflow-x: auto;
+      }
+      .headingSeparation {
+        margin-top: 7px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
+      }
+
+      table,
+      .noDataSet {
+        margin-top: 16px;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        border-collapse: collapse;
+        width: 100%;
+      }
+      .noDataSet {
+        text-align: center;
+      }
+      tr {
+        border-bottom: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
+        text-align: left;
+      }
+      tr:last-child {
+        border-bottom: none;
+        text-align: left;
+      }
+      tr:hover {
+        cursor: pointer;
+      }
+      tr:hover .innerCellContainer {
+        background: ${cssManager.bdTheme('#22222210', '#ffffff20')};
+      }
+      tr:first-child:hover {
+        cursor: auto;
+      }
+      tr:first-child:hover .innerCellContainer {
+        background: none;
+      }
+      tr.selected .innerCellContainer {
+        background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
+      }
+      th {
+        text-transform: uppercase;
+      }
+      th,
+      td {
+        padding: 3px 0px;
+        border-right: 1px dashed ${cssManager.bdTheme('#999', '#808080')};
+      }
+      .innerCellContainer {
+        padding: 6px 8px;
+      }
+      th:first-child .innerCellContainer,
+      td:first-child .innerCellContainer {
+        padding-left: 0px;
+      }
+      th:last-child .innerCellContainer,
+      td:last-child .innerCellContainer {
+        padding-right: 0px;
+      }
+      th:last-child,
+      td:last-child {
+        border-right: none;
+      }
+
+      .action {
+        margin: -8px 0px;
+        padding: 8px;
+        line-height: 16px;
+        display: inline-block;
+      }
+
+      .action:first-child {
+        margin-left: -8px;
+        width: min-content;
+      }
+
+      .action:hover {
+        background: ${cssManager.bdTheme('#CCC', '#111')};
+      }
+
+      .tableStatistics {
+        padding: 4px 16px;
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#111', '#ffffff90')};
+        background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
+        margin: 16px -16px -16px -16px;
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="mainbox">
+        <!-- the heading part -->
+        <div>${this.heading1}</div>
+        <div>${this.heading2}</div>
+        <div class="headingSeparation"></div>
+
+        <!-- the actual table -->
+        <style></style>
+        ${this.data.length > 0
+            ? (() => {
+                const headings = Object.keys(this.data[0]);
+                return html `
+                <table>
+                  <tr>
+                    ${headings.map((headingArg) => html `
+                        <th>
+                          <div class="innerCellContainer">${headingArg}</div>
+                        </th>
+                      `)}
+                    ${(() => {
+                    if (this.dataActions && this.dataActions.length > 0) {
+                        return html `
+                          <th>
+                            <div class="innerCellContainer">Actions</div>
+                          </th>
+                        `;
+                    }
+                })()}
+                  </tr>
+                  ${this.data.map((itemArg) => html `
+                      <tr
+                        @click=${() => {
+                    this.selectedDataRow = itemArg;
+                }}
+                        @dragenter=${async (eventArg) => {
+                    console.log(eventArg.target.tagName);
+                    console.log('dragenter');
+                    eventArg.preventDefault();
+                    eventArg.stopPropagation();
+                    eventArg.target.parentElement.style.background = '#800000';
+                }}
+                        @dragleave=${async (eventArg) => {
+                    console.log(eventArg.target.tagName);
+                    console.log('dragleave');
+                    eventArg.preventDefault();
+                    eventArg.stopPropagation();
+                    eventArg.target.parentElement.style.background = 'none';
+                }}
+                        @dragover=${async (eventArg) => {
+                    eventArg.preventDefault();
+                }}
+                        @drop=${async (eventArg) => {
+                    eventArg.preventDefault();
+                    const newFiles = [];
+                    for (const file of Array.from(eventArg.dataTransfer.files)) {
+                        this.files.push(file);
+                        newFiles.push(file);
+                        this.requestUpdate();
+                    }
+                    const result = this.fileWeakMap.get(itemArg);
+                    if (!result) {
+                        this.fileWeakMap.set(itemArg, newFiles);
+                    }
+                    else {
+                        result.push(...newFiles);
+                    }
+                }}
+                        class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
+                      >
+                        ${headings.map((headingArg) => html `
+                            <td>
+                              <div class="innerCellContainer">${itemArg[headingArg]}</div>
+                            </td>
+                          `)}
+                        ${(() => {
+                    if (this.dataActions && this.dataActions.length > 0) {
+                        return html `
+                              <td>
+                                <div class="innerCellContainer">
+                                  ${(() => {
+                            const actions = [];
+                            for (const action of this.dataActions) {
+                                actions.push(html `<div class="action">${action.iconName ? html `
+                                        <dees-icon .iconName=${'upload_file'}></dees-icon>
+                                      ` : action.name}</div>`);
+                            }
+                            return actions;
+                        })()}
+                                </div>
+                              </td>
+                            `;
+                    }
+                })()}
+                      </tr>
+                    `)}
+                </table>
+              `;
+            })()
+            : html ` <div class="noDataSet">No data set!</div> `}
+        <div class="tableStatistics">
+          ${this.data.length} data rows (total) |
+          ${this.selectedDataRow
+            ? html `Row ${this.data.indexOf(this.selectedDataRow) + 1} selected`
+            : html `No row selected`}
+        </div>
+      </div>
+    `;
+    }
+    async firstUpdated() { }
+};
+__decorate([
+    property({
+        type: String,
+    }),
+    __metadata("design:type", String)
+], DeesTable.prototype, "heading1", void 0);
+__decorate([
+    property({
+        type: String,
+    }),
+    __metadata("design:type", String)
+], DeesTable.prototype, "heading2", void 0);
+__decorate([
+    property({
+        type: Array,
+    }),
+    __metadata("design:type", Array)
+], DeesTable.prototype, "data", void 0);
+__decorate([
+    property({
+        type: Array,
+    }),
+    __metadata("design:type", Array)
+], DeesTable.prototype, "dataActions", void 0);
+__decorate([
+    property({
+        type: Object,
+    }),
+    __metadata("design:type", Object)
+], DeesTable.prototype, "selectedDataRow", void 0);
+__decorate([
+    property({
+        type: String,
+    }),
+    __metadata("design:type", String)
+], DeesTable.prototype, "type", void 0);
+__decorate([
+    property({
+        type: String,
+    }),
+    __metadata("design:type", String)
+], DeesTable.prototype, "status", void 0);
+DeesTable = __decorate([
+    customElement('dees-table'),
+    __metadata("design:paramtypes", [])
+], DeesTable);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy10YWJsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9kZWVzLXRhYmxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sRUFDTCxhQUFhLEVBQ2IsSUFBSSxFQUNKLFdBQVcsRUFDWCxRQUFRLEVBRVIsVUFBVSxFQUNWLEdBQUcsRUFDSCxTQUFTLEVBRVQsS0FBSyxHQUNOLE1BQU0sNkJBQTZCLENBQUM7QUFFckMsT0FBTyxLQUFLLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQztBQWdCbEQsV0FBTSxTQUFTLEdBQWYsTUFBTSxTQUFhLFNBQVEsV0FBVzthQUM3QixTQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOzs7Ozs7Ozs7Ozs7Ozs7Z0JBZWpCO1FBQ047WUFDRSxJQUFJLEVBQUUsWUFBWTtZQUNsQixNQUFNLEVBQUUsV0FBVztZQUNuQixXQUFXLEVBQUUsbURBQW1EO1NBQ2pFO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsWUFBWTtZQUNsQixNQUFNLEVBQUUsVUFBVTtZQUNsQixXQUFXLEVBQUUsaURBQWlEO1NBQy9EO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsWUFBWTtZQUNsQixNQUFNLEVBQUUsV0FBVztZQUNuQixXQUFXLEVBQUUscURBQXFEO1NBQ25FO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsWUFBWTtZQUNsQixNQUFNLEVBQUUsV0FBVztZQUNuQixXQUFXLEVBQUUsa0NBQWtDO1NBQ2hEO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsWUFBWTtZQUNsQixNQUFNLEVBQUUsV0FBVztZQUNuQixXQUFXLEVBQUUsa0NBQWtDO1NBQ2hEO0tBQ0Y7d0JBQ2UsQ0FBQztZQUNmLElBQUksRUFBRSxRQUFRO1lBQ2QsUUFBUSxFQUFFLFFBQVE7WUFDbEIsaUJBQWlCLEVBQUUsUUFBUTtZQUMzQixVQUFVLEVBQUUsS0FBSyxFQUFFLE9BQVksRUFBRSxFQUFFO1lBRW5DLENBQUM7U0FDRixF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

package/dist_ts_web/elements/dees-toast.d.ts

@@ -0,0 +1,10 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+declare global {
+    interface HTMLElementTagNameMap {
+        'dees-toast': DeesToast;
+    }
+}
+export declare class DeesToast extends DeesElement {
+    constructor();
+    render(): TemplateResult;
+}

package/dist_ts_web/elements/dees-toast.js

@@ -0,0 +1,29 @@
+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, html, } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+export let DeesToast = class DeesToast extends DeesElement {
+    constructor() {
+        super();
+        domtools.elementBasic.setup();
+    }
+    render() {
+        return html `
+      ${domtools.elementBasic.styles}
+      <style></style>
+      
+    `;
+    }
+};
+DeesToast = __decorate([
+    customElement('dees-toast'),
+    __metadata("design:paramtypes", [])
+], DeesToast);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy10b2FzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9kZWVzLXRvYXN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsV0FBVyxFQUF1QixJQUFJLEdBQW1CLE1BQU0sNkJBQTZCLENBQUM7QUFFckgsT0FBTyxLQUFLLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQztBQVNsRCxXQUFNLFNBQVMsR0FBZixNQUFNLFNBQVUsU0FBUSxXQUFXO0lBRXhDO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFDUixRQUFRLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ2hDLENBQUM7SUFFTSxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUE7UUFDUCxRQUFRLENBQUMsWUFBWSxDQUFDLE1BQU07OztLQUcvQixDQUFDO0lBQ0osQ0FBQztDQUNGLENBQUE7QUFkWSxTQUFTO0lBRHJCLGFBQWEsQ0FBQyxZQUFZLENBQUM7O0dBQ2YsU0FBUyxDQWNyQiJ9

package/dist_ts_web/elements/dees-tooltip.d.ts

@@ -0,0 +1 @@
+export {};

package/dist_ts_web/elements/dees-tooltip.js

@@ -0,0 +1,2 @@
+import {} from '@design.estate/dees-element';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy10b29sdGlwLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2RlZXMtdG9vbHRpcC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQyJ9