igniteui-webcomponents-layouts 7.1.1-beta.0 → 7.1.1-beta.2

package/esm2015/lib/igc-tool-panel-component.js

@@ -1,1263 +0,0 @@
-import { stringToColor, colorToString, fromSize, ensureEnum, brushToString, stringToBrush, ensureBool, initializePropertiesFromCss, NamePatcher, toSpinal, fromBrushCollection, toBrushCollection, enumToString, getAllPropertyNames, fromSpinal } from "igniteui-webcomponents-core";
-import { FontInfo } from "igniteui-webcomponents-core";
-import { WebComponentRenderer, PortalManager } from "igniteui-webcomponents-core";
-import { delegateCombine, delegateRemove } from "igniteui-webcomponents-core";
-import { CollectionAdapter } from "igniteui-webcomponents-core";
-import { NotifyCollectionChangedAction } from "igniteui-webcomponents-core";
-import { RegisterElementHelper } from "igniteui-webcomponents-core";
-import { ToolPanel } from "./ToolPanel";
-import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
-import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
-import { IgcHTMLElement } from "igniteui-webcomponents-core";
-import { ToolPanelOrientation_$type } from './ToolPanelOrientation';
-import { IgcToolActionComponent } from "./igc-tool-action-component";
-import { IgcToolActionCollection } from "./igc-tool-action-collection";
-import { IgcToolPanelContentRefreshedEventArgs } from "./igc-tool-panel-content-refreshed-event-args";
-import { IgcToolCommandEventArgs } from './igc-tool-command-event-args';
-import { NestedActionMode_$type } from './NestedActionMode';
-import { ScrollbarStyle_$type } from "igniteui-webcomponents-core";
-let IgcToolPanelComponent = /*@__PURE__*/ (() => {
-    class IgcToolPanelComponent extends IgcHTMLElement {
-        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;
-        }
-        ensureStretch() {
-            this.width = "100%";
-            this.height = "100%";
-        }
-        /**
-         * A collection of manually added actions for the editor.
-        */
-        get actions() {
-            if (this._actions === null) {
-                let coll = new IgcToolActionCollection();
-                let inner = coll._innerColl;
-                inner.addListener((sender, e) => {
-                    switch (e.action) {
-                        case NotifyCollectionChangedAction.Add:
-                            this._actionsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
-                            break;
-                        case NotifyCollectionChangedAction.Remove:
-                            this._actionsAdapter.removeManualItemAt(e.oldStartingIndex);
-                            break;
-                        case NotifyCollectionChangedAction.Replace:
-                            this._actionsAdapter.removeManualItemAt(e.oldStartingIndex);
-                            this._actionsAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
-                            break;
-                        case NotifyCollectionChangedAction.Reset:
-                            this._actionsAdapter.clearManualItems();
-                            break;
-                    }
-                });
-                this._actions = coll;
-            }
-            return this._actions;
-        }
-        constructor() {
-            super();
-            this._implementation = null;
-            this.contentActions = [];
-            /**
-            * The actions actually present in the editor. Do not directly modify this array.
-            * This array's contents can be modified by using the actions property or providing child content.
-            */
-            this.actualActions = [];
-            this._actions = null;
-            this._actionsAdapter = null;
-            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;
-            this._contentRefreshed = null;
-            this._contentRefreshed_wrapped = null;
-            this._onCommand = null;
-            this._onCommand_wrapped = null;
-            if (this._styling) {
-                NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
-            }
-            this._implementation = this.createImplementation();
-            this._implementation.externalObject = this;
-            this._portalManager = new PortalManager("toolPanelContent");
-            this._webComponentRenderer = new WebComponentRenderer(this, document, true, {}, this._portalManager);
-            this._webComponentWrapper = this._webComponentRenderer.createElement("div");
-            this._webComponentRenderer.updateRoot(this._webComponentWrapper);
-            this._webComponentWrapper.setStyleProperty("display", "block");
-            this._webComponentWrapper.setStyleProperty("width", "100%");
-            this._webComponentWrapper.setStyleProperty("height", "100%");
-            this._actionsAdapter = new CollectionAdapter(this.contentActions, this.i.actions, this.actualActions, (c) => c.i, (i) => {
-                if (this._webComponentRenderer && this._webComponentRenderer.rootWrapper.getNativeElement().parentElement) {
-                    i._styling(this, this, this);
-                }
-            }, (i) => { });
-            this.i.provideContainer(this._webComponentRenderer);
-            this.i.notifySizeChanged();
-            let mut = new MutationObserver((list) => {
-                for (var mutation of list) {
-                    if (mutation.type == 'childList') {
-                        this.updateContentProperties();
-                    }
-                }
-            });
-            mut.observe(this, {
-                childList: true
-            });
-            this._webComponentRenderer.addSizeWatcher(() => {
-                this.i.notifySizeChanged();
-            });
-        }
-        // supports angular themes or custom properties set in CSS
-        updateStyle() {
-            this._styling(this, this);
-        }
-        destroy() {
-            this._implementation.destroy();
-            this._webComponentRenderer.destroy();
-        }
-        updateContentProperties() {
-            this.contentActions.length = 0;
-            for (var i = 0; i < this.children.length; i++) {
-                if (this.children[i] instanceof IgcToolActionComponent) {
-                    this.contentActions.push(this.children[i]);
-                }
-            }
-            if (this._actionsAdapter != null) {
-                this._actionsAdapter.notifyContentChanged();
-            }
-        }
-        createImplementation() {
-            return new ToolPanel();
-        }
-        get i() {
-            return this._implementation;
-        }
-        disconnectedCallback() {
-            this._disconnected = true;
-        }
-        connectedCallback() {
-            if (this._disconnected) {
-                this._disconnected = false;
-                return;
-            }
-            this.classList.add("ig-tool-panel");
-            this.classList.add("igc-tool-panel");
-            var rootWrapper = this._webComponentRenderer.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;
-            this._flushQueuedAttributes();
-            // supports themes or custom properties set in CSS
-            this._styling(this, this);
-            for (let i = 0; i < this.actualActions.length; i++) {
-                let s = this.actualActions[i];
-                s._styling(this, this, this);
-            }
-            this.afterContentInit();
-        }
-        afterContentInit() {
-            this.i.notifySizeChanged();
-        }
-        _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 (IgcToolPanelComponent._observedAttributesIgcToolPanelComponent == null) {
-                let names = getAllPropertyNames(IgcToolPanelComponent);
-                for (let i = 0; i < names.length; i++) {
-                    names[i] = toSpinal(names[i]);
-                }
-                IgcToolPanelComponent._observedAttributesIgcToolPanelComponent = names;
-            }
-            return IgcToolPanelComponent._observedAttributesIgcToolPanelComponent;
-        }
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (this._settingAttributes) {
-                return;
-            }
-            let setName = fromSpinal(name);
-            this._updatingFromAttribute = true;
-            this[setName] = newValue;
-            this._updatingFromAttribute = false;
-        }
-        static register() {
-            if (!IgcToolPanelComponent._isElementRegistered) {
-                IgcToolPanelComponent._isElementRegistered = true;
-                RegisterElementHelper.registerElement(IgcToolPanelComponent.htmlTagName, IgcToolPanelComponent);
-            }
-        }
-        /**
-     * Gets or sets if the tool actions should display their submenus on mouse hover.
-    */
-        get showOnHover() {
-            return this.i.a7;
-        }
-        set showOnHover(v) {
-            this.i.a7 = ensureBool(v);
-            this._a("showOnHover", this.i.a7);
-        }
-        /**
-         * Gets or sets if the tool action icon buttons should display their tooltips on mouse hover.
-        */
-        get showTooltipOnHover() {
-            return this.i.a8;
-        }
-        set showTooltipOnHover(v) {
-            this.i.a8 = ensureBool(v);
-            this._a("showTooltipOnHover", this.i.a8);
-        }
-        /**
-         * Gets or sets the amount of time to wait when clicking on the icon menu button while the dropdown is opening. If a click was
-         * executed within this buffer window the dropdown will be left open. Otherwise it will close it. Setting a negative value will
-         * always keep the dropdown open during a hover open and will require an extra click to close.
-        */
-        get dropdownClickBuffer() {
-            return this.i.c2;
-        }
-        set dropdownClickBuffer(v) {
-            this.i.c2 = +v;
-            this._a("dropdownClickBuffer", this.i.c2);
-        }
-        /**
-         * Prevents clicks on the tool actions from bubbling.
-        */
-        get stopPropagation() {
-            return this.i.a9;
-        }
-        set stopPropagation(v) {
-            this.i.a9 = ensureBool(v);
-            this._a("stopPropagation", this.i.a9);
-        }
-        /**
-         * Gets or sets the text style for the panel.
-        */
-        get cellTextStyle() {
-            if (this.i.ap == null) {
-                return null;
-            }
-            return this.i.ap.fontString;
-        }
-        set cellTextStyle(v) {
-            let fi = new FontInfo();
-            fi.fontString = v;
-            this.i.ap = fi;
-            this._a("cellTextStyle", this.i.ap != null ? this.i.ap.fontString : "");
-        }
-        /**
-         * Gets or sets the subtitle text style for the panel.
-        */
-        get subtitleTextStyle() {
-            if (this.i.as == null) {
-                return null;
-            }
-            return this.i.as.fontString;
-        }
-        set subtitleTextStyle(v) {
-            let fi = new FontInfo();
-            fi.fontString = v;
-            this.i.as = fi;
-            this._a("subtitleTextStyle", this.i.as != null ? this.i.as.fontString : "");
-        }
-        /**
-         * Gets or sets the text style.
-        */
-        get groupHeaderTextStyle() {
-            if (this.i.ar == null) {
-                return null;
-            }
-            return this.i.ar.fontString;
-        }
-        set groupHeaderTextStyle(v) {
-            let fi = new FontInfo();
-            fi.fontString = v;
-            this.i.ar = fi;
-            this._a("groupHeaderTextStyle", this.i.ar != null ? this.i.ar.fontString : "");
-        }
-        /**
-         * Gets or sets the base built in theme to use for the checkbox.
-        */
-        get baseTheme() {
-            return this.i.z;
-        }
-        set baseTheme(v) {
-            this.i.z = ensureEnum(BaseControlTheme_$type, v);
-            this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.z));
-        }
-        /**
-         * Gets or sets the display density to use for the toolbar.
-        */
-        get density() {
-            return this.i.ae;
-        }
-        set density(v) {
-            this.i.ae = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("density", enumToString(ControlDisplayDensity_$type, this.i.ae));
-        }
-        /**
-         * Gets the resolved display density to use for the toolbar.
-        */
-        get actualDensity() {
-            return this.i.ad;
-        }
-        set actualDensity(v) {
-            this.i.ad = ensureEnum(ControlDisplayDensity_$type, v);
-            this._a("actualDensity", enumToString(ControlDisplayDensity_$type, this.i.ad));
-        }
-        /**
-         * Gets or sets the color to use for the background of the component.
-        */
-        get backgroundColor() {
-            return brushToString(this.i.jv);
-        }
-        set backgroundColor(v) {
-            this.i.jv = stringToBrush(v);
-            this._a("backgroundColor", brushToString(this.i.jv));
-        }
-        get actualBackgroundColor() {
-            return brushToString(this.i.ja);
-        }
-        set actualBackgroundColor(v) {
-            this.i.ja = stringToBrush(v);
-            this._a("actualBackgroundColor", brushToString(this.i.ja));
-        }
-        /**
-         * Gets or sets the background color for submenus.
-        */
-        get submenuBackgroundColor() {
-            return brushToString(this.i.ke);
-        }
-        set submenuBackgroundColor(v) {
-            this.i.ke = stringToBrush(v);
-            this._a("submenuBackgroundColor", brushToString(this.i.ke));
-        }
-        get actualSubmenuBackgroundColor() {
-            return brushToString(this.i.jo);
-        }
-        set actualSubmenuBackgroundColor(v) {
-            this.i.jo = stringToBrush(v);
-            this._a("actualSubmenuBackgroundColor", brushToString(this.i.jo));
-        }
-        /**
-         * Gets or sets the group header background color.
-        */
-        get groupHeaderBackgroundColor() {
-            return brushToString(this.i.j4);
-        }
-        set groupHeaderBackgroundColor(v) {
-            this.i.j4 = stringToBrush(v);
-            this._a("groupHeaderBackgroundColor", brushToString(this.i.j4));
-        }
-        get actualGroupHeaderBackgroundColor() {
-            return brushToString(this.i.je);
-        }
-        set actualGroupHeaderBackgroundColor(v) {
-            this.i.je = stringToBrush(v);
-            this._a("actualGroupHeaderBackgroundColor", brushToString(this.i.je));
-        }
-        /**
-         * Gets or sets the separator background color.
-        */
-        get separatorBackgroundColor() {
-            return brushToString(this.i.kd);
-        }
-        set separatorBackgroundColor(v) {
-            this.i.kd = stringToBrush(v);
-            this._a("separatorBackgroundColor", brushToString(this.i.kd));
-        }
-        get actualSeparatorBackgroundColor() {
-            return brushToString(this.i.jn);
-        }
-        set actualSeparatorBackgroundColor(v) {
-            this.i.jn = stringToBrush(v);
-            this._a("actualSeparatorBackgroundColor", brushToString(this.i.jn));
-        }
-        /**
-         * Gets or sets the group header separator background color.
-        */
-        get groupHeaderSeparatorBackgroundColor() {
-            return brushToString(this.i.j5);
-        }
-        set groupHeaderSeparatorBackgroundColor(v) {
-            this.i.j5 = stringToBrush(v);
-            this._a("groupHeaderSeparatorBackgroundColor", brushToString(this.i.j5));
-        }
-        get actualGroupHeaderSeparatorBackgroundColor() {
-            return brushToString(this.i.jf);
-        }
-        set actualGroupHeaderSeparatorBackgroundColor(v) {
-            this.i.jf = stringToBrush(v);
-            this._a("actualGroupHeaderSeparatorBackgroundColor", brushToString(this.i.jf));
-        }
-        /**
-         * Gets or sets the hover background color.
-        */
-        get hoverBackgroundColor() {
-            return brushToString(this.i.j9);
-        }
-        set hoverBackgroundColor(v) {
-            this.i.j9 = stringToBrush(v);
-            this._a("hoverBackgroundColor", brushToString(this.i.j9));
-        }
-        get actualHoverBackgroundColor() {
-            return brushToString(this.i.jj);
-        }
-        set actualHoverBackgroundColor(v) {
-            this.i.jj = stringToBrush(v);
-            this._a("actualHoverBackgroundColor", brushToString(this.i.jj));
-        }
-        /**
-         * Gets or sets the color to use for the text of the component.
-        */
-        get textColor() {
-            return brushToString(this.i.kg);
-        }
-        set textColor(v) {
-            this.i.kg = stringToBrush(v);
-            this._a("textColor", brushToString(this.i.kg));
-        }
-        get actualTextColor() {
-            return brushToString(this.i.jq);
-        }
-        set actualTextColor(v) {
-            this.i.jq = stringToBrush(v);
-            this._a("actualTextColor", brushToString(this.i.jq));
-        }
-        get actualSubtitleTextColor() {
-            return brushToString(this.i.jp);
-        }
-        set actualSubtitleTextColor(v) {
-            this.i.jp = stringToBrush(v);
-            this._a("actualSubtitleTextColor", brushToString(this.i.jp));
-        }
-        /**
-         * Gets or sets the color to use for the subtitle of the component.
-        */
-        get subtitleTextColor() {
-            return brushToString(this.i.kf);
-        }
-        set subtitleTextColor(v) {
-            this.i.kf = stringToBrush(v);
-            this._a("subtitleTextColor", brushToString(this.i.kf));
-        }
-        /**
-         * Gets or sets the color to use for the text in disabled tool actions.
-        */
-        get disabledTextColor() {
-            return brushToString(this.i.j1);
-        }
-        set disabledTextColor(v) {
-            this.i.j1 = stringToBrush(v);
-            this._a("disabledTextColor", brushToString(this.i.j1));
-        }
-        get actualDisabledTextColor() {
-            return brushToString(this.i.jd);
-        }
-        set actualDisabledTextColor(v) {
-            this.i.jd = stringToBrush(v);
-            this._a("actualDisabledTextColor", brushToString(this.i.jd));
-        }
-        /**
-         * Gets or sets the text color for group header tool actions.
-        */
-        get groupHeaderTextColor() {
-            return brushToString(this.i.j7);
-        }
-        set groupHeaderTextColor(v) {
-            this.i.j7 = stringToBrush(v);
-            this._a("groupHeaderTextColor", brushToString(this.i.j7));
-        }
-        get actualGroupHeaderTextColor() {
-            return brushToString(this.i.jh);
-        }
-        set actualGroupHeaderTextColor(v) {
-            this.i.jh = stringToBrush(v);
-            this._a("actualGroupHeaderTextColor", brushToString(this.i.jh));
-        }
-        /**
-         * Gets or sets the text color for group header subtitle.
-        */
-        get groupHeaderSubtitleTextColor() {
-            return brushToString(this.i.j6);
-        }
-        set groupHeaderSubtitleTextColor(v) {
-            this.i.j6 = stringToBrush(v);
-            this._a("groupHeaderSubtitleTextColor", brushToString(this.i.j6));
-        }
-        get actualGroupHeaderSubtitleTextColor() {
-            return brushToString(this.i.jg);
-        }
-        set actualGroupHeaderSubtitleTextColor(v) {
-            this.i.jg = stringToBrush(v);
-            this._a("actualGroupHeaderSubtitleTextColor", brushToString(this.i.jg));
-        }
-        /**
-         * Gets or sets the tooltip text color.
-        */
-        get toolTipTextColor() {
-            return brushToString(this.i.ki);
-        }
-        set toolTipTextColor(v) {
-            this.i.ki = stringToBrush(v);
-            this._a("toolTipTextColor", brushToString(this.i.ki));
-        }
-        get actualToolTipTextColor() {
-            return brushToString(this.i.js);
-        }
-        set actualToolTipTextColor(v) {
-            this.i.js = stringToBrush(v);
-            this._a("actualToolTipTextColor", brushToString(this.i.js));
-        }
-        /**
-         * Gets or sets the tooltip background color.
-        */
-        get toolTipBackgroundColor() {
-            return brushToString(this.i.kh);
-        }
-        set toolTipBackgroundColor(v) {
-            this.i.kh = stringToBrush(v);
-            this._a("toolTipBackgroundColor", brushToString(this.i.kh));
-        }
-        /**
-         * Gets the actual tooltip background color.
-        */
-        get actualToolTipBackgroundColor() {
-            return brushToString(this.i.jr);
-        }
-        set actualToolTipBackgroundColor(v) {
-            this.i.jr = stringToBrush(v);
-            this._a("actualToolTipBackgroundColor", brushToString(this.i.jr));
-        }
-        /**
-         * Gets or sets the tooltip corner radius.
-        */
-        get toolTipCornerRadius() {
-            return this.i.cu;
-        }
-        set toolTipCornerRadius(v) {
-            this.i.cu = +v;
-            this._a("toolTipCornerRadius", this.i.cu);
-        }
-        /**
-         * Gets the actual tooltip corner radius.
-        */
-        get actualToolTipCornerRadius() {
-            return this.i.cf;
-        }
-        set actualToolTipCornerRadius(v) {
-            this.i.cf = +v;
-            this._a("actualToolTipCornerRadius", this.i.cf);
-        }
-        /**
-         * Gets or sets the shadow elevation for the tooltip.
-        */
-        get toolTipElevation() {
-            return this.i.cv;
-        }
-        set toolTipElevation(v) {
-            this.i.cv = +v;
-            this._a("toolTipElevation", this.i.cv);
-        }
-        /**
-         * Gets the actual shadow elevation used by the tooltip.
-        */
-        get actualToolTipElevation() {
-            return this.i.cg;
-        }
-        set actualToolTipElevation(v) {
-            this.i.cg = +v;
-            this._a("actualToolTipElevation", this.i.cg);
-        }
-        /**
-         * Gets or sets the fill color of icons in the ToolPanel.
-        */
-        get iconFill() {
-            return brushToString(this.i.ka);
-        }
-        set iconFill(v) {
-            this.i.ka = stringToBrush(v);
-            this._a("iconFill", brushToString(this.i.ka));
-        }
-        /**
-         * Gets the actual icon fill color.
-        */
-        get actualIconFill() {
-            return brushToString(this.i.jk);
-        }
-        set actualIconFill(v) {
-            this.i.jk = stringToBrush(v);
-            this._a("actualIconFill", brushToString(this.i.jk));
-        }
-        /**
-         * Gets or sets the stroke color of icons in the ToolPanel.
-        */
-        get iconStroke() {
-            return brushToString(this.i.kb);
-        }
-        set iconStroke(v) {
-            this.i.kb = stringToBrush(v);
-            this._a("iconStroke", brushToString(this.i.kb));
-        }
-        /**
-         * Gets the actual icon stroke color.
-        */
-        get actualIconStroke() {
-            return brushToString(this.i.jl);
-        }
-        set actualIconStroke(v) {
-            this.i.jl = stringToBrush(v);
-            this._a("actualIconStroke", brushToString(this.i.jl));
-        }
-        /**
-         * Gets or sets the left padding for separators in the vertical orientation.
-        */
-        get separatorVerticalPaddingLeft() {
-            return this.i.cr;
-        }
-        set separatorVerticalPaddingLeft(v) {
-            this.i.cr = +v;
-            this._a("separatorVerticalPaddingLeft", this.i.cr);
-        }
-        get actualSeparatorVerticalPaddingLeft() {
-            return this.i.cc;
-        }
-        set actualSeparatorVerticalPaddingLeft(v) {
-            this.i.cc = +v;
-            this._a("actualSeparatorVerticalPaddingLeft", this.i.cc);
-        }
-        /**
-         * Gets or sets the right padding for separators in the vertical orientation.
-        */
-        get separatorVerticalPaddingRight() {
-            return this.i.cs;
-        }
-        set separatorVerticalPaddingRight(v) {
-            this.i.cs = +v;
-            this._a("separatorVerticalPaddingRight", this.i.cs);
-        }
-        get actualSeparatorVerticalPaddingRight() {
-            return this.i.cd;
-        }
-        set actualSeparatorVerticalPaddingRight(v) {
-            this.i.cd = +v;
-            this._a("actualSeparatorVerticalPaddingRight", this.i.cd);
-        }
-        /**
-         * Gets or sets the top padding for separators in the vertical orientation.
-        */
-        get separatorVerticalPaddingTop() {
-            return this.i.ct;
-        }
-        set separatorVerticalPaddingTop(v) {
-            this.i.ct = +v;
-            this._a("separatorVerticalPaddingTop", this.i.ct);
-        }
-        get actualSeparatorVerticalPaddingTop() {
-            return this.i.ce;
-        }
-        set actualSeparatorVerticalPaddingTop(v) {
-            this.i.ce = +v;
-            this._a("actualSeparatorVerticalPaddingTop", this.i.ce);
-        }
-        /**
-         * Gets or sets the bottom padding for separators in the vertical orientation.
-        */
-        get separatorVerticalPaddingBottom() {
-            return this.i.cq;
-        }
-        set separatorVerticalPaddingBottom(v) {
-            this.i.cq = +v;
-            this._a("separatorVerticalPaddingBottom", this.i.cq);
-        }
-        get actualSeparatorVerticalPaddingBottom() {
-            return this.i.cb;
-        }
-        set actualSeparatorVerticalPaddingBottom(v) {
-            this.i.cb = +v;
-            this._a("actualSeparatorVerticalPaddingBottom", this.i.cb);
-        }
-        /**
-         * Gets or sets the left padding for separators in the horizontal orientation.
-        */
-        get separatorHorizontalPaddingLeft() {
-            return this.i.cn;
-        }
-        set separatorHorizontalPaddingLeft(v) {
-            this.i.cn = +v;
-            this._a("separatorHorizontalPaddingLeft", this.i.cn);
-        }
-        get actualSeparatorHorizontalPaddingLeft() {
-            return this.i.b8;
-        }
-        set actualSeparatorHorizontalPaddingLeft(v) {
-            this.i.b8 = +v;
-            this._a("actualSeparatorHorizontalPaddingLeft", this.i.b8);
-        }
-        /**
-         * Gets or sets the right padding for separators in the horizontal orientation.
-        */
-        get separatorHorizontalPaddingRight() {
-            return this.i.co;
-        }
-        set separatorHorizontalPaddingRight(v) {
-            this.i.co = +v;
-            this._a("separatorHorizontalPaddingRight", this.i.co);
-        }
-        get actualSeparatorHorizontalPaddingRight() {
-            return this.i.b9;
-        }
-        set actualSeparatorHorizontalPaddingRight(v) {
-            this.i.b9 = +v;
-            this._a("actualSeparatorHorizontalPaddingRight", this.i.b9);
-        }
-        /**
-         * Gets or sets the top padding for separators in the horizontal orientation.
-        */
-        get separatorHorizontalPaddingTop() {
-            return this.i.cp;
-        }
-        set separatorHorizontalPaddingTop(v) {
-            this.i.cp = +v;
-            this._a("separatorHorizontalPaddingTop", this.i.cp);
-        }
-        get actualSeparatorHorizontalPaddingTop() {
-            return this.i.ca;
-        }
-        set actualSeparatorHorizontalPaddingTop(v) {
-            this.i.ca = +v;
-            this._a("actualSeparatorHorizontalPaddingTop", this.i.ca);
-        }
-        /**
-         * Gets or sets the bottom padding for separators in the horizontal orientation.
-        */
-        get separatorHorizontalPaddingBottom() {
-            return this.i.cm;
-        }
-        set separatorHorizontalPaddingBottom(v) {
-            this.i.cm = +v;
-            this._a("separatorHorizontalPaddingBottom", this.i.cm);
-        }
-        get actualSeparatorHorizontalPaddingBottom() {
-            return this.i.b7;
-        }
-        set actualSeparatorHorizontalPaddingBottom(v) {
-            this.i.b7 = +v;
-            this._a("actualSeparatorHorizontalPaddingBottom", this.i.b7);
-        }
-        /**
-         * Gets or sets the color to use for the background of the component.
-        */
-        get orientation() {
-            return this.i.u;
-        }
-        set orientation(v) {
-            this.i.u = ensureEnum(ToolPanelOrientation_$type, v);
-            this._a("orientation", enumToString(ToolPanelOrientation_$type, this.i.u));
-        }
-        /**
-         * Gets or sets the row height for the panel.
-        */
-        get rowHeight() {
-            return this.i.c6;
-        }
-        set rowHeight(v) {
-            this.i.c6 = +v;
-            this._a("rowHeight", this.i.c6);
-        }
-        /**
-         * Gets the actual row height used by the panel.
-        */
-        get actualRowHeight() {
-            return this.i.b6;
-        }
-        /**
-         * Gets or sets the height to use for the sub panel rows if different than default.
-        */
-        get subPanelRowHeight() {
-            return this.i.c7;
-        }
-        set subPanelRowHeight(v) {
-            this.i.c7 = +v;
-            this._a("subPanelRowHeight", this.i.c7);
-        }
-        get highlightWidth() {
-            return this.i.ck;
-        }
-        set highlightWidth(v) {
-            this.i.ck = +v;
-            this._a("highlightWidth", this.i.ck);
-        }
-        get actualHighlightWidth() {
-            return this.i.b5;
-        }
-        set actualHighlightWidth(v) {
-            this.i.b5 = +v;
-            this._a("actualHighlightWidth", this.i.b5);
-        }
-        get highlightRadius() {
-            return this.i.cj;
-        }
-        set highlightRadius(v) {
-            this.i.cj = +v;
-            this._a("highlightRadius", this.i.cj);
-        }
-        get actualHighlightRadius() {
-            return this.i.b4;
-        }
-        set actualHighlightRadius(v) {
-            this.i.b4 = +v;
-            this._a("actualHighlightRadius", this.i.b4);
-        }
-        get highlightColor() {
-            return brushToString(this.i.j8);
-        }
-        set highlightColor(v) {
-            this.i.j8 = stringToBrush(v);
-            this._a("highlightColor", brushToString(this.i.j8));
-        }
-        get actualHighlightColor() {
-            return brushToString(this.i.ji);
-        }
-        set actualHighlightColor(v) {
-            this.i.ji = stringToBrush(v);
-            this._a("actualHighlightColor", brushToString(this.i.ji));
-        }
-        get actualAccentColor() {
-            return brushToString(this.i.i9);
-        }
-        set actualAccentColor(v) {
-            this.i.i9 = stringToBrush(v);
-            this._a("actualAccentColor", brushToString(this.i.i9));
-        }
-        get accentColor() {
-            return brushToString(this.i.i8);
-        }
-        set accentColor(v) {
-            this.i.i8 = stringToBrush(v);
-            this._a("accentColor", brushToString(this.i.i8));
-        }
-        /**
-         * Gets or sets the stroke color for all icon menu dropdown arrows.
-        */
-        get menuArrowStroke() {
-            return brushToString(this.i.kc);
-        }
-        set menuArrowStroke(v) {
-            this.i.kc = stringToBrush(v);
-            this._a("menuArrowStroke", brushToString(this.i.kc));
-        }
-        /**
-         * Gets the actual stroke color for all icon menu dropdown arrows.
-        */
-        get actualMenuArrowStroke() {
-            return brushToString(this.i.jm);
-        }
-        set actualMenuArrowStroke(v) {
-            this.i.jm = stringToBrush(v);
-            this._a("actualMenuArrowStroke", brushToString(this.i.jm));
-        }
-        /**
-         * Gets or sets the background color of the radio when in the unchecked state.
-        */
-        get uncheckedBackgroundColor() {
-            return brushToString(this.i.kj);
-        }
-        set uncheckedBackgroundColor(v) {
-            this.i.kj = stringToBrush(v);
-            this._a("uncheckedBackgroundColor", brushToString(this.i.kj));
-        }
-        /**
-         * Gets the actual background color of the radio when in the unchecked state.
-        */
-        get actualUncheckedBackgroundColor() {
-            return brushToString(this.i.jt);
-        }
-        set actualUncheckedBackgroundColor(v) {
-            this.i.jt = stringToBrush(v);
-            this._a("actualUncheckedBackgroundColor", brushToString(this.i.jt));
-        }
-        /**
-         * Gets or sets the background color of the radio when in the checked state.
-        */
-        get checkedBackgroundColor() {
-            return brushToString(this.i.jz);
-        }
-        set checkedBackgroundColor(v) {
-            this.i.jz = stringToBrush(v);
-            this._a("checkedBackgroundColor", brushToString(this.i.jz));
-        }
-        /**
-         * Gets the actual background color of the radio when in the checked state.
-        */
-        get actualCheckedBackgroundColor() {
-            return brushToString(this.i.jb);
-        }
-        set actualCheckedBackgroundColor(v) {
-            this.i.jb = stringToBrush(v);
-            this._a("actualCheckedBackgroundColor", brushToString(this.i.jb));
-        }
-        /**
-         * Gets or sets the border color of the radio when in the unchecked state.
-        */
-        get uncheckedBorderColor() {
-            return brushToString(this.i.kk);
-        }
-        set uncheckedBorderColor(v) {
-            this.i.kk = stringToBrush(v);
-            this._a("uncheckedBorderColor", brushToString(this.i.kk));
-        }
-        /**
-         * Gets the actual border color of the radio when in the unchecked state.
-        */
-        get actualUncheckedBorderColor() {
-            return brushToString(this.i.ju);
-        }
-        set actualUncheckedBorderColor(v) {
-            this.i.ju = stringToBrush(v);
-            this._a("actualUncheckedBorderColor", brushToString(this.i.ju));
-        }
-        /**
-         * Gets or sets the border color of the radio when in the checked state.
-        */
-        get checkedBorderColor() {
-            return brushToString(this.i.j0);
-        }
-        set checkedBorderColor(v) {
-            this.i.j0 = stringToBrush(v);
-            this._a("checkedBorderColor", brushToString(this.i.j0));
-        }
-        /**
-         * Gets the actual border color of the radio when in the checked state.
-        */
-        get actualCheckedBorderColor() {
-            return brushToString(this.i.jc);
-        }
-        set actualCheckedBorderColor(v) {
-            this.i.jc = stringToBrush(v);
-            this._a("actualCheckedBorderColor", brushToString(this.i.jc));
-        }
-        /**
-         * Gets or sets the dropdown delay time in milliseconds.
-        */
-        get dropdownDelay() {
-            return this.i.c3;
-        }
-        set dropdownDelay(v) {
-            this.i.c3 = +v;
-            this._a("dropdownDelay", this.i.c3);
-        }
-        /**
-         * Gets the actual dropdown delay.
-        */
-        get actualDropdownDelay() {
-            return this.i.c1;
-        }
-        set actualDropdownDelay(v) {
-            this.i.c1 = +v;
-            this._a("actualDropdownDelay", this.i.c1);
-        }
-        /**
-         * Gets or sets the style of scrollbar.
-        */
-        get scrollbarStyle() {
-            return this.i.x;
-        }
-        set scrollbarStyle(v) {
-            this.i.x = ensureEnum(ScrollbarStyle_$type, v);
-            this._a("scrollbarStyle", enumToString(ScrollbarStyle_$type, this.i.x));
-        }
-        /**
-         * Gets or sets the scrollbar background color for checkbox lists hosted in this tool panel's actions.
-        */
-        get checkboxListScrollbarBackground() {
-            return brushToString(this.i.jx);
-        }
-        set checkboxListScrollbarBackground(v) {
-            this.i.jx = stringToBrush(v);
-            this._a("checkboxListScrollbarBackground", brushToString(this.i.jx));
-        }
-        /**
-         * Gets or sets the scrollbar thumb hover background color for checkbox lists hosted in this tool panel's actions.
-        */
-        get checkboxListScrollbarHoverBackground() {
-            return brushToString(this.i.jy);
-        }
-        set checkboxListScrollbarHoverBackground(v) {
-            this.i.jy = stringToBrush(v);
-            this._a("checkboxListScrollbarHoverBackground", brushToString(this.i.jy));
-        }
-        /**
-         * Gets or sets the scrollbar thumb active (dragging) background color for checkbox lists hosted in this tool panel's actions.
-        */
-        get checkboxListScrollbarActiveBackground() {
-            return brushToString(this.i.jw);
-        }
-        set checkboxListScrollbarActiveBackground(v) {
-            this.i.jw = stringToBrush(v);
-            this._a("checkboxListScrollbarActiveBackground", brushToString(this.i.jw));
-        }
-        /**
-         * Gets or sets the spacing between items
-        */
-        get itemSpacing() {
-            return this.i.cl;
-        }
-        set itemSpacing(v) {
-            this.i.cl = +v;
-            this._a("itemSpacing", this.i.cl);
-        }
-        /**
-         * Gets or sets the mode used when displaying nested actions.
-        */
-        get nestedActionMode() {
-            return this.i.g;
-        }
-        set nestedActionMode(v) {
-            this.i.g = ensureEnum(NestedActionMode_$type, v);
-            this._a("nestedActionMode", enumToString(NestedActionMode_$type, this.i.g));
-        }
-        get isOpen() {
-            return this.i.a6;
-        }
-        findByName(name) {
-            if (this.findEphemera) {
-                if (name && name.indexOf("@@e:") == 0) {
-                    return this.findEphemera(name);
-                }
-            }
-            if (this.actions != null && this.actions.findByName && this.actions.findByName(name)) {
-                return this.actions.findByName(name);
-            }
-            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("ToolPanelComponent");
-            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._otherStyling) {
-                this._otherStyling(container, component, parent);
-            }
-            this._inStyling = false;
-        }
-        refresh() {
-            this.i.g3();
-        }
-        getDesiredSize() {
-            let iv = this.i.kn();
-            return fromSize(iv);
-        }
-        flushRefresh() {
-            this.i.gi();
-        }
-        /**
-         * Forces any open sub menus to close.
-        
-        */
-        closeSubmenus() {
-            this.i.gd();
-        }
-        exportVisualData() {
-            let iv = this.i.c8();
-            return (iv);
-        }
-        exportSerializedVisualData() {
-            let iv = this.i.ey();
-            return (iv);
-        }
-        setBrushContextItem(key, value) {
-            this.i.hc(key, stringToBrush(value));
-        }
-        getBrushContextItem(key) {
-            let iv = this.i.j2(key);
-            return brushToString(iv);
-        }
-        setBrushCollectionContextItem(key, value) {
-            this.i.ha(key, toBrushCollection(value));
-        }
-        getBrushCollectionContextItem(key) {
-            let iv = this.i.a(key);
-            return fromBrushCollection(iv);
-        }
-        setDoubleContextItem(key, value) {
-            this.i.hk(key, value);
-        }
-        getDoubleContextItem(key) {
-            let iv = this.i.ch(key);
-            return (iv);
-        }
-        setIntContextItem(key, value) {
-            this.i.hm(key, value);
-        }
-        getIntContextItem(key) {
-            let iv = this.i.c4(key);
-            return (iv);
-        }
-        setStringContextItem(key, value) {
-            this.i.ho(key, value);
-        }
-        getStringContextItem(key) {
-            let iv = this.i.ez(key);
-            return (iv);
-        }
-        setBoolContextItem(key, value) {
-            this.i.g8(key, value);
-        }
-        getBoolContextItem(key) {
-            let iv = this.i.a2(key);
-            return (iv);
-        }
-        setColorContextItem(key, value) {
-            this.i.he(key, stringToColor(value));
-        }
-        getColorContextItem(key) {
-            let iv = this.i.kl(key);
-            return colorToString(iv);
-        }
-        setDataContextItem(key, value) {
-            this.i.hi(key, value);
-        }
-        getDataContextItem(key) {
-            let iv = this.i.db(key);
-            return (iv);
-        }
-        get contentRefreshed() {
-            return this._contentRefreshed;
-        }
-        set contentRefreshed(ev) {
-            if (this._contentRefreshed_wrapped !== null) {
-                this.i.contentRefreshed = delegateRemove(this.i.contentRefreshed, this._contentRefreshed_wrapped);
-                this._contentRefreshed_wrapped = null;
-                this._contentRefreshed = null;
-            }
-            this._contentRefreshed = ev;
-            this._contentRefreshed_wrapped = (o, e) => {
-                let outerArgs = new IgcToolPanelContentRefreshedEventArgs();
-                outerArgs._provideImplementation(e);
-                if (this.beforeContentRefreshed) {
-                    this.beforeContentRefreshed(this, outerArgs);
-                }
-                if (this._contentRefreshed) {
-                    this._contentRefreshed(this, outerArgs);
-                }
-            };
-            this.i.contentRefreshed = delegateCombine(this.i.contentRefreshed, this._contentRefreshed_wrapped);
-            ;
-        }
-        get onCommand() {
-            return this._onCommand;
-        }
-        set onCommand(ev) {
-            if (this._onCommand_wrapped !== null) {
-                this.i.onCommand = delegateRemove(this.i.onCommand, this._onCommand_wrapped);
-                this._onCommand_wrapped = null;
-                this._onCommand = null;
-            }
-            this._onCommand = ev;
-            this._onCommand_wrapped = (o, e) => {
-                let outerArgs = new IgcToolCommandEventArgs();
-                outerArgs._provideImplementation(e);
-                if (this.beforeOnCommand) {
-                    this.beforeOnCommand(this, outerArgs);
-                }
-                if (this._onCommand) {
-                    this._onCommand(this, outerArgs);
-                }
-            };
-            this.i.onCommand = delegateCombine(this.i.onCommand, this._onCommand_wrapped);
-            ;
-        }
-    }
-    IgcToolPanelComponent._observedAttributesIgcToolPanelComponent = null;
-    IgcToolPanelComponent.htmlTagName = "igc-tool-panel";
-    IgcToolPanelComponent._isElementRegistered = false;
-    return IgcToolPanelComponent;
-})();
-export { IgcToolPanelComponent };