'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-75aef097.js');
const assetsManager = require('./assets-manager-089e91b1.js');
require('./mer-animated-dots-78490ca4.js');
require('lit');
require('lit/directives/when.js');
require('lit/directives/if-defined.js');

const testCss = "/* - - - - - - - - - - - - - - - - -\nNew classes for Chameleon + Mercury\n- - - - - - - - - - - - - - - - - */\n:host {\n  display: grid;\n  block-size: 100%;\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.gxi-hidden {\n  display: none !important;\n}\n\n.align-center {\n  display: flex;\n  align-items: center;\n}\n\n.align-end {\n  display: flex;\n  align-items: end;\n}\n\n.overflow-auto {\n  overflow: auto;\n}\n\n/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/\n:host(.gx-ide-component) {\n  height: 100% !important;\n  display: flex !important;\n  flex-direction: column !important;\n}\n\n/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */\n.gx-ide-main-wrapper {\n  color: var(--gx-ide-component-text-color);\n  font-weight: var(--font-style-regular);\n  font-size: var(--font-size-body-m);\n  font-family: var(--font-family-body);\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  box-sizing: border-box;\n}\n\n/* - - - - - - - - - - - - - - - - - -\nNew : For Mercury\n- - - - - - - - - - - - - - - - - - */\n.buttons-container {\n  display: flex;\n  gap: var(--spacing-gap-m);\n}\n\n/* - - - - - - - - - - - - - - - - - -\nPill\n- - - - - - - - - - - - - - - - - - */\n.giu-static-pill-icon-and-text, .giu-static-pill {\n  background-color: var(--elevation-background-color, var(--color-accent-surface-elevation-1));\n  padding-inline: var(--spacing-padding-m);\n  color: var(--color-text-neutral-default);\n  font-size: var(--font-size-body-s);\n  line-height: var(--line-height-relaxed);\n  font-weight: var(--font-style-regular);\n  border-radius: 4px;\n  min-block-size: 25px;\n  display: inline-grid;\n  align-items: center;\n  pointer-events: none;\n  inline-size: max-content;\n}\n\n.giu-static-pill-icon-and-text {\n  display: inline-grid;\n  grid-auto-flow: column;\n  grid-auto-columns: max-content;\n  gap: var(--spacing-gap-m);\n}\n\n/* - - - - - - - - - - - - - - - - - -\nTab\n- - - - - - - - - - - - - - - - - - */\n.tab-full-width-buttons::part(tab-list block-start),\n.tab-full-width-buttons::part(tab-list block-end) {\n  grid-auto-columns: 1fr;\n}\n\n.tab-full-width-buttons::part(tab block-start) {\n  justify-content: center;\n}\n\n/* - - - - - - - - - - - - - - - - - -\nTree\n- - - - - - - - - - - - - - - - - - */\n/* Now the tree-view warning icon, looks gray on disabled items. This is a workaround to change the color to the enabled color, until this is resolved on Mercury. The solution might be to add a colorType for warning, error or success, that is static, meanning, it looks alwaws as \"enabled\", even if it is disabled. */\n.tree-view::part(item__header) {\n  --icon__system_warning_warning--disabled: var(\n    --icon__system_warning_warning--enabled\n  );\n}\n\n/* - - - - - - - - - - - - - - - - - -\nTabular Grid\n- - - - - - - - - - - - - - - - - - */\n.tabular-grid {\n  --focus-outline-width: 1px;\n}\n\n:host {\n  display: block;\n}\n\nsection {\n  border-top: 1px solid #ccc;\n  margin-top: 300px;\n  container-name: section;\n  container-type: inline-size;\n}\n\ngxg-combo-box {\n  opacity: 1;\n}\n\n@container section (width < 400px) {\n  gxg-combo-box {\n    opacity: 0.5;\n  }\n}";

const CSS_BUNDLES = [
    "resets/box-sizing",
    // "utils/form",
    // "utils/layout",
    // "utils/typography",
    "components/button",
    // "components/checkbox",
    "components/list-box",
    "components/icon"
];
const VERSION_ICON = assetsManager.getIconPath({
    category: "system",
    name: "version",
    colorType: "on-surface"
});
const GxIdeTest = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.name = undefined;
        this.filterOn = true;
    }
    // 4.PUBLIC PROPERTY API | WATCH'S //
    // 5.EVENTS (EMIT) //
    componentWillLoad() { }
    // 6.COMPONENT LIFECYCLE METHODS //
    // 7.LISTENERS //
    // 8.PUBLIC METHODS API //
    // 9.LOCAL METHODS //
    // 10.RENDER() FUNCTION //
    render() {
        return (index.h(index.Host, null, index.h("ch-theme", { model: CSS_BUNDLES }), index.h("span", { class: "giu-static-pill-icon-and-text giu-static-pill-icon-and-text--version" }, index.h("ch-image", { class: "icon-m", type: "mask", src: VERSION_ICON }), "V4.3")));
    }
};
GxIdeTest.style = testCss;

exports.gx_ide_test = GxIdeTest;

//# sourceMappingURL=gx-ide-test.cjs.entry.js.map