ngx-bimplus-components 0.0.172 → 0.0.173
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.
|
@@ -2959,7 +2959,8 @@ class BimplusSidenavComponent extends BimplusLocalizedWidgetComponent {
|
|
|
2959
2959
|
// #region public fields
|
|
2960
2960
|
this.activeItem = signal('');
|
|
2961
2961
|
this.drawerWidth = signal(300);
|
|
2962
|
-
this
|
|
2962
|
+
// Don't use signal for this internal flag, ACDC-29941
|
|
2963
|
+
this.drawerExpanded = true;
|
|
2963
2964
|
this.activeItemChanged = new EventEmitter();
|
|
2964
2965
|
this.actionClicked = new EventEmitter();
|
|
2965
2966
|
this.footerClicked = new EventEmitter();
|
|
@@ -2980,7 +2981,7 @@ class BimplusSidenavComponent extends BimplusLocalizedWidgetComponent {
|
|
|
2980
2981
|
if (!foundItem) {
|
|
2981
2982
|
return;
|
|
2982
2983
|
}
|
|
2983
|
-
if (!this.drawerExpanded
|
|
2984
|
+
if (!this.drawerExpanded) {
|
|
2984
2985
|
this._toggleDrawer();
|
|
2985
2986
|
}
|
|
2986
2987
|
fireEvent(this, "activeItemChanged", item);
|
|
@@ -2992,18 +2993,18 @@ class BimplusSidenavComponent extends BimplusLocalizedWidgetComponent {
|
|
|
2992
2993
|
fireEvent(this, "footerClicked", item);
|
|
2993
2994
|
}
|
|
2994
2995
|
_toggleDrawer() {
|
|
2995
|
-
this.drawerExpanded
|
|
2996
|
+
this.drawerExpanded = !this.drawerExpanded;
|
|
2996
2997
|
}
|
|
2997
2998
|
_onResizeWidth(event) {
|
|
2998
2999
|
const deltaX = event;
|
|
2999
3000
|
this.drawerWidth.update(value => (value + deltaX));
|
|
3000
3001
|
}
|
|
3001
3002
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BimplusSidenavComponent, deps: [{ token: i1.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3002
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: BimplusSidenavComponent, isStandalone: true, selector: "lib-bimplus-sidenav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, actionItems: { classPropertyName: "actionItems", publicName: "actionItems", isSignal: true, isRequired: false, transformFunction: null }, footerItem: { classPropertyName: "footerItem", publicName: "footerItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemChanged: "activeItemChanged", actionClicked: "actionClicked", footerClicked: "footerClicked" }, providers: [TranslateService], usesInheritance: true, ngImport: i0, template: "
|
|
3003
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: BimplusSidenavComponent, isStandalone: true, selector: "lib-bimplus-sidenav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, actionItems: { classPropertyName: "actionItems", publicName: "actionItems", isSignal: true, isRequired: false, transformFunction: null }, footerItem: { classPropertyName: "footerItem", publicName: "footerItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemChanged: "activeItemChanged", actionClicked: "actionClicked", footerClicked: "footerClicked" }, providers: [TranslateService], usesInheritance: true, ngImport: i0, template: "<div class=\"sidenav\">\r\n @for (sideNavItem of items(); track sideNavItem) {\r\n <div class=\"sidenav-row\">\r\n @if (sideNavItem.disabled) {\r\n <div\r\n [attr.data-test]=\"'sidenav_item_' + sideNavItem.id\"\r\n class=\"sidenav-item\"\r\n [style.background]=\"\r\n ' no-repeat center center url(' + sideNavItem.iconDisabled + ')'\r\n \"\r\n [title]=\"sideNavItem.text | translate\"\r\n (keypress)=\"_toggleDrawer()\"\r\n ></div>\r\n } @else { @if (activeItem() === sideNavItem.id) {\r\n <div\r\n [attr.data-test]=\"'sidenav_item_' + sideNavItem.id\"\r\n class=\"sidenav-item\"\r\n [style.background]=\"\r\n ' no-repeat center center url(' + sideNavItem.iconActive + ')'\r\n \"\r\n (click)=\"_toggleDrawer()\"\r\n (keypress)=\"_toggleDrawer()\"\r\n [title]=\"sideNavItem.text | translate\"\r\n ></div>\r\n } @else {\r\n <div\r\n [attr.data-test]=\"'sidenav_item_' + sideNavItem.id\"\r\n class=\"sidenav-item\"\r\n [style.background]=\"\r\n ' no-repeat center center url(' + sideNavItem.icon + ')'\r\n \"\r\n (click)=\"_activateItem(sideNavItem.id)\"\r\n (keypress)=\"_activateItem(sideNavItem.id)\"\r\n [title]=\"sideNavItem.text | translate\"\r\n ></div>\r\n } }\r\n </div>\r\n } @if (actionItems().length) {\r\n <div class=\"sidenav-separator\"></div>\r\n @for(actionItem of actionItems(); track actionItem) {\r\n <div class=\"sidenav-row\">\r\n <div\r\n [attr.data-test]=\"'sidenav_action_item_' + actionItem.id\"\r\n class=\"sidenav-item\"\r\n [style.background]=\"\r\n ' no-repeat center center url(' + actionItem.icon + ')'\r\n \"\r\n (click)=\"_clickAction(actionItem.id)\"\r\n (keypress)=\"_clickAction(actionItem.id)\"\r\n [title]=\"actionItem.text | translate\"\r\n ></div>\r\n </div>\r\n } } @if (footerItem(); as footerItem) {\r\n <div class=\"sidenav-row-footer\">\r\n <div\r\n [attr.data-test]=\"'sidenav_footer_item_' + footerItem.id\"\r\n class=\"sidenav-item\"\r\n [style.background]=\"\r\n ' no-repeat center center url(' + footerItem.icon + ')'\r\n \"\r\n (click)=\"_clickFooter(footerItem.id)\"\r\n (keypress)=\"_clickFooter(footerItem.id)\"\r\n ></div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<div\r\n class=\"sidenav-drawer\"\r\n [style.width]=\"drawerWidth() | pxsuffix\"\r\n [ngClass]=\"drawerExpanded ? '' : 'hidden'\"\r\n>\r\n <slot></slot>\r\n @if (drawerExpanded) {\r\n <div\r\n xDraggable\r\n class=\"sidenav-resize-border-right\"\r\n (dragging)=\"_onResizeWidth($event)\"\r\n ></div>\r\n <div\r\n xDraggable\r\n data-test=\"sidenav-resize-handle\"\r\n class=\"sidenav-resize-handle-left\"\r\n (dragging)=\"_onResizeWidth($event)\"\r\n (clicked)=\"_toggleDrawer()\"\r\n ></div>\r\n }\r\n</div>\r\n@if (!drawerExpanded) {\r\n<div\r\n data-test=\"sidenav-resize-handle\"\r\n class=\"sidenav-resize-handle-left collapsed\"\r\n (click)=\"_toggleDrawer()\"\r\n (keypress)=\"_toggleDrawer()\"\r\n></div>\r\n}\r\n", styles: [".noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sidenav{width:4rem;height:100%;margin:0;padding:0;text-align:center;background-color:var(--sidenav-background-color-enabled);border:0 solid var(--sidenav-border-color-enabled);font-size:0;display:flex;flex-direction:column;position:absolute;bottom:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sidenav-item{width:3.2rem;height:3.2rem;background-size:2rem 2rem!important;margin:auto;cursor:pointer}.sidenav-separator{width:2rem;height:.1rem;border-top:.1rem solid var(--sidenav-separator-border-color-enabled);cursor:default;pointer-events:none;margin-top:.8rem;text-align:center;display:inline-block;align-self:center}.sidenav-row{width:4rem;height:3.2rem;margin-top:.8rem;display:inline-block}.sidenav-row-footer{margin-top:auto;margin-bottom:5.2rem;width:4rem;height:3.2rem}.sidenav-row-footer:hover{background-color:var(--sidenav-row-footer-background-color-hovered)}.sidenav-row:hover{background-color:var(--sidenav-row-background-color-hovered)}.sidenav-drawer{min-width:25rem;height:100%;border:0 solid var(--sidenav-drawer-border-color-enabled);position:absolute;bottom:0;left:4rem;background-color:var(--sidenav-drawer-background-color-enabled);transition:background-color .7s;border-right:solid thin var(--sidenav-drawer-border-right-color-enabled);width:300px;display:flex;flex-direction:row}.sidenav-drawer:hover{background-color:var(--sidenav-drawer-background-color-hovered)}.sidenav-drawer.hidden{display:none}.sidenav-resize-border-right{right:-5px;position:absolute;height:100%;cursor:col-resize;width:5px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sidenav-resize-handle-left{background-image:url('data:image/svg+xml,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A<path d=\"M11.0104 0L2 9L11.0104 18L12.4246 16.5874L4.82843 9L12.4246 1.41258L11.0104 0Z\" fill=\"%23444444\"/>%0D%0A</svg>%0D%0A');position:absolute;top:calc(50% - 2.4rem);right:-2.1rem;width:2.1rem;height:4.8rem;border-radius:0 .4rem .4rem 0;background-color:var(--sidenav-resize-handle-left-background-color-enabled);cursor:pointer;pointer-events:all;background-position:center center;background-repeat:no-repeat;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sidenav-resize-handle-left.collapsed{left:4rem!important;border-radius:.4rem 0 0 .4rem;transform:scaleX(-1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: PxsuffixPipe, name: "pxsuffix" }, { kind: "directive", type: XDraggableDirective, selector: "[xDraggable]", outputs: ["dragging", "clicked"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.ShadowDom }); }
|
|
3003
3004
|
}
|
|
3004
3005
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: BimplusSidenavComponent, decorators: [{
|
|
3005
3006
|
type: Component,
|
|
3006
|
-
args: [{ selector: 'lib-bimplus-sidenav', imports: [CommonModule, PxsuffixPipe, XDraggableDirective, TranslateModule], providers: [TranslateService], encapsulation: ViewEncapsulation.ShadowDom, template: "
|
|
3007
|
+
args: [{ selector: 'lib-bimplus-sidenav', imports: [CommonModule, PxsuffixPipe, XDraggableDirective, TranslateModule], providers: [TranslateService], encapsulation: ViewEncapsulation.ShadowDom, template: "<div class=\"sidenav\">\r\n @for (sideNavItem of items(); track sideNavItem) {\r\n <div class=\"sidenav-row\">\r\n @if (sideNavItem.disabled) {\r\n <div\r\n [attr.data-test]=\"'sidenav_item_' + sideNavItem.id\"\r\n class=\"sidenav-item\"\r\n [style.background]=\"\r\n ' no-repeat center center url(' + sideNavItem.iconDisabled + ')'\r\n \"\r\n [title]=\"sideNavItem.text | translate\"\r\n (keypress)=\"_toggleDrawer()\"\r\n ></div>\r\n } @else { @if (activeItem() === sideNavItem.id) {\r\n <div\r\n [attr.data-test]=\"'sidenav_item_' + sideNavItem.id\"\r\n class=\"sidenav-item\"\r\n [style.background]=\"\r\n ' no-repeat center center url(' + sideNavItem.iconActive + ')'\r\n \"\r\n (click)=\"_toggleDrawer()\"\r\n (keypress)=\"_toggleDrawer()\"\r\n [title]=\"sideNavItem.text | translate\"\r\n ></div>\r\n } @else {\r\n <div\r\n [attr.data-test]=\"'sidenav_item_' + sideNavItem.id\"\r\n class=\"sidenav-item\"\r\n [style.background]=\"\r\n ' no-repeat center center url(' + sideNavItem.icon + ')'\r\n \"\r\n (click)=\"_activateItem(sideNavItem.id)\"\r\n (keypress)=\"_activateItem(sideNavItem.id)\"\r\n [title]=\"sideNavItem.text | translate\"\r\n ></div>\r\n } }\r\n </div>\r\n } @if (actionItems().length) {\r\n <div class=\"sidenav-separator\"></div>\r\n @for(actionItem of actionItems(); track actionItem) {\r\n <div class=\"sidenav-row\">\r\n <div\r\n [attr.data-test]=\"'sidenav_action_item_' + actionItem.id\"\r\n class=\"sidenav-item\"\r\n [style.background]=\"\r\n ' no-repeat center center url(' + actionItem.icon + ')'\r\n \"\r\n (click)=\"_clickAction(actionItem.id)\"\r\n (keypress)=\"_clickAction(actionItem.id)\"\r\n [title]=\"actionItem.text | translate\"\r\n ></div>\r\n </div>\r\n } } @if (footerItem(); as footerItem) {\r\n <div class=\"sidenav-row-footer\">\r\n <div\r\n [attr.data-test]=\"'sidenav_footer_item_' + footerItem.id\"\r\n class=\"sidenav-item\"\r\n [style.background]=\"\r\n ' no-repeat center center url(' + footerItem.icon + ')'\r\n \"\r\n (click)=\"_clickFooter(footerItem.id)\"\r\n (keypress)=\"_clickFooter(footerItem.id)\"\r\n ></div>\r\n </div>\r\n }\r\n</div>\r\n\r\n<div\r\n class=\"sidenav-drawer\"\r\n [style.width]=\"drawerWidth() | pxsuffix\"\r\n [ngClass]=\"drawerExpanded ? '' : 'hidden'\"\r\n>\r\n <slot></slot>\r\n @if (drawerExpanded) {\r\n <div\r\n xDraggable\r\n class=\"sidenav-resize-border-right\"\r\n (dragging)=\"_onResizeWidth($event)\"\r\n ></div>\r\n <div\r\n xDraggable\r\n data-test=\"sidenav-resize-handle\"\r\n class=\"sidenav-resize-handle-left\"\r\n (dragging)=\"_onResizeWidth($event)\"\r\n (clicked)=\"_toggleDrawer()\"\r\n ></div>\r\n }\r\n</div>\r\n@if (!drawerExpanded) {\r\n<div\r\n data-test=\"sidenav-resize-handle\"\r\n class=\"sidenav-resize-handle-left collapsed\"\r\n (click)=\"_toggleDrawer()\"\r\n (keypress)=\"_toggleDrawer()\"\r\n></div>\r\n}\r\n", styles: [".noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sidenav{width:4rem;height:100%;margin:0;padding:0;text-align:center;background-color:var(--sidenav-background-color-enabled);border:0 solid var(--sidenav-border-color-enabled);font-size:0;display:flex;flex-direction:column;position:absolute;bottom:0;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sidenav-item{width:3.2rem;height:3.2rem;background-size:2rem 2rem!important;margin:auto;cursor:pointer}.sidenav-separator{width:2rem;height:.1rem;border-top:.1rem solid var(--sidenav-separator-border-color-enabled);cursor:default;pointer-events:none;margin-top:.8rem;text-align:center;display:inline-block;align-self:center}.sidenav-row{width:4rem;height:3.2rem;margin-top:.8rem;display:inline-block}.sidenav-row-footer{margin-top:auto;margin-bottom:5.2rem;width:4rem;height:3.2rem}.sidenav-row-footer:hover{background-color:var(--sidenav-row-footer-background-color-hovered)}.sidenav-row:hover{background-color:var(--sidenav-row-background-color-hovered)}.sidenav-drawer{min-width:25rem;height:100%;border:0 solid var(--sidenav-drawer-border-color-enabled);position:absolute;bottom:0;left:4rem;background-color:var(--sidenav-drawer-background-color-enabled);transition:background-color .7s;border-right:solid thin var(--sidenav-drawer-border-right-color-enabled);width:300px;display:flex;flex-direction:row}.sidenav-drawer:hover{background-color:var(--sidenav-drawer-background-color-hovered)}.sidenav-drawer.hidden{display:none}.sidenav-resize-border-right{right:-5px;position:absolute;height:100%;cursor:col-resize;width:5px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sidenav-resize-handle-left{background-image:url('data:image/svg+xml,<svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A<path d=\"M11.0104 0L2 9L11.0104 18L12.4246 16.5874L4.82843 9L12.4246 1.41258L11.0104 0Z\" fill=\"%23444444\"/>%0D%0A</svg>%0D%0A');position:absolute;top:calc(50% - 2.4rem);right:-2.1rem;width:2.1rem;height:4.8rem;border-radius:0 .4rem .4rem 0;background-color:var(--sidenav-resize-handle-left-background-color-enabled);cursor:pointer;pointer-events:all;background-position:center center;background-repeat:no-repeat;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sidenav-resize-handle-left.collapsed{left:4rem!important;border-radius:.4rem 0 0 .4rem;transform:scaleX(-1)}\n"] }]
|
|
3007
3008
|
}], ctorParameters: () => [{ type: i1.TranslateService }], propDecorators: { activeItemChanged: [{
|
|
3008
3009
|
type: Output
|
|
3009
3010
|
}], actionClicked: [{
|