import { __decorate, __metadata } from "tslib";
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, Injector, Inject, Optional } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { LayoutComponentBase, LayoutComponentRendererSADirective } from '@anglr/dynamic/layout';
import { DescendantsGetter, LayoutEditorMetadata } from '@anglr/dynamic/layout-editor';
import { HostDisplayBlockStyle, LOGGER } from '@anglr/common';
import { generateId } from '@jscrpt/common';
import prefixer from 'postcss-prefix-selector';
import postcss from 'postcss';
import { StyleBlockLayoutMetadataLoader } from './styleBlock.metadata';
import * as i0 from "@angular/core";
//TODO: optimize, debug, dual call of options set
/**
 * Component used for displaying style block
 */
let StyleBlockSAComponent = class StyleBlockSAComponent extends LayoutComponentBase {
    //######################### constructor #########################
    constructor(changeDetector, element, injector, document, logger) {
        super(changeDetector, element, injector, logger);
        this.document = document;
        //######################### protected properties #########################
        /**
         * Unique ID for this instance of style block
         */
        this.id = generateId(10);
    }
    //######################### protected methods - overrides #########################
    /**
     * @inheritdoc
     */
    onInit() {
        this.cssProcessor = postcss()
            .use((root) => {
            prefixer({
                prefix: `style-block#${this.id}`,
            })(root);
            //TODO check postcss and remove any
        });
    }
    /**
     * @inheritdoc
     */
    onOptionsSet() {
        var _a;
        if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.style) && this.cssProcessor) {
            const css = this.cssProcessor.process(this.options.style).css;
            this.style = this.document.createElement('style');
            this.style.innerText = css;
            this.document.head.append(this.style);
        }
    }
    /**
     * @inheritdoc
     */
    onDestroy() {
        var _a;
        (_a = this.style) === null || _a === void 0 ? void 0 : _a.remove();
        this.style = null;
    }
};
StyleBlockSAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StyleBlockSAComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: DOCUMENT }, { token: LOGGER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
StyleBlockSAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.4", type: StyleBlockSAComponent, isStandalone: true, selector: "style-block", host: { properties: { "attr.id": "id" } }, usesInheritance: true, ngImport: i0, template: "<ng-template [layoutComponentRenderer]=\"options?.content\"></ng-template>", styles: [":host{display: block;}"], dependencies: [{ kind: "directive", type: LayoutComponentRendererSADirective, selector: "[layoutComponentRenderer]", inputs: ["layoutComponentRenderer", "layoutComponentRendererInjector", "layoutComponentRendererDisableTransformer"], outputs: ["layoutComponentRendererComponentChange", "componentElementChange"], exportAs: ["layoutComponentRenderer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
StyleBlockSAComponent = __decorate([
    DescendantsGetter(options => (options === null || options === void 0 ? void 0 : options.content) ? [options === null || options === void 0 ? void 0 : options.content] : []),
    LayoutEditorMetadata(StyleBlockLayoutMetadataLoader),
    __metadata("design:paramtypes", [ChangeDetectorRef,
        ElementRef,
        Injector,
        Document, Object])
], StyleBlockSAComponent);
export { StyleBlockSAComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: StyleBlockSAComponent, decorators: [{
            type: Component,
            args: [{ selector: 'style-block', host: {
                        '[attr.id]': 'id'
                    }, standalone: true, imports: [
                        LayoutComponentRendererSADirective,
                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template [layoutComponentRenderer]=\"options?.content\"></ng-template>", styles: [":host{display: block;}"] }]
        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Injector }, { type: Document, decorators: [{
                    type: Inject,
                    args: [DOCUMENT]
                }] }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [LOGGER]
                }, {
                    type: Optional
                }] }] });
//# sourceMappingURL=styleBlock.component.js.map