var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
    var _, done = false;
    for (var i = decorators.length - 1; i >= 0; i--) {
        var context = {};
        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
        if (kind === "accessor") {
            if (result === void 0) continue;
            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
            if (_ = accept(result.get)) descriptor.get = _;
            if (_ = accept(result.set)) descriptor.set = _;
            if (_ = accept(result.init)) initializers.unshift(_);
        }
        else if (_ = accept(result)) {
            if (kind === "field") initializers.unshift(_);
            else descriptor[key] = _;
        }
    }
    if (target) Object.defineProperty(target, contextIn.name, descriptor);
    done = true;
};
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
    var useValue = arguments.length > 2;
    for (var i = 0; i < initializers.length; i++) {
        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
    }
    return useValue ? value : void 0;
};
import { DeesElement, property, html, customElement, css, cssManager } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
let WccFrame = (() => {
    let _classDecorators = [customElement('wcc-frame')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = DeesElement;
    let _viewport_decorators;
    let _viewport_initializers = [];
    let _viewport_extraInitializers = [];
    let _advancedEditorOpen_decorators;
    let _advancedEditorOpen_initializers = [];
    let _advancedEditorOpen_extraInitializers = [];
    let _isNative_decorators;
    let _isNative_initializers = [];
    let _isNative_extraInitializers = [];
    let _sidebarWidth_decorators;
    let _sidebarWidth_initializers = [];
    let _sidebarWidth_extraInitializers = [];
    let _isResizing_decorators;
    let _isResizing_initializers = [];
    let _isResizing_extraInitializers = [];
    var WccFrame = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _viewport_decorators = [property()];
            _advancedEditorOpen_decorators = [property({ type: Boolean })];
            _isNative_decorators = [property({ type: Boolean })];
            _sidebarWidth_decorators = [property({ type: Number })];
            _isResizing_decorators = [property({ type: Boolean })];
            __esDecorate(this, null, _viewport_decorators, { kind: "accessor", name: "viewport", static: false, private: false, access: { has: obj => "viewport" in obj, get: obj => obj.viewport, set: (obj, value) => { obj.viewport = value; } }, metadata: _metadata }, _viewport_initializers, _viewport_extraInitializers);
            __esDecorate(this, null, _advancedEditorOpen_decorators, { kind: "accessor", name: "advancedEditorOpen", static: false, private: false, access: { has: obj => "advancedEditorOpen" in obj, get: obj => obj.advancedEditorOpen, set: (obj, value) => { obj.advancedEditorOpen = value; } }, metadata: _metadata }, _advancedEditorOpen_initializers, _advancedEditorOpen_extraInitializers);
            __esDecorate(this, null, _isNative_decorators, { kind: "accessor", name: "isNative", static: false, private: false, access: { has: obj => "isNative" in obj, get: obj => obj.isNative, set: (obj, value) => { obj.isNative = value; } }, metadata: _metadata }, _isNative_initializers, _isNative_extraInitializers);
            __esDecorate(this, null, _sidebarWidth_decorators, { kind: "accessor", name: "sidebarWidth", static: false, private: false, access: { has: obj => "sidebarWidth" in obj, get: obj => obj.sidebarWidth, set: (obj, value) => { obj.sidebarWidth = value; } }, metadata: _metadata }, _sidebarWidth_initializers, _sidebarWidth_extraInitializers);
            __esDecorate(this, null, _isResizing_decorators, { kind: "accessor", name: "isResizing", static: false, private: false, access: { has: obj => "isResizing" in obj, get: obj => obj.isResizing, set: (obj, value) => { obj.isResizing = value; } }, metadata: _metadata }, _isResizing_initializers, _isResizing_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            WccFrame = _classThis = _classDescriptor.value;
            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        #viewport_accessor_storage = __runInitializers(this, _viewport_initializers, void 0);
        get viewport() { return this.#viewport_accessor_storage; }
        set viewport(value) { this.#viewport_accessor_storage = value; }
        #advancedEditorOpen_accessor_storage = (__runInitializers(this, _viewport_extraInitializers), __runInitializers(this, _advancedEditorOpen_initializers, false));
        get advancedEditorOpen() { return this.#advancedEditorOpen_accessor_storage; }
        set advancedEditorOpen(value) { this.#advancedEditorOpen_accessor_storage = value; }
        #isNative_accessor_storage = (__runInitializers(this, _advancedEditorOpen_extraInitializers), __runInitializers(this, _isNative_initializers, false));
        get isNative() { return this.#isNative_accessor_storage; }
        set isNative(value) { this.#isNative_accessor_storage = value; }
        #sidebarWidth_accessor_storage = (__runInitializers(this, _isNative_extraInitializers), __runInitializers(this, _sidebarWidth_initializers, 200));
        get sidebarWidth() { return this.#sidebarWidth_accessor_storage; }
        set sidebarWidth(value) { this.#sidebarWidth_accessor_storage = value; }
        #isResizing_accessor_storage = (__runInitializers(this, _sidebarWidth_extraInitializers), __runInitializers(this, _isResizing_initializers, false));
        get isResizing() { return this.#isResizing_accessor_storage; }
        set isResizing(value) { this.#isResizing_accessor_storage = value; }
        static styles = [
            css `
      :host {
        border: 10px solid rgba(255, 174, 175, 1);
        position: absolute;
        background: ${cssManager.bdTheme('#333', '#000')};
        right: 0px;
        top: 0px;
        overflow-y: auto;
        overflow-x: auto;
        overscroll-behavior: contain;
      }

      .viewport {
        container-type: inline-size;
        container-name: wccToolsViewport;
        position: relative;
        min-height: 100%;
      }
    `,
        ];
        render() {
            return html `
      <style>
        :host {
          ${this.isNative ? `
            border: 0px solid rgba(255, 174, 175, 0) !important;
            left: 0px !important;
            right: 0px !important;
            top: 0px !important;
            bottom: 0px !important;
          ` : `
            bottom: ${this.advancedEditorOpen ? '400px' : '100px'};
            border: 10px solid rgba(255, 174, 175, 1);
            left: ${this.sidebarWidth}px;
          `}
          transition: ${this.isResizing ? 'none' : 'all 0.3s ease'};
          ${this.isNative ? 'padding: 0px;' : (() => {
                switch (this.viewport) {
                    case 'desktop':
                        return `
                  padding: 0px 0px;
                `;
                    case 'tablet':
                        return `
                  padding: 0px ${(document.body.clientWidth - this.sidebarWidth - domtools.breakpoints.tablet) / 2}px;
                `;
                    case 'phablet':
                        return `
                  padding: 0px ${(document.body.clientWidth - this.sidebarWidth - domtools.breakpoints.phablet) / 2}px;
                `;
                    case 'phone':
                        return `
                  padding: 0px ${(document.body.clientWidth - this.sidebarWidth - domtools.breakpoints.phone) / 2}px;
                `;
                }
            })()}
        }

        .viewport {
          ${!this.isNative && this.viewport !== 'desktop'
                ? html ` border-right: 1px dotted #444; border-left: 1px dotted #444; `
                : html ``}
          background:
          ${this.goBright ? `
              radial-gradient(#CCCCCC 3px, transparent 4px),
              radial-gradient(#CCCCCC 3px, transparent 4px),
              linear-gradient(#eeeeee 4px, transparent 0),
              linear-gradient(45deg, transparent 74px, transparent 75px, #CCCCCC 75px, #CCCCCC 76px, transparent 77px, transparent 109px),
              linear-gradient(-45deg, transparent 75px, transparent 76px, #CCCCCC 76px, #CCCCCC 77px, transparent 78px, transparent 109px),
              #eeeeee;
              background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
              background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
            ` : `
              radial-gradient(#444444 3px, transparent 4px),
              radial-gradient(#444444 3px, transparent 4px),
              linear-gradient(#222222 4px, transparent 0),
              linear-gradient(45deg, transparent 74px, transparent 75px, #444444 75px, #444444 76px, transparent 77px, transparent 109px),
              linear-gradient(-45deg, transparent 75px, transparent 76px, #444444 76px, #444444 77px, transparent 78px, transparent 109px),
              #222222;
              background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
              background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
            `}
        }
      </style>
      <div class="viewport">
        
      </div>
    `;
        }
        async getDisplayedInstance() {
            await this.updateComplete;
            const slottedContent = this.children;
            console.log(slottedContent);
        }
        async getViewportElement() {
            return this.shadowRoot.querySelector('.viewport');
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _isResizing_extraInitializers);
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return WccFrame = _classThis;
})();
export { WccFrame };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLWZyYW1lLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL3djYy1mcmFtZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLFdBQVcsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLGFBQWEsRUFBdUIsR0FBRyxFQUFFLFVBQVUsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRS9ILE9BQU8sS0FBSyxRQUFRLE1BQU0sOEJBQThCLENBQUM7SUFTNUMsUUFBUTs0QkFEcEIsYUFBYSxDQUFDLFdBQVcsQ0FBQzs7OztzQkFDRyxXQUFXOzs7Ozs7Ozs7Ozs7Ozs7O3dCQUFuQixTQUFRLFdBQVc7Ozs7b0NBQ3RDLFFBQVEsRUFBRTs4Q0FHVixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7b0NBRzNCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsQ0FBQzt3Q0FHM0IsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO3NDQUcxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFLENBQUM7WUFYNUIsNktBQVMsUUFBUSw2QkFBUixRQUFRLDJGQUFTO1lBRzFCLDJNQUFTLGtCQUFrQiw2QkFBbEIsa0JBQWtCLCtHQUFrQjtZQUc3Qyw2S0FBUyxRQUFRLDZCQUFSLFFBQVEsMkZBQWtCO1lBR25DLHlMQUFTLFlBQVksNkJBQVosWUFBWSxtR0FBZTtZQUdwQyxtTEFBUyxVQUFVLDZCQUFWLFVBQVUsK0ZBQWtCO1lBZHZDLDZLQThIQzs7OztRQTVIQyxxRkFBMEI7UUFBMUIsSUFBUyxRQUFRLDhDQUFTO1FBQTFCLElBQVMsUUFBUSxvREFBUztRQUcxQix3SkFBdUMsS0FBSyxHQUFDO1FBQTdDLElBQVMsa0JBQWtCLHdEQUFrQjtRQUE3QyxJQUFTLGtCQUFrQiw4REFB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