@syncfusion/ej2-ribbon 21.1.35

package/src/ribbon/items/ribbon-splitbutton.js

@@ -0,0 +1,227 @@
+import { EventHandler, getComponent, merge } from '@syncfusion/ej2-base';
+import { SplitButton } from '@syncfusion/ej2-splitbuttons';
+import { getItem, getItemElement, RibbonItemSize } from '../base/index';
+import { ITEM_VERTICAL_CENTER, RIBBON_CONTROL, RIBBON_HOVER, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, VERTICAL_DDB } from '../base/constant';
+/**
+ * Defines the items of Ribbon.
+ */
+var RibbonSplitButton = /** @class */ (function () {
+    function RibbonSplitButton(parent) {
+        this.parent = parent;
+    }
+    RibbonSplitButton.prototype.getModuleName = function () {
+        return 'ribbonSplitButton';
+    };
+    RibbonSplitButton.prototype.destroy = function () {
+        this.parent = null;
+    };
+    /**
+     * Creates SplitButton.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonSplitButton.prototype.createSplitButton = function (item, itemEle) {
+        var _this = this;
+        var buttonEle = this.parent.createElement('button', {
+            id: item.id
+        });
+        itemEle.appendChild(buttonEle);
+        var splitButtonSettings = item.splitButtonSettings;
+        var cssClass = (ITEM_VERTICAL_CENTER + SPACE + RIBBON_CONTROL + SPACE + (splitButtonSettings.cssClass ?
+            splitButtonSettings.cssClass : '')).trim();
+        var splitbutton = new SplitButton({
+            locale: this.parent.locale,
+            enableRtl: this.parent.enableRtl,
+            enablePersistence: this.parent.enablePersistence,
+            iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left',
+            closeActionEvents: splitButtonSettings.closeActionEvents,
+            cssClass: cssClass + ((item.activeSize === RibbonItemSize.Large) ? (SPACE + VERTICAL_DDB) : ''),
+            disabled: item.disabled,
+            iconCss: splitButtonSettings.iconCss,
+            items: splitButtonSettings.items,
+            target: splitButtonSettings.target,
+            beforeClose: splitButtonSettings.beforeClose,
+            beforeItemRender: splitButtonSettings.beforeItemRender,
+            beforeOpen: splitButtonSettings.beforeOpen,
+            close: function () {
+                splitbutton['wrapper'].classList.remove(RIBBON_POPUP_OPEN);
+                if (splitButtonSettings.close) {
+                    splitButtonSettings.close.call(_this);
+                }
+            },
+            created: splitButtonSettings.created,
+            open: function () {
+                splitbutton['wrapper'].classList.add(RIBBON_POPUP_OPEN);
+                if (splitButtonSettings.open) {
+                    splitButtonSettings.open.call(_this);
+                }
+            },
+            select: splitButtonSettings.select,
+            click: function (e) {
+                if (splitButtonSettings.click) {
+                    splitButtonSettings.click.call(_this, e);
+                }
+            }
+        }, buttonEle);
+        this.setContent(item, splitbutton);
+        var wrapper = splitbutton['wrapper'];
+        EventHandler.add(wrapper, 'mouseenter', function () { wrapper.classList.add(RIBBON_HOVER); }, this);
+        EventHandler.add(wrapper, 'mouseleave', function () { wrapper.classList.remove(RIBBON_HOVER); }, this);
+    };
+    /**
+     * Adds the additional event handlers as the item moved into overflow popup.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @param {DropDownButton} overflowButton - Gets the overflow button.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonSplitButton.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
+        var _this = this;
+        var splitButtonEle = itemEle.querySelector('#' + item.id);
+        var splitbutton = getComponent(splitButtonEle, SplitButton);
+        splitbutton.cssClass = splitbutton.cssClass + SPACE + RIBBON_POPUP_CONTROL;
+        splitbutton.dataBind();
+        splitbutton.click = function (e) {
+            if (item.splitButtonSettings.click) {
+                item.splitButtonSettings.click.call(_this, e);
+            }
+            overflowButton.toggle();
+        };
+        splitbutton.close = function (e) {
+            if (item.splitButtonSettings.close) {
+                item.splitButtonSettings.close.call(_this, e);
+            }
+            splitbutton['wrapper'].classList.remove(RIBBON_POPUP_OPEN);
+            overflowButton.toggle();
+        };
+    };
+    /**
+     * Removes the additional event handlers as the item moved from overflow popup.
+     *
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @param {HTMLElement} itemEle - Gets the ribbon item element.
+     * @param {DropDownButton} overflowButton - Gets the overflow button.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonSplitButton.prototype.removeOverFlowEvents = function (item, itemEle) {
+        var _this = this;
+        var splitButtonEle = itemEle.querySelector('#' + item.id);
+        var splitbutton = getComponent(splitButtonEle, SplitButton);
+        var cssClass = splitbutton.cssClass.split(SPACE);
+        cssClass = cssClass.filter(function (value) { return value !== RIBBON_POPUP_CONTROL; });
+        splitbutton.cssClass = cssClass.join(SPACE);
+        splitbutton.dataBind();
+        splitbutton.click = function (e) {
+            if (item.splitButtonSettings.click) {
+                item.splitButtonSettings.click.call(_this, e);
+            }
+        };
+        splitbutton.close = function (e) {
+            if (item.splitButtonSettings.close) {
+                item.splitButtonSettings.close.call(_this, e);
+            }
+            splitbutton['wrapper'].classList.remove(RIBBON_POPUP_OPEN);
+        };
+    };
+    RibbonSplitButton.prototype.setContent = function (item, control) {
+        control['primaryBtnObj'].setProperties({ content: (item.activeSize === RibbonItemSize.Medium) ? item.splitButtonSettings.content : '' });
+        control['secondaryBtnObj'].setProperties({ content: (item.activeSize === RibbonItemSize.Large) ? item.splitButtonSettings.content : '' });
+    };
+    RibbonSplitButton.prototype.getSplitButtonObj = function (controlId) {
+        var splitButtonEle = getItemElement(this.parent, controlId);
+        return getComponent(splitButtonEle, SplitButton);
+    };
+    /**
+     * Adds a new item to the menu. By default, new item appends to
+     * the list as the last item, but you can insert based on the text parameter.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {ItemModel[]} Items - Gets the SplitButton items.
+     * @param {string} text - Gets the text of the splitbutton item where the new item needs to be inserted.
+     * @returns {void}
+     */
+    RibbonSplitButton.prototype.addItems = function (controlId, Items, text) {
+        this.getSplitButtonObj(controlId).addItems(Items, text);
+    };
+    /**
+     * Removes the items from the menu.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @param {string[]} Items -
+     * @param {string} isUniqueId -
+     * @returns {void}
+     */
+    RibbonSplitButton.prototype.removeItems = function (controlId, Items, isUniqueId) {
+        this.getSplitButtonObj(controlId).removeItems(Items, isUniqueId);
+    };
+    /**
+     * To open/close SplitButton popup based on current state of the SplitButton.
+     *
+     * @param {string} controlId - Gets the control ID.
+     * @returns {void}
+     */
+    RibbonSplitButton.prototype.toggle = function (controlId) {
+        this.getSplitButtonObj(controlId).toggle();
+    };
+    /**
+     * Updates the splitbutton.
+     *
+     * @param {RibbonSplitButtonSettingsModel} prop - Gets the splitbutton property.
+     * @param {string} id - Gets the ID of dropdown.
+     * @returns {void}
+     */
+    RibbonSplitButton.prototype.updateSplitButton = function (prop, id) {
+        var itemProp = getItem(this.parent.tabs, id);
+        if (!itemProp) {
+            return;
+        }
+        merge(itemProp.item.splitButtonSettings, prop);
+        var btnEle = getItemElement(this.parent, id, itemProp);
+        if (!btnEle) {
+            return;
+        }
+        var control = getComponent(btnEle, SplitButton);
+        if (prop.cssClass) {
+            prop.cssClass = (RIBBON_CONTROL + SPACE + ITEM_VERTICAL_CENTER + SPACE + prop.cssClass).trim();
+            prop.cssClass = itemProp.item.activeSize === RibbonItemSize.Large ?
+                (VERTICAL_DDB + SPACE + prop.cssClass).trim() : prop.cssClass;
+            control.cssClass = prop.cssClass;
+        }
+        delete prop.open;
+        delete prop.click;
+        delete prop.close;
+        control.setProperties(prop);
+        if (prop.content) {
+            this.setContent(itemProp.item, control);
+        }
+    };
+    /**
+     * Updated SplitButton size
+     *
+     * @param {HTMLElement} element - Gets the splibutton element.
+     * @param {RibbonItemModel} item - Gets the ribbon item model.
+     * @returns {void}
+     * @hidden
+     */
+    RibbonSplitButton.prototype.updateSplitButtonSize = function (element, item) {
+        var control = getComponent(element, SplitButton);
+        var cssClass = control.cssClass.split(SPACE);
+        if (item.activeSize === RibbonItemSize.Large) {
+            cssClass.push(VERTICAL_DDB);
+        }
+        else {
+            cssClass = cssClass.filter(function (value) { return value !== VERTICAL_DDB; });
+        }
+        control.cssClass = cssClass.join(SPACE);
+        control.setProperties({ iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left' });
+        this.setContent(item, control);
+    };
+    return RibbonSplitButton;
+}());
+export { RibbonSplitButton };

package/src/ribbon/models/index.d.ts

@@ -0,0 +1,24 @@
+export * from './ribbon-tab';
+export * from './ribbon-group';
+export * from './ribbon-collection';
+export * from './ribbon-item';
+export * from './ribbon-button-settings';
+export * from './ribbon-checkbox-settings';
+export * from './ribbon-colorpicker-settings';
+export * from './ribbon-combobox-settings';
+export * from './ribbon-dropdown-settings';
+export * from './ribbon-splitbutton-settings';
+export * from './ribbon-file-menu-settings';
+export * from './ribbon-tooltip';
+export * from './ribbon-tooltip-model';
+export * from './ribbon-file-menu-settings-model';
+export * from './ribbon-tab-model';
+export * from './ribbon-group-model';
+export * from './ribbon-collection-model';
+export * from './ribbon-item-model';
+export * from './ribbon-button-settings-model';
+export * from './ribbon-checkbox-settings-model';
+export * from './ribbon-colorpicker-settings-model';
+export * from './ribbon-combobox-settings-model';
+export * from './ribbon-dropdown-settings-model';
+export * from './ribbon-splitbutton-settings-model';

package/src/ribbon/models/index.js

@@ -0,0 +1,13 @@
+// export * from './file-menu';
+export * from './ribbon-tab';
+export * from './ribbon-group';
+export * from './ribbon-collection';
+export * from './ribbon-item';
+export * from './ribbon-button-settings';
+export * from './ribbon-checkbox-settings';
+export * from './ribbon-colorpicker-settings';
+export * from './ribbon-combobox-settings';
+export * from './ribbon-dropdown-settings';
+export * from './ribbon-splitbutton-settings';
+export * from './ribbon-file-menu-settings';
+export * from './ribbon-tooltip';

package/src/ribbon/models/ribbon-button-settings-model.d.ts

@@ -0,0 +1,57 @@
+import { ChildProperty, Event, EmitType, Property } from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class RibbonButtonSettings
+ */
+export interface RibbonButtonSettingsModel {
+
+    /**
+     * Defines the content for the button.
+     *
+     * @default ''
+     */
+    content?: string;
+
+    /**
+     * Defines one or more CSS classes to customize the appearance of button.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Defines the CSS class for the icons to be shown in button.
+     *
+     * @default ''
+     */
+    iconCss?: string;
+
+    /**
+     * Defines whether the button is toggle button or not.
+     *
+     * @default false
+     */
+    isToggle?: boolean;
+
+    /**
+     * Defines whether the button is primary button or not.
+     *
+     * @default false
+     */
+    isPrimary?: boolean;
+
+    /**
+     * Event triggers once the button is created.
+     *
+     * @event created
+     */
+    created?: EmitType<Event>;
+
+    /**
+     * Event triggers when the button is clicked.
+     *
+     * @event clicked
+     */
+    clicked?: EmitType<Event>;
+
+}

package/src/ribbon/models/ribbon-button-settings.d.ts

@@ -0,0 +1,55 @@
+import { ChildProperty, EmitType } from '@syncfusion/ej2-base';
+/**
+ * Defines the ribbon button item.
+ */
+export declare class RibbonButtonSettings extends ChildProperty<RibbonButtonSettings> {
+    /**
+     * Defines the content for the button.
+     *
+     * @default ''
+     */
+    content: string;
+    /**
+     * Defines one or more CSS classes to customize the appearance of button.
+     *
+     * @default ''
+     */
+    cssClass: string;
+    /**
+     * Defines the CSS class for the icons to be shown in button.
+     *
+     * @default ''
+     */
+    iconCss: string;
+    /**
+     * Defines whether the button is toggle button or not.
+     *
+     * @default false
+     */
+    isToggle: boolean;
+    /**
+     * Defines whether the button is primary button or not.
+     *
+     * @default false
+     */
+    isPrimary: boolean;
+    /**
+     * Event triggers once the button is created.
+     *
+     * @event created
+     */
+    created: EmitType<Event>;
+    /**
+     * Event triggers when the button is clicked.
+     *
+     * @event clicked
+     */
+    clicked: EmitType<Event>;
+    /**
+     * @param {Object} prop - Gets the property of button.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    setProperties(prop: Object, muteOnChange: boolean): void;
+}

package/src/ribbon/models/ribbon-button-settings.js

@@ -0,0 +1,61 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ChildProperty, Event, Property } from '@syncfusion/ej2-base';
+/**
+ * Defines the ribbon button item.
+ */
+var RibbonButtonSettings = /** @class */ (function (_super) {
+    __extends(RibbonButtonSettings, _super);
+    function RibbonButtonSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * @param {Object} prop - Gets the property of button.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    RibbonButtonSettings.prototype.setProperties = function (prop, muteOnChange) {
+        _super.prototype.setProperties.call(this, prop, muteOnChange);
+    };
+    __decorate([
+        Property('')
+    ], RibbonButtonSettings.prototype, "content", void 0);
+    __decorate([
+        Property('')
+    ], RibbonButtonSettings.prototype, "cssClass", void 0);
+    __decorate([
+        Property('')
+    ], RibbonButtonSettings.prototype, "iconCss", void 0);
+    __decorate([
+        Property(false)
+    ], RibbonButtonSettings.prototype, "isToggle", void 0);
+    __decorate([
+        Property(false)
+    ], RibbonButtonSettings.prototype, "isPrimary", void 0);
+    __decorate([
+        Event()
+    ], RibbonButtonSettings.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], RibbonButtonSettings.prototype, "clicked", void 0);
+    return RibbonButtonSettings;
+}(ChildProperty));
+export { RibbonButtonSettings };

package/src/ribbon/models/ribbon-checkbox-settings-model.d.ts

@@ -0,0 +1,50 @@
+import { ChildProperty, Event, EmitType, Property } from '@syncfusion/ej2-base';import { LabelPosition, ChangeEventArgs } from '@syncfusion/ej2-buttons';
+
+/**
+ * Interface for a class RibbonCheckBoxSettings
+ */
+export interface RibbonCheckBoxSettingsModel {
+
+    /**
+     * Defines the whether the checkbox is checked or not.
+     *
+     * @default false
+     */
+    checked?: boolean;
+
+    /**
+     * Defines one or more CSS classes to customize the appearance of checkbox.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Defines the label for the checkbox.
+     *
+     * @default ''
+     */
+    label?: string;
+
+    /**
+     * Defines whether the label is position `After` or `Before` the checkbox.
+     *
+     * @default 'After'
+     */
+    labelPosition?: LabelPosition;
+
+    /**
+     * Event triggers once the checkbox is created.
+     *
+     * @event created
+     */
+    created?: EmitType<Event>;
+
+    /**
+     * Event triggers when the checkbox state is changed.
+     *
+     * @event change
+     */
+    change?: EmitType<ChangeEventArgs>;
+
+}

package/src/ribbon/models/ribbon-checkbox-settings.d.ts

@@ -0,0 +1,50 @@
+import { ChildProperty, EmitType } from '@syncfusion/ej2-base';
+import { LabelPosition, ChangeEventArgs } from '@syncfusion/ej2-buttons';
+/**
+ * Defines the ribbon checkbox item.
+ */
+export declare class RibbonCheckBoxSettings extends ChildProperty<RibbonCheckBoxSettings> {
+    /**
+     * Defines the whether the checkbox is checked or not.
+     *
+     * @default false
+     */
+    checked: boolean;
+    /**
+     * Defines one or more CSS classes to customize the appearance of checkbox.
+     *
+     * @default ''
+     */
+    cssClass: string;
+    /**
+     * Defines the label for the checkbox.
+     *
+     * @default ''
+     */
+    label: string;
+    /**
+     * Defines whether the label is position `After` or `Before` the checkbox.
+     *
+     * @default 'After'
+     */
+    labelPosition: LabelPosition;
+    /**
+     * Event triggers once the checkbox is created.
+     *
+     * @event created
+     */
+    created: EmitType<Event>;
+    /**
+     * Event triggers when the checkbox state is changed.
+     *
+     * @event change
+     */
+    change: EmitType<ChangeEventArgs>;
+    /**
+     * @param {Object} prop - Gets the property of checkbox.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    setProperties(prop: Object, muteOnChange: boolean): void;
+}

package/src/ribbon/models/ribbon-checkbox-settings.js

@@ -0,0 +1,58 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ChildProperty, Event, Property } from '@syncfusion/ej2-base';
+/**
+ * Defines the ribbon checkbox item.
+ */
+var RibbonCheckBoxSettings = /** @class */ (function (_super) {
+    __extends(RibbonCheckBoxSettings, _super);
+    function RibbonCheckBoxSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * @param {Object} prop - Gets the property of checkbox.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    RibbonCheckBoxSettings.prototype.setProperties = function (prop, muteOnChange) {
+        _super.prototype.setProperties.call(this, prop, muteOnChange);
+    };
+    __decorate([
+        Property(false)
+    ], RibbonCheckBoxSettings.prototype, "checked", void 0);
+    __decorate([
+        Property('')
+    ], RibbonCheckBoxSettings.prototype, "cssClass", void 0);
+    __decorate([
+        Property('')
+    ], RibbonCheckBoxSettings.prototype, "label", void 0);
+    __decorate([
+        Property('After')
+    ], RibbonCheckBoxSettings.prototype, "labelPosition", void 0);
+    __decorate([
+        Event()
+    ], RibbonCheckBoxSettings.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], RibbonCheckBoxSettings.prototype, "change", void 0);
+    return RibbonCheckBoxSettings;
+}(ChildProperty));
+export { RibbonCheckBoxSettings };

package/src/ribbon/models/ribbon-collection-model.d.ts

@@ -0,0 +1,30 @@
+import { ChildProperty, Collection, Property } from '@syncfusion/ej2-base';import { RibbonItem } from './ribbon-item';import { RibbonItemModel } from './ribbon-item-model';
+
+/**
+ * Interface for a class RibbonCollection
+ */
+export interface RibbonCollectionModel {
+
+    /**
+     * Defines a unique identifier for the collection.
+     *
+     * @default ''
+     */
+    id?: string;
+
+    /**
+     * Defines one or more CSS classes to customize the appearance of collection.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Defines the list of ribbon items.
+     *
+     * @default []
+     * @aspType List<RibbonItem>
+     */
+    items?: RibbonItemModel[];
+
+}

package/src/ribbon/models/ribbon-collection.d.ts

@@ -0,0 +1,33 @@
+import { ChildProperty } from '@syncfusion/ej2-base';
+import { RibbonItemModel } from './ribbon-item-model';
+/**
+ * Defines the items of Ribbon.
+ */
+export declare class RibbonCollection extends ChildProperty<RibbonCollection> {
+    /**
+     * Defines a unique identifier for the collection.
+     *
+     * @default ''
+     */
+    id: string;
+    /**
+     * Defines one or more CSS classes to customize the appearance of collection.
+     *
+     * @default ''
+     */
+    cssClass: string;
+    /**
+     * Defines the list of ribbon items.
+     *
+     * @default []
+     * @aspType List<RibbonItem>
+     */
+    items: RibbonItemModel[];
+    /**
+     * @param {Object} prop - Gets the property of collection.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    setProperties(prop: Object, muteOnChange: boolean): void;
+}