@igo2/common
Version:
506 lines (497 loc) • 34.1 kB
JavaScript
import { EntityStore, EntityStoreWatcher } from '@igo2/common/entity';
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, HostBinding, NgModule } from '@angular/core';
import * as i1$1 from '@angular/cdk/overlay';
import { NgIf, NgClass, AsyncPipe, NgFor } from '@angular/common';
import * as i3 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i8 from '@angular/material/card';
import { MatCardModule } from '@angular/material/card';
import * as i5$1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i1 from '@angular/material/list';
import { MatListModule } from '@angular/material/list';
import * as i7 from '@angular/material/menu';
import { MatMenuModule } from '@angular/material/menu';
import * as i2 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import { IgoLanguageModule } from '@igo2/core/language';
import * as i2$1 from '@igo2/core/media';
import { Media } from '@igo2/core/media';
import { BehaviorSubject, isObservable } from 'rxjs';
import * as i4 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { IgoIconComponent } from '@igo2/common/icon';
import * as i5 from '@ngx-translate/core';
var ActionbarMode;
(function (ActionbarMode) {
ActionbarMode["Dock"] = "dock";
ActionbarMode["Overlay"] = "overlay";
ActionbarMode["Context"] = "context";
})(ActionbarMode || (ActionbarMode = {}));
/**
* The class is a specialized version of an EntityStore that stores
* actions.
*/
class ActionStore extends EntityStore {
}
/**
* An action button
*/
class ActionbarItemComponent {
disabled$ = new BehaviorSubject(false);
checkCondition$ = new BehaviorSubject(undefined);
tooltip$ = new BehaviorSubject(undefined);
noDisplay$ = new BehaviorSubject(false);
ngClass$ = new BehaviorSubject({});
ngClass$$;
disabled$$;
availability$$;
checkCondition$$;
tooltip$$;
noDisplay$$;
display$$;
isObservable = isObservable;
/**
* Action
*/
action;
/**
* Color
*/
color = 'default';
/**
* Whether the action title is displayed
*/
withTitle = true;
/**
* Whether the action icon is displayed
*/
withIcon = true;
/**
* Whether a tooltip should be shown
*/
withTooltip = true;
/**
* Whether the action is disabled
*/
set disabled(value) {
this.disabled$.next(value);
}
get disabled() {
return this.disabled$.value;
}
/**
* Whether the action is display or not
*/
set noDisplay(value) {
this.noDisplay$.next(value);
}
get noDisplay() {
return this.noDisplay$.value;
}
/**
* Event emitted when the action button is clicked
*/
trigger = new EventEmitter();
/**
* @internal
*/
get title() {
return this.action.title;
}
ngOnInit() {
const args = this.action.args || [];
if (this.action.ngClass !== undefined) {
this.ngClass$$ = this.action
.ngClass(...args)
.subscribe((ngClass) => this.updateNgClass(ngClass));
}
if (isObservable(this.action.checkCondition)) {
this.checkCondition$$ = this.action.checkCondition.subscribe((checkCondition) => this.updateCheckCondition(checkCondition));
}
else {
this.updateCheckCondition(this.action.checkCondition);
}
if (isObservable(this.action.tooltip)) {
this.tooltip$$ = this.action.tooltip.subscribe((tooltip) => this.updateTooltip(tooltip));
}
else {
this.updateTooltip(this.action.tooltip);
}
if (this.action.availability !== undefined) {
this.availability$$ = this.action
.availability(...args)
.subscribe((available) => (this.disabled = !available));
}
this.disabled$$ = this.disabled$.subscribe((disabled) => this.updateNgClass({ 'igo-actionbar-item-disabled': disabled }));
if (this.action.display !== undefined) {
this.display$$ = this.action
.display(...args)
.subscribe((display) => (this.noDisplay = !display));
}
this.noDisplay$$ = this.noDisplay$.subscribe((noDisplay) => this.updateNgClass({ 'igo-actionbar-item-no-display': noDisplay }));
}
ngOnDestroy() {
if (this.ngClass$$ !== undefined) {
this.ngClass$$.unsubscribe();
this.ngClass$$ = undefined;
}
if (this.availability$$ !== undefined) {
this.availability$$.unsubscribe();
this.availability$$ = undefined;
}
if (this.display$$ !== undefined) {
this.display$$.unsubscribe();
this.display$$ = undefined;
}
if (this.checkCondition$$ !== undefined) {
this.checkCondition$$.unsubscribe();
this.checkCondition$$ = undefined;
}
if (this.tooltip$$ !== undefined) {
this.tooltip$$.unsubscribe();
this.tooltip$$ = undefined;
}
this.disabled$$.unsubscribe();
this.noDisplay$$.unsubscribe();
}
/**
* When the action button is clicked, emit the 'trigger' event but don't
* invoke the action handler. This is handled by the parent component.
* @internal
*/
onClick() {
if (this.disabled === true) {
return;
}
this.trigger.emit(this.action);
}
updateNgClass(ngClass) {
this.ngClass$.next(Object.assign({}, this.ngClass$.value, ngClass));
}
updateTooltip(tooltip) {
this.tooltip$.next(tooltip);
}
updateCheckCondition(checkCondition) {
this.checkCondition$.next(checkCondition);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActionbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ActionbarItemComponent, isStandalone: true, selector: "igo-actionbar-item", inputs: { action: "action", color: "color", withTitle: "withTitle", withIcon: "withIcon", withTooltip: "withTooltip", disabled: "disabled", noDisplay: "noDisplay" }, outputs: { trigger: "trigger" }, ngImport: i0, template: "<mat-list-item\n *ngIf=\"!action.checkbox\"\n class=\"actionbar-item\"\n matTooltipClass=\"actionbarItemTooltip\"\n matTooltipShowDelay=\"500\"\n [matTooltip]=\"withTooltip ? ((tooltip$ | async) || title | translate) : ''\"\n [ngClass]=\"ngClass$ | async\"\n (click)=\"onClick()\"\n>\n <button\n *ngIf=\"withIcon\"\n matListItemAvatar\n mat-icon-button\n [color]=\"color\"\n [disabled]=\"disabled$ | async\"\n [disableRipple]=\"true\"\n >\n <igo-icon\n [icon]=\"isObservable(action.icon) ? (action.icon | async) : action.icon\"\n ></igo-icon>\n </button>\n <span *ngIf=\"withTitle\" matLine>{{ title | translate }}</span>\n</mat-list-item>\n\n<mat-list-item\n class=\"item-checkbox\"\n *ngIf=\"action.checkbox\"\n matTooltipClass=\"actionbarItemTooltip\"\n matTooltipShowDelay=\"500\"\n [matTooltip]=\"withTooltip ? ((tooltip$ | async) || title | translate) : ''\"\n [ngClass]=\"ngClass$ | async\"\n>\n <mat-checkbox\n *ngIf=\"withTitle\"\n (change)=\"action.handler()\"\n [checked]=\"checkCondition$ | async\"\n >\n {{ title | translate }}\n </mat-checkbox>\n</mat-list-item>\n", styles: [":host ::ng-deep mat-list-item:hover{cursor:pointer}:host{--mdc-list-list-item-leading-avatar-size: 48px}:host .mdc-icon-button{--mdc-icon-button-state-layer-size: 48px}:host mat-list-item{padding-right:0}:host mat-list-item.igo-actionbar-item-disabled{color:#00000042;cursor:default!important}:host mat-list-item.igo-actionbar-item-no-display{display:none}:host mat-list-item ::ng-deep button[matlistitemavatar]{margin-left:0;background-color:inherit}:host mat-list-item ::ng-deep button .mat-mdc-button-persistent-ripple{display:none}:host .item-checkbox ::ng-deep mat-checkbox label{margin-left:28px}:host .actionbar-item [matline]{padding-left:16px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i1.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "component", type: IgoIconComponent, selector: "igo-icon", inputs: ["color", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActionbarItemComponent, decorators: [{
type: Component,
args: [{ selector: 'igo-actionbar-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgIf,
MatListModule,
MatTooltipModule,
NgClass,
MatButtonModule,
MatIconModule,
MatCheckboxModule,
AsyncPipe,
IgoLanguageModule,
IgoIconComponent
], template: "<mat-list-item\n *ngIf=\"!action.checkbox\"\n class=\"actionbar-item\"\n matTooltipClass=\"actionbarItemTooltip\"\n matTooltipShowDelay=\"500\"\n [matTooltip]=\"withTooltip ? ((tooltip$ | async) || title | translate) : ''\"\n [ngClass]=\"ngClass$ | async\"\n (click)=\"onClick()\"\n>\n <button\n *ngIf=\"withIcon\"\n matListItemAvatar\n mat-icon-button\n [color]=\"color\"\n [disabled]=\"disabled$ | async\"\n [disableRipple]=\"true\"\n >\n <igo-icon\n [icon]=\"isObservable(action.icon) ? (action.icon | async) : action.icon\"\n ></igo-icon>\n </button>\n <span *ngIf=\"withTitle\" matLine>{{ title | translate }}</span>\n</mat-list-item>\n\n<mat-list-item\n class=\"item-checkbox\"\n *ngIf=\"action.checkbox\"\n matTooltipClass=\"actionbarItemTooltip\"\n matTooltipShowDelay=\"500\"\n [matTooltip]=\"withTooltip ? ((tooltip$ | async) || title | translate) : ''\"\n [ngClass]=\"ngClass$ | async\"\n>\n <mat-checkbox\n *ngIf=\"withTitle\"\n (change)=\"action.handler()\"\n [checked]=\"checkCondition$ | async\"\n >\n {{ title | translate }}\n </mat-checkbox>\n</mat-list-item>\n", styles: [":host ::ng-deep mat-list-item:hover{cursor:pointer}:host{--mdc-list-list-item-leading-avatar-size: 48px}:host .mdc-icon-button{--mdc-icon-button-state-layer-size: 48px}:host mat-list-item{padding-right:0}:host mat-list-item.igo-actionbar-item-disabled{color:#00000042;cursor:default!important}:host mat-list-item.igo-actionbar-item-no-display{display:none}:host mat-list-item ::ng-deep button[matlistitemavatar]{margin-left:0;background-color:inherit}:host mat-list-item ::ng-deep button .mat-mdc-button-persistent-ripple{display:none}:host .item-checkbox ::ng-deep mat-checkbox label{margin-left:28px}:host .actionbar-item [matline]{padding-left:16px}\n"] }]
}], propDecorators: { action: [{
type: Input
}], color: [{
type: Input
}], withTitle: [{
type: Input
}], withIcon: [{
type: Input
}], withTooltip: [{
type: Input
}], disabled: [{
type: Input
}], noDisplay: [{
type: Input
}], trigger: [{
type: Output
}] } });
/**
* A list of action buttons.
* This component can be displayed in one of two way: 'dock' or 'overlay'
*/
class ActionbarComponent {
overlay;
elRef;
cdRef;
mediaService;
/**
* Reference to the ActionbarMode enum for use in the template
* @internal
*/
actionbarMode = ActionbarMode;
/**
* Whether the actionbar is collapsed (Dock mode)
* @internal
*/
collapsed = false;
/**
* Toggle collapse action (Dock)
* @internal
*/
toggleCollapseAction = {
id: 'actionbar_toggle',
icon: 'more_vert',
handler: () => {
this.collapsed = !this.collapsed;
}
};
/**
* Action store watcher
* @internal
*/
watcher;
/**
* Height Condition for scroll button
*/
heightCondition$ = new BehaviorSubject(false);
/**
* Position Condition for top scroll button
*/
positionConditionTop$ = new BehaviorSubject(true);
/**
* Position Condition for low scroll button
*/
positionConditionLow$ = new BehaviorSubject(true);
/**
* Action store
*/
store;
/**
* Actionbar mode
*/
mode = ActionbarMode.Dock;
/**
* Whether a toggle button should be displayed (Dock mode)
*/
withToggleButton = false;
/**
* Whether a the actionbar should display buttons horizontally
*/
horizontal = false;
/**
* Color
*/
color = 'default';
/**
* Color of the button if action mode === overlay
*/
iconColor = 'default';
/**
* Whether action titles are displayed
*/
withTitle = true;
/**
* Whether action tooltips are displayed
*/
withTooltip = true;
/**
* Whether action titles are displayed (condition for scroll button)
*/
scrollActive = true;
/**
* Whether action icons are displayed
*/
withIcon = true;
/**
* Which icon want to be shown
*/
icon = 'more_horiz';
/**
* Overlay X position
*/
xPosition = 'before';
/**
* Overlay Y position
*/
yPosition = 'above';
/**
* Class to add to the actionbar overlay
*/
set overlayClass(value) {
this._overlayClass = value;
}
get overlayClass() {
return [this._overlayClass, 'igo-actionbar-overlay'].join(' ');
}
_overlayClass = '';
isCollapsed = this.collapsed;
/**
* @ignore
*/
get withTitleClass() {
return this.withTitle;
}
/**
* @ignore
*/
get withIconClass() {
return this.withIcon;
}
/**
* @ignore
*/
get horizontalClass() {
return this.horizontal;
}
get heightCondition() {
const el = this.elRef.nativeElement;
if (this.scrollActive === false) {
if (el.clientHeight < el.scrollHeight) {
return true;
}
}
return false;
}
get positionConditionTop() {
if (this.elRef.nativeElement.scrollTop === 0) {
return false;
}
return true;
}
get positionConditionLow() {
const el = this.elRef.nativeElement;
if (el.scrollTop >= el.scrollHeight - el.clientHeight) {
return false;
}
return true;
}
get isDesktop() {
return this.mediaService.getMedia() === Media.Desktop;
}
constructor(overlay, elRef, cdRef, mediaService) {
this.overlay = overlay;
this.elRef = elRef;
this.cdRef = cdRef;
this.mediaService = mediaService;
}
/**
* @internal
*/
ngOnChanges(changes) {
const store = changes.store;
if (store && store.currentValue !== store.previousValue) {
if (this.watcher !== undefined) {
this.watcher.destroy();
}
this.watcher = new EntityStoreWatcher(this.store, this.cdRef);
}
}
/**
* @internal
*/
ngOnDestroy() {
this.watcher.destroy();
}
/**
* Invoke the action handler
* @internal
*/
onTriggerAction(action) {
const args = action.args || [];
action.handler(...args);
}
scrollDown() {
this.elRef.nativeElement.scrollBy(0, 52);
}
scrollUp() {
this.elRef.nativeElement.scrollBy(0, -52);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActionbarComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$1.MediaService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: ActionbarComponent, isStandalone: true, selector: "igo-actionbar", inputs: { store: "store", mode: "mode", withToggleButton: "withToggleButton", horizontal: "horizontal", color: "color", iconColor: "iconColor", withTitle: "withTitle", withTooltip: "withTooltip", scrollActive: "scrollActive", withIcon: "withIcon", icon: "icon", xPosition: "xPosition", yPosition: "yPosition", overlayClass: "overlayClass" }, host: { properties: { "class.is-collapsed": "this.isCollapsed", "class.with-title": "this.withTitleClass", "class.with-icon": "this.withIconClass", "class.horizontal": "this.horizontalClass" } }, usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"heightCondition && positionConditionTop && isDesktop\"\n id=\"topChevron\"\n>\n <button\n mat-icon-button\n tooltip-position=\"below\"\n matTooltipShowDelay=\"500\"\n [matTooltip]=\"'igo.common.actionbar.scrollUp' | translate\"\n (click)=\"scrollUp()\"\n >\n <mat-icon>expand_less</mat-icon>\n </button>\n</div>\n<mat-list *ngIf=\"mode === actionbarMode.Dock\" matListItemIcon>\n <igo-actionbar-item\n *ngIf=\"withToggleButton\"\n color=\"accent\"\n [withTitle]=\"false\"\n [withIcon]=\"true\"\n [color]=\"color\"\n [disabled]=\"store.view.empty\"\n [action]=\"toggleCollapseAction\"\n (trigger)=\"onTriggerAction(toggleCollapseAction)\"\n >\n </igo-actionbar-item>\n\n <ng-template\n #buttonContent\n *ngIf=\"!collapsed\"\n ngFor\n let-action\n [ngForOf]=\"store.view.all$() | async\"\n >\n <igo-actionbar-item\n color=\"accent\"\n [withTitle]=\"withTitle\"\n [withIcon]=\"withIcon\"\n [withTooltip]=\"withTooltip\"\n [color]=\"color\"\n [disabled]=\"store.state.get(action).disabled\"\n [action]=\"action\"\n (trigger)=\"onTriggerAction(action)\"\n >\n </igo-actionbar-item>\n </ng-template>\n</mat-list>\n\n<div\n *ngIf=\"heightCondition && positionConditionLow && isDesktop\"\n id=\"lowChevron\"\n>\n <button\n mat-icon-button\n tooltip-position=\"below\"\n matTooltipShowDelay=\"500\"\n [matTooltip]=\"'igo.common.actionbar.scrollDown' | translate\"\n (click)=\"scrollDown()\"\n >\n <mat-icon>expand_more</mat-icon>\n </button>\n</div>\n\n<div *ngIf=\"mode === actionbarMode.Overlay\">\n <button\n class=\"buttonOverlay\"\n mat-icon-button\n tooltip-position=\"below\"\n matTooltipShowDelay=\"500\"\n [matTooltip]=\"'igo.common.actionbar.icon' | translate\"\n [matMenuTriggerFor]=\"actionbarMenu\"\n [disabled]=\"store.view.empty\"\n [color]=\"iconColor\"\n >\n <mat-icon>{{ icon }}</mat-icon>\n </button>\n\n <mat-menu\n #actionbarMenu=\"matMenu\"\n class=\"igo-compact-menu igo-no-min-width-menu\"\n overlapTrigger=\"true\"\n [xPosition]=\"xPosition\"\n [yPosition]=\"yPosition\"\n [class]=\"overlayClass\"\n >\n <mat-list>\n <ng-template ngFor let-action [ngForOf]=\"store.view.all$() | async\">\n <igo-actionbar-item\n color=\"accent\"\n [withTitle]=\"withTitle\"\n [withIcon]=\"withIcon\"\n [color]=\"color\"\n [action]=\"action\"\n (trigger)=\"onTriggerAction(action)\"\n >\n </igo-actionbar-item>\n </ng-template>\n </mat-list>\n </mat-menu>\n</div>\n<mat-card\n *ngIf=\"mode === actionbarMode.Context\"\n class=\"context-menu-card mat-elevation-z4\"\n>\n <mat-list>\n <ng-template ngFor let-action [ngForOf]=\"store.view.all$() | async\">\n <igo-actionbar-item\n color=\"accent\"\n [withTitle]=\"withTitle\"\n [withIcon]=\"withIcon\"\n [color]=\"color\"\n [action]=\"action\"\n (trigger)=\"onTriggerAction(action)\"\n >\n </igo-actionbar-item>\n <br />\n </ng-template>\n </mat-list>\n</mat-card>\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}:host.horizontal{max-width:100%;overflow:unset}:host.horizontal mat-list{width:auto;white-space:nowrap}:host.horizontal igo-actionbar-item{display:inline-block}:host mat-list{padding-top:0}:host .buttonOverlay{margin:0}:host .context-menu-card{padding:8px 3px;margin:10px}:host #topChevron{position:sticky;top:0;background-color:#fff;z-index:3;display:flex;justify-content:center}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){:host #topChevron{position:fixed;top:unset}}@supports (-ms-accelerator: true){:host #topChevron{position:fixed;top:unset}}:host #lowChevron{position:sticky;bottom:0;background-color:#fff;z-index:3;display:flex;justify-content:center}:host .igo-actionbar-overlay{min-width:inherit!important;padding-top:0;padding-bottom:0}:host .igo-actionbar-overlay .mat-mdc-list{padding-top:0}:host .igo-actionbar-overlay .mat-mdc-menu-content:not(:empty){padding-top:0;padding-bottom:0}:host.with-title ::ng-deep .mdc-list-item--with-leading-avatar .mdc-list-item__start{margin-right:0}:host ::ng-deep .mdc-list-item__primary-text{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "directive", type: i1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "component", type: ActionbarItemComponent, selector: "igo-actionbar-item", inputs: ["action", "color", "withTitle", "withIcon", "withTooltip", "disabled", "noDisplay"], outputs: ["trigger"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i8.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActionbarComponent, decorators: [{
type: Component,
args: [{ selector: 'igo-actionbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
NgIf,
MatButtonModule,
MatTooltipModule,
MatIconModule,
MatListModule,
ActionbarItemComponent,
NgFor,
MatMenuModule,
MatCardModule,
AsyncPipe,
IgoLanguageModule
], template: "<div\n *ngIf=\"heightCondition && positionConditionTop && isDesktop\"\n id=\"topChevron\"\n>\n <button\n mat-icon-button\n tooltip-position=\"below\"\n matTooltipShowDelay=\"500\"\n [matTooltip]=\"'igo.common.actionbar.scrollUp' | translate\"\n (click)=\"scrollUp()\"\n >\n <mat-icon>expand_less</mat-icon>\n </button>\n</div>\n<mat-list *ngIf=\"mode === actionbarMode.Dock\" matListItemIcon>\n <igo-actionbar-item\n *ngIf=\"withToggleButton\"\n color=\"accent\"\n [withTitle]=\"false\"\n [withIcon]=\"true\"\n [color]=\"color\"\n [disabled]=\"store.view.empty\"\n [action]=\"toggleCollapseAction\"\n (trigger)=\"onTriggerAction(toggleCollapseAction)\"\n >\n </igo-actionbar-item>\n\n <ng-template\n #buttonContent\n *ngIf=\"!collapsed\"\n ngFor\n let-action\n [ngForOf]=\"store.view.all$() | async\"\n >\n <igo-actionbar-item\n color=\"accent\"\n [withTitle]=\"withTitle\"\n [withIcon]=\"withIcon\"\n [withTooltip]=\"withTooltip\"\n [color]=\"color\"\n [disabled]=\"store.state.get(action).disabled\"\n [action]=\"action\"\n (trigger)=\"onTriggerAction(action)\"\n >\n </igo-actionbar-item>\n </ng-template>\n</mat-list>\n\n<div\n *ngIf=\"heightCondition && positionConditionLow && isDesktop\"\n id=\"lowChevron\"\n>\n <button\n mat-icon-button\n tooltip-position=\"below\"\n matTooltipShowDelay=\"500\"\n [matTooltip]=\"'igo.common.actionbar.scrollDown' | translate\"\n (click)=\"scrollDown()\"\n >\n <mat-icon>expand_more</mat-icon>\n </button>\n</div>\n\n<div *ngIf=\"mode === actionbarMode.Overlay\">\n <button\n class=\"buttonOverlay\"\n mat-icon-button\n tooltip-position=\"below\"\n matTooltipShowDelay=\"500\"\n [matTooltip]=\"'igo.common.actionbar.icon' | translate\"\n [matMenuTriggerFor]=\"actionbarMenu\"\n [disabled]=\"store.view.empty\"\n [color]=\"iconColor\"\n >\n <mat-icon>{{ icon }}</mat-icon>\n </button>\n\n <mat-menu\n #actionbarMenu=\"matMenu\"\n class=\"igo-compact-menu igo-no-min-width-menu\"\n overlapTrigger=\"true\"\n [xPosition]=\"xPosition\"\n [yPosition]=\"yPosition\"\n [class]=\"overlayClass\"\n >\n <mat-list>\n <ng-template ngFor let-action [ngForOf]=\"store.view.all$() | async\">\n <igo-actionbar-item\n color=\"accent\"\n [withTitle]=\"withTitle\"\n [withIcon]=\"withIcon\"\n [color]=\"color\"\n [action]=\"action\"\n (trigger)=\"onTriggerAction(action)\"\n >\n </igo-actionbar-item>\n </ng-template>\n </mat-list>\n </mat-menu>\n</div>\n<mat-card\n *ngIf=\"mode === actionbarMode.Context\"\n class=\"context-menu-card mat-elevation-z4\"\n>\n <mat-list>\n <ng-template ngFor let-action [ngForOf]=\"store.view.all$() | async\">\n <igo-actionbar-item\n color=\"accent\"\n [withTitle]=\"withTitle\"\n [withIcon]=\"withIcon\"\n [color]=\"color\"\n [action]=\"action\"\n (trigger)=\"onTriggerAction(action)\"\n >\n </igo-actionbar-item>\n <br />\n </ng-template>\n </mat-list>\n</mat-card>\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}:host.horizontal{max-width:100%;overflow:unset}:host.horizontal mat-list{width:auto;white-space:nowrap}:host.horizontal igo-actionbar-item{display:inline-block}:host mat-list{padding-top:0}:host .buttonOverlay{margin:0}:host .context-menu-card{padding:8px 3px;margin:10px}:host #topChevron{position:sticky;top:0;background-color:#fff;z-index:3;display:flex;justify-content:center}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){:host #topChevron{position:fixed;top:unset}}@supports (-ms-accelerator: true){:host #topChevron{position:fixed;top:unset}}:host #lowChevron{position:sticky;bottom:0;background-color:#fff;z-index:3;display:flex;justify-content:center}:host .igo-actionbar-overlay{min-width:inherit!important;padding-top:0;padding-bottom:0}:host .igo-actionbar-overlay .mat-mdc-list{padding-top:0}:host .igo-actionbar-overlay .mat-mdc-menu-content:not(:empty){padding-top:0;padding-bottom:0}:host.with-title ::ng-deep .mdc-list-item--with-leading-avatar .mdc-list-item__start{margin-right:0}:host ::ng-deep .mdc-list-item__primary-text{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}\n"] }]
}], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$1.MediaService }], propDecorators: { store: [{
type: Input
}], mode: [{
type: Input
}], withToggleButton: [{
type: Input
}], horizontal: [{
type: Input
}], color: [{
type: Input
}], iconColor: [{
type: Input
}], withTitle: [{
type: Input
}], withTooltip: [{
type: Input
}], scrollActive: [{
type: Input
}], withIcon: [{
type: Input
}], icon: [{
type: Input
}], xPosition: [{
type: Input
}], yPosition: [{
type: Input
}], overlayClass: [{
type: Input
}], isCollapsed: [{
type: HostBinding,
args: ['class.is-collapsed']
}], withTitleClass: [{
type: HostBinding,
args: ['class.with-title']
}], withIconClass: [{
type: HostBinding,
args: ['class.with-icon']
}], horizontalClass: [{
type: HostBinding,
args: ['class.horizontal']
}] } });
/**
* @deprecated import the ActionbarComponent directly
*/
class IgoActionModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoActionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: IgoActionModule, imports: [ActionbarComponent], exports: [ActionbarComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoActionModule, imports: [ActionbarComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoActionModule, decorators: [{
type: NgModule,
args: [{
imports: [ActionbarComponent],
exports: [ActionbarComponent]
}]
}] });
/**
* @deprecated import the ActionbarComponent directly
*/
class IgoActionbarModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoActionbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: IgoActionbarModule, imports: [ActionbarComponent], exports: [ActionbarComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoActionbarModule, imports: [ActionbarComponent] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: IgoActionbarModule, decorators: [{
type: NgModule,
args: [{
imports: [ActionbarComponent],
exports: [ActionbarComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ActionStore, ActionbarComponent, ActionbarMode, IgoActionModule, IgoActionbarModule };
//# sourceMappingURL=igo2-common-action.mjs.map