igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
301 lines (295 loc) • 15.7 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, TemplateRef, Directive, ViewContainerRef, Renderer2, ElementRef, ChangeDetectorRef, booleanAttribute, HostBinding, ViewChild, Input, ContentChildren, Component, NgModule } from '@angular/core';
import { CloseScrollStrategy, getCurrentResourceStrings, ActionStripResourceStringsEN, trackByIdentity, IgxActionStripActionsToken, IgxActionStripToken } from 'igniteui-angular/core';
import { IgxIconComponent } from 'igniteui-angular/icon';
import { IgxIconButtonDirective, IgxRippleDirective, IgxToggleActionDirective } from 'igniteui-angular/directives';
import { NgTemplateOutlet } from '@angular/common';
import { IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent } from 'igniteui-angular/drop-down';
class IgxActionStripMenuItemDirective {
constructor() {
this.templateRef = inject(TemplateRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxActionStripMenuItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: IgxActionStripMenuItemDirective, isStandalone: true, selector: "[igxActionStripMenuItem]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxActionStripMenuItemDirective, decorators: [{
type: Directive,
args: [{
selector: '[igxActionStripMenuItem]',
standalone: true
}]
}] });
/* blazorElement */
/* jsonAPIManageItemInMarkup */
/* jsonAPIManageCollectionInMarkup */
/* wcElementTag: igc-action-strip */
/* blazorIndirectRender */
/* singleInstanceIdentifier */
/* contentParent: GridBaseDirective */
/* contentParent: RowIsland */
/* contentParent: HierarchicalGrid */
/**
* Action Strip provides templatable area for one or more actions.
*
* @igxModule IgxActionStripModule
*
* @igxTheme igx-action-strip-theme
*
* @igxKeywords action, strip, actionStrip, pinning, editing
*
* @igxGroup Data Entry & Display
*
* @igxParent IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent, *
*
* @remarks
* The Ignite UI Action Strip is a container, overlaying its parent container,
* and displaying action buttons with action applicable to the parent component the strip is instantiated or shown for.
*
* @example
* ```html
* <igx-action-strip #actionStrip>
* <igx-icon (click)="doSomeAction()"></igx-icon>
* </igx-action-strip>
*/
class IgxActionStripComponent {
constructor() {
this._viewContainer = inject(ViewContainerRef);
this.renderer = inject(Renderer2);
this.el = inject(ElementRef);
this.cdr = inject(ChangeDetectorRef);
/**
* Gets/Sets the visibility of the Action Strip.
* Could be used to set if the Action Strip will be initially hidden.
*
* @example
* ```html
* <igx-action-strip [hidden]="false">
* ```
*/
this.hidden = true;
/**
* Getter for menu overlay settings
*
* @hidden
* @internal
*/
this.menuOverlaySettings = { scrollStrategy: new CloseScrollStrategy() };
this._resourceStrings = getCurrentResourceStrings(ActionStripResourceStringsEN);
/**
* Host `attr.class` binding.
*/
this.hostClass = 'igx-action-strip';
/** pin swapping w/ unpin resets the menuItems collection */
this.trackMenuItem = trackByIdentity;
}
/**
* Gets/Sets the resource strings.
*
* @remarks
* By default it uses EN resources.
*/
set resourceStrings(value) {
this._resourceStrings = Object.assign({}, this._resourceStrings, value);
}
get resourceStrings() {
return this._resourceStrings;
}
/**
* Hide or not the Action Strip based on if it is a menu.
*
* @hidden
* @internal
*/
get hideOnRowLeave() {
if (this.menu.items.length === 0) {
return true;
}
else if (this.menu.items.length > 0) {
if (this.menu.collapsed) {
return true;
}
else {
return false;
}
}
}
/**
* Menu Items list.
*
* @hidden
* @internal
*/
get menuItems() {
const actions = [];
this.actionButtons.forEach(button => {
if (button.asMenuItems) {
const children = button.buttons;
if (children) {
children.toArray().forEach(x => actions.push(x));
}
}
});
return [...this._menuItems.toArray(), ...actions];
}
/**
* Getter for the 'display' property of the current `IgxActionStrip`
*/
get display() {
return this.hidden ? 'none' : 'flex';
}
/**
* @hidden
* @internal
*/
ngAfterContentInit() {
this.actionButtons.forEach(button => {
button.strip = this;
});
this.actionButtons.changes.subscribe(() => {
this.actionButtons.forEach(button => {
button.strip = this;
});
});
}
/**
* @hidden
* @internal
*/
ngAfterViewInit() {
this.menu.selectionChanging.subscribe(($event) => {
const newSelection = $event.newSelection.elementRef.nativeElement;
let allButtons = [];
this.actionButtons.forEach(actionButtons => {
if (actionButtons.asMenuItems) {
allButtons = [...allButtons, ...actionButtons.buttons.toArray()];
}
});
const button = allButtons.find(x => newSelection.contains(x.container.nativeElement));
if (button) {
button.actionClick.emit();
}
});
this._originalParent = this._viewContainer.element.nativeElement?.parentElement;
}
/**
* Showing the Action Strip and appending it the specified context element.
*
* @param context
* @example
* ```typescript
* this.actionStrip.show(row);
* ```
*/
show(context) {
this.hidden = false;
if (!context) {
return;
}
// when shown for different context make sure the menu won't stay opened
if (this.context !== context) {
this.closeMenu();
}
this.context = context;
if (this.context && this.context.element) {
this.renderer.appendChild(context.element.nativeElement, this._viewContainer.element.nativeElement);
}
this.cdr.detectChanges();
}
/**
* Hiding the Action Strip and removing it from its current context element.
*
* @example
* ```typescript
* this.actionStrip.hide();
* ```
*/
hide() {
this.hidden = true;
this.closeMenu();
if (this._originalParent) {
// D.P. fix(elements) don't detach native DOM, instead move back. Might not matter for Angular, but Elements will destroy
this.renderer.appendChild(this._originalParent, this._viewContainer.element.nativeElement);
}
else if (this.context && this.context.element) {
this.renderer.removeChild(this.context.element.nativeElement, this._viewContainer.element.nativeElement);
}
}
/**
* Close the menu if opened
*
* @hidden
* @internal
*/
closeMenu() {
if (this.menu && !this.menu.collapsed) {
this.menu.close();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxActionStripComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: IgxActionStripComponent, isStandalone: true, selector: "igx-action-strip", inputs: { context: "context", hidden: ["hidden", "hidden", booleanAttribute], resourceStrings: "resourceStrings" }, host: { properties: { "style.display": "this.display", "class.igx-action-strip": "this.hostClass" } }, providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }], queries: [{ propertyName: "_menuItems", predicate: IgxActionStripMenuItemDirective }, { propertyName: "actionButtons", predicate: IgxActionStripActionsToken }], viewQueries: [{ propertyName: "menu", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"igx-action-strip__actions\">\n <ng-content #content></ng-content>\n @if (menuItems.length > 0) {\n <button\n type=\"button\"\n igxIconButton=\"flat\"\n igxRipple\n [igxToggleAction]=\"dropdown\"\n [overlaySettings]=\"menuOverlaySettings\"\n (click)=\"$event.stopPropagation()\"\n [title]=\"resourceStrings.igx_action_strip_button_more_title\"\n [igxDropDownItemNavigation]=\"dropdown\"\n >\n <igx-icon family=\"default\" name=\"more_vert\"></igx-icon>\n </button>\n }\n <igx-drop-down #dropdown>\n @for (item of menuItems; track trackMenuItem(item)) {\n <igx-drop-down-item\n class=\"igx-action-strip__menu-item\"\n >\n <div class=\"igx-drop-down__item-template\">\n <ng-container\n *ngTemplateOutlet=\"\n item.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </div>\n </igx-drop-down-item>\n }\n </igx-drop-down>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IgxIconButtonDirective, selector: "[igxIconButton]", inputs: ["igxIconButton"] }, { kind: "directive", type: IgxRippleDirective, selector: "[igxRipple]", inputs: ["igxRippleTarget", "igxRipple", "igxRippleDuration", "igxRippleCentered", "igxRippleDisabled"] }, { kind: "directive", type: IgxToggleActionDirective, selector: "[igxToggleAction]", inputs: ["overlaySettings", "igxToggleOutlet", "igxToggleAction"], exportAs: ["toggle-action"] }, { kind: "directive", type: IgxDropDownItemNavigationDirective, selector: "[igxDropDownItemNavigation]", inputs: ["igxDropDownItemNavigation"] }, { kind: "component", type: IgxIconComponent, selector: "igx-icon", inputs: ["ariaHidden", "family", "name", "active"] }, { kind: "component", type: IgxDropDownComponent, selector: "igx-drop-down", inputs: ["allowItemsFocus", "labelledBy", "role"], outputs: ["opening", "opened", "closing", "closed"] }, { kind: "component", type: IgxDropDownItemComponent, selector: "igx-drop-down-item" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxActionStripComponent, decorators: [{
type: Component,
args: [{ selector: 'igx-action-strip', imports: [
NgTemplateOutlet,
IgxIconButtonDirective,
IgxRippleDirective,
IgxToggleActionDirective,
IgxDropDownItemNavigationDirective,
IgxIconComponent,
IgxDropDownComponent,
IgxDropDownItemComponent
], providers: [{ provide: IgxActionStripToken, useExisting: IgxActionStripComponent }], template: "<div class=\"igx-action-strip__actions\">\n <ng-content #content></ng-content>\n @if (menuItems.length > 0) {\n <button\n type=\"button\"\n igxIconButton=\"flat\"\n igxRipple\n [igxToggleAction]=\"dropdown\"\n [overlaySettings]=\"menuOverlaySettings\"\n (click)=\"$event.stopPropagation()\"\n [title]=\"resourceStrings.igx_action_strip_button_more_title\"\n [igxDropDownItemNavigation]=\"dropdown\"\n >\n <igx-icon family=\"default\" name=\"more_vert\"></igx-icon>\n </button>\n }\n <igx-drop-down #dropdown>\n @for (item of menuItems; track trackMenuItem(item)) {\n <igx-drop-down-item\n class=\"igx-action-strip__menu-item\"\n >\n <div class=\"igx-drop-down__item-template\">\n <ng-container\n *ngTemplateOutlet=\"\n item.templateRef;\n context: { $implicit: item }\n \"\n ></ng-container>\n </div>\n </igx-drop-down-item>\n }\n </igx-drop-down>\n</div>\n" }]
}], propDecorators: { context: [{
type: Input
}], _menuItems: [{
type: ContentChildren,
args: [IgxActionStripMenuItemDirective]
}], actionButtons: [{
type: ContentChildren,
args: [IgxActionStripActionsToken]
}], hidden: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], resourceStrings: [{
type: Input
}], menu: [{
type: ViewChild,
args: ['dropdown']
}], display: [{
type: HostBinding,
args: ['style.display']
}], hostClass: [{
type: HostBinding,
args: ['class.igx-action-strip']
}] } });
/* Action-strip outside of grid directives collection for ease-of-use import in standalone components scenario */
const IGX_ACTION_STRIP_DIRECTIVES = [
IgxActionStripComponent,
IgxActionStripMenuItemDirective
];
/**
* @hidden
* IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components
*/
class IgxActionStripModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxActionStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: IgxActionStripModule, imports: [IgxActionStripComponent, IgxActionStripMenuItemDirective], exports: [IgxActionStripComponent, IgxActionStripMenuItemDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxActionStripModule, imports: [IgxActionStripComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxActionStripModule, decorators: [{
type: NgModule,
args: [{
imports: [
...IGX_ACTION_STRIP_DIRECTIVES
],
exports: [
...IGX_ACTION_STRIP_DIRECTIVES
],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { IGX_ACTION_STRIP_DIRECTIVES, IgxActionStripComponent, IgxActionStripMenuItemDirective, IgxActionStripModule };
//# sourceMappingURL=igniteui-angular-action-strip.mjs.map