@smartbit4all/ng-client 6.0.45 → 6.0.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/view-context/smart-ui-action/components/menu/click/menu.component.mjs +36 -6
- package/esm2022/lib/view-context/smart-ui-action/components/menu/hover/hover-menu.component.mjs +36 -6
- package/esm2022/lib/view-context/smart-view-context-dialog.service.mjs +2 -2
- package/fesm2022/smartbit4all-ng-client.mjs +71 -11
- package/fesm2022/smartbit4all-ng-client.mjs.map +1 -1
- package/lib/view-context/smart-ui-action/components/menu/click/menu.component.d.ts +7 -3
- package/lib/view-context/smart-ui-action/components/menu/hover/hover-menu.component.d.ts +7 -3
- package/package.json +1 -1
- package/smartbit4all-ng-client-6.0.46.tgz +0 -0
- package/smartbit4all-ng-client-6.0.45.tgz +0 -0
|
@@ -3820,7 +3820,7 @@ class SmartViewContextDialogService {
|
|
|
3820
3820
|
closeOnEscape: false,
|
|
3821
3821
|
duplicate: true,
|
|
3822
3822
|
closable: !this.inject.get(DIALOG_DISABLE_CLOSE),
|
|
3823
|
-
|
|
3823
|
+
baseZIndex: -102,
|
|
3824
3824
|
});
|
|
3825
3825
|
dialogRef.onClose.pipe(take(1)).subscribe((result) => {
|
|
3826
3826
|
this.closeDialog(dialogRef, dialogData);
|
|
@@ -6575,11 +6575,12 @@ function getMenuPositions(direction) {
|
|
|
6575
6575
|
}
|
|
6576
6576
|
|
|
6577
6577
|
class ClickMenuComponent {
|
|
6578
|
-
constructor(menuService, overlay, viewContainerRef, overlayPositionBuilder, compLib) {
|
|
6578
|
+
constructor(menuService, overlay, viewContainerRef, overlayPositionBuilder, scrollDispatcher, compLib) {
|
|
6579
6579
|
this.menuService = menuService;
|
|
6580
6580
|
this.overlay = overlay;
|
|
6581
6581
|
this.viewContainerRef = viewContainerRef;
|
|
6582
6582
|
this.overlayPositionBuilder = overlayPositionBuilder;
|
|
6583
|
+
this.scrollDispatcher = scrollDispatcher;
|
|
6583
6584
|
this.compLib = compLib;
|
|
6584
6585
|
this.overlayRef = null;
|
|
6585
6586
|
this.isSubmenu = false;
|
|
@@ -6589,6 +6590,10 @@ class ClickMenuComponent {
|
|
|
6589
6590
|
this.submenuOpenMap = new Map();
|
|
6590
6591
|
this.subActions = [];
|
|
6591
6592
|
this.hasCheckedChildren = false;
|
|
6593
|
+
this.lastScrollContainer = null;
|
|
6594
|
+
this.onContainerScroll = () => {
|
|
6595
|
+
this.overlayRef?.updatePosition();
|
|
6596
|
+
};
|
|
6592
6597
|
this.compLib = compLib ?? ComponentLibrary.PRIMENG;
|
|
6593
6598
|
if (this.compLib === ComponentLibrary.PRIMENG) {
|
|
6594
6599
|
this.icon = 'chevron-right';
|
|
@@ -6662,6 +6667,11 @@ class ClickMenuComponent {
|
|
|
6662
6667
|
}
|
|
6663
6668
|
closeMenu() {
|
|
6664
6669
|
if (this.overlayRef) {
|
|
6670
|
+
const container = this.lastScrollContainer;
|
|
6671
|
+
if (container) {
|
|
6672
|
+
container.removeEventListener('scroll', this.onContainerScroll);
|
|
6673
|
+
this.lastScrollContainer = null;
|
|
6674
|
+
}
|
|
6665
6675
|
this.overlayRef.dispose();
|
|
6666
6676
|
this.overlayRef = null;
|
|
6667
6677
|
this.hasCheckedChildren = false;
|
|
@@ -6695,19 +6705,39 @@ class ClickMenuComponent {
|
|
|
6695
6705
|
var positions = this.isSubmenu
|
|
6696
6706
|
? getSubmenuPositions(this.menuOpenDirection)
|
|
6697
6707
|
: getMenuPositions(this.triggerAction?.descriptor?.menu?.openDirection);
|
|
6708
|
+
const scrollContainer = this.getScrollContainer(triggerElement);
|
|
6698
6709
|
let positionStrategy = this.overlayPositionBuilder
|
|
6699
6710
|
.flexibleConnectedTo(triggerElement)
|
|
6700
6711
|
.withFlexibleDimensions(false)
|
|
6701
6712
|
.withPush(true)
|
|
6702
|
-
.withPositions(positions)
|
|
6713
|
+
.withPositions(positions)
|
|
6714
|
+
.withScrollableContainers(this.scrollDispatcher.getAncestorScrollContainers(triggerElement));
|
|
6703
6715
|
this.overlayRef = this.overlay.create({
|
|
6704
6716
|
positionStrategy,
|
|
6705
|
-
scrollStrategy:
|
|
6717
|
+
scrollStrategy: scrollContainer
|
|
6718
|
+
? this.overlay.scrollStrategies.reposition()
|
|
6719
|
+
: this.overlay.scrollStrategies.reposition(),
|
|
6706
6720
|
hasBackdrop: false,
|
|
6707
6721
|
});
|
|
6722
|
+
if (scrollContainer) {
|
|
6723
|
+
this.lastScrollContainer = scrollContainer;
|
|
6724
|
+
scrollContainer.addEventListener('scroll', this.onContainerScroll, { passive: true });
|
|
6725
|
+
}
|
|
6708
6726
|
let portal = new TemplatePortal(this.menuTemplate, this.viewContainerRef);
|
|
6709
6727
|
this.overlayRef.attach(portal);
|
|
6710
6728
|
}
|
|
6729
|
+
getScrollContainer(el) {
|
|
6730
|
+
let parent = el.parentElement;
|
|
6731
|
+
while (parent) {
|
|
6732
|
+
const style = window.getComputedStyle(parent);
|
|
6733
|
+
const overflow = style.overflow + style.overflowY;
|
|
6734
|
+
if (/auto|scroll/.test(overflow) && parent.scrollHeight > parent.clientHeight) {
|
|
6735
|
+
return parent;
|
|
6736
|
+
}
|
|
6737
|
+
parent = parent.parentElement;
|
|
6738
|
+
}
|
|
6739
|
+
return null;
|
|
6740
|
+
}
|
|
6711
6741
|
toggleMenu(event) {
|
|
6712
6742
|
if (!this.isOpen) {
|
|
6713
6743
|
this.openMenu(event);
|
|
@@ -6779,13 +6809,13 @@ class ClickMenuComponent {
|
|
|
6779
6809
|
iconPosition() {
|
|
6780
6810
|
return IconPosition;
|
|
6781
6811
|
}
|
|
6782
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ClickMenuComponent, deps: [{ token: UiMenuService }, { token: i2$3.Overlay }, { token: i0.ViewContainerRef }, { token: i2$3.OverlayPositionBuilder }, { token: COMPONENT_LIBRARY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6812
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ClickMenuComponent, deps: [{ token: UiMenuService }, { token: i2$3.Overlay }, { token: i0.ViewContainerRef }, { token: i2$3.OverlayPositionBuilder }, { token: i2$3.ScrollDispatcher }, { token: COMPONENT_LIBRARY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6783
6813
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: { triggerAction: "triggerAction", isSubmenu: "isSubmenu", menuOpenDirection: "menuOpenDirection" }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isSubmenu) {\r\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n <ul class=\"ui-tiered-menu sb4-menu-panel\">\r\n <li\r\n *ngFor=\"let action of subActions\"\r\n class=\"hoverEffect\"\r\n [class.disabled]=\"action.disabled\"\r\n [class.sb4-post-icon]=\"action.descriptor?.iconPosition === iconPosition().POST\"\r\n (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n >\r\n @if (action.subActions && action.subActions.length > 0) {\r\n <ui-tiered-menu\r\n #submenu\r\n [triggerAction]=\"action\"\r\n [isSubmenu]=\"true\"\r\n [subActions]=\"action.subActions!\"\r\n [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n ></ui-tiered-menu>\r\n } @else {\r\n <ui-action-button\r\n [descriptor]=\"action.descriptor!\"\r\n [code]=\"action.code\"\r\n [disabled]=\"!!action.disabled\"\r\n [viewActivated]=\"action.viewActivated\"\r\n [iconPlaceholder]=\"\r\n action.descriptor?.icon || action.descriptor?.iconResource\r\n ? undefined\r\n : computedIconPlaceholder\r\n \"\r\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n ></ui-action-button>\r\n @if (hasSubActionSiblings) {\r\n <smart-icon\r\n class=\"sb4-menu-placeholder\"\r\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\r\n ></smart-icon>\r\n }\r\n }\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n <ui-action-button\r\n [descriptor]=\"triggerAction.descriptor!\"\r\n [code]=\"triggerAction.code\"\r\n [disabled]=\"!!triggerAction.disabled\"\r\n [viewActivated]=\"triggerAction.viewActivated\"\r\n (actionClick)=\"toggleMenu($event.event)\"\r\n [class.submenuTrigger]=\"isSubmenu\"\r\n >\r\n </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}.ui-tiered-menu{--sb4-panel-bg-color: white;--sb4-panel-hover-bg-color: rgb(241, 245, 249)}li{display:flex}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:var(--sb4-panel-bg-color);width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-tiered-menu ::ng-deep button{background-color:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.ui-tiered-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:var(--sb4-panel-hover-bg-color)!important}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:var(--sb4-panel-hover-bg-color)!important}.ui-tiered-menu ::ng-deep ui-action-button,.ui-tiered-menu ::ng-deep ui-badge{width:100%}.ui-tiered-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color:var(--sb4-panel-hover-bg-color)!important;transition:none!important}.sb4-menu-panel ::ng-deep button{background-color:unset!important;border-color:unset!important;transition:none!important}.sb4-menu-panel ::ng-deep button .mdc-button__ripple:before,.sb4-menu-panel ::ng-deep button:before{background-color:transparent!important;opacity:0!important}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-menu-color, var(--sb4-view-activated-bg, var(--primary-color, #1976d2)) )!important;font-weight:var(--sb4-view-activated-font-weight, 600)}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel .hoverEffect:hover ::ng-deep button.sb4-view-activated{background-color:var( --sb4-view-activated-menu-bg, rgb(from var(--primary-color, #1976d2) r g b / .12) )!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }] }); }
|
|
6784
6814
|
}
|
|
6785
6815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ClickMenuComponent, decorators: [{
|
|
6786
6816
|
type: Component,
|
|
6787
6817
|
args: [{ selector: 'ui-tiered-menu', template: "@if (isSubmenu) {\r\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n <ul class=\"ui-tiered-menu sb4-menu-panel\">\r\n <li\r\n *ngFor=\"let action of subActions\"\r\n class=\"hoverEffect\"\r\n [class.disabled]=\"action.disabled\"\r\n [class.sb4-post-icon]=\"action.descriptor?.iconPosition === iconPosition().POST\"\r\n (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n >\r\n @if (action.subActions && action.subActions.length > 0) {\r\n <ui-tiered-menu\r\n #submenu\r\n [triggerAction]=\"action\"\r\n [isSubmenu]=\"true\"\r\n [subActions]=\"action.subActions!\"\r\n [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n ></ui-tiered-menu>\r\n } @else {\r\n <ui-action-button\r\n [descriptor]=\"action.descriptor!\"\r\n [code]=\"action.code\"\r\n [disabled]=\"!!action.disabled\"\r\n [viewActivated]=\"action.viewActivated\"\r\n [iconPlaceholder]=\"\r\n action.descriptor?.icon || action.descriptor?.iconResource\r\n ? undefined\r\n : computedIconPlaceholder\r\n \"\r\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n ></ui-action-button>\r\n @if (hasSubActionSiblings) {\r\n <smart-icon\r\n class=\"sb4-menu-placeholder\"\r\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\r\n ></smart-icon>\r\n }\r\n }\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n <ui-action-button\r\n [descriptor]=\"triggerAction.descriptor!\"\r\n [code]=\"triggerAction.code\"\r\n [disabled]=\"!!triggerAction.disabled\"\r\n [viewActivated]=\"triggerAction.viewActivated\"\r\n (actionClick)=\"toggleMenu($event.event)\"\r\n [class.submenuTrigger]=\"isSubmenu\"\r\n >\r\n </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}.ui-tiered-menu{--sb4-panel-bg-color: white;--sb4-panel-hover-bg-color: rgb(241, 245, 249)}li{display:flex}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:var(--sb4-panel-bg-color);width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-tiered-menu ::ng-deep button{background-color:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.ui-tiered-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:var(--sb4-panel-hover-bg-color)!important}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:var(--sb4-panel-hover-bg-color)!important}.ui-tiered-menu ::ng-deep ui-action-button,.ui-tiered-menu ::ng-deep ui-badge{width:100%}.ui-tiered-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color:var(--sb4-panel-hover-bg-color)!important;transition:none!important}.sb4-menu-panel ::ng-deep button{background-color:unset!important;border-color:unset!important;transition:none!important}.sb4-menu-panel ::ng-deep button .mdc-button__ripple:before,.sb4-menu-panel ::ng-deep button:before{background-color:transparent!important;opacity:0!important}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-menu-color, var(--sb4-view-activated-bg, var(--primary-color, #1976d2)) )!important;font-weight:var(--sb4-view-activated-font-weight, 600)}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel .hoverEffect:hover ::ng-deep button.sb4-view-activated{background-color:var( --sb4-view-activated-menu-bg, rgb(from var(--primary-color, #1976d2) r g b / .12) )!important}\n"] }]
|
|
6788
|
-
}], ctorParameters: () => [{ type: UiMenuService }, { type: i2$3.Overlay }, { type: i0.ViewContainerRef }, { type: i2$3.OverlayPositionBuilder }, { type: ComponentLibrary, decorators: [{
|
|
6818
|
+
}], ctorParameters: () => [{ type: UiMenuService }, { type: i2$3.Overlay }, { type: i0.ViewContainerRef }, { type: i2$3.OverlayPositionBuilder }, { type: i2$3.ScrollDispatcher }, { type: ComponentLibrary, decorators: [{
|
|
6789
6819
|
type: Inject,
|
|
6790
6820
|
args: [COMPONENT_LIBRARY]
|
|
6791
6821
|
}, {
|
|
@@ -6815,11 +6845,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
|
|
|
6815
6845
|
}] } });
|
|
6816
6846
|
|
|
6817
6847
|
class HoverMenuComponent {
|
|
6818
|
-
constructor(menuService, overlay, viewContainerRef, overlayPositionBuilder, compLib) {
|
|
6848
|
+
constructor(menuService, overlay, viewContainerRef, overlayPositionBuilder, scrollDispatcher, compLib) {
|
|
6819
6849
|
this.menuService = menuService;
|
|
6820
6850
|
this.overlay = overlay;
|
|
6821
6851
|
this.viewContainerRef = viewContainerRef;
|
|
6822
6852
|
this.overlayPositionBuilder = overlayPositionBuilder;
|
|
6853
|
+
this.scrollDispatcher = scrollDispatcher;
|
|
6823
6854
|
this.compLib = compLib;
|
|
6824
6855
|
this.overlayRef = null;
|
|
6825
6856
|
this.isSubmenu = false;
|
|
@@ -6830,6 +6861,10 @@ class HoverMenuComponent {
|
|
|
6830
6861
|
this.submenuOpenMap = new Map();
|
|
6831
6862
|
this.subActions = [];
|
|
6832
6863
|
this.hasCheckedChildren = false;
|
|
6864
|
+
this.lastScrollContainer = null;
|
|
6865
|
+
this.onContainerScroll = () => {
|
|
6866
|
+
this.overlayRef?.updatePosition();
|
|
6867
|
+
};
|
|
6833
6868
|
this.compLib = compLib ?? ComponentLibrary.PRIMENG;
|
|
6834
6869
|
if (this.compLib === ComponentLibrary.PRIMENG) {
|
|
6835
6870
|
this.icon = 'chevron-right';
|
|
@@ -6903,6 +6938,11 @@ class HoverMenuComponent {
|
|
|
6903
6938
|
}
|
|
6904
6939
|
closeMenu() {
|
|
6905
6940
|
if (this.overlayRef) {
|
|
6941
|
+
const container = this.lastScrollContainer;
|
|
6942
|
+
if (container) {
|
|
6943
|
+
container.removeEventListener('scroll', this.onContainerScroll);
|
|
6944
|
+
this.lastScrollContainer = null;
|
|
6945
|
+
}
|
|
6906
6946
|
this.overlayRef.dispose();
|
|
6907
6947
|
this.overlayRef = null;
|
|
6908
6948
|
this.hasCheckedChildren = false;
|
|
@@ -6937,19 +6977,39 @@ class HoverMenuComponent {
|
|
|
6937
6977
|
var positions = this.isSubmenu
|
|
6938
6978
|
? getSubmenuPositions(this.menuOpenDirection)
|
|
6939
6979
|
: getMenuPositions(this.triggerAction?.descriptor?.menu?.openDirection);
|
|
6980
|
+
const scrollContainer = this.getScrollContainer(triggerElement);
|
|
6940
6981
|
let positionStrategy = this.overlayPositionBuilder
|
|
6941
6982
|
.flexibleConnectedTo(triggerElement)
|
|
6942
6983
|
.withFlexibleDimensions(false)
|
|
6943
6984
|
.withPush(true)
|
|
6944
|
-
.withPositions(positions)
|
|
6985
|
+
.withPositions(positions)
|
|
6986
|
+
.withScrollableContainers(this.scrollDispatcher.getAncestorScrollContainers(triggerElement));
|
|
6945
6987
|
this.overlayRef = this.overlay.create({
|
|
6946
6988
|
positionStrategy,
|
|
6947
|
-
scrollStrategy:
|
|
6989
|
+
scrollStrategy: scrollContainer
|
|
6990
|
+
? this.overlay.scrollStrategies.reposition()
|
|
6991
|
+
: this.overlay.scrollStrategies.reposition(),
|
|
6948
6992
|
hasBackdrop: false,
|
|
6949
6993
|
});
|
|
6994
|
+
if (scrollContainer) {
|
|
6995
|
+
this.lastScrollContainer = scrollContainer;
|
|
6996
|
+
scrollContainer.addEventListener('scroll', this.onContainerScroll, { passive: true });
|
|
6997
|
+
}
|
|
6950
6998
|
let portal = new TemplatePortal(this.menuTemplate, this.viewContainerRef);
|
|
6951
6999
|
this.overlayRef.attach(portal);
|
|
6952
7000
|
}
|
|
7001
|
+
getScrollContainer(el) {
|
|
7002
|
+
let parent = el.parentElement;
|
|
7003
|
+
while (parent) {
|
|
7004
|
+
const style = window.getComputedStyle(parent);
|
|
7005
|
+
const overflow = style.overflow + style.overflowY;
|
|
7006
|
+
if (/auto|scroll/.test(overflow) && parent.scrollHeight > parent.clientHeight) {
|
|
7007
|
+
return parent;
|
|
7008
|
+
}
|
|
7009
|
+
parent = parent.parentElement;
|
|
7010
|
+
}
|
|
7011
|
+
return null;
|
|
7012
|
+
}
|
|
6953
7013
|
toggleMenu(event) {
|
|
6954
7014
|
if (!this.isOpen) {
|
|
6955
7015
|
this.openMenu(event);
|
|
@@ -7021,13 +7081,13 @@ class HoverMenuComponent {
|
|
|
7021
7081
|
iconPosition() {
|
|
7022
7082
|
return IconPosition;
|
|
7023
7083
|
}
|
|
7024
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HoverMenuComponent, deps: [{ token: UiMenuService }, { token: i2$3.Overlay }, { token: i0.ViewContainerRef }, { token: i2$3.OverlayPositionBuilder }, { token: COMPONENT_LIBRARY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7084
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HoverMenuComponent, deps: [{ token: UiMenuService }, { token: i2$3.Overlay }, { token: i0.ViewContainerRef }, { token: i2$3.OverlayPositionBuilder }, { token: i2$3.ScrollDispatcher }, { token: COMPONENT_LIBRARY, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7025
7085
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: { triggerAction: { classPropertyName: "triggerAction", publicName: "triggerAction", isSignal: false, isRequired: false, transformFunction: null }, isSubmenu: { classPropertyName: "isSubmenu", publicName: "isSubmenu", isSignal: false, isRequired: false, transformFunction: null }, menuOpenDirection: { classPropertyName: "menuOpenDirection", publicName: "menuOpenDirection", isSignal: false, isRequired: false, transformFunction: null }, toolbarId: { classPropertyName: "toolbarId", publicName: "toolbarId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isSubmenu) {\r\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n <ul class=\"ui-hover-menu sb4-menu-panel\">\r\n <li\r\n *ngFor=\"let action of subActions\"\r\n class=\"hoverEffect\"\r\n [class.disabled]=\"action.disabled\"\r\n [class.sb4-post-icon]=\"action.descriptor?.iconPosition === iconPosition().POST\"\r\n (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n >\r\n @if (action.subActions && action.subActions.length > 0) {\r\n <ui-hover-menu\r\n #submenu\r\n [triggerAction]=\"action\"\r\n [isSubmenu]=\"true\"\r\n [subActions]=\"action.subActions!\"\r\n [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n ></ui-hover-menu>\r\n } @else {\r\n <ui-action-button\r\n [descriptor]=\"action.descriptor!\"\r\n [code]=\"action.code\"\r\n [disabled]=\"!!action.disabled\"\r\n [viewActivated]=\"action.viewActivated\"\r\n [iconPlaceholder]=\"\r\n action.descriptor?.icon || action.descriptor?.iconResource\r\n ? undefined\r\n : computedIconPlaceholder\r\n \"\r\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n ></ui-action-button>\r\n @if (hasSubActionSiblings) {\r\n <smart-icon\r\n class=\"sb4-menu-placeholder\"\r\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\r\n ></smart-icon>\r\n }\r\n }\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n <ui-action-button\r\n [descriptor]=\"triggerAction.descriptor!\"\r\n [code]=\"triggerAction.code\"\r\n [disabled]=\"!!triggerAction.disabled\"\r\n [viewActivated]=\"triggerAction.viewActivated\"\r\n (mouseenter)=\"openMenu($event)\"\r\n (actionClick)=\"onActionClick(triggerAction)\"\r\n [class.submenuTrigger]=\"isSubmenu\"\r\n >\r\n </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}li{display:flex}.ui-hover-menu{--sb4-panel-bg-color: white;--sb4-panel-hover-bg-color: rgb(241, 245, 249)}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:var(--sb4-panel-bg-color);width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-hover-menu ::ng-deep button{background-color:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.ui-hover-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.ui-hover-menu ::ng-deep ui-action-button,.ui-hover-menu ::ng-deep ui-badge{width:100%}.ui-hover-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect:hover ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color:var(--sb4-panel-hover-bg-color)!important;transition:none!important}.sb4-menu-panel ::ng-deep button{background-color:unset!important;border-color:unset!important;transition:none!important}.sb4-menu-panel ::ng-deep button .mdc-button__ripple:before,.sb4-menu-panel ::ng-deep button:before{background-color:transparent!important;opacity:0!important}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-menu-color, var(--sb4-view-activated-bg, var(--primary-color, #1976d2)) )!important;font-weight:var(--sb4-view-activated-font-weight, 600)}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel .hoverEffect:hover ::ng-deep button.sb4-view-activated{background-color:var( --sb4-view-activated-menu-bg, rgb(from var(--primary-color, #1976d2) r g b / .12) )!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection", "toolbarId"], outputs: ["actionClick", "submenuOpened"] }] }); }
|
|
7026
7086
|
}
|
|
7027
7087
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: HoverMenuComponent, decorators: [{
|
|
7028
7088
|
type: Component,
|
|
7029
7089
|
args: [{ selector: 'ui-hover-menu', template: "@if (isSubmenu) {\r\n <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\r\n </div>\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\r\n}\r\n\r\n<ng-template #menuTemplate>\r\n <ul class=\"ui-hover-menu sb4-menu-panel\">\r\n <li\r\n *ngFor=\"let action of subActions\"\r\n class=\"hoverEffect\"\r\n [class.disabled]=\"action.disabled\"\r\n [class.sb4-post-icon]=\"action.descriptor?.iconPosition === iconPosition().POST\"\r\n (mouseenter)=\"closeSiblingSubmenus(action)\"\r\n >\r\n @if (action.subActions && action.subActions.length > 0) {\r\n <ui-hover-menu\r\n #submenu\r\n [triggerAction]=\"action\"\r\n [isSubmenu]=\"true\"\r\n [subActions]=\"action.subActions!\"\r\n [menuOpenDirection]=\"triggerAction.descriptor?.menu?.openDirection\"\r\n (actionClick)=\"actionClick.emit($event)\"\r\n (submenuOpened)=\"onSubmenuOpened(submenu)\"\r\n ></ui-hover-menu>\r\n } @else {\r\n <ui-action-button\r\n [descriptor]=\"action.descriptor!\"\r\n [code]=\"action.code\"\r\n [disabled]=\"!!action.disabled\"\r\n [viewActivated]=\"action.viewActivated\"\r\n [iconPlaceholder]=\"\r\n action.descriptor?.icon || action.descriptor?.iconResource\r\n ? undefined\r\n : computedIconPlaceholder\r\n \"\r\n (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\r\n ></ui-action-button>\r\n @if (hasSubActionSiblings) {\r\n <smart-icon\r\n class=\"sb4-menu-placeholder\"\r\n (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\r\n ></smart-icon>\r\n }\r\n }\r\n </li>\r\n </ul>\r\n</ng-template>\r\n\r\n<ng-template #triggerTempalte>\r\n <ui-action-button\r\n [descriptor]=\"triggerAction.descriptor!\"\r\n [code]=\"triggerAction.code\"\r\n [disabled]=\"!!triggerAction.disabled\"\r\n [viewActivated]=\"triggerAction.viewActivated\"\r\n (mouseenter)=\"openMenu($event)\"\r\n (actionClick)=\"onActionClick(triggerAction)\"\r\n [class.submenuTrigger]=\"isSubmenu\"\r\n >\r\n </ui-action-button>\r\n</ng-template>\r\n", styles: [":host{display:inline-block;position:relative}li{display:flex}.ui-hover-menu{--sb4-panel-bg-color: white;--sb4-panel-hover-bg-color: rgb(241, 245, 249)}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:var(--sb4-panel-bg-color);width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-hover-menu ::ng-deep button{background-color:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:#000;width:100%;justify-content:flex-start}.ui-hover-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.ui-hover-menu ::ng-deep ui-action-button,.ui-hover-menu ::ng-deep ui-badge{width:100%}.ui-hover-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:#aaa;cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect:hover ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color:var(--sb4-panel-hover-bg-color)!important;transition:none!important}.sb4-menu-panel ::ng-deep button{background-color:unset!important;border-color:unset!important;transition:none!important}.sb4-menu-panel ::ng-deep button .mdc-button__ripple:before,.sb4-menu-panel ::ng-deep button:before{background-color:transparent!important;opacity:0!important}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-menu-color, var(--sb4-view-activated-bg, var(--primary-color, #1976d2)) )!important;font-weight:var(--sb4-view-activated-font-weight, 600)}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel .hoverEffect:hover ::ng-deep button.sb4-view-activated{background-color:var( --sb4-view-activated-menu-bg, rgb(from var(--primary-color, #1976d2) r g b / .12) )!important}\n"] }]
|
|
7030
|
-
}], ctorParameters: () => [{ type: UiMenuService }, { type: i2$3.Overlay }, { type: i0.ViewContainerRef }, { type: i2$3.OverlayPositionBuilder }, { type: ComponentLibrary, decorators: [{
|
|
7090
|
+
}], ctorParameters: () => [{ type: UiMenuService }, { type: i2$3.Overlay }, { type: i0.ViewContainerRef }, { type: i2$3.OverlayPositionBuilder }, { type: i2$3.ScrollDispatcher }, { type: ComponentLibrary, decorators: [{
|
|
7031
7091
|
type: Inject,
|
|
7032
7092
|
args: [COMPONENT_LIBRARY]
|
|
7033
7093
|
}, {
|