@design.estate/dees-catalog 1.0.173

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

@@ -0,0 +1,136 @@
+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, } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+export let DeesInputRadio = class DeesInputRadio extends DeesElement {
+    static { this.demo = () => html `<dees-input-radio></dees-input-radio>`; }
+    constructor() {
+        super();
+        // INSTANCE
+        this.changeSubject = new domtools.rxjs.Subject();
+        this.label = 'Label';
+        this.value = false;
+        this.required = false;
+        this.disabled = false;
+    }
+    render() {
+        return html `
+      <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          display: block;
+          position: relative;
+          margin: 20px 0px;
+          cursor: pointer;
+        }
+
+        .maincontainer {
+          transition: all 0.3s;
+          display: grid;
+          grid-template-columns: 25px auto;
+          padding: 5px 0px;
+          color: #ccc;
+        }
+
+        .maincontainer:hover {
+          color: #fff;
+        }
+
+        .label {
+          margin-left: 15px;
+          line-height: 25px;
+          font-size: 14px;
+          font-weight: normal;
+
+        }
+
+        input:focus {
+          outline: none;
+          border-bottom: 1px solid #e4002b;
+        }
+
+        .checkbox {
+          transition: all 0.3s;
+          box-sizing: border-box;
+          border-radius: 20px;
+          border: 1px solid #999;
+          height: 24px;
+          width: 24px;
+          display: inline-block;
+          background: #222;
+        }
+
+        .checkbox.selected {
+          background: #039BE5;
+          border: 1px solid #039BE5;
+        }
+
+        .maincontainer:hover .checkbox.selected {
+          background: #03A9F4;
+        }
+
+        .innercircle {
+          transition: all 0.3s;
+          margin: 6px 0px 0px 6px;
+          background: #222;
+          width: 10px;
+          height: 10px;
+          border-radius: 10px;
+        }
+      </style>
+      <div class="maincontainer" @click="${this.toggleSelected}">
+        <div class="checkbox ${this.value ? 'selected' : ''}">
+        ${this.value ? html `<div class="innercircle"></div>` : html ``}
+        </div>
+        <div class="label">${this.label}</div>
+      </div>
+    `;
+    }
+    async toggleSelected() {
+        this.value = !this.value;
+        this.dispatchEvent(new CustomEvent('newValue', {
+            detail: this.value,
+            bubbles: true
+        }));
+        this.changeSubject.next(this);
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], DeesInputRadio.prototype, "key", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], DeesInputRadio.prototype, "label", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Boolean)
+], DeesInputRadio.prototype, "value", void 0);
+__decorate([
+    property({
+        type: Boolean,
+    }),
+    __metadata("design:type", Boolean)
+], DeesInputRadio.prototype, "required", void 0);
+__decorate([
+    property({
+        type: Boolean
+    }),
+    __metadata("design:type", Boolean)
+], DeesInputRadio.prototype, "disabled", void 0);
+DeesInputRadio = __decorate([
+    customElement('dees-input-radio'),
+    __metadata("design:paramtypes", [])
+], DeesInputRadio);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC1yYWRpby5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9kZWVzLWlucHV0LXJhZGlvLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBQyxhQUFhLEVBQUUsV0FBVyxFQUF1QixRQUFRLEVBQUUsSUFBSSxHQUFrQixNQUFNLDZCQUE2QixDQUFDO0FBQzdILE9BQU8sS0FBSyxRQUFRLE1BQU0sOEJBQThCLENBQUM7QUFTbEQsV0FBTSxjQUFjLEdBQXBCLE1BQU0sY0FBZSxTQUFRLFdBQVc7YUFDL0IsU0FBSSxHQUFHLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQSx1Q0FBdUMsQUFBcEQsQ0FBcUQ7SUF3QnZFO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUF2QlYsV0FBVztRQUNKLGtCQUFhLEdBQUcsSUFBSSxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBTTVDLFVBQUssR0FBVyxPQUFPLENBQUM7UUFHeEIsVUFBSyxHQUFZLEtBQUssQ0FBQztRQUt2QixhQUFRLEdBQVksS0FBSyxDQUFDO1FBSzFCLGFBQVEsR0FBWSxLQUFLLENBQUM7SUFJakMsQ0FBQztJQUVNLE1BQU07UUFDWCxPQUFPLElBQUksQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OzsyQ0FtRTJCLElBQUksQ0FBQyxjQUFjOytCQUMvQixJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLEVBQUU7VUFDakQsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBLGlDQUFpQyxDQUFBLENBQUMsQ0FBQyxJQUFJLENBQUEsRUFBRTs7NkJBRXZDLElBQUksQ0FBQyxLQUFLOztLQUVsQyxDQUFDO0lBQ0osQ0FBQztJQUVNLEtBQUssQ0FBQyxjQUFjO1FBQ3pCLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxXQUFXLENBQUMsVUFBVSxFQUFFO1lBQzdDLE1BQU0sRUFBRSxJQUFJLENBQUMsS0FBSztZQUNsQixPQUFPLEVBQUUsSUFBSTtTQUNkLENBQUMsQ0FBQyxDQUFDO1FBQ0osSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDaEMsQ0FBQzs7QUExR007SUFETixRQUFRLEVBQUU7OzJDQUNRO0FBR1o7SUFETixRQUFRLEVBQUU7OzZDQUNvQjtBQUd4QjtJQUROLFFBQVEsRUFBRTs7NkNBQ21CO0FBS3ZCO0lBSE4sUUFBUSxDQUFDO1FBQ1IsSUFBSSxFQUFFLE9BQU87S0FDZCxDQUFDOztnREFDK0I7QUFLMUI7SUFITixRQUFRLENBQUM7UUFDUixJQUFJLEVBQUUsT0FBTztLQUNkLENBQUM7O2dEQUMrQjtBQXZCdEIsY0FBYztJQUQxQixhQUFhLENBQUMsa0JBQWtCLENBQUM7O0dBQ3JCLGNBQWMsQ0FrSDFCIn0=

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

@@ -0,0 +1,26 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+declare global {
+    interface HTMLElementTagNameMap {
+        'dees-input-text': DeesInputText;
+    }
+}
+export declare class DeesInputText extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    changeSubject: domtools.rxjs.Subject<DeesInputText>;
+    valueChangeSubject: domtools.rxjs.Subject<string>;
+    label: string;
+    key: string;
+    value: string;
+    required: boolean;
+    disabled: boolean;
+    isPasswordBool: boolean;
+    showPasswordBool: boolean;
+    render(): TemplateResult;
+    updateValue(eventArg: Event): Promise<void>;
+    freeze(): Promise<void>;
+    unfreeze(): Promise<void>;
+    togglePasswordView(): Promise<void>;
+    focus(): Promise<void>;
+    blur(): Promise<void>;
+}

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

@@ -0,0 +1,183 @@
+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, cssManager, } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+export let DeesInputText = class DeesInputText extends DeesElement {
+    constructor() {
+        super(...arguments);
+        // INSTANCE
+        this.changeSubject = new domtools.rxjs.Subject();
+        this.valueChangeSubject = new domtools.rxjs.Subject();
+        this.value = '';
+        this.required = false;
+        this.disabled = false;
+        this.isPasswordBool = false;
+        this.showPasswordBool = false;
+    }
+    static { this.demo = () => html `
+    <dees-input-text .label=${'this is a label'} .value=${'test'}></dees-input-text>
+    <dees-input-text .isPasswordBool=${true}></dees-input-text>
+  `; }
+    render() {
+        return html `
+      <style>
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          position: relative;
+          display: grid;
+          margin: 10px 0px;
+          margin-bottom: 24px;
+        }
+
+        .maincontainer {
+          color: ${this.goBright ? '#333' : '#ccc'};
+        }
+
+        .label {
+          font-size: 14px;
+          margin-bottom: 5px;
+        }
+
+        input {
+          margin-top: 5px;
+          background: ${this.goBright ? '#fafafa' : '#222'};
+          border-top: ${this.goBright ? '1px solid #CCC' : '1px solid #444'};
+          border-bottom: ${this.goBright ? '1px solid #CCC' : '1px solid #333'};
+          border-right: ${this.goBright ? '1px solid #CCC' : 'none'};
+          border-left: ${this.goBright ? '1px solid #CCC' : 'none'};
+          padding-left:10px;
+          padding-right: 10px;
+          border-radius: 2px;
+          width: 100%;
+          line-height: 48px;
+          transition: all 0.2s;
+          outline: none;
+          font-size: 16px;
+          font-family: ${this.isPasswordBool ? 'monospace' : 'Inter'};
+          letter-spacing: ${this.isPasswordBool ? '1px' : 'normal'};
+          color: ${this.goBright ? '#333' : '#ccc'};
+        }
+
+        input:disabled {
+          background: ${cssManager.bdTheme('#ffffff00', '#11111100')};
+          border: 1px dashed ${cssManager.bdTheme('#666666', '#666666')};
+          color: #9b9b9e;
+          cursor: default;
+        }
+
+        input:focus {
+          outline: none;
+          border-bottom: 1px solid #e4002b;
+        }
+
+        .showPassword {
+          position: absolute;
+          bottom: 8px;
+          right: 10px;
+          border: 1px dashed #444;
+          border-radius: 7px;
+          padding: 8px 0px;
+          width: 40px;
+        }
+
+        .showPassword:hover {
+          cursor: pointer;
+          background: #333;
+        }
+      </style>
+      <div class="maincontainer">
+        ${this.label ? html `<div class="label">${this.label}</div>` : html ``}
+        <input type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
+        ${this.isPasswordBool ? html `
+          <div class="showPassword" @click=${this.togglePasswordView}>
+            <dees-icon .iconFA=${this.showPasswordBool ? 'eye' : 'eyeSlash'}></dees-icon>
+          </div>
+        ` : html ``}
+      </div>
+    `;
+    }
+    async updateValue(eventArg) {
+        const target = eventArg.target;
+        this.value = target.value;
+        this.changeSubject.next(this);
+        this.valueChangeSubject.next(this.value);
+    }
+    async freeze() {
+        this.disabled = true;
+    }
+    async unfreeze() {
+        this.disabled = false;
+    }
+    async togglePasswordView() {
+        const domtools = await this.domtoolsPromise;
+        this.showPasswordBool = !this.showPasswordBool;
+        console.log(`this.showPasswordBool is: ${this.showPasswordBool}`);
+    }
+    async focus() {
+        const textInput = this.shadowRoot.querySelector('input');
+        textInput.focus();
+    }
+    async blur() {
+        const textInput = this.shadowRoot.querySelector('input');
+        textInput.blur();
+    }
+};
+__decorate([
+    property({
+        type: String
+    }),
+    __metadata("design:type", String)
+], DeesInputText.prototype, "label", void 0);
+__decorate([
+    property({
+        type: String
+    }),
+    __metadata("design:type", String)
+], DeesInputText.prototype, "key", void 0);
+__decorate([
+    property({
+        type: String,
+        reflect: true,
+    }),
+    __metadata("design:type", String)
+], DeesInputText.prototype, "value", void 0);
+__decorate([
+    property({
+        type: Boolean
+    }),
+    __metadata("design:type", Boolean)
+], DeesInputText.prototype, "required", void 0);
+__decorate([
+    property({
+        type: Boolean
+    }),
+    __metadata("design:type", Boolean)
+], DeesInputText.prototype, "disabled", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+    }),
+    __metadata("design:type", Object)
+], DeesInputText.prototype, "isPasswordBool", void 0);
+__decorate([
+    property({
+        type: Boolean,
+        reflect: true,
+    }),
+    __metadata("design:type", Object)
+], DeesInputText.prototype, "showPasswordBool", void 0);
+DeesInputText = __decorate([
+    customElement('dees-input-text')
+], DeesInputText);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC10ZXh0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2RlZXMtaW5wdXQtdGV4dC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUMsYUFBYSxFQUFFLFdBQVcsRUFBdUIsUUFBUSxFQUFFLElBQUksRUFBRSxVQUFVLEdBQWtCLE1BQU0sNkJBQTZCLENBQUM7QUFDekksT0FBTyxLQUFLLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQztBQVNsRCxXQUFNLGFBQWEsR0FBbkIsTUFBTSxhQUFjLFNBQVEsV0FBVztJQUF2Qzs7UUFNTCxXQUFXO1FBQ0osa0JBQWEsR0FBRyxJQUFJLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFpQixDQUFDO1FBQzNELHVCQUFrQixHQUFHLElBQUksUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQVUsQ0FBQztRQWdCekQsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUtuQixhQUFRLEdBQVksS0FBSyxDQUFDO1FBSzFCLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFNMUIsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFNdkIscUJBQWdCLEdBQUcsS0FBSyxDQUFDO0lBa0hsQyxDQUFDO2FBL0plLFNBQUksR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7OEJBQ0gsaUJBQWlCLFdBQVcsTUFBTTt1Q0FDekIsSUFBSTtHQUN4QyxBQUhpQixDQUdoQjtJQTRDSyxNQUFNO1FBQ1gsT0FBTyxJQUFJLENBQUM7Ozs7Ozs7Ozs7Ozs7O21CQWNHLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsTUFBTTs7Ozs7Ozs7Ozt3QkFVMUIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxNQUFNO3dCQUNsQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxnQkFBZ0Is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

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

@@ -0,0 +1,27 @@
+import * as plugins from './plugins.js';
+import { type CSSResult, DeesElement } from '@design.estate/dees-element';
+export declare class DeesMobilenavigation extends DeesElement {
+    static demo: () => import("@design.estate/dees-element").TemplateResult<1>;
+    private static singletonRef;
+    static createAndInit(menuItemsArg: plugins.tsclass.website.IMenuItem[]): Promise<DeesMobilenavigation>;
+    heading: string;
+    menuItems: plugins.tsclass.website.IMenuItem[];
+    readyDeferred: plugins.smartpromise.Deferred<any>;
+    constructor();
+    /**
+     * inits the mobile navigation
+     */
+    init(): Promise<void>;
+    static styles: CSSResult[];
+    render(): import("@design.estate/dees-element").TemplateResult<1>;
+    private windowLayer;
+    /**
+     * inits the show
+     */
+    show(): Promise<void>;
+    /**
+     * inits the hide function
+     */
+    hide(): Promise<void>;
+    disconnectedCallback(): Promise<void>;
+}

package/dist_ts_web/elements/dees-mobilenavigation.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);
+};
+var DeesMobilenavigation_1;
+import * as plugins from './plugins.js';
+import { cssManager, css, customElement, DeesElement, domtools, html, property, } from '@design.estate/dees-element';
+import { DeesWindowLayer } from './dees-windowlayer.js';
+export let DeesMobilenavigation = class DeesMobilenavigation extends DeesElement {
+    static { DeesMobilenavigation_1 = this; }
+    // STATIC
+    static { this.demo = () => html `
+    <dees-mobilenavigation
+      .menuItems="${[
+        {
+            name: 'hello1',
+            action: async () => { },
+        },
+        {
+            name: 'hello2',
+            action: async () => { },
+        },
+        {
+            name: 'hello3',
+            action: async () => { },
+        },
+    ]}"
+    ></dees-mobilenavigation>
+  `; }
+    static async createAndInit(menuItemsArg) {
+        if (!this.singletonRef) {
+            this.singletonRef = new DeesMobilenavigation_1();
+            document.body.append(this.singletonRef);
+            await this.singletonRef.init();
+        }
+        this.singletonRef.menuItems = menuItemsArg;
+        await this.singletonRef.readyDeferred.promise;
+        this.singletonRef.show();
+        return this.singletonRef;
+    }
+    constructor() {
+        super();
+        // INSTANCE
+        this.heading = `MENU`;
+        this.menuItems = [];
+        this.readyDeferred = domtools.plugins.smartpromise.defer();
+        /* this.init().then(() => {
+          this.show();
+        }); */
+    }
+    /**
+     * inits the mobile navigation
+     */
+    async init() {
+        await this.updateComplete;
+        this.readyDeferred.resolve();
+    }
+    static { this.styles = [
+        cssManager.defaultStyles,
+        css `
+      :host {
+      }
+
+      .main {
+        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+        will-change: transform;
+        position: fixed;
+        height: 100vh;
+        min-width: 280px;
+        transform: translateX(200px);
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        z-index: 250;
+        opacity: 0;
+        padding: 16px 32px;
+        right: 0px;
+        top: 0px;
+        bottom: 0px;
+        background: ${cssManager.bdTheme('#eeeeeb', '#000')};;
+        border-left: 1px dashed #444;
+        pointer-events: none;
+      }
+
+      .main.show {
+        pointer-events: all;
+        transform: translateX(0px);
+        opacity: 1;
+      }
+
+      .menuItem {
+        text-align: left;
+        padding: 8px;
+        margin-left: -8px;
+        margin-right: -8px;
+        cursor: pointer;
+        border-radius: 3px;
+      }
+      .menuItem:hover {
+        background: ${cssManager.bdTheme('#CCC', '#333')};;
+      }
+
+      .heading {
+        text-align: left;
+        font-size: 24px;
+        padding: 8px 0px;
+        font-family: 'Mona Sans', 'Inter', sans-serif;
+        font-weight: 300;
+        border-bottom: 1px dashed #444;
+        margin-top: 16px;
+        margin-bottom: 16px;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="main">
+        <div class="heading">${this.heading}</div>
+        ${this.menuItems.map((menuItem) => {
+            return html `
+            <div
+              class="menuItem"
+              @click="${() => {
+                this.hide();
+                menuItem.action();
+            }}"
+            >
+              ${menuItem.name}
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+    /**
+     * inits the show
+     */
+    async show() {
+        const domtools = await this.domtoolsPromise;
+        const main = this.shadowRoot.querySelector('.main');
+        if (!this.windowLayer) {
+            this.windowLayer = new DeesWindowLayer();
+            this.windowLayer.addEventListener('click', () => {
+                this.hide();
+            });
+        }
+        document.body.append(this.windowLayer);
+        await domtools.convenience.smartdelay.delayFor(0);
+        this.windowLayer.show();
+        await domtools.convenience.smartdelay.delayFor(0);
+        main.classList.add('show');
+    }
+    /**
+     * inits the hide function
+     */
+    async hide() {
+        const domtools = await this.domtoolsPromise;
+        const main = this.shadowRoot.querySelector('.main');
+        main.classList.remove('show');
+        this.windowLayer.hide();
+    }
+    async disconnectedCallback() {
+        document.body.removeChild(this.windowLayer);
+    }
+};
+__decorate([
+    property({
+        type: Array,
+    }),
+    __metadata("design:type", String)
+], DeesMobilenavigation.prototype, "heading", void 0);
+__decorate([
+    property({
+        type: Array,
+    }),
+    __metadata("design:type", Array)
+], DeesMobilenavigation.prototype, "menuItems", void 0);
+DeesMobilenavigation = DeesMobilenavigation_1 = __decorate([
+    customElement('dees-mobilenavigation'),
+    __metadata("design:paramtypes", [])
+], DeesMobilenavigation);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1tb2JpbGVuYXZpZ2F0aW9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2RlZXMtbW9iaWxlbmF2aWdhdGlvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE9BQU8sTUFBTSxjQUFjLENBQUM7QUFDeEMsT0FBTyxFQUNMLFVBQVUsRUFDVixHQUFHLEVBRUgsYUFBYSxFQUNiLFdBQVcsRUFDWCxRQUFRLEVBQ1IsSUFBSSxFQUNKLFFBQVEsR0FDVCxNQUFNLDZCQUE2QixDQUFDO0FBQ3JDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUdqRCxXQUFNLG9CQUFvQixHQUExQixNQUFNLG9CQUFxQixTQUFRLFdBQVc7O0lBQ25ELFNBQVM7YUFDSyxTQUFJLEdBQUcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFBOztvQkFFYjtRQUNaO1lBQ0UsSUFBSSxFQUFFLFFBQVE7WUFDZCxNQUFNLEVBQUUsS0FBSyxJQUFJLEVBQUUsR0FBRSxDQUFDO1NBQ3ZCO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsUUFBUTtZQUNkLE1BQU0sRUFBRSxLQUFLLElBQUksRUFBRSxHQUFFLENBQUM7U0FDdkI7UUFDRDtZQUNFLElBQUksRUFBRSxRQUFRO1lBQ2QsTUFBTSxFQUFFLEtBQUssSUFBSSxFQUFFLEdBQUUsQ0FBQztTQUN2QjtLQUNGOztHQUVKLEFBakJpQixDQWlCaEI7SUFHSyxNQUFNLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxZQUFpRDtRQUNqRixJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksRUFBRTtZQUN0QixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksc0JBQW9CLEVBQUUsQ0FBQztZQUMvQyxRQUFRLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7WUFDeEMsTUFBTSxJQUFJLENBQUMsWUFBWSxDQUFDLElB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

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

@@ -0,0 +1,17 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import type pdfjsTypes from 'pdfjs-dist';
+declare global {
+    interface HTMLElementTagNameMap {
+        'dees-pdf': DeesPdf;
+    }
+}
+export declare class DeesPdf extends DeesElement {
+    static demo: () => TemplateResult<1>;
+    pdfUrl: string;
+    constructor();
+    render(): TemplateResult;
+    static pdfJsReady: Promise<any>;
+    static pdfjsLib: typeof pdfjsTypes;
+    connectedCallback(): Promise<void>;
+    displayContent(): Promise<void>;
+}