import { proxyCustomElement, HTMLElement, getAssetPath, h, Host } from '@stencil/core/internal/client';
import { g as getIconPath } from './mer-animated-dots.js';
import 'lit';
import 'lit/directives/when.js';
import 'lit/directives/if-defined.js';
import { L as Locale } from './locale.js';

const startingTemplateCss = "button.button-secondary{border-color:var(--color-border-neutral-default)}:host{display:grid;block-size:100%;overflow:auto;grid-template-rows:max-content 1fr max-content}.section{display:contents}.main{overflow:auto;display:flex;align-items:center;justify-content:center}";

// This is a starting template. Do not edit this file directly.
// Dupicate it and modify the new file as needed.
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m")
        throw new TypeError("Private method is not writable");
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _GxIdeStartingTemplate_chShortcutsEl, _GxIdeStartingTemplate_shortcutsSrc, _GxIdeStartingTemplate_cancelButtonClickedHandler, _GxIdeStartingTemplate_saveButtonClickedHandler;
const CSS_BUNDLES = [
    // Use only the bundles that are needed for this component.
    "resets/box-sizing",
    "components/edit",
    "components/button",
    "components/icon",
    "utils/layout",
    "utils/form",
    "utils/typography",
    "utils/spacing",
    "chameleon/scrollbar"
];
const SYSTEM_ICON = getIconPath({
    category: "system",
    name: "folder",
    colorType: "on-primary"
});
const GxIdeStartingTemplate$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeStartingTemplate extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        _GxIdeStartingTemplate_chShortcutsEl.set(this, void 0);
        _GxIdeStartingTemplate_shortcutsSrc.set(this, getAssetPath(`./gx-ide-assets/new-kb/shortcuts.json`));
        _GxIdeStartingTemplate_cancelButtonClickedHandler.set(this, () => {
            this.cancelCallback();
        });
        _GxIdeStartingTemplate_saveButtonClickedHandler.set(this, () => {
            this.saveCallback();
        });
        this.myStateVariable = undefined;
        this.firstName = undefined;
        this.cancelCallback = undefined;
        this.saveCallback = undefined;
    }
    firstNameChanged(newValue) {
        console.log("First name changed:", newValue);
    }
    async componentWillLoad() {
        this._componentLocale = await Locale.getComponentStrings(this.el);
    }
    componentDidLoad() {
        // Here you can do any additional setup after the component has been rendered.
    }
    /**
     * Suspends or reactivates the shortcuts
     */
    async suspendShortcuts(suspendShortcuts) {
        if (suspendShortcuts) {
            __classPrivateFieldGet(this, _GxIdeStartingTemplate_chShortcutsEl, "f").suspend = true;
        }
        else {
            __classPrivateFieldGet(this, _GxIdeStartingTemplate_chShortcutsEl, "f").suspend = false;
        }
    }
    render() {
        return (h(Host, { class: "widget spacing-body" }, h("ch-theme", { model: CSS_BUNDLES }), h("ch-shortcuts", { src: __classPrivateFieldGet(this, _GxIdeStartingTemplate_shortcutsSrc, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeStartingTemplate_chShortcutsEl, el, "f")) }), h("section", { class: "section" }, h("header", { class: "header dialog-header dialog-header-with-border" }, h("div", { class: "field field-block" }, h("label", { class: "label", htmlFor: "first-name" }, this._componentLocale.main.firstName), h("ch-edit", { class: "input", id: "first-name", value: this.firstName }))), h("div", { class: "main" }, "The main content here"), h("footer", { class: "footer dialog-footer dialog-footer-with-border" }, h("div", { class: "buttons-spacer" }, h("button", {
            // #cancel
            class: "button-secondary", id: "button-cancel", onClick: __classPrivateFieldGet(this, _GxIdeStartingTemplate_cancelButtonClickedHandler, "f"), part: "button-cancel"
        }, this._componentLocale.footer.btnCancel), h("button", {
            // #create
            class: "button-primary button-icon-and-text", id: "button-create", onClick: __classPrivateFieldGet(this, _GxIdeStartingTemplate_saveButtonClickedHandler, "f"), part: "button-create"
        }, h("ch-image", { class: "icon-m", src: SYSTEM_ICON }), this._componentLocale.footer.btnSave))))));
    }
    static get assetsDirs() { return ["gx-ide-assets/starting-template"]; }
    get el() { return this; }
    static get watchers() { return {
        "firstName": ["firstNameChanged"]
    }; }
    static get style() { return startingTemplateCss; }
}, [1, "gx-ide-starting-template", {
        "firstName": [1, "first-name"],
        "cancelCallback": [16],
        "saveCallback": [16],
        "myStateVariable": [32],
        "suspendShortcuts": [64]
    }, undefined, {
        "firstName": ["firstNameChanged"]
    }]);
_GxIdeStartingTemplate_chShortcutsEl = new WeakMap(), _GxIdeStartingTemplate_shortcutsSrc = new WeakMap(), _GxIdeStartingTemplate_cancelButtonClickedHandler = new WeakMap(), _GxIdeStartingTemplate_saveButtonClickedHandler = new WeakMap();
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["gx-ide-starting-template"];
    components.forEach(tagName => { switch (tagName) {
        case "gx-ide-starting-template":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, GxIdeStartingTemplate$1);
            }
            break;
    } });
}

const GxIdeStartingTemplate = GxIdeStartingTemplate$1;
const defineCustomElement = defineCustomElement$1;

export { GxIdeStartingTemplate, defineCustomElement };

//# sourceMappingURL=gx-ide-starting-template.js.map