@syncfusion/ej2-ribbon 21.1.35

package/src/ribbon/models/ribbon-collection.js

@@ -0,0 +1,50 @@
+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, Collection, Property } from '@syncfusion/ej2-base';
+import { RibbonItem } from './ribbon-item';
+/**
+ * Defines the items of Ribbon.
+ */
+var RibbonCollection = /** @class */ (function (_super) {
+    __extends(RibbonCollection, _super);
+    function RibbonCollection() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * @param {Object} prop - Gets the property of collection.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    RibbonCollection.prototype.setProperties = function (prop, muteOnChange) {
+        _super.prototype.setProperties.call(this, prop, muteOnChange);
+    };
+    __decorate([
+        Property('')
+    ], RibbonCollection.prototype, "id", void 0);
+    __decorate([
+        Property('')
+    ], RibbonCollection.prototype, "cssClass", void 0);
+    __decorate([
+        Collection([], RibbonItem)
+    ], RibbonCollection.prototype, "items", void 0);
+    return RibbonCollection;
+}(ChildProperty));
+export { RibbonCollection };

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

@@ -0,0 +1,123 @@
+import { ChildProperty, Event, EmitType, Property } from '@syncfusion/ej2-base';import { ColorPickerMode, ChangeEventArgs, OpenEventArgs, PaletteTileEventArgs, BeforeOpenCloseEventArgs, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
+
+/**
+ * Interface for a class RibbonColorPickerSettings
+ */
+export interface RibbonColorPickerSettingsModel {
+
+    /**
+     * Defines the number of columns to be rendered in the color picker palette.
+     *
+     * @default 10
+     */
+    columns?: number;
+
+    /**
+     * Defines one or more CSS classes to customize the appearance of the color picker.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Defines whether to enable the opacity option in the color picker.
+     *
+     * @default true
+     */
+    enableOpacity?: boolean;
+
+    /**
+     * Defines the rendering mode of the color picker.
+     *
+     * @default 'Picker'
+     */
+    mode?: ColorPickerMode;
+
+    /**
+     * Defines whether to show / hide the mode switcher button in the color picker.
+     *
+     * @default true
+     */
+    modeSwitcher?: boolean;
+
+    /**
+     * Defines whether to enable / disable the palette section in the color picker.
+     *
+     * @default false
+     */
+    noColor?: boolean;
+
+    /**
+     * Defines the custom colors to load in the color picker palette.
+     *
+     * @default null
+     */
+    presetColors?: { [key: string]: string[] };
+
+    /**
+     * Defines whether to show / hide the control buttons (apply / cancel) in the color picker.
+     *
+     * @default true
+     */
+    showButtons?: boolean;
+
+    /**
+     * Specifies the value of the color picker.
+     * The value should be a valid hex color code.
+     *
+     * @default '#008000ff'
+     */
+    value?: string;
+
+    /**
+     * Event triggers before closing the ColorPicker popup.
+     *
+     * @event beforeClose
+     */
+    beforeClose?: EmitType<BeforeOpenCloseEventArgs>;
+
+    /**
+     * Event triggers before opening the ColorPicker popup.
+     *
+     * @event beforeOpen
+     */
+    beforeOpen?: EmitType<BeforeOpenCloseEventArgs>;
+
+    /**
+     * Event triggers while rendering each palette tile.
+     *
+     * @event beforeTileRender
+     */
+    beforeTileRender?: EmitType<PaletteTileEventArgs>;
+
+    /**
+     * Event triggers once the color picker is created.
+     *
+     * @event created
+     */
+    created?: EmitType<Event>;
+
+    /**
+     * Event triggers while changing the colors. It will be triggered based on the showButtons property.
+     * If the property is false, the event will be triggered while selecting the colors.
+     * If the property is true, the event will be triggered while apply the selected color.
+     *
+     * @event change
+     */
+    change?: EmitType<ChangeEventArgs>;
+
+    /**
+     * Event triggers while opening the ColorPicker popup.
+     *
+     * @event open
+     */
+    open?: EmitType<OpenEventArgs>;
+
+    /**
+     * Event triggers while selecting the color in picker / palette, when showButtons property is enabled.
+     *
+     * @event select
+     */
+    select?: EmitType<ColorPickerEventArgs>;
+
+}

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

@@ -0,0 +1,115 @@
+import { ChildProperty, EmitType } from '@syncfusion/ej2-base';
+import { ColorPickerMode, ChangeEventArgs, OpenEventArgs, PaletteTileEventArgs, BeforeOpenCloseEventArgs, ColorPickerEventArgs } from '@syncfusion/ej2-inputs';
+/**
+ * Defines the ribbon color picker.
+ */
+export declare class RibbonColorPickerSettings extends ChildProperty<RibbonColorPickerSettings> {
+    /**
+     * Defines the number of columns to be rendered in the color picker palette.
+     *
+     * @default 10
+     */
+    columns: number;
+    /**
+     * Defines one or more CSS classes to customize the appearance of the color picker.
+     *
+     * @default ''
+     */
+    cssClass: string;
+    /**
+     * Defines whether to enable the opacity option in the color picker.
+     *
+     * @default true
+     */
+    enableOpacity: boolean;
+    /**
+     * Defines the rendering mode of the color picker.
+     *
+     * @default 'Picker'
+     */
+    mode: ColorPickerMode;
+    /**
+     * Defines whether to show / hide the mode switcher button in the color picker.
+     *
+     * @default true
+     */
+    modeSwitcher: boolean;
+    /**
+     * Defines whether to enable / disable the palette section in the color picker.
+     *
+     * @default false
+     */
+    noColor: boolean;
+    /**
+     * Defines the custom colors to load in the color picker palette.
+     *
+     * @default null
+     */
+    presetColors: {
+        [key: string]: string[];
+    };
+    /**
+     * Defines whether to show / hide the control buttons (apply / cancel) in the color picker.
+     *
+     * @default true
+     */
+    showButtons: boolean;
+    /**
+     * Specifies the value of the color picker.
+     * The value should be a valid hex color code.
+     *
+     * @default '#008000ff'
+     */
+    value: string;
+    /**
+     * Event triggers before closing the ColorPicker popup.
+     *
+     * @event beforeClose
+     */
+    beforeClose: EmitType<BeforeOpenCloseEventArgs>;
+    /**
+     * Event triggers before opening the ColorPicker popup.
+     *
+     * @event beforeOpen
+     */
+    beforeOpen: EmitType<BeforeOpenCloseEventArgs>;
+    /**
+     * Event triggers while rendering each palette tile.
+     *
+     * @event beforeTileRender
+     */
+    beforeTileRender: EmitType<PaletteTileEventArgs>;
+    /**
+     * Event triggers once the color picker is created.
+     *
+     * @event created
+     */
+    created: EmitType<Event>;
+    /**
+     * Event triggers while changing the colors. It will be triggered based on the showButtons property.
+     * If the property is false, the event will be triggered while selecting the colors.
+     * If the property is true, the event will be triggered while apply the selected color.
+     *
+     * @event change
+     */
+    change: EmitType<ChangeEventArgs>;
+    /**
+     * Event triggers while opening the ColorPicker popup.
+     *
+     * @event open
+     */
+    open: EmitType<OpenEventArgs>;
+    /**
+     * Event triggers while selecting the color in picker / palette, when showButtons property is enabled.
+     *
+     * @event select
+     */
+    select: EmitType<ColorPickerEventArgs>;
+    /**
+     * @param {Object} prop - Gets the property of colorpicker.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    setProperties(prop: Object, muteOnChange: boolean): void;
+}

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

@@ -0,0 +1,88 @@
+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 color picker.
+ */
+var RibbonColorPickerSettings = /** @class */ (function (_super) {
+    __extends(RibbonColorPickerSettings, _super);
+    function RibbonColorPickerSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * @param {Object} prop - Gets the property of colorpicker.
+     * @param {boolean} muteOnChange - Gets the boolean value of muteOnChange.
+     * @returns {void}
+     * @private
+     */
+    RibbonColorPickerSettings.prototype.setProperties = function (prop, muteOnChange) {
+        _super.prototype.setProperties.call(this, prop, muteOnChange);
+    };
+    __decorate([
+        Property(10)
+    ], RibbonColorPickerSettings.prototype, "columns", void 0);
+    __decorate([
+        Property('')
+    ], RibbonColorPickerSettings.prototype, "cssClass", void 0);
+    __decorate([
+        Property(true)
+    ], RibbonColorPickerSettings.prototype, "enableOpacity", void 0);
+    __decorate([
+        Property('Picker')
+    ], RibbonColorPickerSettings.prototype, "mode", void 0);
+    __decorate([
+        Property(true)
+    ], RibbonColorPickerSettings.prototype, "modeSwitcher", void 0);
+    __decorate([
+        Property(false)
+    ], RibbonColorPickerSettings.prototype, "noColor", void 0);
+    __decorate([
+        Property(null)
+    ], RibbonColorPickerSettings.prototype, "presetColors", void 0);
+    __decorate([
+        Property(true)
+    ], RibbonColorPickerSettings.prototype, "showButtons", void 0);
+    __decorate([
+        Property('#008000ff')
+    ], RibbonColorPickerSettings.prototype, "value", void 0);
+    __decorate([
+        Event()
+    ], RibbonColorPickerSettings.prototype, "beforeClose", void 0);
+    __decorate([
+        Event()
+    ], RibbonColorPickerSettings.prototype, "beforeOpen", void 0);
+    __decorate([
+        Event()
+    ], RibbonColorPickerSettings.prototype, "beforeTileRender", void 0);
+    __decorate([
+        Event()
+    ], RibbonColorPickerSettings.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], RibbonColorPickerSettings.prototype, "change", void 0);
+    __decorate([
+        Event()
+    ], RibbonColorPickerSettings.prototype, "open", void 0);
+    __decorate([
+        Event()
+    ], RibbonColorPickerSettings.prototype, "select", void 0);
+    return RibbonColorPickerSettings;
+}(ChildProperty));
+export { RibbonColorPickerSettings };

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

@@ -0,0 +1,241 @@
+import { ChildProperty, Event, EmitType, Property, Complex } from '@syncfusion/ej2-base';import { BeforeOpenEventArgs, ChangeEventArgs, FieldSettings, FieldSettingsModel, FilteringEventArgs, FilterType, PopupEventArgs } from '@syncfusion/ej2-dropdowns';import { SelectEventArgs, SortOrder } from '@syncfusion/ej2-lists';
+
+/**
+ * Interface for a class RibbonComboBoxSettings
+ */
+export interface RibbonComboBoxSettingsModel {
+
+    /**
+     * Specifies whether to show the filter bar (search box) of the combobox.
+     * The filter action retrieves matched items through the filtering event based on the characters typed in the search TextBox.
+     * If no match is found, the value of the noRecordsTemplate property will be displayed.
+     *
+     * @default false
+     */
+    allowFiltering?: boolean;
+
+    /**
+     * Specifies whether to suggest a first matched item in input when searching.
+     * No action happens when no matches found.
+     *
+     * @default true
+     */
+    autofill?: boolean;
+
+    /**
+     * Defines the CSS class to customize the appearance of the combobox.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Defines the list of items to shown in the combobox.
+     *
+     * @default []
+     */
+    dataSource?: { [key: string]: Object }[] | string[] | number[] | boolean[];
+
+    /**
+     * Specifies the mapping for the columns of the data table bind to the combobox.
+     * * text - Maps the text column from data table for each list item.
+     * * value - Maps the value column from data table for each list item.
+     * * iconCss - Maps the icon class column from data table for each list item.
+     * * groupBy - Group the list items with it's related items by mapping groupBy field.
+     *
+     * @default {text: null, value: null, iconCss: null, groupBy: null}
+     */
+    fields?: FieldSettingsModel;
+
+    /**
+     * Specifies filter type to be considered on search action.
+     * The `FilterType` and its supported data types are
+     *
+     * <table>
+     * <tr>
+     * <td colSpan=1 rowSpan=1>
+     * FilterType<br/></td><td colSpan=1 rowSpan=1>
+     * Description<br/></td><td colSpan=1 rowSpan=1>
+     * Supported Types<br/></td></tr>
+     * <tr>
+     * <td colSpan=1 rowSpan=1>
+     * StartsWith<br/></td><td colSpan=1 rowSpan=1>
+     * Checks whether a value begins with the specified value.<br/></td><td colSpan=1 rowSpan=1>
+     * String<br/></td></tr>
+     * <tr>
+     * <td colSpan=1 rowSpan=1>
+     * EndsWith<br/></td><td colSpan=1 rowSpan=1>
+     * Checks whether a value ends with specified value.<br/><br/></td><td colSpan=1 rowSpan=1>
+     * <br/>String<br/></td></tr>
+     * <tr>
+     * <td colSpan=1 rowSpan=1>
+     * Contains<br/></td><td colSpan=1 rowSpan=1>
+     * Checks whether a value contains with specified value.<br/><br/></td><td colSpan=1 rowSpan=1>
+     * <br/>String<br/></td></tr>
+     * </table>
+     *
+     * @default Contains
+     */
+    filterType?: FilterType;
+
+    /**
+     * Specifies the template content for the footer container of the popup list.
+     *
+     * @default null
+     */
+    footerTemplate?: string;
+
+    /**
+     * Specifies the template content for the group headers present in the popup list.
+     *
+     * @default null
+     */
+    groupTemplate?: string;
+
+    /**
+     * Specifies the template content for the header container of the popup list.
+     *
+     * @default null
+     */
+    headerTemplate?: string;
+
+    /**
+     * Specifies the index of the selected item in the combobox.
+     *
+     * @default null
+     */
+    index?: number;
+
+    /**
+     * Specifies the template content for each list item present in the popup.
+     *
+     * @default null
+     */
+    itemTemplate?: string;
+
+    /**
+     * Specifies the template content for the popup list of combobox when no data is available.
+     *
+     * @default 'No records found'
+     */
+    noRecordsTemplate?: string;
+
+    /**
+     * Specifies a short hint that describes the expected value of the combobox.
+     *
+     * @default null
+     */
+    placeholder?: string;
+
+    /**
+     * Specifies the height of the popup list.
+     *
+     * @default '300px'
+     * @aspType string
+     */
+    popupHeight?: string | number;
+
+    /**
+     * Specifies the width of the popup list.
+     * By default, the popup width sets based on the width of the combobox.
+     *
+     * @default '100%'
+     * @aspType string
+     */
+    popupWidth?: string | number;
+
+    /**
+     * Specifies whether to show or hide the clear button.
+     * When the clear button is clicked, `value`, `text`, and `index` properties are reset to null.
+     *
+     * @default true
+     */
+    showClearButton?: boolean;
+
+    /**
+     * Specifies the order in which the data source needs to be sorted. The available type of sort orders are
+     * * `None` - The data source is not sorted.
+     * * `Ascending` - The data source is sorted in ascending order.
+     * * `Descending` - The data source is sorted in descending order.
+     *
+     * @default null
+     * @asptype object
+     * @aspjsonconverterignore
+     */
+    sortOrder?: SortOrder;
+
+    /**
+     * Defines the display text of the selected item in the combobox.
+     *
+     * @default null
+     *
+     */
+    text?: string;
+
+    /**
+     * Defines the value of the selected item in the combobox.
+     *
+     * @default null
+     * @isGenericType true
+     */
+    value?: number | string | boolean;
+
+    /**
+     * Specifies the width of the combobox.
+     * By default, the combobox width sets based on the width of its parent container.
+     *
+     * @default '150px'
+     * @aspType string
+     */
+    width?: string | number;
+
+    /**
+     * Event triggers before opening the popup.
+     *
+     * @event beforeOpen
+     */
+    beforeOpen?: EmitType<BeforeOpenEventArgs>;
+
+    /**
+     * Event triggers when an item in a popup is selected or when the model value is changed by user.
+     *
+     * @event change
+     */
+    change?: EmitType<ChangeEventArgs>;
+
+    /**
+     * Event triggers when the popup is closed.
+     *
+     * @event close
+     */
+    close?: EmitType<PopupEventArgs>;
+
+    /**
+     * Event triggers once the combobox is created.
+     *
+     * @event created
+     */
+    created?: EmitType<Event>;
+
+    /**
+     * Event triggers on typing a character in the combobox.
+     *
+     * @event filtering
+     */
+    filtering?: EmitType<FilteringEventArgs>;
+
+    /**
+     * Event triggers when the popup is opened
+     *
+     * @event open
+     */
+    open?: EmitType<PopupEventArgs>;
+
+    /**
+     * Event triggers when an item in the popup is selected.
+     *
+     * @event select
+     */
+    select?: EmitType<SelectEventArgs>;
+
+}