import { ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
import { FontInfo } from "igniteui-webcomponents-core";
import { WebComponentRenderer } from "igniteui-webcomponents-core";
import { TypeRegistrar } from "igniteui-webcomponents-core";
import { RegisterElementHelper } from "igniteui-webcomponents-core";
import { DataGridToolbar } from './DataGridToolbar';
import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
import { IgcHTMLElement } from "igniteui-webcomponents-core";
export let IgcDataGridToolbarComponent = /*@__PURE__*/ (() => {
    class IgcDataGridToolbarComponent extends IgcHTMLElement {
        constructor() {
            super();
            this._disconnected = false;
            this._settingAttributes = false;
            this._attached = false;
            this._queuedSetAttributes = [];
            this._updatingFromAttribute = false;
            this.__p = null;
            this._hasUserValues = new Set();
            this._stylingContainer = null;
            this._stylingParent = null;
            this._inStyling = false;
            if (this._styling) {
                NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
            }
            this._renderer = new WebComponentRenderer(this, document, true, null);
            this._implementation = this.createImplementation();
            this._container = this._renderer.createElement("div");
            this._renderer.updateRoot(this._container);
            //this._renderer.rootWrapper.append(this._container);
            //this._container.setStyleProperty("width", "100%");
            //this._container.setStyleProperty("height", "100%");
            var toolbar = this.i;
            this._toolbar = toolbar;
            this._renderer.addSizeWatcher(() => {
                this._toolbar.notifySizeChanged();
            });
        }
        set height(value) {
            this._height = value;
            this.style.height = value;
            this.i.notifySizeChanged();
        }
        get height() {
            return this._height;
        }
        set width(value) {
            this._width = value;
            this.style.width = value;
            this.i.notifySizeChanged();
        }
        get width() {
            return this._width;
        }
        // supports angular themes or custom properties set in CSS
        updateStyle() {
            this._styling(this, this);
        }
        destroy() {
            this._toolbar.destroy();
        }
        createImplementation() {
            return new DataGridToolbar();
        }
        disconnectedCallback() {
            this._disconnected = true;
        }
        connectedCallback() {
            if (this._disconnected) {
                this._disconnected = false;
                return;
            }
            this.classList.add("ig-data-grid-toolbar");
            this.classList.add("igc-data-grid-toolbar");
            var rootWrapper = this._renderer.rootWrapper;
            var rootElement = rootWrapper.getNativeElement();
            this.appendChild(rootElement);
            this._attached = true;
            this.style.display = "block";
            this.style.height = this._height;
            this.style.width = this._width;
            let title = this._renderer.createElement("span");
            this._container.append(title);
            let buttonsContainer = this._renderer.createElement("div");
            this._container.append(buttonsContainer);
            let hideBtnContainer = this._renderer.createElement("div");
            buttonsContainer.append(hideBtnContainer);
            let pinBtnContainer = this._renderer.createElement("div");
            buttonsContainer.append(pinBtnContainer);
            let chooserDialog = this._renderer.createElement("div");
            this._container.append(chooserDialog);
            var columnChooser = this._renderer.createElement("igc-column-chooser");
            chooserDialog.append(columnChooser);
            let pinningDialog = this._renderer.createElement("div");
            this._container.append(pinningDialog);
            let columnPinning = this._renderer.createElement("igc-column-pinning");
            pinningDialog.append(columnPinning);
            this._toolbar.provideContainer(this._renderer, columnChooser.getNativeElement().i, columnPinning.getNativeElement().i);
            this._toolbar.notifySizeChanged();
            this._flushQueuedAttributes();
            // supports themes or custom properties set in CSS 
            this._styling(this, this);
            this.afterContentInit();
        }
        afterContentInit() {
            this.i.notifySizeChanged();
        }
        /**
         * @hidden
         */
        get i() {
            return this._implementation;
        } /**
                                     * @hidden
                                     */
        static _createFromInternal(internal) {
            if (!internal) {
                return null;
            }
            if (!internal.$type) {
                return null;
            }
            let name = internal.$type.name;
            let externalName = "Igc" + name + "Component";
            if (!TypeRegistrar.isRegistered(externalName)) {
                return null;
            }
            return TypeRegistrar.create(externalName);
        }
        _enqueueSetAttribute(attrName, attrValue) {
            this._queuedSetAttributes.push({ attrName: attrName, attrValue: attrValue });
        }
        _flushQueuedAttributes() {
            this._settingAttributes = true;
            for (let i = 0; i < this._queuedSetAttributes.length; i++) {
                this.setAttribute(this._queuedSetAttributes[i].attrName, this._queuedSetAttributes[i].attrValue);
            }
            this._settingAttributes = false;
            this._queuedSetAttributes.length = 0;
        }
        _a(attrName, attrValue) {
            if (this._updatingFromAttribute) {
                return;
            }
            if (attrValue) {
                attrValue = attrValue.toString();
            }
            this._settingAttributes = true;
            attrName = toSpinal(attrName);
            if (this._attached) {
                this.setAttribute(attrName, attrValue);
            }
            else {
                this._enqueueSetAttribute(attrName, attrValue);
            }
            this._settingAttributes = false;
        }
        static get observedAttributes() {
            if (IgcDataGridToolbarComponent._observedAttributesIgcDataGridToolbarComponent == null) {
                let names = getAllPropertyNames(IgcDataGridToolbarComponent);
                for (let i = 0; i < names.length; i++) {
                    names[i] = toSpinal(names[i]);
                }
                IgcDataGridToolbarComponent._observedAttributesIgcDataGridToolbarComponent = names;
            }
            return IgcDataGridToolbarComponent._observedAttributesIgcDataGridToolbarComponent;
        }
        attributeChangedCallback(name, oldValue, newValue) {
            if (this._settingAttributes) {
                return;
            }
            let setName = fromSpinal(name);
            this._updatingFromAttribute = true;
            this[setName] = newValue;
            this._updatingFromAttribute = false;
        }
        static register() {
            if (!IgcDataGridToolbarComponent._isElementRegistered) {
                IgcDataGridToolbarComponent._isElementRegistered = true;
                RegisterElementHelper.registerElement(IgcDataGridToolbarComponent.htmlTagName, IgcDataGridToolbarComponent);
            }
        }
        /**
     * Gets or Sets the property name that contains the values.
    */
        get targetGrid() {
            if (this.i.b == null) {
                return null;
            }
            return this.i.b.externalObject;
        }
        set targetGrid(v) {
            if (v != null && this._stylingContainer && v._styling)
                v._styling(this._stylingContainer, this, this);
            v == null ? this.i.b = null : this.i.b = v.i;
        }
        /**
         * Gets or Sets the property name that contains the values.
        */
        get toolbarTitle() {
            return this.i.ap;
        }
        set toolbarTitle(v) {
            this.i.ap = v;
        }
        /**
         * Gets or Sets the property name that contains the values.
        */
        get toolbarTitleStyle() {
            if (this.i.m == null) {
                return null;
            }
            return this.i.m.fontString;
        }
        set toolbarTitleStyle(v) {
            let fi = new FontInfo();
            fi.fontString = v;
            this.i.m = fi;
            this._a("toolbarTitleStyle", this.i.m != null ? this.i.m.fontString : "");
        }
        /**
         * Gets or Sets the property name that contains the values.
        */
        get toolbarTitleColor() {
            return brushToString(this.i.bd);
        }
        set toolbarTitleColor(v) {
            this.i.bd = stringToBrush(v);
            this._a("toolbarTitleColor", brushToString(this.i.bd));
        }
        /**
         * Gets or Sets the property name that contains the values.
        */
        get backgroundColor() {
            return brushToString(this.i.bb);
        }
        set backgroundColor(v) {
            this.i.bb = stringToBrush(v);
            this._a("backgroundColor", brushToString(this.i.bb));
        }
        /**
         * Gets or Sets the property name that contains the values.
        */
        get dialogBackgroundColor() {
            return brushToString(this.i.bc);
        }
        set dialogBackgroundColor(v) {
            this.i.bc = stringToBrush(v);
            this._a("dialogBackgroundColor", brushToString(this.i.bc));
        }
        /**
         * Gets or Sets the property name that contains the values.
        */
        get columnChooser() {
            return this.i.p;
        }
        set columnChooser(v) {
            this.i.p = ensureBool(v);
            this._a("columnChooser", this.i.p);
        }
        /**
         * Gets or Sets the property name that contains the values.
        */
        get columnChooserText() {
            return this.i.ab;
        }
        set columnChooserText(v) {
            this.i.ab = v;
        }
        /**
         * Gets or Sets the property name that contains the values.
        */
        get columnChooserTitle() {
            return this.i.ad;
        }
        set columnChooserTitle(v) {
            this.i.ad = v;
        }
        /**
         * Gets or Sets the property name that contains the values.
        */
        get columnPinning() {
            return this.i.q;
        }
        set columnPinning(v) {
            this.i.q = ensureBool(v);
            this._a("columnPinning", this.i.q);
        }
        /**
         * Gets or Sets the property name that contains the values.
        */
        get columnPinningText() {
            return this.i.ag;
        }
        set columnPinningText(v) {
            this.i.ag = v;
        }
        /**
         * Gets or Sets the property name that contains the values.
        */
        get columnPinningTitle() {
            return this.i.ai;
        }
        set columnPinningTitle(v) {
            this.i.ai = v;
        }
        /**
         * Gets or Sets the property name that contains the values.
        */
        get density() {
            return this.i.i;
        }
        set density(v) {
            this.i.i = ensureEnum(ControlDisplayDensity_$type, v);
            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.i));
        }
        /**
         * Gets or Sets the property name that contains the values.
        */
        get baseTheme() {
            return this.i.g;
        }
        set baseTheme(v) {
            this.i.g = ensureEnum(BaseControlTheme_$type, v);
            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.g));
        }
        findByName(name) {
            if (this.targetGrid && this.targetGrid.name && this.targetGrid.name == name) {
                return this.targetGrid;
            }
            return null;
        }
        get hasUserValues() {
            return this._hasUserValues;
        }
        __m(propertyName) {
            if (!this._inStyling) {
                this._hasUserValues.add(propertyName);
            }
        }
        _styling(container, component, parent) {
            if (this._inStyling) {
                return;
            }
            this._inStyling = true;
            this._stylingContainer = container;
            this._stylingParent = component;
            let genericPrefix = "";
            let typeName = this.i.$type.name;
            if (typeName.indexOf("Xam") === 0) {
                typeName = typeName.substring(3);
            }
            genericPrefix = toSpinal("DataGridToolbarComponent");
            let additionalPrefixes = [];
            let prefix = toSpinal(typeName);
            additionalPrefixes.push(prefix + "-");
            let b = this.i.$type.baseType;
            while (b && b.name != "Object" &&
                b.name != "Base" &&
                b.name != "Control" &&
                b.Name != "DependencyObject" &&
                b.Name != "FrameworkElement") {
                typeName = b.name;
                if (typeName.indexOf("Xam") === 0) {
                    typeName = typeName.substring(3);
                }
                let basePrefix = toSpinal(typeName);
                additionalPrefixes.push(basePrefix + "-");
                b = b.baseType;
            }
            if (parent) {
                let parentTypeName = parent.i.$type.name;
                if (parentTypeName.indexOf("Xam") === 0) {
                    parentTypeName = parentTypeName.substring(3);
                }
                let parentPrefix = toSpinal(parentTypeName);
                additionalPrefixes.push(parentPrefix + "-" + genericPrefix + "-");
                additionalPrefixes.push(parentPrefix + "-" + prefix + "-");
            }
            initializePropertiesFromCss(container, this, genericPrefix + "-", this.hasUserValues, false, additionalPrefixes);
            if (this.targetGrid && this.targetGrid._styling) {
                this.targetGrid._styling(container, component, this);
            }
            if (this._otherStyling) {
                this._otherStyling(container, component, parent);
            }
            this._inStyling = false;
        }
    }
    IgcDataGridToolbarComponent._observedAttributesIgcDataGridToolbarComponent = null;
    IgcDataGridToolbarComponent.htmlTagName = "igc-data-grid-toolbar";
    IgcDataGridToolbarComponent._isElementRegistered = false;
    return IgcDataGridToolbarComponent;
})();
//# sourceMappingURL=igc-data-grid-toolbar-component.js.map
