@progress/kendo-angular-toolbar
Version:
Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements
192 lines (191 loc) • 8.18 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Input, Renderer2 as Renderer, Output, EventEmitter, Directive, ViewContainerRef } from '@angular/core';
import { isPresent } from '@progress/kendo-angular-common';
import { ToolBarToolComponent } from './tools/toolbar-tool.component';
import { RefreshService } from './refresh.service';
import { RendererService } from './renderer.service';
import { ToolbarToolsService } from './tools/tools.service';
import { isElementOrTextNode, outerWidth } from './util';
import * as i0 from "@angular/core";
import * as i1 from "./renderer.service";
import * as i2 from "./refresh.service";
import * as i3 from "./tools/tools.service";
const MIN_SPACER_WIDTH = 18;
/**
* @hidden
*/
export class ToolBarRendererComponent {
renderer;
rendererService;
refreshService;
toolsService;
viewContainer;
tool;
location;
resizable;
rendererClick = new EventEmitter();
template;
element;
get isSpacer() {
return this.tool && this.tool.__isSpacer;
}
refreshSubscription;
internalComponentRef;
constructor(renderer, rendererService, refreshService, toolsService, viewContainer) {
this.renderer = renderer;
this.rendererService = rendererService;
this.refreshService = refreshService;
this.toolsService = toolsService;
this.viewContainer = viewContainer;
}
ngOnInit() {
this.tool.location = this.location;
this.element = this.tool.element;
this.rendererService.element = this.element;
this.rendererService.renderer = this;
this.refreshSubscription = this.refreshService.onRefresh.subscribe((tool) => {
if (this.tool === tool) {
this.refresh();
}
});
}
ngOnDestroy() {
this.refreshSubscription?.unsubscribe();
this.internalComponentRef?.removeEventListener('click', this.onClick);
}
ngAfterViewInit() {
const viewContainerRootNodes = this.viewContainer.get(0)?.rootNodes?.filter(isElementOrTextNode);
if (!viewContainerRootNodes || viewContainerRootNodes.length === 0) {
return;
}
this.internalComponentRef = viewContainerRootNodes[0];
this.internalComponentRef.addEventListener('click', this.onClick);
if (this.resizable) {
if (this.location === 'toolbar') {
this.template = this.tool.toolbarTemplate;
this.hideTool();
}
else if (this.location === 'section') {
this.template = this.tool.toolbarTemplate;
if (this.tool.isHidden) {
this.hideTool();
}
else {
this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
}
}
else {
this.template = this.tool.popupTemplate;
if (this.tool.isHidden) {
this.hideTool();
}
else {
this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
}
}
}
else {
this.tool.overflows = false;
this.template = this.tool.toolbarTemplate;
if (this.tool.isHidden) {
this.hideTool();
}
else {
this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
}
}
if (this.resizable) {
this.refresh();
}
this.updateTools();
}
/**
* @hidden
*/
get width() {
if (this.isSpacer) {
return MIN_SPACER_WIDTH;
}
if (!this.internalComponentRef) {
return;
}
return this.tool.overflows ? 0 : outerWidth(this.internalComponentRef);
}
isDisplayed() {
return this.internalComponentRef?.style?.display !== 'none';
}
refresh() {
this.tool.location = this.location;
if (!isPresent(this.internalComponentRef)) {
return;
}
if (this.tool.isHidden) {
this.hideTool();
}
else if (this.resizable) {
if (this.location === 'toolbar') {
this.renderer.setStyle(this.internalComponentRef, 'visibility', this.tool.visibility);
this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.toolbarDisplay);
}
else {
this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.overflowDisplay);
}
}
else {
this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
this.renderer.setStyle(this.internalComponentRef, 'display', 'inline-flex');
}
this.updateTools();
}
setAttribute(element, attr, value) {
this.renderer.setAttribute(element, attr, value);
}
onClick = (ev) => {
this.rendererClick.emit({ context: this, event: ev });
};
updateTools() {
this.tool.location = this.location;
const isInToolbar = this.toolsService.renderedTools.some(t => t.tool === this.tool);
const isInPopup = this.toolsService.overflowTools.some(t => t.tool === this.tool);
if (this.location === 'toolbar') {
isInPopup && (this.toolsService.overflowTools = this.toolsService.overflowTools.filter(t => t.tool !== this.tool));
!isInToolbar && this.toolsService.renderedTools.push(this);
}
else {
if (!isInPopup) {
this.toolsService.overflowTools.push(this);
this.toolsService.overflowTools.sort((t1, t2) => {
// ensures correct navigation order in Popup
return this.toolsService.allTools.indexOf(t1.tool) - this.toolsService.allTools.indexOf(t2.tool);
});
}
}
}
hideTool() {
this.renderer.setStyle(this.internalComponentRef, 'visibility', 'hidden');
this.renderer.setStyle(this.internalComponentRef, 'display', 'none');
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarRendererComponent, deps: [{ token: i0.Renderer2 }, { token: i1.RendererService }, { token: i2.RefreshService }, { token: i3.ToolbarToolsService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarRendererComponent, isStandalone: true, selector: "[kendoToolbarRenderer]", inputs: { tool: "tool", location: "location", resizable: "resizable" }, outputs: { rendererClick: "rendererClick" }, providers: [RendererService], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarRendererComponent, decorators: [{
type: Directive,
args: [{
providers: [RendererService],
standalone: true,
selector: '[kendoToolbarRenderer]'
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.RendererService }, { type: i2.RefreshService }, { type: i3.ToolbarToolsService }, { type: i0.ViewContainerRef }]; }, propDecorators: { tool: [{
type: Input
}], location: [{
type: Input
}], resizable: [{
type: Input
}], rendererClick: [{
type: Output
}] } });