@coreui/angular 4.3.3 → 4.3.4
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/esm2020/lib/sidebar/sidebar/sidebar.component.mjs +63 -43
- package/fesm2015/coreui-angular.mjs +58 -42
- package/fesm2015/coreui-angular.mjs.map +1 -1
- package/fesm2020/coreui-angular.mjs +61 -42
- package/fesm2020/coreui-angular.mjs.map +1 -1
- package/lib/sidebar/sidebar/sidebar.component.d.ts +14 -9
- package/package.json +1 -1
|
@@ -13,6 +13,7 @@ import { createPopper } from '@popperjs/core';
|
|
|
13
13
|
import * as i1$2 from '@angular/cdk/layout';
|
|
14
14
|
import * as i3$1 from '@angular/cdk/a11y';
|
|
15
15
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
16
|
+
import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
|
|
16
17
|
import * as i5 from '@coreui/icons-angular';
|
|
17
18
|
import { IconModule } from '@coreui/icons-angular';
|
|
18
19
|
|
|
@@ -6848,6 +6849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
6848
6849
|
args: [DOCUMENT]
|
|
6849
6850
|
}] }, { type: SidebarService }]; } });
|
|
6850
6851
|
|
|
6852
|
+
var _SidebarComponent_narrow, _SidebarComponent_overlaid, _SidebarComponent_unfoldable, _SidebarComponent_visible, _SidebarComponent_onMobile, _SidebarComponent_layoutChangeSubscription, _SidebarComponent_stateToggleSubscription, _SidebarComponent_stateInitial;
|
|
6851
6853
|
class SidebarComponent {
|
|
6852
6854
|
constructor(document, renderer, breakpointObserver, sidebarService, backdropService) {
|
|
6853
6855
|
this.document = document;
|
|
@@ -6855,14 +6857,21 @@ class SidebarComponent {
|
|
|
6855
6857
|
this.breakpointObserver = breakpointObserver;
|
|
6856
6858
|
this.sidebarService = sidebarService;
|
|
6857
6859
|
this.backdropService = backdropService;
|
|
6858
|
-
this
|
|
6859
|
-
this
|
|
6860
|
-
this
|
|
6861
|
-
this
|
|
6862
|
-
this
|
|
6860
|
+
_SidebarComponent_narrow.set(this, false);
|
|
6861
|
+
_SidebarComponent_overlaid.set(this, false);
|
|
6862
|
+
_SidebarComponent_unfoldable.set(this, false);
|
|
6863
|
+
_SidebarComponent_visible.set(this, false);
|
|
6864
|
+
_SidebarComponent_onMobile.set(this, false);
|
|
6865
|
+
_SidebarComponent_layoutChangeSubscription.set(this, void 0);
|
|
6866
|
+
_SidebarComponent_stateToggleSubscription.set(this, void 0);
|
|
6863
6867
|
this.state = {
|
|
6864
|
-
sidebar: this
|
|
6868
|
+
sidebar: this,
|
|
6865
6869
|
};
|
|
6870
|
+
_SidebarComponent_stateInitial.set(this, {
|
|
6871
|
+
narrow: false,
|
|
6872
|
+
visible: false,
|
|
6873
|
+
unfoldable: false,
|
|
6874
|
+
});
|
|
6866
6875
|
/**
|
|
6867
6876
|
* Place sidebar in non-static positions. [docs]
|
|
6868
6877
|
* @default 'fixed'
|
|
@@ -6880,49 +6889,49 @@ class SidebarComponent {
|
|
|
6880
6889
|
* @type boolean
|
|
6881
6890
|
*/
|
|
6882
6891
|
set narrow(value) {
|
|
6883
|
-
this
|
|
6892
|
+
__classPrivateFieldSet(this, _SidebarComponent_narrow, coerceBooleanProperty(value), "f");
|
|
6884
6893
|
}
|
|
6885
6894
|
get narrow() {
|
|
6886
|
-
return this
|
|
6895
|
+
return __classPrivateFieldGet(this, _SidebarComponent_narrow, "f");
|
|
6887
6896
|
}
|
|
6888
6897
|
/**
|
|
6889
6898
|
* Set sidebar to overlaid variant.
|
|
6890
6899
|
* @type boolean
|
|
6891
6900
|
*/
|
|
6892
6901
|
set overlaid(value) {
|
|
6893
|
-
this
|
|
6902
|
+
__classPrivateFieldSet(this, _SidebarComponent_overlaid, coerceBooleanProperty(value), "f");
|
|
6894
6903
|
}
|
|
6895
6904
|
get overlaid() {
|
|
6896
|
-
return this
|
|
6905
|
+
return __classPrivateFieldGet(this, _SidebarComponent_overlaid, "f");
|
|
6897
6906
|
}
|
|
6898
6907
|
/**
|
|
6899
6908
|
* Expand narrowed sidebar on hover. [docs]
|
|
6900
6909
|
*/
|
|
6901
6910
|
set unfoldable(value) {
|
|
6902
|
-
this
|
|
6911
|
+
__classPrivateFieldSet(this, _SidebarComponent_unfoldable, coerceBooleanProperty(value), "f");
|
|
6903
6912
|
}
|
|
6904
6913
|
get unfoldable() {
|
|
6905
|
-
return this
|
|
6914
|
+
return __classPrivateFieldGet(this, _SidebarComponent_unfoldable, "f");
|
|
6906
6915
|
}
|
|
6907
6916
|
/**
|
|
6908
6917
|
* Toggle the visibility of sidebar component. [docs]
|
|
6909
6918
|
*/
|
|
6910
6919
|
set visible(value) {
|
|
6911
6920
|
const visible = coerceBooleanProperty(value);
|
|
6912
|
-
if (this
|
|
6913
|
-
this
|
|
6914
|
-
this.visibleChange.emit(this
|
|
6921
|
+
if (__classPrivateFieldGet(this, _SidebarComponent_visible, "f") !== visible) {
|
|
6922
|
+
__classPrivateFieldSet(this, _SidebarComponent_visible, visible, "f");
|
|
6923
|
+
this.visibleChange.emit(__classPrivateFieldGet(this, _SidebarComponent_visible, "f"));
|
|
6915
6924
|
}
|
|
6916
6925
|
}
|
|
6917
6926
|
get visible() {
|
|
6918
|
-
return this
|
|
6927
|
+
return __classPrivateFieldGet(this, _SidebarComponent_visible, "f");
|
|
6919
6928
|
}
|
|
6920
6929
|
set sidebarState(value) {
|
|
6921
6930
|
const newState = value;
|
|
6922
6931
|
if ('toggle' in newState) {
|
|
6923
6932
|
if (newState.toggle === 'visible') {
|
|
6924
6933
|
newState.visible = !this.state.visible;
|
|
6925
|
-
this.visible = newState.visible
|
|
6934
|
+
this.visible = newState.visible;
|
|
6926
6935
|
}
|
|
6927
6936
|
else if (newState.toggle === 'unfoldable') {
|
|
6928
6937
|
newState.unfoldable = !this.state.unfoldable;
|
|
@@ -6934,21 +6943,24 @@ class SidebarComponent {
|
|
|
6934
6943
|
}
|
|
6935
6944
|
this.state = {
|
|
6936
6945
|
...this.state,
|
|
6937
|
-
...newState
|
|
6946
|
+
...newState,
|
|
6938
6947
|
};
|
|
6939
|
-
this.state.mobile && this.state.visible
|
|
6948
|
+
this.state.mobile && this.state.visible
|
|
6949
|
+
? this.backdropService.setBackdrop(this)
|
|
6950
|
+
: this.backdropService.clearBackdrop();
|
|
6940
6951
|
}
|
|
6941
6952
|
get sidebarState() {
|
|
6942
6953
|
return this.state;
|
|
6943
6954
|
}
|
|
6944
6955
|
get getMobileBreakpoint() {
|
|
6945
|
-
const element = this.document.
|
|
6946
|
-
const mobileBreakpoint = getComputedStyle(element).getPropertyValue('--cui-mobile-breakpoint') ||
|
|
6956
|
+
const element = this.document.documentElement;
|
|
6957
|
+
const mobileBreakpoint = getComputedStyle(element).getPropertyValue('--cui-mobile-breakpoint') ||
|
|
6958
|
+
'md';
|
|
6947
6959
|
const breakpointValue = getComputedStyle(element).getPropertyValue(`--cui-breakpoint-${mobileBreakpoint.trim()}`) || '768px';
|
|
6948
|
-
return `${parseFloat(breakpointValue.trim()) - .02}px` || '767.98px';
|
|
6960
|
+
return `${parseFloat(breakpointValue.trim()) - 0.02}px` || '767.98px';
|
|
6949
6961
|
}
|
|
6950
6962
|
get getClasses() {
|
|
6951
|
-
const { mobile,
|
|
6963
|
+
const { mobile, visible } = this.sidebarState;
|
|
6952
6964
|
return {
|
|
6953
6965
|
sidebar: true,
|
|
6954
6966
|
'sidebar-fixed': this.position === 'fixed' && !mobile,
|
|
@@ -6956,8 +6968,8 @@ class SidebarComponent {
|
|
|
6956
6968
|
'sidebar-narrow-unfoldable': this.unfoldable,
|
|
6957
6969
|
'sidebar-overlaid': this.overlaid,
|
|
6958
6970
|
[`sidebar-${this.size}`]: !!this.size,
|
|
6959
|
-
show: visible && this
|
|
6960
|
-
hide: !visible
|
|
6971
|
+
show: visible && __classPrivateFieldGet(this, _SidebarComponent_onMobile, "f"),
|
|
6972
|
+
hide: !visible,
|
|
6961
6973
|
};
|
|
6962
6974
|
}
|
|
6963
6975
|
ngOnInit() {
|
|
@@ -6990,66 +7002,74 @@ class SidebarComponent {
|
|
|
6990
7002
|
}
|
|
6991
7003
|
}
|
|
6992
7004
|
setInitialState() {
|
|
6993
|
-
this
|
|
7005
|
+
__classPrivateFieldSet(this, _SidebarComponent_stateInitial, {
|
|
6994
7006
|
narrow: this.narrow,
|
|
6995
7007
|
visible: this.visible,
|
|
6996
7008
|
unfoldable: this.unfoldable,
|
|
6997
|
-
|
|
7009
|
+
}, "f");
|
|
7010
|
+
this.sidebarService.toggle({
|
|
7011
|
+
...__classPrivateFieldGet(this, _SidebarComponent_stateInitial, "f"),
|
|
7012
|
+
sidebar: this,
|
|
6998
7013
|
});
|
|
6999
7014
|
}
|
|
7000
7015
|
stateToggleSubscribe(subscribe = true) {
|
|
7001
7016
|
if (subscribe) {
|
|
7002
|
-
this
|
|
7017
|
+
__classPrivateFieldSet(this, _SidebarComponent_stateToggleSubscription, this.sidebarService.sidebarState$.subscribe((state) => {
|
|
7003
7018
|
if (this === state.sidebar || this.id === state.id) {
|
|
7004
7019
|
this.sidebarState = state;
|
|
7005
7020
|
}
|
|
7006
|
-
});
|
|
7021
|
+
}), "f");
|
|
7007
7022
|
}
|
|
7008
7023
|
else {
|
|
7009
|
-
this.
|
|
7024
|
+
__classPrivateFieldGet(this, _SidebarComponent_stateToggleSubscription, "f").unsubscribe();
|
|
7010
7025
|
}
|
|
7011
7026
|
}
|
|
7012
7027
|
layoutChangeSubscribe(subscribe = true) {
|
|
7013
7028
|
const onMobile = `(max-width: ${this.getMobileBreakpoint})`;
|
|
7014
7029
|
if (subscribe) {
|
|
7015
7030
|
const layoutChanges = this.breakpointObserver.observe([onMobile]);
|
|
7016
|
-
this
|
|
7031
|
+
__classPrivateFieldSet(this, _SidebarComponent_layoutChangeSubscription, layoutChanges.subscribe((result) => {
|
|
7017
7032
|
const isOnMobile = result.breakpoints[onMobile];
|
|
7018
7033
|
const isUnfoldable = isOnMobile ? false : this.unfoldable;
|
|
7019
|
-
if (this
|
|
7020
|
-
this
|
|
7034
|
+
if (__classPrivateFieldGet(this, _SidebarComponent_onMobile, "f") !== isOnMobile) {
|
|
7035
|
+
__classPrivateFieldSet(this, _SidebarComponent_onMobile, isOnMobile, "f");
|
|
7021
7036
|
this.sidebarService.toggle({
|
|
7022
7037
|
mobile: isOnMobile,
|
|
7023
7038
|
unfoldable: isUnfoldable,
|
|
7024
|
-
visible:
|
|
7025
|
-
sidebar: this
|
|
7039
|
+
visible: isOnMobile ? !isOnMobile : __classPrivateFieldGet(this, _SidebarComponent_stateInitial, "f").visible,
|
|
7040
|
+
sidebar: this,
|
|
7026
7041
|
});
|
|
7027
7042
|
}
|
|
7028
|
-
});
|
|
7043
|
+
}), "f");
|
|
7029
7044
|
}
|
|
7030
7045
|
else {
|
|
7031
|
-
this.
|
|
7046
|
+
__classPrivateFieldGet(this, _SidebarComponent_layoutChangeSubscription, "f").unsubscribe();
|
|
7032
7047
|
}
|
|
7033
7048
|
}
|
|
7034
7049
|
}
|
|
7050
|
+
_SidebarComponent_narrow = new WeakMap(), _SidebarComponent_overlaid = new WeakMap(), _SidebarComponent_unfoldable = new WeakMap(), _SidebarComponent_visible = new WeakMap(), _SidebarComponent_onMobile = new WeakMap(), _SidebarComponent_layoutChangeSubscription = new WeakMap(), _SidebarComponent_stateToggleSubscription = new WeakMap(), _SidebarComponent_stateInitial = new WeakMap();
|
|
7035
7051
|
SidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SidebarComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i1$2.BreakpointObserver }, { token: SidebarService }, { token: SidebarBackdropService }], target: i0.ɵɵFactoryTarget.Component });
|
|
7036
|
-
SidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SidebarComponent, selector: "c-sidebar", inputs: { id: "id", narrow: "narrow", overlaid: "overlaid", position: "position", size: "size", unfoldable: "unfoldable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { properties: { "class": "this.getClasses" } }, exportAs: ["cSidebar"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
|
|
7052
|
+
SidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: SidebarComponent, selector: "c-sidebar", inputs: { colorScheme: "colorScheme", id: "id", narrow: "narrow", overlaid: "overlaid", placement: "placement", position: "position", size: "size", unfoldable: "unfoldable", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, host: { properties: { "class": "this.getClasses" } }, exportAs: ["cSidebar"], usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
|
|
7037
7053
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
7038
7054
|
type: Component,
|
|
7039
7055
|
args: [{
|
|
7040
7056
|
selector: 'c-sidebar',
|
|
7041
7057
|
exportAs: 'cSidebar',
|
|
7042
|
-
template: '<ng-content></ng-content>'
|
|
7058
|
+
template: '<ng-content></ng-content>',
|
|
7043
7059
|
}]
|
|
7044
|
-
}], ctorParameters: function () { return [{ type:
|
|
7060
|
+
}], ctorParameters: function () { return [{ type: Document, decorators: [{
|
|
7045
7061
|
type: Inject,
|
|
7046
7062
|
args: [DOCUMENT]
|
|
7047
|
-
}] }, { type: i0.Renderer2 }, { type: i1$2.BreakpointObserver }, { type: SidebarService }, { type: SidebarBackdropService }]; }, propDecorators: {
|
|
7063
|
+
}] }, { type: i0.Renderer2 }, { type: i1$2.BreakpointObserver }, { type: SidebarService }, { type: SidebarBackdropService }]; }, propDecorators: { colorScheme: [{
|
|
7064
|
+
type: Input
|
|
7065
|
+
}], id: [{
|
|
7048
7066
|
type: Input
|
|
7049
7067
|
}], narrow: [{
|
|
7050
7068
|
type: Input
|
|
7051
7069
|
}], overlaid: [{
|
|
7052
7070
|
type: Input
|
|
7071
|
+
}], placement: [{
|
|
7072
|
+
type: Input
|
|
7053
7073
|
}], position: [{
|
|
7054
7074
|
type: Input
|
|
7055
7075
|
}], size: [{
|
|
@@ -9767,4 +9787,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
|
|
|
9767
9787
|
|
|
9768
9788
|
export { AccordionButtonDirective, AccordionComponent, AccordionItemComponent, AccordionModule, AlertComponent, AlertHeadingDirective, AlertLinkDirective, AlertModule, AlignDirective, AvatarComponent, AvatarModule, BadgeComponent, BadgeModule, BgColorDirective, BorderDirective, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbModule, BreadcrumbRouterComponent, BreadcrumbRouterService, BreakpointInfix, ButtonCloseDirective, ButtonDirective, ButtonGroupComponent, ButtonGroupModule, ButtonModule, ButtonToolbarComponent, CalloutComponent, CalloutModule, CardBodyComponent, CardComponent, CardFooterComponent, CardGroupComponent, CardHeaderActionsComponent, CardHeaderComponent, CardImgDirective, CardImgOverlayComponent, CardLinkDirective, CardModule, CardSubtitleDirective, CardTextDirective, CardTitleDirective, CarouselCaptionComponent, CarouselComponent, CarouselConfig, CarouselControlComponent, CarouselIndicatorsComponent, CarouselInnerComponent, CarouselItemComponent, CarouselModule, ClassToggleService, ColComponent, ColDirective, CollapseDirective, CollapseModule, ContainerComponent, DropdownCloseDirective, DropdownComponent, DropdownDividerDirective, DropdownHeaderDirective, DropdownItemDirective, DropdownItemPlainDirective, DropdownMenuDirective, DropdownModule, DropdownService, DropdownToggleDirective, FooterComponent, FooterModule, FormCheckComponent, FormCheckInputDirective, FormCheckLabelDirective, FormControlDirective, FormDirective, FormFeedbackComponent, FormFloatingDirective, FormLabelDirective, FormModule, FormSelectDirective, FormTextDirective, GridModule, GutterDirective, HeaderBrandComponent, HeaderComponent, HeaderDividerComponent, HeaderModule, HeaderNavComponent, HeaderTextComponent, HeaderTogglerDirective, HtmlAttributesDirective, ImgDirective, ImgModule, InputGroupComponent, InputGroupTextDirective, IntersectionService, ListGroupDirective, ListGroupItemDirective, ListGroupModule, ModalBodyComponent, ModalComponent, ModalContentComponent, ModalDialogComponent, ModalFooterComponent, ModalHeaderComponent, ModalModule, ModalService, ModalTitleDirective, ModalToggleDirective, NavComponent, NavItemComponent, NavLinkDirective, NavModule, NavbarBrandDirective, NavbarComponent, NavbarModule, NavbarNavComponent, NavbarTextComponent, NavbarTogglerDirective, OffcanvasBodyComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasModule, OffcanvasService, OffcanvasTitleDirective, OffcanvasToggleDirective, PageItemComponent, PageItemDirective, PageLinkDirective, PaginationComponent, PaginationModule, PlaceholderAnimationDirective, PlaceholderDirective, PlaceholderModule, PopoverComponent, PopoverDirective, PopoverModule, ProgressBarComponent, ProgressComponent, ProgressModule, RoundedDirective, RowComponent, RowDirective, SharedModule, SidebarBrandComponent, SidebarComponent, SidebarFooterComponent, SidebarHeaderComponent, SidebarModule, SidebarNavComponent, SidebarService, SidebarToggleDirective, SidebarTogglerComponent, SpinnerComponent, SpinnerModule, TabContentComponent, TabContentRefDirective, TabPaneComponent, TabService, TableActiveDirective, TableColorDirective, TableDirective, TableModule, TabsModule, TemplateIdDirective, TextColorDirective, ToastBodyComponent, ToastCloseDirective, ToastComponent, ToastHeaderComponent, ToastModule, ToasterComponent, ToasterHostDirective, ToasterPlacement, ToasterService, TooltipComponent, TooltipDirective, TooltipModule, UtilitiesModule, WidgetModule, WidgetStatAComponent, WidgetStatBComponent, WidgetStatCComponent, WidgetStatDComponent, WidgetStatEComponent, WidgetStatFComponent };
|
|
9769
9789
|
//# sourceMappingURL=coreui-angular.mjs.map
|
|
9770
|
-
//# sourceMappingURL=coreui-angular.mjs.map
|