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

package/esm2022/lib/igc-toolbar-component.js

@@ -0,0 +1,1127 @@
+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 { Toolbar } from "./Toolbar";
+import { BaseControlTheme_$type } from "igniteui-webcomponents-core";
+import { ControlDisplayDensity_$type } from "igniteui-webcomponents-core";
+import { IgcHTMLElement } from "igniteui-webcomponents-core";
+import { SyncableObservableCollection$1 } from "igniteui-webcomponents-core";
+import { ToolbarOrientation_$type } from './ToolbarOrientation';
+import { ToolActionCollection as ToolActionCollection_internal } from "./ToolActionCollection";
+import { ToolAction } from "./ToolAction";
+import { IgcToolActionComponent } from "./igc-tool-action-component";
+import { IgcToolActionCollection } from "./igc-tool-action-collection";
+import { IgcToolCommandEventArgs } from './igc-tool-command-event-args';
+import { ToolCommandStateType_$type } from "igniteui-webcomponents-core";
+import { IgcToolbarSubMenuOpeningEventArgs } from './igc-toolbar-sub-menu-opening-event-args';
+import { IgcToolbarSubMenuClosingEventArgs } from './igc-toolbar-sub-menu-closing-event-args';
+import { ScrollbarStyle_$type } from "igniteui-webcomponents-core";
+class IgcToolbarComponent 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;
+    }
+    /**
+     * 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.combinedActions = [];
+        this._actions = null;
+        this._actionsAdapter = null;
+        this._disconnected = false;
+        this._settingAttributes = false;
+        this._attached = false;
+        this._queuedSetAttributes = [];
+        this._updatingFromAttribute = false;
+        this._autoGeneratedActions = null;
+        this._actualActions = null;
+        this.__p = null;
+        this._hasUserValues = new Set();
+        this._stylingContainer = null;
+        this._stylingParent = null;
+        this._inStyling = false;
+        this._onCommand = null;
+        this._onCommand_wrapped = null;
+        this._subMenuOpening = null;
+        this._subMenuOpening_wrapped = null;
+        this._subMenuClosing = null;
+        this._subMenuClosing_wrapped = null;
+        if (this._styling) {
+            NamePatcher.ensureStylablePatched(Object.getPrototypeOf(this));
+        }
+        this._implementation = this.createImplementation();
+        this._implementation.externalObject = this;
+        this._portalManager = new PortalManager("toolbarContent");
+        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.combinedActions, (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 Toolbar();
+    }
+    get i() {
+        return this._implementation;
+    }
+    disconnectedCallback() {
+        this._disconnected = true;
+    }
+    connectedCallback() {
+        if (this._disconnected) {
+            this._disconnected = false;
+            return;
+        }
+        this.classList.add("ig-toolbar");
+        this.classList.add("igc-toolbar");
+        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.combinedActions.length; i++) {
+            let s = this.combinedActions[i];
+            s._styling(this, this, this);
+        }
+        this.afterContentInit();
+    }
+    afterContentInit() {
+        this.i.notifySizeChanged();
+    }
+    /**
+     * Gets or sets a target component which the toolbar can request actions from.
+     */
+    get target() {
+        var ret = this.i.target;
+        if (!ret) {
+            return ret;
+        }
+        if (ret.externalObject != null) {
+            ret = ret.externalObject;
+        }
+        return ret;
+    }
+    set target(v) {
+        if (v && v._implementation) {
+            v = v._implementation;
+        }
+        this.i.target = v;
+    }
+    _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 { this._observedAttributesIgcToolbarComponent = null; }
+    static get observedAttributes() {
+        if (IgcToolbarComponent._observedAttributesIgcToolbarComponent == null) {
+            let names = getAllPropertyNames(IgcToolbarComponent);
+            for (let i = 0; i < names.length; i++) {
+                names[i] = toSpinal(names[i]);
+            }
+            IgcToolbarComponent._observedAttributesIgcToolbarComponent = names;
+        }
+        return IgcToolbarComponent._observedAttributesIgcToolbarComponent;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (this._settingAttributes) {
+            return;
+        }
+        let setName = fromSpinal(name);
+        this._updatingFromAttribute = true;
+        this[setName] = newValue;
+        this._updatingFromAttribute = false;
+    }
+    static { this.htmlTagName = "igc-toolbar"; }
+    static { this._isElementRegistered = false; }
+    static register() {
+        if (!IgcToolbarComponent._isElementRegistered) {
+            IgcToolbarComponent._isElementRegistered = true;
+            RegisterElementHelper.registerElement(IgcToolbarComponent.htmlTagName, IgcToolbarComponent);
+        }
+    }
+    /**
+ * Gets or sets the base built in theme to use for the checkbox.
+*/
+    get baseTheme() {
+        return this.i.x;
+    }
+    set baseTheme(v) {
+        this.i.x = ensureEnum(BaseControlTheme_$type, v);
+        this._a("baseTheme", enumToString(BaseControlTheme_$type, this.i.x));
+    }
+    /**
+     * Gets or sets the display density to use for the toolbar.
+    */
+    get density() {
+        return this.i.z;
+    }
+    set density(v) {
+        this.i.z = ensureEnum(ControlDisplayDensity_$type, v);
+        this._a("density", enumToString(ControlDisplayDensity_$type, this.i.z));
+    }
+    /**
+     * Gets or sets the data or data source instance to which to bind the grid.
+    */
+    get autoGeneratedActions() {
+        if (this._autoGeneratedActions === null) {
+            let coll = new IgcToolActionCollection();
+            let innerColl = this.i.autoGeneratedActions;
+            if (!innerColl) {
+                innerColl = new ToolActionCollection_internal();
+            }
+            this._autoGeneratedActions = coll._fromInner(innerColl);
+            this.i.autoGeneratedActions = innerColl;
+        }
+        return this._autoGeneratedActions;
+    }
+    set autoGeneratedActions(v) {
+        if (this._autoGeneratedActions !== null) {
+            this._autoGeneratedActions._setSyncTarget(null);
+            this._autoGeneratedActions = null;
+        }
+        let coll = new IgcToolActionCollection();
+        this._autoGeneratedActions = coll._fromOuter(v);
+        let syncColl = new SyncableObservableCollection$1(ToolAction.$type);
+        let innerColl = this.i.autoGeneratedActions;
+        if (!innerColl) {
+            innerColl = new ToolActionCollection_internal();
+        }
+        syncColl._inner = innerColl;
+        syncColl.clear();
+        this._autoGeneratedActions._setSyncTarget(syncColl);
+        this.i.autoGeneratedActions = innerColl;
+    }
+    /**
+     * Gets or sets the data or data source instance to which to bind the grid.
+    */
+    get actualActions() {
+        if (this._actualActions === null) {
+            let coll = new IgcToolActionCollection();
+            let innerColl = this.i.actualActions;
+            if (!innerColl) {
+                innerColl = new ToolActionCollection_internal();
+            }
+            this._actualActions = coll._fromInner(innerColl);
+            this.i.actualActions = innerColl;
+        }
+        return this._actualActions;
+    }
+    set actualActions(v) {
+        if (this._actualActions !== null) {
+            this._actualActions._setSyncTarget(null);
+            this._actualActions = null;
+        }
+        let coll = new IgcToolActionCollection();
+        this._actualActions = coll._fromOuter(v);
+        let syncColl = new SyncableObservableCollection$1(ToolAction.$type);
+        let innerColl = this.i.actualActions;
+        if (!innerColl) {
+            innerColl = new ToolActionCollection_internal();
+        }
+        syncColl._inner = innerColl;
+        syncColl.clear();
+        this._actualActions._setSyncTarget(syncColl);
+        this.i.actualActions = innerColl;
+    }
+    /**
+     * Gets or sets the orientation of the toolbar.
+    */
+    get orientation() {
+        return this.i.m;
+    }
+    set orientation(v) {
+        this.i.m = ensureEnum(ToolbarOrientation_$type, v);
+        this._a("orientation", enumToString(ToolbarOrientation_$type, this.i.m));
+    }
+    /**
+     * Gets or sets the color to use for the background of the component.
+    */
+    get backgroundColor() {
+        return brushToString(this.i.f1);
+    }
+    set backgroundColor(v) {
+        this.i.f1 = stringToBrush(v);
+        this._a("backgroundColor", brushToString(this.i.f1));
+    }
+    /**
+     * Gets or sets the background color for submenus.
+    */
+    get submenuBackgroundColor() {
+        return brushToString(this.i.gi);
+    }
+    set submenuBackgroundColor(v) {
+        this.i.gi = stringToBrush(v);
+        this._a("submenuBackgroundColor", brushToString(this.i.gi));
+    }
+    /**
+     * Gets or sets the group header background color.
+    */
+    get groupHeaderBackgroundColor() {
+        return brushToString(this.i.f9);
+    }
+    set groupHeaderBackgroundColor(v) {
+        this.i.f9 = stringToBrush(v);
+        this._a("groupHeaderBackgroundColor", brushToString(this.i.f9));
+    }
+    /**
+     * Gets or sets the separator background color.
+    */
+    get separatorBackgroundColor() {
+        return brushToString(this.i.gh);
+    }
+    set separatorBackgroundColor(v) {
+        this.i.gh = stringToBrush(v);
+        this._a("separatorBackgroundColor", brushToString(this.i.gh));
+    }
+    /**
+     * Gets or sets the hover background color.
+    */
+    get hoverBackgroundColor() {
+        return brushToString(this.i.gd);
+    }
+    set hoverBackgroundColor(v) {
+        this.i.gd = stringToBrush(v);
+        this._a("hoverBackgroundColor", brushToString(this.i.gd));
+    }
+    /**
+     * Gets or sets the color to use for the text of the component.
+    */
+    get textColor() {
+        return brushToString(this.i.gk);
+    }
+    set textColor(v) {
+        this.i.gk = stringToBrush(v);
+        this._a("textColor", brushToString(this.i.gk));
+    }
+    /**
+     * Gets or sets the color to use for the text in disabled tool actions.
+    */
+    get disabledTextColor() {
+        return brushToString(this.i.f7);
+    }
+    set disabledTextColor(v) {
+        this.i.f7 = stringToBrush(v);
+        this._a("disabledTextColor", brushToString(this.i.f7));
+    }
+    /**
+     * Gets or sets the text color for group header tool actions.
+    */
+    get groupHeaderTextColor() {
+        return brushToString(this.i.gb);
+    }
+    set groupHeaderTextColor(v) {
+        this.i.gb = stringToBrush(v);
+        this._a("groupHeaderTextColor", brushToString(this.i.gb));
+    }
+    /**
+     * Gets or sets the tooltip text color.
+    */
+    get toolTipTextColor() {
+        return brushToString(this.i.gm);
+    }
+    set toolTipTextColor(v) {
+        this.i.gm = stringToBrush(v);
+        this._a("toolTipTextColor", brushToString(this.i.gm));
+    }
+    /**
+     * Gets or sets the tooltip background color.
+    */
+    get toolTipBackgroundColor() {
+        return brushToString(this.i.gl);
+    }
+    set toolTipBackgroundColor(v) {
+        this.i.gl = stringToBrush(v);
+        this._a("toolTipBackgroundColor", brushToString(this.i.gl));
+    }
+    /**
+     * Gets or sets the tooltip corner radius.
+    */
+    get toolTipCornerRadius() {
+        return this.i.bp;
+    }
+    set toolTipCornerRadius(v) {
+        this.i.bp = +v;
+        this._a("toolTipCornerRadius", this.i.bp);
+    }
+    /**
+     * Gets or sets the shadow elevation for the tooltip.
+    */
+    get toolTipElevation() {
+        return this.i.bq;
+    }
+    set toolTipElevation(v) {
+        this.i.bq = +v;
+        this._a("toolTipElevation", this.i.bq);
+    }
+    /**
+     * Gets or sets the fill color of icons in the ToolPanel.
+    */
+    get iconFill() {
+        return brushToString(this.i.ge);
+    }
+    set iconFill(v) {
+        this.i.ge = stringToBrush(v);
+        this._a("iconFill", brushToString(this.i.ge));
+    }
+    /**
+     * Gets or sets the stroke color of icons in the ToolPanel.
+    */
+    get iconStroke() {
+        return brushToString(this.i.gf);
+    }
+    set iconStroke(v) {
+        this.i.gf = stringToBrush(v);
+        this._a("iconStroke", brushToString(this.i.gf));
+    }
+    /**
+     * Gets or sets the text style.
+    */
+    get cellTextStyle() {
+        if (this.i.af == null) {
+            return null;
+        }
+        return this.i.af.fontString;
+    }
+    set cellTextStyle(v) {
+        let fi = new FontInfo();
+        fi.fontString = v;
+        this.i.af = fi;
+        this._a("cellTextStyle", this.i.af != null ? this.i.af.fontString : "");
+    }
+    /**
+     * Gets or sets the text style for subtitles.
+    */
+    get subtitleTextStyle() {
+        if (this.i.aj == null) {
+            return null;
+        }
+        return this.i.aj.fontString;
+    }
+    set subtitleTextStyle(v) {
+        let fi = new FontInfo();
+        fi.fontString = v;
+        this.i.aj = fi;
+        this._a("subtitleTextStyle", this.i.aj != null ? this.i.aj.fontString : "");
+    }
+    /**
+     * Gets or sets the text style.
+    */
+    get groupHeaderTextStyle() {
+        if (this.i.ai == null) {
+            return null;
+        }
+        return this.i.ai.fontString;
+    }
+    set groupHeaderTextStyle(v) {
+        let fi = new FontInfo();
+        fi.fontString = v;
+        this.i.ai = fi;
+        this._a("groupHeaderTextStyle", this.i.ai != null ? this.i.ai.fontString : "");
+    }
+    /**
+     * Gets or sets the left padding for separators in the vertical orientation.
+    */
+    get separatorVerticalPaddingLeft() {
+        return this.i.bm;
+    }
+    set separatorVerticalPaddingLeft(v) {
+        this.i.bm = +v;
+        this._a("separatorVerticalPaddingLeft", this.i.bm);
+    }
+    /**
+     * Gets or sets the right padding for separators in the vertical orientation.
+    */
+    get separatorVerticalPaddingRight() {
+        return this.i.bn;
+    }
+    set separatorVerticalPaddingRight(v) {
+        this.i.bn = +v;
+        this._a("separatorVerticalPaddingRight", this.i.bn);
+    }
+    /**
+     * Gets or sets the top padding for separators in the vertical orientation.
+    */
+    get separatorVerticalPaddingTop() {
+        return this.i.bo;
+    }
+    set separatorVerticalPaddingTop(v) {
+        this.i.bo = +v;
+        this._a("separatorVerticalPaddingTop", this.i.bo);
+    }
+    /**
+     * Gets or sets the bottom padding for separators in the vertical orientation.
+    */
+    get separatorVerticalPaddingBottom() {
+        return this.i.bl;
+    }
+    set separatorVerticalPaddingBottom(v) {
+        this.i.bl = +v;
+        this._a("separatorVerticalPaddingBottom", this.i.bl);
+    }
+    /**
+     * Gets or sets the left padding for separators in the horizontal orientation.
+    */
+    get separatorHorizontalPaddingLeft() {
+        return this.i.bi;
+    }
+    set separatorHorizontalPaddingLeft(v) {
+        this.i.bi = +v;
+        this._a("separatorHorizontalPaddingLeft", this.i.bi);
+    }
+    /**
+     * Gets or sets the right padding for separators in the horizontal orientation.
+    */
+    get separatorHorizontalPaddingRight() {
+        return this.i.bj;
+    }
+    set separatorHorizontalPaddingRight(v) {
+        this.i.bj = +v;
+        this._a("separatorHorizontalPaddingRight", this.i.bj);
+    }
+    /**
+     * Gets or sets the top padding for separators in the horizontal orientation.
+    */
+    get separatorHorizontalPaddingTop() {
+        return this.i.bk;
+    }
+    set separatorHorizontalPaddingTop(v) {
+        this.i.bk = +v;
+        this._a("separatorHorizontalPaddingTop", this.i.bk);
+    }
+    /**
+     * Gets or sets the bottom padding for separators in the horizontal orientation.
+    */
+    get separatorHorizontalPaddingBottom() {
+        return this.i.bh;
+    }
+    set separatorHorizontalPaddingBottom(v) {
+        this.i.bh = +v;
+        this._a("separatorHorizontalPaddingBottom", this.i.bh);
+    }
+    /**
+     * Gets or sets if the tool actions should display their submenus on mouse hover.
+    */
+    get showOnHover() {
+        return this.i.aw;
+    }
+    set showOnHover(v) {
+        this.i.aw = ensureBool(v);
+        this._a("showOnHover", this.i.aw);
+    }
+    /**
+     * Gets or sets if the tool action icon buttons should display their tooltips on mouse hover.
+    */
+    get showTooltipOnHover() {
+        return this.i.ax;
+    }
+    set showTooltipOnHover(v) {
+        this.i.ax = ensureBool(v);
+        this._a("showTooltipOnHover", this.i.ax);
+    }
+    /**
+     * 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.bv;
+    }
+    set dropdownClickBuffer(v) {
+        this.i.bv = +v;
+        this._a("dropdownClickBuffer", this.i.bv);
+    }
+    get highlightWidth() {
+        return this.i.bg;
+    }
+    set highlightWidth(v) {
+        this.i.bg = +v;
+        this._a("highlightWidth", this.i.bg);
+    }
+    get highlightRadius() {
+        return this.i.bf;
+    }
+    set highlightRadius(v) {
+        this.i.bf = +v;
+        this._a("highlightRadius", this.i.bf);
+    }
+    get highlightColor() {
+        return brushToString(this.i.gc);
+    }
+    set highlightColor(v) {
+        this.i.gc = stringToBrush(v);
+        this._a("highlightColor", brushToString(this.i.gc));
+    }
+    get accentColor() {
+        return brushToString(this.i.f0);
+    }
+    set accentColor(v) {
+        this.i.f0 = stringToBrush(v);
+        this._a("accentColor", brushToString(this.i.f0));
+    }
+    /**
+     * Gets or sets the stroke color for all icon menu dropdown arrows.
+    */
+    get menuArrowStroke() {
+        return brushToString(this.i.gg);
+    }
+    set menuArrowStroke(v) {
+        this.i.gg = stringToBrush(v);
+        this._a("menuArrowStroke", brushToString(this.i.gg));
+    }
+    /**
+     * Gets or sets the background color of the radio when in the unchecked state.
+    */
+    get uncheckedBackgroundColor() {
+        return brushToString(this.i.gn);
+    }
+    set uncheckedBackgroundColor(v) {
+        this.i.gn = stringToBrush(v);
+        this._a("uncheckedBackgroundColor", brushToString(this.i.gn));
+    }
+    /**
+     * Gets or sets the background color of the radio when in the checked state.
+    */
+    get checkedBackgroundColor() {
+        return brushToString(this.i.f5);
+    }
+    set checkedBackgroundColor(v) {
+        this.i.f5 = stringToBrush(v);
+        this._a("checkedBackgroundColor", brushToString(this.i.f5));
+    }
+    /**
+     * Gets or sets the border color of the radio when in the unchecked state.
+    */
+    get uncheckedBorderColor() {
+        return brushToString(this.i.go);
+    }
+    set uncheckedBorderColor(v) {
+        this.i.go = stringToBrush(v);
+        this._a("uncheckedBorderColor", brushToString(this.i.go));
+    }
+    /**
+     * Gets or sets the border color of the radio when in the checked state.
+    */
+    get checkedBorderColor() {
+        return brushToString(this.i.f6);
+    }
+    set checkedBorderColor(v) {
+        this.i.f6 = stringToBrush(v);
+        this._a("checkedBorderColor", brushToString(this.i.f6));
+    }
+    /**
+     * Gets or sets the row height that should be used.
+    */
+    get rowHeight() {
+        return this.i.bz;
+    }
+    set rowHeight(v) {
+        this.i.bz = +v;
+        this._a("rowHeight", this.i.bz);
+    }
+    /**
+     * Gets or sets the height to use for the sub panel rows if different than default.
+    */
+    get subPanelRowHeight() {
+        return this.i.b0;
+    }
+    set subPanelRowHeight(v) {
+        this.i.b0 = +v;
+        this._a("subPanelRowHeight", this.i.b0);
+    }
+    /**
+     * Gets or sets the text color for subtitles.
+    */
+    get subtitleTextColor() {
+        return brushToString(this.i.gj);
+    }
+    set subtitleTextColor(v) {
+        this.i.gj = stringToBrush(v);
+        this._a("subtitleTextColor", brushToString(this.i.gj));
+    }
+    /**
+     * Gets or sets the text color for group header subtitles.
+    */
+    get groupHeaderSubtitleTextColor() {
+        return brushToString(this.i.ga);
+    }
+    set groupHeaderSubtitleTextColor(v) {
+        this.i.ga = stringToBrush(v);
+        this._a("groupHeaderSubtitleTextColor", brushToString(this.i.ga));
+    }
+    /**
+     * Gets or sets the dropdown delay time in milliseconds.
+    */
+    get dropdownDelay() {
+        return this.i.bw;
+    }
+    set dropdownDelay(v) {
+        this.i.bw = +v;
+        this._a("dropdownDelay", this.i.bw);
+    }
+    /**
+     * Prevents clicks on the tool actions from bubbling.
+    */
+    get stopPropagation() {
+        return this.i.ay;
+    }
+    set stopPropagation(v) {
+        this.i.ay = ensureBool(v);
+        this._a("stopPropagation", this.i.ay);
+    }
+    /**
+     * Gets or sets the style of scrollbar.
+    */
+    get scrollbarStyle() {
+        return this.i.v;
+    }
+    set scrollbarStyle(v) {
+        this.i.v = ensureEnum(ScrollbarStyle_$type, v);
+        this._a("scrollbarStyle", enumToString(ScrollbarStyle_$type, this.i.v));
+    }
+    /**
+     * Gets or sets the scrollbar background color for checkbox lists hosted in this toolbar's sub-menus.
+    */
+    get checkboxListScrollbarBackground() {
+        return brushToString(this.i.f3);
+    }
+    set checkboxListScrollbarBackground(v) {
+        this.i.f3 = stringToBrush(v);
+        this._a("checkboxListScrollbarBackground", brushToString(this.i.f3));
+    }
+    /**
+     * Gets or sets the scrollbar thumb hover background color for checkbox lists hosted in this toolbar's sub-menus.
+    */
+    get checkboxListScrollbarHoverBackground() {
+        return brushToString(this.i.f4);
+    }
+    set checkboxListScrollbarHoverBackground(v) {
+        this.i.f4 = stringToBrush(v);
+        this._a("checkboxListScrollbarHoverBackground", brushToString(this.i.f4));
+    }
+    /**
+     * Gets or sets the scrollbar thumb active (dragging) background color for checkbox lists hosted in this toolbar's sub-menus.
+    */
+    get checkboxListScrollbarActiveBackground() {
+        return brushToString(this.i.f2);
+    }
+    set checkboxListScrollbarActiveBackground(v) {
+        this.i.f2 = stringToBrush(v);
+        this._a("checkboxListScrollbarActiveBackground", brushToString(this.i.f2));
+    }
+    findByName(name) {
+        if (this.findEphemera) {
+            if (name && name.indexOf("@@e:") == 0) {
+                return this.findEphemera(name);
+            }
+        }
+        if (this.autoGeneratedActions != null && this.autoGeneratedActions.findByName && this.autoGeneratedActions.findByName(name)) {
+            return this.autoGeneratedActions.findByName(name);
+        }
+        if (this.actions != null && this.actions.findByName && this.actions.findByName(name)) {
+            return this.actions.findByName(name);
+        }
+        if (this.actualActions != null && this.actualActions.findByName && this.actualActions.findByName(name)) {
+            return this.actualActions.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("ToolbarComponent");
+        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;
+    }
+    flushRefresh() {
+        this.i.d9();
+    }
+    /**
+     * Is a dropdown menu or tooltip currently open.
+    
+    */
+    isOpen() {
+        let iv = this.i.av();
+        return (iv);
+    }
+    /**
+     * Get the desired size the toolbar wants to be.
+    
+    */
+    getDesiredSize() {
+        let iv = this.i.gq();
+        return fromSize(iv);
+    }
+    /**
+     * Forces any open sub menus to close.
+    
+    */
+    closeSubmenus() {
+        this.i.d6();
+    }
+    onCommandStateChanged(id, type, value) {
+        this.i.onCommandStateChanged(id, ensureEnum(ToolCommandStateType_$type, type), value);
+    }
+    registerIconFromText(iconCollection, iconName, iconText) {
+        this.i.eq(iconCollection, iconName, iconText);
+    }
+    getIconFromCache(iconCollection, iconName) {
+        let iv = this.i.cw(iconCollection, iconName);
+        return (iv);
+    }
+    registerMultiPathSVG(iconCollection, iconName, multiPathSVG) {
+        this.i.es(iconCollection, iconName, multiPathSVG);
+    }
+    getMultiPathSVGFromCache(iconCollection, iconName) {
+        let iv = this.i.a(iconCollection, iconName);
+        return (iv);
+    }
+    registerIconFromDataURL(iconCollection, iconName, dataURL) {
+        this.i.ep(iconCollection, iconName, dataURL);
+    }
+    getDataURLFromCache(iconCollection, iconName) {
+        let iv = this.i.cv(iconCollection, iconName);
+        return (iv);
+    }
+    registerIconSource(iconCollection, iconName, source) {
+        this.i.er(iconCollection, iconName, source);
+    }
+    getIconSource(iconCollection, iconName) {
+        let iv = this.i.ca(iconCollection, iconName);
+        return (iv);
+    }
+    setBrushContextItem(key, value) {
+        this.i.ev(key, stringToBrush(value));
+    }
+    getBrushContextItem(key) {
+        let iv = this.i.f8(key);
+        return brushToString(iv);
+    }
+    setBrushCollectionContextItem(key, value) {
+        this.i.eu(key, toBrushCollection(value));
+    }
+    getBrushCollectionContextItem(key) {
+        let iv = this.i.b(key);
+        return fromBrushCollection(iv);
+    }
+    setDoubleContextItem(key, value) {
+        this.i.ez(key, value);
+    }
+    getDoubleContextItem(key) {
+        let iv = this.i.bd(key);
+        return (iv);
+    }
+    setIntContextItem(key, value) {
+        this.i.e6(key, value);
+    }
+    getExternalDoubleContextItem(key) {
+        let iv = this.i.be(key);
+        return (iv);
+    }
+    setExternalDoubleContextItem(key, value) {
+        this.i.e4(key, value);
+    }
+    getIntContextItem(key) {
+        let iv = this.i.by(key);
+        return (iv);
+    }
+    setExternalIntContextItem(key, value) {
+        this.i.e5(key, value);
+    }
+    getExternalIntContextItem(key) {
+        let iv = this.i.bx(key);
+        return (iv);
+    }
+    setStringContextItem(key, value) {
+        this.i.e7(key, value);
+    }
+    getStringContextItem(key) {
+        let iv = this.i.cx(key);
+        return (iv);
+    }
+    setBoolContextItem(key, value) {
+        this.i.et(key, value);
+    }
+    getBoolContextItem(key) {
+        let iv = this.i.au(key);
+        return (iv);
+    }
+    setColorContextItem(key, value) {
+        this.i.ew(key, stringToColor(value));
+    }
+    getColorContextItem(key) {
+        let iv = this.i.gp(key);
+        return colorToString(iv);
+    }
+    setDataContextItem(key, value) {
+        this.i.ey(key, value);
+    }
+    getDataContextItem(key) {
+        let iv = this.i.b5(key);
+        return (iv);
+    }
+    setExternalDataContextItem(key, value) {
+        this.i.e3(key, value);
+    }
+    getExternalDataContextItem(key) {
+        let iv = this.i.b9(key);
+        return (iv);
+    }
+    /**
+     * Exports visual information about the current state of the grid.
+    
+    */
+    exportVisualData() {
+        let iv = this.i.b3();
+        return (iv);
+    }
+    /**
+     * Returns a serialized copy of the exported visual model
+    
+    */
+    exportSerializedVisualData() {
+        let iv = this.i.cu();
+        return (iv);
+    }
+    /**
+     * Event raised when a command is triggered in the toolbar.
+    */
+    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);
+        ;
+    }
+    /**
+     * Event raised when a submenu is opened on the toolbar.
+    */
+    get subMenuOpening() {
+        return this._subMenuOpening;
+    }
+    set subMenuOpening(ev) {
+        if (this._subMenuOpening_wrapped !== null) {
+            this.i.subMenuOpening = delegateRemove(this.i.subMenuOpening, this._subMenuOpening_wrapped);
+            this._subMenuOpening_wrapped = null;
+            this._subMenuOpening = null;
+        }
+        this._subMenuOpening = ev;
+        this._subMenuOpening_wrapped = (o, e) => {
+            let outerArgs = new IgcToolbarSubMenuOpeningEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeSubMenuOpening) {
+                this.beforeSubMenuOpening(this, outerArgs);
+            }
+            if (this._subMenuOpening) {
+                this._subMenuOpening(this, outerArgs);
+            }
+        };
+        this.i.subMenuOpening = delegateCombine(this.i.subMenuOpening, this._subMenuOpening_wrapped);
+        ;
+    }
+    /**
+     * Event raised when a submenu is closed on the toolbar
+    */
+    get subMenuClosing() {
+        return this._subMenuClosing;
+    }
+    set subMenuClosing(ev) {
+        if (this._subMenuClosing_wrapped !== null) {
+            this.i.subMenuClosing = delegateRemove(this.i.subMenuClosing, this._subMenuClosing_wrapped);
+            this._subMenuClosing_wrapped = null;
+            this._subMenuClosing = null;
+        }
+        this._subMenuClosing = ev;
+        this._subMenuClosing_wrapped = (o, e) => {
+            let outerArgs = new IgcToolbarSubMenuClosingEventArgs();
+            outerArgs._provideImplementation(e);
+            if (this.beforeSubMenuClosing) {
+                this.beforeSubMenuClosing(this, outerArgs);
+            }
+            if (this._subMenuClosing) {
+                this._subMenuClosing(this, outerArgs);
+            }
+        };
+        this.i.subMenuClosing = delegateCombine(this.i.subMenuClosing, this._subMenuClosing_wrapped);
+        ;
+    }
+}
+export { IgcToolbarComponent };