@syncfusion/ej2-navigations 16.4.45 → 16.4.52-46585

package/src/appbar/appbar-model.d.ts

@@ -0,0 +1,76 @@
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Event, EmitType } from '@syncfusion/ej2-base';import { addClass, removeClass, isNullOrUndefined } from '@syncfusion/ej2-base';
+import {AppBarMode,AppBarPosition,AppBarColor} from "./appbar";
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class AppBar
+ */
+export interface AppBarModel extends ComponentModel{
+
+    /**
+     * Specifies the mode of the AppBar that defines the AppBar height. The possible values for this property are as follows:
+     * * `Regular`: Specifies default height for the AppBar.
+     * * `Prominent`: Specifies longer height for the AppBar to show the longer titles and images, or to provide a stronger presence.
+     * * `Dense`: Specifies compressed (short) height for the AppBar to accommodate all the app bar content in a denser layout.
+     *
+     * @default 'Regular'
+     */
+    mode?: AppBarMode;
+
+    /**
+     * Specifies the position of the AppBar. The possible values for this property are as follows:
+     * * `Top`: Position the AppBar at the top.
+     * * `Bottom`: Position the AppBar at the bottom.
+     *
+     * @default 'Top'
+     */
+    position?: AppBarPosition;
+
+    /**
+     * Accepts single/multiple CSS classes (separated by a space) to be used for AppBar customization.
+     *
+     * @default null
+     */
+    cssClass?: string;
+
+    /**
+     * Defines whether the AppBar position is fixed or not while scrolling the page.
+     * When set to `true`, the AppBar will be sticky while scrolling.
+     *
+     * @default false
+     */
+    isSticky?: boolean;
+
+    /**
+     * Accepts HTML attributes/custom attributes that will be applied to the AppBar element.
+     *
+     * @default null
+     */
+    htmlAttributes?: Record<string, string>;
+
+    /**
+     * Specifies the color mode that defines the color of the AppBar component. The possible values for this property are as follows:
+     * * `Light`: Specifies the AppBar in light color.
+     * * `Dark`: Specifies the AppBar in dark color.
+     * * `Primary`: Specifies the AppBar in a primary color.
+     * * `Inherit`: Inherit color from parent for AppBar. AppBar background and colors are inherited from its parent element.
+     *
+     * @default 'Light'
+     */
+    colorMode?: AppBarColor;
+
+    /**
+     * Triggers after the AppBar component is created.
+     *
+     * @event created
+     */
+    created?: EmitType<Event>;
+
+    /**
+     * Triggers when the AppBar component is destroyed.
+     *
+     * @event destroyed
+     */
+    destroyed?: EmitType<Event>;
+
+}

package/src/appbar/appbar.d.ts

@@ -0,0 +1,115 @@
+import { Component, INotifyPropertyChanged, EmitType } from '@syncfusion/ej2-base';
+import { AppBarModel } from './appbar-model';
+/**
+ * Specifies the height mode of the AppBar component which defines the height of the AppBar.
+ * ```props
+ * Regular :- Specifies default height for the AppBar.
+ * Prominent :- Specifies longer height for the AppBar to show the longer titles and images, or to provide a stronger presence.
+ * Dense :- Specifies compressed (short) height for the AppBar to accommodate all the app bar content in a denser layout.
+ * ```
+ */
+export declare type AppBarMode = 'Regular' | 'Prominent' | 'Dense';
+/**
+ * Specifies the position of the AppBar.
+ * ```props
+ * Top :- Position the AppBar at the top.
+ * Bottom :- Position the AppBar at the bottom.
+ * ```
+ */
+export declare type AppBarPosition = 'Top' | 'Bottom';
+/**
+ * Specifies the color of the AppBar component.
+ * ```props
+ * Light :- Specifies the AppBar in light color.
+ * Dark :- Specifies the AppBar in dark color.
+ * Primary :- Specifies the AppBar in a primary color.
+ * Inherit :- Inherit color from parent for AppBar. AppBar background and colors are inherited from its parent element.
+ * ```
+ */
+export declare type AppBarColor = 'Light' | 'Dark' | 'Primary' | 'Inherit';
+/**
+ * The AppBar displays the information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions.
+ * Support to inherit colors from AppBar provided to <c>Button</c>, <c>DropDownButton</c>, <c>Menu</c> and <c>TextBox</c>.
+ * Set <c>CssClass</c> property with <code>e-inherit</code> CSS class to inherit the background and color from AppBar.
+ */
+export declare class AppBar extends Component<HTMLElement> implements INotifyPropertyChanged {
+    /**
+     * Specifies the mode of the AppBar that defines the AppBar height. The possible values for this property are as follows:
+     * * `Regular`: Specifies default height for the AppBar.
+     * * `Prominent`: Specifies longer height for the AppBar to show the longer titles and images, or to provide a stronger presence.
+     * * `Dense`: Specifies compressed (short) height for the AppBar to accommodate all the app bar content in a denser layout.
+     *
+     * @default 'Regular'
+     */
+    mode: AppBarMode;
+    /**
+     * Specifies the position of the AppBar. The possible values for this property are as follows:
+     * * `Top`: Position the AppBar at the top.
+     * * `Bottom`: Position the AppBar at the bottom.
+     *
+     * @default 'Top'
+     */
+    position: AppBarPosition;
+    /**
+     * Accepts single/multiple CSS classes (separated by a space) to be used for AppBar customization.
+     *
+     * @default null
+     */
+    cssClass: string;
+    /**
+     * Defines whether the AppBar position is fixed or not while scrolling the page.
+     * When set to `true`, the AppBar will be sticky while scrolling.
+     *
+     * @default false
+     */
+    isSticky: boolean;
+    /**
+     * Accepts HTML attributes/custom attributes that will be applied to the AppBar element.
+     *
+     * @default null
+     */
+    htmlAttributes: Record<string, string>;
+    /**
+     * Specifies the color mode that defines the color of the AppBar component. The possible values for this property are as follows:
+     * * `Light`: Specifies the AppBar in light color.
+     * * `Dark`: Specifies the AppBar in dark color.
+     * * `Primary`: Specifies the AppBar in a primary color.
+     * * `Inherit`: Inherit color from parent for AppBar. AppBar background and colors are inherited from its parent element.
+     *
+     * @default 'Light'
+     */
+    colorMode: AppBarColor;
+    /**
+     * Triggers after the AppBar component is created.
+     *
+     * @event created
+     */
+    created: EmitType<Event>;
+    /**
+     * Triggers when the AppBar component is destroyed.
+     *
+     * @event destroyed
+     */
+    destroyed: EmitType<Event>;
+    /**
+     * Constructor for creating the AppBar widget
+     *
+     * @param {AppBarModel} options Accepts the AppBar model properties to initiate the rendering
+     * @param {string | HTMLElement} element Accepts the DOM element reference
+     */
+    constructor(options?: AppBarModel, element?: string | HTMLElement);
+    /**
+     * Removes the control from the DOM and also removes all its related events.
+     *
+     * @returns {void}
+     */
+    destroy(): void;
+    protected getModuleName(): string;
+    protected getPersistData(): string;
+    protected preRender(): void;
+    protected render(): void;
+    onPropertyChanged(newProp: AppBarModel, oldProp: AppBarModel): void;
+    private setHtmlAttributes;
+    private setHeightMode;
+    private setColorMode;
+}

package/src/appbar/appbar.js

@@ -0,0 +1,220 @@
+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 { Component, NotifyPropertyChanges, Property, Event } from '@syncfusion/ej2-base';
+import { addClass, removeClass, isNullOrUndefined } from '@syncfusion/ej2-base';
+// Constant variables
+var CLS_APPBAR = 'e-appbar';
+var CLS_HORIZONTAL_BOTTOM = 'e-horizontal-bottom';
+var CLS_STICKY = 'e-sticky';
+var CLS_PROMINENT = 'e-prominent';
+var CLS_DENSE = 'e-dense';
+var CLS_RTL = 'e-rtl';
+var CLS_LIGHT = 'e-light';
+var CLS_DARK = 'e-dark';
+var CLS_PRIMARY = 'e-primary';
+var CLS_INHERIT = 'e-inherit';
+/**
+ * The AppBar displays the information and actions related to the current application screen. It is used to show branding, screen titles, navigation, and actions.
+ * Support to inherit colors from AppBar provided to <c>Button</c>, <c>DropDownButton</c>, <c>Menu</c> and <c>TextBox</c>.
+ * Set <c>CssClass</c> property with <code>e-inherit</code> CSS class to inherit the background and color from AppBar.
+ */
+var AppBar = /** @class */ (function (_super) {
+    __extends(AppBar, _super);
+    /**
+     * Constructor for creating the AppBar widget
+     *
+     * @param {AppBarModel} options Accepts the AppBar model properties to initiate the rendering
+     * @param {string | HTMLElement} element Accepts the DOM element reference
+     */
+    function AppBar(options, element) {
+        return _super.call(this, options, element) || this;
+    }
+    /**
+     * Removes the control from the DOM and also removes all its related events.
+     *
+     * @returns {void}
+     */
+    AppBar.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+        this.element.classList.remove(CLS_APPBAR);
+        this.element.removeAttribute('style');
+        this.element.removeAttribute('role');
+    };
+    AppBar.prototype.getModuleName = function () {
+        return 'appbar';
+    };
+    AppBar.prototype.getPersistData = function () {
+        return this.addOnPersist([]);
+    };
+    AppBar.prototype.preRender = function () {
+        // pre render code
+    };
+    AppBar.prototype.render = function () {
+        if (this.element.tagName !== 'HEADER') {
+            this.element.setAttribute('role', 'header');
+        }
+        if (this.cssClass) {
+            addClass([this.element], this.cssClass.split(' '));
+        }
+        if (this.position === 'Bottom') {
+            this.element.classList.add(CLS_HORIZONTAL_BOTTOM);
+        }
+        if (this.isSticky) {
+            this.element.classList.add(CLS_STICKY);
+        }
+        if (this.enableRtl) {
+            this.element.classList.add(CLS_RTL);
+        }
+        this.setHeightMode();
+        this.setColorMode();
+        if (!isNullOrUndefined(this.htmlAttributes)) {
+            this.setHtmlAttributes(this.htmlAttributes, this.element);
+        }
+    };
+    AppBar.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'mode':
+                    removeClass([this.element], [CLS_DENSE, CLS_PROMINENT]);
+                    this.setHeightMode();
+                    break;
+                case 'position':
+                    if (this.position === 'Bottom') {
+                        addClass([this.element], CLS_HORIZONTAL_BOTTOM);
+                    }
+                    else {
+                        removeClass([this.element], CLS_HORIZONTAL_BOTTOM);
+                    }
+                    break;
+                case 'cssClass':
+                    if (oldProp.cssClass) {
+                        removeClass([this.element], oldProp.cssClass.split(' '));
+                    }
+                    if (newProp.cssClass) {
+                        addClass([this.element], newProp.cssClass.split(' '));
+                    }
+                    break;
+                case 'isSticky':
+                    if (this.isSticky) {
+                        addClass([this.element], CLS_STICKY);
+                    }
+                    else {
+                        removeClass([this.element], CLS_STICKY);
+                    }
+                    break;
+                case 'htmlAttributes':
+                    if (!isNullOrUndefined(this.htmlAttributes)) {
+                        if (!isNullOrUndefined(oldProp.htmlAttributes)) {
+                            var keys = Object.keys(oldProp.htmlAttributes);
+                            for (var _b = 0, keys_1 = keys; _b < keys_1.length; _b++) {
+                                var key = keys_1[_b];
+                                if (key === 'class') {
+                                    removeClass([this.element], oldProp.htmlAttributes["" + key]);
+                                }
+                                else {
+                                    this.element.removeAttribute(key);
+                                }
+                            }
+                        }
+                        this.setHtmlAttributes(newProp.htmlAttributes, this.element);
+                    }
+                    break;
+                case 'colorMode':
+                    removeClass([this.element], [CLS_DARK, CLS_PRIMARY, CLS_INHERIT, CLS_LIGHT]);
+                    this.setColorMode();
+                    break;
+                case 'enableRtl':
+                    if (this.enableRtl) {
+                        addClass([this.element], CLS_RTL);
+                    }
+                    else {
+                        removeClass([this.element], CLS_RTL);
+                    }
+                    break;
+            }
+        }
+    };
+    AppBar.prototype.setHtmlAttributes = function (attribute, element) {
+        var keys = Object.keys(attribute);
+        for (var _i = 0, keys_2 = keys; _i < keys_2.length; _i++) {
+            var key = keys_2[_i];
+            if (key === 'class') {
+                addClass([element], attribute["" + key]);
+            }
+            else {
+                element.setAttribute(key, attribute["" + key]);
+            }
+        }
+    };
+    AppBar.prototype.setHeightMode = function () {
+        if (this.mode === 'Prominent') {
+            this.element.classList.add(CLS_PROMINENT);
+        }
+        else if (this.mode === 'Dense') {
+            this.element.classList.add(CLS_DENSE);
+        }
+    };
+    AppBar.prototype.setColorMode = function () {
+        switch (this.colorMode) {
+            case 'Light':
+                this.element.classList.add(CLS_LIGHT);
+                break;
+            case 'Dark':
+                this.element.classList.add(CLS_DARK);
+                break;
+            case 'Primary':
+                this.element.classList.add(CLS_PRIMARY);
+                break;
+            case 'Inherit':
+                this.element.classList.add(CLS_INHERIT);
+                break;
+        }
+    };
+    __decorate([
+        Property('Regular')
+    ], AppBar.prototype, "mode", void 0);
+    __decorate([
+        Property('Top')
+    ], AppBar.prototype, "position", void 0);
+    __decorate([
+        Property()
+    ], AppBar.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], AppBar.prototype, "isSticky", void 0);
+    __decorate([
+        Property()
+    ], AppBar.prototype, "htmlAttributes", void 0);
+    __decorate([
+        Property('Light')
+    ], AppBar.prototype, "colorMode", void 0);
+    __decorate([
+        Event()
+    ], AppBar.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], AppBar.prototype, "destroyed", void 0);
+    AppBar = __decorate([
+        NotifyPropertyChanges
+    ], AppBar);
+    return AppBar;
+}(Component));
+export { AppBar };

package/src/appbar/index.d.ts

@@ -0,0 +1,3 @@
+/** AppBar export modules */
+export * from './appbar';
+export * from './appbar-model';

package/src/appbar/index.js

@@ -0,0 +1,2 @@
+/** AppBar export modules */
+export * from './appbar';

package/src/breadcrumb/breadcrumb-model.d.ts

@@ -0,0 +1,161 @@
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty, Property, Collection, append, extend, Event, EmitType, BaseEventArgs, EventHandler, closest, addClass, removeClass, detach, remove } from '@syncfusion/ej2-base';import { ListBase, ListBaseOptions } from '@syncfusion/ej2-lists';import { Popup } from '@syncfusion/ej2-popups';
+import {BreadcrumbOverflowMode,BreadcrumbBeforeItemRenderEventArgs,BreadcrumbClickEventArgs} from "./breadcrumb";
+import {ComponentModel} from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class BreadcrumbItem
+ */
+export interface BreadcrumbItemModel {
+
+    /**
+     * Specifies the text content of the Breadcrumb item.
+     *
+     * @default ''
+     */
+    text?: string;
+
+    /**
+     * Specifies the Url of the Breadcrumb item that will be activated when clicked.
+     *
+     * @default ''
+     */
+    url?: string;
+
+    /**
+     * Defines a class/multiple classes separated by a space for the item that is used to include an icon.
+     *
+     * @default null
+     */
+    iconCss?: string;
+
+    /**
+     * Enable or disable the breadcrumb item, when set to true, the breadcrumb item will be disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+}
+
+/**
+ * Interface for a class Breadcrumb
+ */
+export interface BreadcrumbModel extends ComponentModel{
+
+    /**
+     * Defines the Url based on which the Breadcrumb items are generated.
+     *
+     * @default ''
+     */
+    url?: string;
+
+    /**
+     * Defines the list of Breadcrumb items.
+     *
+     * @default []
+     */
+    items?: BreadcrumbItemModel[];
+
+    /**
+     * Specifies the Url of the active Breadcrumb item.
+     *
+     * @default ''
+     */
+    activeItem?: string;
+
+    /**
+     * Specifies an integer to enable overflow behavior when the Breadcrumb items count exceeds and it is based on the overflowMode property.
+     *
+     * @default -1
+     * @aspType int
+     */
+    maxItems?: number;
+
+    /**
+     * Specifies the overflow mode of the Breadcrumb item when it exceeds maxItems count. The possible values are,
+     * - Default: Specified maxItems count will be visible and the remaining items will be hidden. While clicking on the previous item, the hidden item will become visible.
+     * - Collapsed: Only the first and last items will be visible, and the remaining items will be hidden in the collapsed icon. When the collapsed icon is clicked, all items become visible.
+     * - Menu: Shows the number of breadcrumb items that can be accommodated within the container space, and creates a sub menu with the remaining items.
+     * - Wrap: Wraps the items on multiple lines when the Breadcrumb’s width exceeds the container space.
+     * - Scroll: Shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.
+     * - None: Shows all the items on a single line.
+     *
+     * @isenumeration true
+     * @default BreadcrumbOverflowMode.Menu
+     * @asptype BreadcrumbOverflowMode
+     */
+    overflowMode?: string | BreadcrumbOverflowMode;
+
+    /**
+     * Defines class/multiple classes separated by a space in the Breadcrumb element.
+     *
+     * @default ''
+     */
+    cssClass?: string;
+
+    /**
+     * Specifies the template for Breadcrumb item.
+     *
+     * @default null
+     */
+    itemTemplate?: string;
+
+    /**
+     * Specifies the separator template for Breadcrumb.
+     *
+     * @default '/'
+     */
+    separatorTemplate?: string;
+
+    /**
+     * Enable or disable the item's navigation, when set to false, each item navigation will be prevented.
+     *
+     * @default true
+     */
+    enableNavigation?: boolean;
+
+    /**
+     * Enable or disable the active item navigation, when set to true, active item will be navigable.
+     *
+     * @default false
+     */
+    enableActiveItemNavigation?: boolean;
+
+    /**
+     * Enable or disable the breadcrumb, when set to true, the breadcrumb will be disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Overrides the global culture and localization value for this component. Default global culture is 'en-US'.
+     *
+     * @default ''
+     * @private
+     * @aspIgnore
+     */
+    locale?: string;
+
+    /**
+     * Triggers while rendering each breadcrumb item.
+     *
+     * @event beforeItemRender
+     */
+    beforeItemRender?: EmitType<BreadcrumbBeforeItemRenderEventArgs>;
+
+    /**
+     * Triggers while clicking the breadcrumb item.
+     *
+     * @event itemClick
+     */
+    itemClick?: EmitType<BreadcrumbClickEventArgs>;
+
+    /**
+     * Triggers once the component rendering is completed.
+     *
+     * @event created
+     */
+    created?: EmitType<Event>;
+
+}