@mintplayer/ng-bootstrap 13.3.0 → 13.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/components/navbar/navbar/navbar.component.mjs +3 -3
- package/esm2020/lib/components/navbar/navbar-content/navbar-content.directive.mjs +45 -12
- package/esm2020/lib/components/navbar/navbar-item/navbar-item.component.mjs +17 -17
- package/esm2020/lib/components/navbar/navbar-toggler/navbar-toggler.component.mjs +16 -11
- package/fesm2015/mintplayer-ng-bootstrap.mjs +77 -38
- package/fesm2015/mintplayer-ng-bootstrap.mjs.map +1 -1
- package/fesm2020/mintplayer-ng-bootstrap.mjs +74 -38
- package/fesm2020/mintplayer-ng-bootstrap.mjs.map +1 -1
- package/lib/components/navbar/navbar-content/navbar-content.directive.d.ts +8 -4
- package/lib/components/navbar/navbar-toggler/navbar-toggler.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Component, ContentChildren, NgModule, Input, Injectable, Pipe, EventEmitter, Output, Directive, HostBinding, InjectionToken, Inject, HostListener, Injector, ViewChild, Host, SkipSelf, forwardRef, PLATFORM_ID, ContentChild, ViewChildren, Optional, TemplateRef } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
|
-
import { CommonModule, DOCUMENT } from '@angular/common';
|
|
4
|
+
import { CommonModule, DOCUMENT, isPlatformServer } from '@angular/common';
|
|
5
5
|
import { SlideUpDownAnimation, FadeInOutAnimation, CarouselSlideAnimation, ColorTransitionAnimation } from '@mintplayer/ng-animations';
|
|
6
6
|
import { Subject, BehaviorSubject, map, takeUntil, filter, take, Observable, combineLatest, debounceTime } from 'rxjs';
|
|
7
7
|
import { map as map$1, takeUntil as takeUntil$1, take as take$1 } from 'rxjs/operators';
|
|
@@ -2907,10 +2907,10 @@ class BsNavbarComponent {
|
|
|
2907
2907
|
}
|
|
2908
2908
|
}
|
|
2909
2909
|
BsNavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2910
|
-
BsNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: BsNavbarComponent, selector: "bs-navbar", inputs: { autoclose: "autoclose" }, viewQueries: [{ propertyName: "nav", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n <div class=\"container-fluid\">\n <div class=\"d-flex w-100 w-md-auto\">\n <ng-content select=\"bs-navbar-brand\"></ng-content>\n <div class=\"flex-end d-md-none d-flex tw\">\n <button (click)=\"toggleExpanded()\" title=\"Expand/collapse menu\" class=\"align-self-center\" [class.navbar-toggler]=\"!expandButtonTemplate\" [class.bg-transparent]=\"expandButtonTemplate\" [class.shadow-none]=\"expandButtonTemplate\" [class.border-0]=\"expandButtonTemplate\" type=\"button\">\n <ng-container *ngTemplateOutlet=\"expandButtonTemplate ?? defaultExpandButton; context: {
|
|
2910
|
+
BsNavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: BsNavbarComponent, selector: "bs-navbar", inputs: { autoclose: "autoclose" }, viewQueries: [{ propertyName: "nav", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n <div class=\"container-fluid\">\n <div class=\"d-flex w-100 w-md-auto\">\n <ng-content select=\"bs-navbar-brand\"></ng-content>\n <div class=\"flex-end d-md-none d-flex tw\">\n <button (click)=\"toggleExpanded()\" title=\"Expand/collapse menu\" class=\"align-self-center\" [class.navbar-toggler]=\"!expandButtonTemplate\" [class.bg-transparent]=\"expandButtonTemplate\" [class.shadow-none]=\"expandButtonTemplate\" [class.border-0]=\"expandButtonTemplate\" type=\"button\">\n <ng-container *ngTemplateOutlet=\"expandButtonTemplate ?? defaultExpandButton; context: { $implicit: (isExpanded$ | async) ? 'open' : 'closed' }\"></ng-container>\n </button>\n </div>\n </div>\n <ng-content></ng-content>\n </div>\n</nav>\n\n<ng-template #defaultExpandButton>\n <span class=\"navbar-toggler-icon\"></span>\n</ng-template>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:10}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}.tw{margin:-.5rem -.6666666667rem}\n"], directives: [{ type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i1.AsyncPipe } });
|
|
2911
2911
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsNavbarComponent, decorators: [{
|
|
2912
2912
|
type: Component,
|
|
2913
|
-
args: [{ selector: 'bs-navbar', template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n <div class=\"container-fluid\">\n <div class=\"d-flex w-100 w-md-auto\">\n <ng-content select=\"bs-navbar-brand\"></ng-content>\n <div class=\"flex-end d-md-none d-flex tw\">\n <button (click)=\"toggleExpanded()\" title=\"Expand/collapse menu\" class=\"align-self-center\" [class.navbar-toggler]=\"!expandButtonTemplate\" [class.bg-transparent]=\"expandButtonTemplate\" [class.shadow-none]=\"expandButtonTemplate\" [class.border-0]=\"expandButtonTemplate\" type=\"button\">\n <ng-container *ngTemplateOutlet=\"expandButtonTemplate ?? defaultExpandButton; context: {
|
|
2913
|
+
args: [{ selector: 'bs-navbar', template: "<nav #nav class=\"navbar navbar-expand-md position-fixed navbar-dark bg-dark\">\n <div class=\"container-fluid\">\n <div class=\"d-flex w-100 w-md-auto\">\n <ng-content select=\"bs-navbar-brand\"></ng-content>\n <div class=\"flex-end d-md-none d-flex tw\">\n <button (click)=\"toggleExpanded()\" title=\"Expand/collapse menu\" class=\"align-self-center\" [class.navbar-toggler]=\"!expandButtonTemplate\" [class.bg-transparent]=\"expandButtonTemplate\" [class.shadow-none]=\"expandButtonTemplate\" [class.border-0]=\"expandButtonTemplate\" type=\"button\">\n <ng-container *ngTemplateOutlet=\"expandButtonTemplate ?? defaultExpandButton; context: { $implicit: (isExpanded$ | async) ? 'open' : 'closed' }\"></ng-container>\n </button>\n </div>\n </div>\n <ng-content></ng-content>\n </div>\n</nav>\n\n<ng-template #defaultExpandButton>\n <span class=\"navbar-toggler-icon\"></span>\n</ng-template>", styles: [":host ::ng-deep+*{padding-top:56px}nav{left:0;top:0;right:0;z-index:10}@media (min-width: 768px){.mx-md-unset{margin-left:0!important;margin-right:0!important}.w-md-auto{width:auto!important}}.tw{margin:-.5rem -.6666666667rem}\n"] }]
|
|
2914
2914
|
}], propDecorators: { nav: [{
|
|
2915
2915
|
type: ViewChild,
|
|
2916
2916
|
args: ['nav']
|
|
@@ -2992,8 +2992,9 @@ class BsNavbarItemComponent {
|
|
|
2992
2992
|
this.anchorTag = this.element.nativeElement.querySelector('li a');
|
|
2993
2993
|
if (this.hasDropdown) {
|
|
2994
2994
|
(this.anchorTag) && this.anchorTag.classList.add('dropdown-toggle');
|
|
2995
|
-
if (this.anchorTag && !this.anchorTag.
|
|
2996
|
-
this.anchorTag.
|
|
2995
|
+
if (this.anchorTag && !this.anchorTag.getAttribute('close-init-b')) {
|
|
2996
|
+
this.anchorTag.setAttribute('close-init-b', '1');
|
|
2997
|
+
this.anchorTag.addEventListener('click', (ev) => {
|
|
2997
2998
|
ev.preventDefault();
|
|
2998
2999
|
// Normally there should be only one dropdown in this list
|
|
2999
3000
|
this.dropdowns.forEach((dropdown) => {
|
|
@@ -3004,24 +3005,23 @@ class BsNavbarItemComponent {
|
|
|
3004
3005
|
}
|
|
3005
3006
|
});
|
|
3006
3007
|
return false;
|
|
3007
|
-
};
|
|
3008
|
+
});
|
|
3008
3009
|
}
|
|
3009
3010
|
}
|
|
3010
3011
|
else {
|
|
3011
3012
|
// Close if this is a link
|
|
3012
|
-
if (this.dropdowns.length === 0) {
|
|
3013
|
-
|
|
3014
|
-
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
3018
|
-
|
|
3019
|
-
|
|
3020
|
-
|
|
3021
|
-
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
}
|
|
3013
|
+
if ((this.dropdowns.length === 0) && this.anchorTag && !this.anchorTag.getAttribute('close-init-a')) {
|
|
3014
|
+
this.anchorTag.setAttribute('close-init-a', '1');
|
|
3015
|
+
this.anchorTag.addEventListener('click', (ev) => {
|
|
3016
|
+
let d = this.parentDropdown;
|
|
3017
|
+
while (d && d.autoclose) {
|
|
3018
|
+
d.isVisible = false;
|
|
3019
|
+
d = d.parentDropdown;
|
|
3020
|
+
}
|
|
3021
|
+
if (this.navbar.autoclose) {
|
|
3022
|
+
this.navbar.isExpanded$.next(false);
|
|
3023
|
+
}
|
|
3024
|
+
});
|
|
3025
3025
|
}
|
|
3026
3026
|
}
|
|
3027
3027
|
}
|
|
@@ -3130,31 +3130,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
|
|
|
3130
3130
|
}] }]; } });
|
|
3131
3131
|
|
|
3132
3132
|
class NavbarContentDirective {
|
|
3133
|
-
constructor(element) {
|
|
3133
|
+
constructor(element, platformId) {
|
|
3134
3134
|
this.element = element;
|
|
3135
|
+
this.platformId = platformId;
|
|
3136
|
+
this.destroyed$ = new Subject();
|
|
3137
|
+
this.viewInit$ = new BehaviorSubject(false);
|
|
3138
|
+
this.navbar$ = new BehaviorSubject(null);
|
|
3139
|
+
this.resizeObserver = null;
|
|
3135
3140
|
this.initialPadding = 0;
|
|
3136
|
-
this.
|
|
3137
|
-
|
|
3138
|
-
|
|
3141
|
+
combineLatest([this.viewInit$, this.navbar$])
|
|
3142
|
+
.pipe(filter(([viewInit, navbar]) => {
|
|
3143
|
+
return viewInit && !!navbar;
|
|
3144
|
+
}))
|
|
3145
|
+
.pipe(take(1))
|
|
3146
|
+
.pipe(takeUntil(this.destroyed$))
|
|
3147
|
+
.subscribe(([viewInit, navbar]) => {
|
|
3148
|
+
if (!isPlatformServer(platformId)) {
|
|
3149
|
+
// Initialize the ResizeObserver
|
|
3150
|
+
this.resizeObserver = new ResizeObserver((entries) => {
|
|
3151
|
+
const height = entries[0].contentRect.height;
|
|
3152
|
+
this.element.nativeElement.style.paddingTop = (this.initialPadding + height) + 'px';
|
|
3153
|
+
});
|
|
3154
|
+
// Monitor the size
|
|
3155
|
+
const pt = parseInt(this.element.nativeElement.style.paddingTop.replace(/px$/, ''));
|
|
3156
|
+
this.initialPadding = isNaN(pt) ? 0 : pt;
|
|
3157
|
+
if (this.resizeObserver && navbar) {
|
|
3158
|
+
this.resizeObserver.observe(navbar.nav.nativeElement);
|
|
3159
|
+
}
|
|
3160
|
+
}
|
|
3161
|
+
});
|
|
3162
|
+
this.destroyed$
|
|
3163
|
+
.pipe(filter(d => !!d))
|
|
3164
|
+
.subscribe(() => {
|
|
3165
|
+
this.resizeObserver?.unobserve(this.navbar$.value?.nav.nativeElement);
|
|
3139
3166
|
});
|
|
3140
3167
|
}
|
|
3168
|
+
set navbar(value) {
|
|
3169
|
+
this.navbar$.next(value);
|
|
3170
|
+
}
|
|
3141
3171
|
ngAfterViewInit() {
|
|
3142
|
-
|
|
3143
|
-
this.initialPadding = isNaN(p) ? 0 : p;
|
|
3144
|
-
this.resizeObserver.observe(this.navbar.nav.nativeElement);
|
|
3172
|
+
this.viewInit$.next(true);
|
|
3145
3173
|
}
|
|
3146
3174
|
ngOnDestroy() {
|
|
3147
|
-
this.
|
|
3175
|
+
this.destroyed$.next(true);
|
|
3148
3176
|
}
|
|
3149
3177
|
}
|
|
3150
|
-
NavbarContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: NavbarContentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3178
|
+
NavbarContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: NavbarContentDirective, deps: [{ token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
|
|
3151
3179
|
NavbarContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: NavbarContentDirective, selector: "[navbarContent]", inputs: { navbar: ["navbarContent", "navbar"] }, ngImport: i0 });
|
|
3152
3180
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: NavbarContentDirective, decorators: [{
|
|
3153
3181
|
type: Directive,
|
|
3154
3182
|
args: [{
|
|
3155
3183
|
selector: '[navbarContent]'
|
|
3156
3184
|
}]
|
|
3157
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }
|
|
3185
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
3186
|
+
type: Inject,
|
|
3187
|
+
args: [PLATFORM_ID]
|
|
3188
|
+
}] }]; }, propDecorators: { navbar: [{
|
|
3158
3189
|
type: Input,
|
|
3159
3190
|
args: ['navbarContent']
|
|
3160
3191
|
}] } });
|
|
@@ -3196,6 +3227,8 @@ class BsNavbarTogglerComponent {
|
|
|
3196
3227
|
//#region State
|
|
3197
3228
|
this._state = 'closed';
|
|
3198
3229
|
this.stateChange = new EventEmitter();
|
|
3230
|
+
//#endregion
|
|
3231
|
+
this.toggleOnClick = true;
|
|
3199
3232
|
}
|
|
3200
3233
|
get state() {
|
|
3201
3234
|
return this._state;
|
|
@@ -3204,20 +3237,21 @@ class BsNavbarTogglerComponent {
|
|
|
3204
3237
|
this._state = value;
|
|
3205
3238
|
this.stateChange.emit(this._state);
|
|
3206
3239
|
}
|
|
3207
|
-
//#endregion
|
|
3208
3240
|
toggleState(ev) {
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3241
|
+
if (this.toggleOnClick) {
|
|
3242
|
+
switch (this._state) {
|
|
3243
|
+
case 'open':
|
|
3244
|
+
this.state = 'closed';
|
|
3245
|
+
break;
|
|
3246
|
+
default:
|
|
3247
|
+
this.state = 'open';
|
|
3248
|
+
break;
|
|
3249
|
+
}
|
|
3216
3250
|
}
|
|
3217
3251
|
}
|
|
3218
3252
|
}
|
|
3219
3253
|
BsNavbarTogglerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsNavbarTogglerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3220
|
-
BsNavbarTogglerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: BsNavbarTogglerComponent, selector: "bs-navbar-toggler", inputs: { state: "state" }, outputs: { stateChange: "stateChange" }, host: { listeners: { "click": "toggleState($event)" } }, ngImport: i0, template: "<div class=\"navbar-toggler float-left\" [ngClass]=\"state\">\n <div></div>\n <div></div>\n <div></div>\n</div>", styles: [":host{align-self:start;top:0;right:0}.navbar-toggler{padding:.75rem 1rem;border:none}.navbar-toggler>div{width:25px;height:2px;background:#BBB;margin:6px 0;transition:.4s}.navbar-toggler.open>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.open>div:nth-of-type(2){opacity:0}.navbar-toggler.open>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}@media (min-width: 768px){.navbar-toggler.auto>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.auto>div:nth-of-type(2){opacity:0}.navbar-toggler.auto>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3254
|
+
BsNavbarTogglerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: BsNavbarTogglerComponent, selector: "bs-navbar-toggler", inputs: { state: "state", toggleOnClick: "toggleOnClick" }, outputs: { stateChange: "stateChange" }, host: { listeners: { "click": "toggleState($event)" } }, ngImport: i0, template: "<div class=\"navbar-toggler float-left\" [ngClass]=\"state\">\n <div></div>\n <div></div>\n <div></div>\n</div>", styles: [":host{align-self:start;top:0;right:0}.navbar-toggler{padding:.75rem 1rem;border:none}.navbar-toggler>div{width:25px;height:2px;background:#BBB;margin:6px 0;transition:.4s}.navbar-toggler.open>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.open>div:nth-of-type(2){opacity:0}.navbar-toggler.open>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}@media (min-width: 768px){.navbar-toggler.auto>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.auto>div:nth-of-type(2){opacity:0}.navbar-toggler.auto>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3221
3255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsNavbarTogglerComponent, decorators: [{
|
|
3222
3256
|
type: Component,
|
|
3223
3257
|
args: [{ selector: 'bs-navbar-toggler', template: "<div class=\"navbar-toggler float-left\" [ngClass]=\"state\">\n <div></div>\n <div></div>\n <div></div>\n</div>", styles: [":host{align-self:start;top:0;right:0}.navbar-toggler{padding:.75rem 1rem;border:none}.navbar-toggler>div{width:25px;height:2px;background:#BBB;margin:6px 0;transition:.4s}.navbar-toggler.open>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.open>div:nth-of-type(2){opacity:0}.navbar-toggler.open>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}@media (min-width: 768px){.navbar-toggler.auto>div:nth-of-type(1){transform:rotate(-45deg) translate(-7px,5px)}.navbar-toggler.auto>div:nth-of-type(2){opacity:0}.navbar-toggler.auto>div:nth-of-type(3){transform:rotate(45deg) translate(-6px,-4px)}}\n"] }]
|
|
@@ -3225,6 +3259,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
|
|
|
3225
3259
|
type: Output
|
|
3226
3260
|
}], state: [{
|
|
3227
3261
|
type: Input
|
|
3262
|
+
}], toggleOnClick: [{
|
|
3263
|
+
type: Input
|
|
3228
3264
|
}], toggleState: [{
|
|
3229
3265
|
type: HostListener,
|
|
3230
3266
|
args: ['click', ['$event']]
|