smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
427 lines (419 loc) • 23.5 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.breadcrumb';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
class BreadcrumbComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered whenever a breadcrumb item is removed or closed by the user—such as when a close icon within a breadcrumb segment is clicked. It can be used to detect and respond to changes in the breadcrumb navigation, allowing you to update application state, UI elements, or perform cleanup tasks as needed.
* @param event. The custom event. Custom event was created with: event.detail( item)
* item - The item that has been closed.
*/
this.onClose = new EventEmitter();
/** @description This event is fired just before a Breadcrumb item begins the closing process. You can intercept and prevent the item from closing by invoking event.preventDefault() within your event handler. This allows you to add custom logic, such as displaying a confirmation dialog or validating conditions, before the Breadcrumb item is allowed to close.
* @param event. The custom event. Custom event was created with: event.detail( item)
* item - The item that is going to be closed.
*/
this.onClosing = new EventEmitter();
/** @description This event is triggered when a user completes a drag-and-drop operation by dropping a Breadcrumb item into a new position. It signals that the item's placement has changed within the Breadcrumb navigation component and allows you to handle any necessary updates, such as reordering, data changes, or UI feedback.
* @param event. The custom event. */
this.onDragEnd = new EventEmitter();
/** @description This event is triggered when a user starts dragging a Breadcrumb item, allowing you to handle custom logic during the drag initiation phase. It provides access to the item being dragged and relevant drag event data.
* @param event. The custom event. Custom event was created with: event.detail( item, originalEvent, target)
* item - The item that is being dragged.
* originalEvent - The original event that initiates the dragging operation.
* target - The original target.
*/
this.onDragging = new EventEmitter();
/** @description This event is triggered whenever the user clicks the "Add new item" (+) button. It typically indicates the user's intent to create or insert a new item into the current list, collection, or data structure. The event can be used to initialize the process for adding a new item, display a relevant input form, or handle any additional logic associated with item creation.
* @param event. The custom event. */
this.onAddNewItem = new EventEmitter();
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-breadcrumb');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Controls the visibility and functionality of the "Add new item" (+) button. When enabled, users can click the button to create and add new items. When disabled, the button is hidden or inactive, preventing the addition of new items. */
get addNewItem() {
return this.nativeElement ? this.nativeElement.addNewItem : undefined;
}
set addNewItem(value) {
this.nativeElement ? this.nativeElement.addNewItem = value : undefined;
}
/** @description Controls whether users can drag and reorder breadcrumb items. When enabled, breadcrumb items become draggable, allowing users to change their order within the breadcrumb navigation. When disabled, breadcrumb items remain static and cannot be moved. */
get allowDrag() {
return this.nativeElement ? this.nativeElement.allowDrag : undefined;
}
set allowDrag(value) {
this.nativeElement ? this.nativeElement.allowDrag = value : undefined;
}
/** @description Allows you to control whether users can drop dragged breadcrumb items onto the breadcrumb navigation. When enabled, users can rearrange breadcrumb items by dragging and dropping them; when disabled, dropping is prevented. */
get allowDrop() {
return this.nativeElement ? this.nativeElement.allowDrop : undefined;
}
set allowDrop(value) {
this.nativeElement ? this.nativeElement.allowDrop = value : undefined;
}
/** @description Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Otherwise, this property determines how animations are applied to the element. */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Controls the visibility of the close (remove) button on individual breadcrumb items, allowing users to optionally display or hide the button for removing specific items from the breadcrumb navigation. */
get closeButtons() {
return this.nativeElement ? this.nativeElement.closeButtons : undefined;
}
set closeButtons(value) {
this.nativeElement ? this.nativeElement.closeButtons = value : undefined;
}
/** @description Specifies the data source used to populate the breadcrumb items. The data should be provided as an array of objects, where each object represents an individual breadcrumb item with its corresponding properties, such as label, link, and any additional attributes required for display or navigation. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Controls whether the Breadcrumb navigation component is disabled. When enabled, the Breadcrumb provides users with a navigational trail; */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Defines the template used to render each breadcrumb item. This property accepts either the ID of an '' element (as a string) or a reference to an actual 'HTMLTemplateElement'. When specified, the template determines the structure and content of each breadcrumb item. If set to 'null', the default rendering is used and no custom template is applied. */
get itemTemplate() {
return this.nativeElement ? this.nativeElement.itemTemplate : undefined;
}
set itemTemplate(value) {
this.nativeElement ? this.nativeElement.itemTemplate = value : undefined;
}
/** @description Sets or retrieves the value of the unlockKey property, a unique key required to unlock and access the product's features. Use this property to specify the unlock key when enabling product access, or to obtain the current unlock key associated with the product. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Sets or retrieves the current language code (e.g., "en", "fr", "es") used for localization. This property works together with the messages property to select and display the appropriate translation strings based on the specified language. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Defines or retrieves an object containing all user-facing text strings within the widget that can be localized. This object allows customization of the widget’s displayed text in different languages and works in conjunction with the locale property to support internationalization and localization. Use this property to provide translations for messages, labels, and other interface text in the widget. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Specifies the minimum width (in pixels) at which the Breadcrumb component transitions from its normal display to a minimized mode. If this value is set to null, the Breadcrumb will always remain in its normal mode and will not automatically minimize, regardless of the container's width. */
get minimizeWidth() {
return this.nativeElement ? this.nativeElement.minimizeWidth : undefined;
}
set minimizeWidth(value) {
this.nativeElement ? this.nativeElement.minimizeWidth = value : undefined;
}
/** @description When set to true, this property prevents the element from receiving keyboard focus or being selected using keyboard navigation (such as with the Tab key). As a result, users will not be able to focus on this element using standard keyboard interactions. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Adds a new item to the collection. The item is appended to the end of the array or list, increasing the total number of items by one. If additional properties (such as item details or metadata) are required, ensure they are included in the request.
* @param {any} itemDetails. An Object with the fields "index", "label", and "value".
*/
addItem(itemDetails) {
if (this.nativeElement.isRendered) {
this.nativeElement.addItem(itemDetails);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.addItem(itemDetails);
});
}
}
/** @description Restores the Breadcrumb component from its minimized or collapsed state to its full, expanded view, making all breadcrumb navigation links visible to the user.
*/
maximize() {
if (this.nativeElement.isRendered) {
this.nativeElement.maximize();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.maximize();
});
}
}
/** @description Collapses the breadcrumb navigation into a minimal or condensed state, reducing its visual footprint on the page while still maintaining navigational functionality. This is typically used to save space or enhance the user interface on smaller screens.
*/
minimize() {
if (this.nativeElement.isRendered) {
this.nativeElement.minimize();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.minimize();
});
}
}
/** @description Removes a specified item from the collection. If the item exists, it will be deleted; otherwise, no action is taken.
* @param {HTMLElement} item. The item to remove.
*/
removeItem(item) {
if (this.nativeElement.isRendered) {
this.nativeElement.removeItem(item);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.removeItem(item);
});
}
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
if (Smart)
Smart.Render();
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
this.listen();
}
ngOnDestroy() {
this.unlisten();
}
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
/** @description Add event listeners. */
listen() {
const that = this;
that.eventHandlers['closeHandler'] = (event) => { that.onClose.emit(event); };
that.nativeElement.addEventListener('close', that.eventHandlers['closeHandler']);
that.eventHandlers['closingHandler'] = (event) => { that.onClosing.emit(event); };
that.nativeElement.addEventListener('closing', that.eventHandlers['closingHandler']);
that.eventHandlers['dragEndHandler'] = (event) => { that.onDragEnd.emit(event); };
that.nativeElement.addEventListener('dragEnd', that.eventHandlers['dragEndHandler']);
that.eventHandlers['draggingHandler'] = (event) => { that.onDragging.emit(event); };
that.nativeElement.addEventListener('dragging', that.eventHandlers['draggingHandler']);
that.eventHandlers['addNewItemHandler'] = (event) => { that.onAddNewItem.emit(event); };
that.nativeElement.addEventListener('addNewItem', that.eventHandlers['addNewItemHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['closeHandler']) {
that.nativeElement.removeEventListener('close', that.eventHandlers['closeHandler']);
}
if (that.eventHandlers['closingHandler']) {
that.nativeElement.removeEventListener('closing', that.eventHandlers['closingHandler']);
}
if (that.eventHandlers['dragEndHandler']) {
that.nativeElement.removeEventListener('dragEnd', that.eventHandlers['dragEndHandler']);
}
if (that.eventHandlers['draggingHandler']) {
that.nativeElement.removeEventListener('dragging', that.eventHandlers['draggingHandler']);
}
if (that.eventHandlers['addNewItemHandler']) {
that.nativeElement.removeEventListener('addNewItem', that.eventHandlers['addNewItemHandler']);
}
}
}
BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BreadcrumbComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BreadcrumbComponent, selector: "smart-breadcrumb, [smart-breadcrumb]", inputs: { addNewItem: "addNewItem", allowDrag: "allowDrag", allowDrop: "allowDrop", animation: "animation", closeButtons: "closeButtons", dataSource: "dataSource", disabled: "disabled", itemTemplate: "itemTemplate", unlockKey: "unlockKey", locale: "locale", messages: "messages", minimizeWidth: "minimizeWidth", unfocusable: "unfocusable" }, outputs: { onClose: "onClose", onClosing: "onClosing", onDragEnd: "onDragEnd", onDragging: "onDragging", onAddNewItem: "onAddNewItem" }, exportAs: ["smart-breadcrumb"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BreadcrumbComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-breadcrumb', selector: 'smart-breadcrumb, [smart-breadcrumb]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { addNewItem: [{
type: Input
}], allowDrag: [{
type: Input
}], allowDrop: [{
type: Input
}], animation: [{
type: Input
}], closeButtons: [{
type: Input
}], dataSource: [{
type: Input
}], disabled: [{
type: Input
}], itemTemplate: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], messages: [{
type: Input
}], minimizeWidth: [{
type: Input
}], unfocusable: [{
type: Input
}], onClose: [{
type: Output
}], onClosing: [{
type: Output
}], onDragEnd: [{
type: Output
}], onDragging: [{
type: Output
}], onAddNewItem: [{
type: Output
}] } });
class BreadcrumbModule {
}
BreadcrumbModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BreadcrumbModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
BreadcrumbModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BreadcrumbModule, declarations: [BreadcrumbComponent], exports: [BreadcrumbComponent] });
BreadcrumbModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BreadcrumbModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BreadcrumbModule, decorators: [{
type: NgModule,
args: [{
declarations: [BreadcrumbComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [BreadcrumbComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { BreadcrumbComponent, BreadcrumbModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-breadcrumb.mjs.map