@mintplayer/ng-bootstrap 13.2.2 → 13.3.3
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 +27 -13
- 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 +59 -39
- package/fesm2015/mintplayer-ng-bootstrap.mjs.map +1 -1
- package/fesm2020/mintplayer-ng-bootstrap.mjs +57 -39
- package/fesm2020/mintplayer-ng-bootstrap.mjs.map +1 -1
- package/lib/components/navbar/navbar-content/navbar-content.directive.d.ts +4 -3
- 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,44 @@ 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;
|
|
3135
3136
|
this.initialPadding = 0;
|
|
3136
|
-
|
|
3137
|
-
|
|
3138
|
-
|
|
3139
|
-
|
|
3137
|
+
if (!isPlatformServer(platformId)) {
|
|
3138
|
+
this.resizeObserver = new ResizeObserver((entries) => {
|
|
3139
|
+
const height = entries[0].contentRect.height;
|
|
3140
|
+
this.element.nativeElement.style.paddingTop = (this.initialPadding + height) + 'px';
|
|
3141
|
+
});
|
|
3142
|
+
}
|
|
3143
|
+
else {
|
|
3144
|
+
this.resizeObserver = null;
|
|
3145
|
+
}
|
|
3140
3146
|
}
|
|
3141
3147
|
ngAfterViewInit() {
|
|
3142
|
-
|
|
3143
|
-
this.initialPadding = isNaN(
|
|
3144
|
-
this.resizeObserver
|
|
3148
|
+
const pt = parseInt(this.element.nativeElement.style.paddingTop.replace(/px$/, ''));
|
|
3149
|
+
this.initialPadding = isNaN(pt) ? 0 : pt;
|
|
3150
|
+
if (this.resizeObserver) {
|
|
3151
|
+
this.resizeObserver.observe(this.navbar.nav.nativeElement);
|
|
3152
|
+
}
|
|
3145
3153
|
}
|
|
3146
3154
|
ngOnDestroy() {
|
|
3147
|
-
this.resizeObserver
|
|
3155
|
+
if (this.resizeObserver) {
|
|
3156
|
+
this.resizeObserver.unobserve(this.navbar.nav.nativeElement);
|
|
3157
|
+
}
|
|
3148
3158
|
}
|
|
3149
3159
|
}
|
|
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 });
|
|
3160
|
+
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
3161
|
NavbarContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.0", type: NavbarContentDirective, selector: "[navbarContent]", inputs: { navbar: ["navbarContent", "navbar"] }, ngImport: i0 });
|
|
3152
3162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: NavbarContentDirective, decorators: [{
|
|
3153
3163
|
type: Directive,
|
|
3154
3164
|
args: [{
|
|
3155
3165
|
selector: '[navbarContent]'
|
|
3156
3166
|
}]
|
|
3157
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }
|
|
3167
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
3168
|
+
type: Inject,
|
|
3169
|
+
args: [PLATFORM_ID]
|
|
3170
|
+
}] }]; }, propDecorators: { navbar: [{
|
|
3158
3171
|
type: Input,
|
|
3159
3172
|
args: ['navbarContent']
|
|
3160
3173
|
}] } });
|
|
@@ -3196,6 +3209,8 @@ class BsNavbarTogglerComponent {
|
|
|
3196
3209
|
//#region State
|
|
3197
3210
|
this._state = 'closed';
|
|
3198
3211
|
this.stateChange = new EventEmitter();
|
|
3212
|
+
//#endregion
|
|
3213
|
+
this.toggleOnClick = true;
|
|
3199
3214
|
}
|
|
3200
3215
|
get state() {
|
|
3201
3216
|
return this._state;
|
|
@@ -3204,20 +3219,21 @@ class BsNavbarTogglerComponent {
|
|
|
3204
3219
|
this._state = value;
|
|
3205
3220
|
this.stateChange.emit(this._state);
|
|
3206
3221
|
}
|
|
3207
|
-
//#endregion
|
|
3208
3222
|
toggleState(ev) {
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
|
|
3213
|
-
|
|
3214
|
-
|
|
3215
|
-
|
|
3223
|
+
if (this.toggleOnClick) {
|
|
3224
|
+
switch (this._state) {
|
|
3225
|
+
case 'open':
|
|
3226
|
+
this.state = 'closed';
|
|
3227
|
+
break;
|
|
3228
|
+
default:
|
|
3229
|
+
this.state = 'open';
|
|
3230
|
+
break;
|
|
3231
|
+
}
|
|
3216
3232
|
}
|
|
3217
3233
|
}
|
|
3218
3234
|
}
|
|
3219
3235
|
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"] }] });
|
|
3236
|
+
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
3237
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: BsNavbarTogglerComponent, decorators: [{
|
|
3222
3238
|
type: Component,
|
|
3223
3239
|
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 +3241,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
|
|
|
3225
3241
|
type: Output
|
|
3226
3242
|
}], state: [{
|
|
3227
3243
|
type: Input
|
|
3244
|
+
}], toggleOnClick: [{
|
|
3245
|
+
type: Input
|
|
3228
3246
|
}], toggleState: [{
|
|
3229
3247
|
type: HostListener,
|
|
3230
3248
|
args: ['click', ['$event']]
|