import { postcss } from "@stencil/postcss";
import { sass } from "@stencil/sass";
import autoprefixer from "autoprefixer";
import path from "path";
import { vueOutputTarget } from "@stencil/vue-output-target";
import { angularOutputTarget } from "@stencil/angular-output-target";
export const config = {
    namespace: "core",
    tsconfig: "tsconfig.lib.json",
    globalStyle: "src/sass/global.scss",
    taskQueue: "async",
    sourceMap: true,
    invisiblePrehydration: false,
    extras: {
        experimentalSlotFixes: true,
        enableImportInjection: true,
        cloneNodeFix: true,
    },
    plugins: [
        sass({
            injectGlobalPaths: [path.resolve(__dirname, `src/sass/core.scss`).replace(/\\/g, "/")],
        }),
        postcss({
            plugins: [autoprefixer()],
        }),
    ],
    outputTargets: [
        { type: "dist", esmLoaderPath: "../loader" },
        {
            type: "docs-readme",
            strict: true,
        },
        {
            type: "www",
            copy: [
                { src: "../../fonts/lib", dest: "build/assets/fonts" },
                { src: "../../icons/lib", dest: "build/assets/icons" },
                { src: "../../styles/lib", dest: "build/assets/styles" },
                { src: "../../core/src/assets", dest: "build/assets" },
            ],
            serviceWorker: null,
            baseUrl: '/playground'
        },
        {
            type: "dist-hydrate-script",
            dir: "dist/hydrate",
        },
        {
            type: "dist-custom-elements",
            includeGlobalScripts: false,
            externalRuntime: false,
            minify: true,
            customElementsExportBehavior: 'auto-define-custom-elements'
        },
        vueOutputTarget({
            componentCorePackage: "@gov-design-system-ce/components",
            proxiesFile: "../../../packages/core-vue/lib/index.ts",
            includeImportCustomElements: false,
            includePolyfills: false,
            componentModels: [
                {
                    elements: ['gov-form-autocomplete', 'gov-form-input', 'gov-form-range'],
                    event: 'gov-input',
                    targetAttr: 'value',
                },
                {
                    elements: ['gov-form-autocomplete'],
                    event: 'gov-select',
                    targetAttr: 'value',
                },
                {
                    elements: ['gov-form-checkbox', 'gov-form-switch'],
                    event: 'gov-change',
                    targetAttr: 'checked',
                },
                {
                    elements: ['gov-form-multiselect', 'gov-form-select', 'gov-form-radio', 'gov-form-radio-group', 'gov-form-checkbox-group'],
                    event: 'gov-change',
                    targetAttr: 'value',
                },
            ],
        }),
        angularOutputTarget({
            componentCorePackage: "@gov-design-system-ce/components",
            outputType: 'component',
            directivesProxyFile: '../../../packages/core-angular/src/directives/proxies.ts',
            directivesArrayFile: '../../../packages/core-angular/src/directives/proxies-list.ts',
        }),
    ],
};
//# sourceMappingURL=stencil.config.js.map
