@evotor-dev/ui-kit 6.17.1 → 6.17.2
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/bundles/evotor-dev-ui-kit.umd.js +379 -0
- package/bundles/evotor-dev-ui-kit.umd.js.map +1 -1
- package/esm2015/lib/components/evo-navigation-tabs/evo-navigation-tab.directive.js +52 -0
- package/esm2015/lib/components/evo-navigation-tabs/evo-navigation-tabs.component.js +112 -0
- package/esm2015/lib/components/evo-navigation-tabs/evo-navigation-tabs.module.js +20 -0
- package/esm2015/lib/components/evo-navigation-tabs/index.js +2 -0
- package/esm2015/lib/components/evo-navigation-tabs/public-api.js +5 -0
- package/esm2015/lib/components/evo-navigation-tabs/types/evo-navigation-tabs-size.js +2 -0
- package/esm2015/lib/services/mutation-observer.service.js +59 -0
- package/esm2015/lib/services/router-link-active.service.js +41 -0
- package/esm2015/lib/utils/observables/zone-free.js +64 -0
- package/esm2015/lib/utils/tokens/animation-frame.js +27 -0
- package/esm2015/public_api.js +2 -1
- package/fesm2015/evotor-dev-ui-kit.js +341 -5
- package/fesm2015/evotor-dev-ui-kit.js.map +1 -1
- package/lib/components/evo-navigation-tabs/evo-navigation-tab.directive.d.ts +19 -0
- package/lib/components/evo-navigation-tabs/evo-navigation-tabs.component.d.ts +32 -0
- package/lib/components/evo-navigation-tabs/evo-navigation-tabs.module.d.ts +10 -0
- package/lib/components/evo-navigation-tabs/index.d.ts +1 -0
- package/lib/components/evo-navigation-tabs/public-api.d.ts +4 -0
- package/lib/components/evo-navigation-tabs/types/evo-navigation-tabs-size.d.ts +1 -0
- package/lib/services/mutation-observer.service.d.ts +34 -0
- package/lib/services/router-link-active.service.d.ts +16 -0
- package/lib/utils/observables/zone-free.d.ts +54 -0
- package/lib/utils/tokens/animation-frame.d.ts +10 -0
- package/package.json +1 -1
- package/public_api.d.ts +1 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, Injectable, PLATFORM_ID, ɵisListLikeIterable, ɵstringify, Directive, Input, EventEmitter, Output, HostListener, Optional, ViewContainerRef, TemplateRef, Inject, NgModule, CUSTOM_ELEMENTS_SCHEMA, Component, ChangeDetectionStrategy, HostBinding, Pipe, forwardRef, ViewChild, ViewEncapsulation, ContentChild, ElementRef, ComponentRef, Injector, ApplicationRef, ComponentFactoryResolver, Host, ContentChildren } from '@angular/core';
|
|
2
|
+
import { InjectionToken, Injectable, PLATFORM_ID, ɵisListLikeIterable, ɵstringify, Directive, Input, EventEmitter, Output, HostListener, Optional, ViewContainerRef, TemplateRef, Inject, NgModule, CUSTOM_ELEMENTS_SCHEMA, Component, ChangeDetectionStrategy, HostBinding, Pipe, forwardRef, ViewChild, ViewEncapsulation, ContentChild, ElementRef, ComponentRef, Injector, ApplicationRef, ComponentFactoryResolver, Host, ContentChildren, NgZone, inject } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/common';
|
|
4
4
|
import { isPlatformBrowser, CommonModule, DOCUMENT } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/forms';
|
|
@@ -7,10 +7,10 @@ import { FormsModule, ReactiveFormsModule, FormControl, FormGroup, FormArray, Ng
|
|
|
7
7
|
import * as i3$1 from 'ngx-page-scroll';
|
|
8
8
|
import { NgxPageScrollModule } from 'ngx-page-scroll';
|
|
9
9
|
import * as i3$2 from '@angular/router';
|
|
10
|
-
import { RouterModule, NavigationEnd } from '@angular/router';
|
|
10
|
+
import { RouterModule, NavigationEnd, RouterLinkActive } from '@angular/router';
|
|
11
11
|
import * as i3$3 from 'rxjs';
|
|
12
|
-
import { BehaviorSubject, Subject, Observable, fromEvent, merge, concat, of, asyncScheduler, scheduled, EMPTY, combineLatest } from 'rxjs';
|
|
13
|
-
import { takeUntil, debounceTime, map, tap, delay, distinctUntilChanged, switchMap, throttleTime, filter, takeWhile, observeOn, take, mergeMap, first, catchError, startWith, pairwise } from 'rxjs/operators';
|
|
12
|
+
import { BehaviorSubject, Subject, Observable, fromEvent, merge, concat, of, asyncScheduler, scheduled, EMPTY, combineLatest, pipe, timer } from 'rxjs';
|
|
13
|
+
import { takeUntil, debounceTime, map, tap, delay, distinctUntilChanged, switchMap, throttleTime, filter, takeWhile, observeOn, take, mergeMap, first, catchError, startWith, pairwise, share } from 'rxjs/operators';
|
|
14
14
|
import { style, animate, trigger, state, transition } from '@angular/animations';
|
|
15
15
|
import { iconUnfoldMore, iconUnfoldLess, iconChevronLeft } from '@evotor-dev/ui-kit/icons/navigation';
|
|
16
16
|
import * as i1 from '@angular/platform-browser';
|
|
@@ -8296,6 +8296,342 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
8296
8296
|
}]
|
|
8297
8297
|
}] });
|
|
8298
8298
|
|
|
8299
|
+
/**
|
|
8300
|
+
* Токен `ANIMATION_FRAME` предоставляет поток значений времени из `requestAnimationFrame`,
|
|
8301
|
+
* испускаемый каждый кадр анимации.
|
|
8302
|
+
*
|
|
8303
|
+
* Может быть полезен для задач, которые требуют частого обновления, например, отслеживания
|
|
8304
|
+
* активности или плавной анимации в UI.
|
|
8305
|
+
*/
|
|
8306
|
+
const ANIMATION_FRAME = new InjectionToken('[ANIMATION_FRAME]', {
|
|
8307
|
+
factory: () => {
|
|
8308
|
+
const animationFrame$ = new Observable((subscriber) => {
|
|
8309
|
+
let id = NaN;
|
|
8310
|
+
const callback = (timestamp) => {
|
|
8311
|
+
subscriber.next(timestamp);
|
|
8312
|
+
id = requestAnimationFrame(callback);
|
|
8313
|
+
};
|
|
8314
|
+
id = requestAnimationFrame(callback);
|
|
8315
|
+
return () => {
|
|
8316
|
+
cancelAnimationFrame(id);
|
|
8317
|
+
};
|
|
8318
|
+
});
|
|
8319
|
+
return animationFrame$.pipe(share());
|
|
8320
|
+
},
|
|
8321
|
+
});
|
|
8322
|
+
|
|
8323
|
+
/**
|
|
8324
|
+
* Кратко:
|
|
8325
|
+
* 🔥 evoZonefull — тащит всё в Angular-зону.
|
|
8326
|
+
* 🧊 evoZonefree — игнорирует Angular-зону, экономит CD.
|
|
8327
|
+
* ⚖️ evoZoneOptimized — как утро с кофе: просыпаешься вовремя и не дергаешь лишний раз change detection.
|
|
8328
|
+
*/
|
|
8329
|
+
/**
|
|
8330
|
+
* Оператор `evoZonefull` обеспечивает полное выполнение потока внутри зоны Angular.
|
|
8331
|
+
*
|
|
8332
|
+
* Все `next`, `error` и `complete` вызовы оборачиваются в `NgZone.run`, чтобы гарантировать
|
|
8333
|
+
* корректный запуск change detection.
|
|
8334
|
+
*
|
|
8335
|
+
* Используй, если поток формируется вне зоны или ты не уверен, что Angular узнает об изменениях.
|
|
8336
|
+
*
|
|
8337
|
+
* @param zone Сервис `NgZone` из Angular DI.
|
|
8338
|
+
* @returns Оператор, оборачивающий поток в `NgZone.run()`.
|
|
8339
|
+
*
|
|
8340
|
+
* @example
|
|
8341
|
+
* source$.pipe(evoZonefull(this.ngZone)).subscribe(...);
|
|
8342
|
+
*/
|
|
8343
|
+
function evoZonefull(zone) {
|
|
8344
|
+
return (source) => new Observable((subscriber) => source.subscribe({
|
|
8345
|
+
next: (value) => zone.run(() => subscriber.next(value)),
|
|
8346
|
+
error: (error) => zone.run(() => subscriber.error(error)),
|
|
8347
|
+
complete: () => zone.run(() => subscriber.complete()),
|
|
8348
|
+
}));
|
|
8349
|
+
}
|
|
8350
|
+
/**
|
|
8351
|
+
* Оператор `evoZonefree` исполняет весь поток вне зоны Angular.
|
|
8352
|
+
*
|
|
8353
|
+
* Это помогает избежать лишних срабатываний change detection и повысить производительность,
|
|
8354
|
+
* особенно для часто испускаемых потоков (например, `scroll`, `animationFrame`, таймеры).
|
|
8355
|
+
*
|
|
8356
|
+
* Используй, если тебе не нужно обновлять Angular view внутри этого потока.
|
|
8357
|
+
*
|
|
8358
|
+
* @param zone Сервис `NgZone` из Angular DI.
|
|
8359
|
+
* @returns Оператор, исполняющий подписку вне Angular-зоны.
|
|
8360
|
+
*
|
|
8361
|
+
* @example
|
|
8362
|
+
* source$.pipe(evoZonefree(this.ngZone)).subscribe(...);
|
|
8363
|
+
*/
|
|
8364
|
+
function evoZonefree(zone) {
|
|
8365
|
+
return (source) => new Observable((subscriber) => zone.runOutsideAngular(() => source.subscribe(subscriber)));
|
|
8366
|
+
}
|
|
8367
|
+
/**
|
|
8368
|
+
* Оператор `evoZoneOptimized` — комбо из `evoZonefree` и `evoZonefull`.
|
|
8369
|
+
*
|
|
8370
|
+
* Сначала поток исполняется вне Angular-зоны (`runOutsideAngular`), чтобы избежать лишнего
|
|
8371
|
+
* change detection. Но события `next`, `error` и `complete` всё равно возвращаются в Angular-зону.
|
|
8372
|
+
*
|
|
8373
|
+
* Это идеальный баланс, если тебе нужен быстрый поток без лишнего CD, но ты всё равно хочешь,
|
|
8374
|
+
* чтобы Angular знал о результатах.
|
|
8375
|
+
*
|
|
8376
|
+
* @param zone Сервис `NgZone` из Angular DI.
|
|
8377
|
+
* @returns Оператор, оптимизированный по производительности.
|
|
8378
|
+
*
|
|
8379
|
+
* @example
|
|
8380
|
+
* source$.pipe(evoZoneOptimized(this.ngZone)).subscribe(...);
|
|
8381
|
+
*/
|
|
8382
|
+
function evoZoneOptimized(zone) {
|
|
8383
|
+
return pipe(evoZonefree(zone), evoZonefull(zone));
|
|
8384
|
+
}
|
|
8385
|
+
|
|
8386
|
+
/**
|
|
8387
|
+
* Сервис создает поток, отслеживающий состояние активности
|
|
8388
|
+
* `RouterLinkActive` в реальном времени с использованием `requestAnimationFrame`.
|
|
8389
|
+
*
|
|
8390
|
+
* Наследуется от `Observable<boolean>` и эмитит `true` или `false`, когда состояние `isActive`
|
|
8391
|
+
* меняется. Если `RouterLinkActive` не передан — поток будет пустым (`EMPTY`).
|
|
8392
|
+
*/
|
|
8393
|
+
class RouterLinkActiveService extends Observable {
|
|
8394
|
+
constructor(routerLinkActive, ngZone, animationFrame$) {
|
|
8395
|
+
const stream$ = routerLinkActive
|
|
8396
|
+
? merge(timer(0), animationFrame$).pipe(map(() => routerLinkActive.isActive), distinctUntilChanged(), evoZoneOptimized(ngZone))
|
|
8397
|
+
: EMPTY;
|
|
8398
|
+
super((subscriber) => stream$.subscribe(subscriber));
|
|
8399
|
+
}
|
|
8400
|
+
}
|
|
8401
|
+
RouterLinkActiveService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RouterLinkActiveService, deps: [{ token: RouterLinkActive, optional: true }, { token: NgZone }, { token: ANIMATION_FRAME }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
8402
|
+
RouterLinkActiveService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RouterLinkActiveService });
|
|
8403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: RouterLinkActiveService, decorators: [{
|
|
8404
|
+
type: Injectable
|
|
8405
|
+
}], ctorParameters: function () { return [{ type: i3$2.RouterLinkActive, decorators: [{
|
|
8406
|
+
type: Optional
|
|
8407
|
+
}, {
|
|
8408
|
+
type: Inject,
|
|
8409
|
+
args: [RouterLinkActive]
|
|
8410
|
+
}] }, { type: i0.NgZone, decorators: [{
|
|
8411
|
+
type: Inject,
|
|
8412
|
+
args: [NgZone]
|
|
8413
|
+
}] }, { type: i3$3.Observable, decorators: [{
|
|
8414
|
+
type: Inject,
|
|
8415
|
+
args: [ANIMATION_FRAME]
|
|
8416
|
+
}] }]; } });
|
|
8417
|
+
|
|
8418
|
+
/**
|
|
8419
|
+
* Безопасная обёртка над `MutationObserver`, которая гарантирует,
|
|
8420
|
+
* что код не упадёт в средах, где `MutationObserver` недоступен
|
|
8421
|
+
* (например, серверный рендеринг или тесты без DOM).
|
|
8422
|
+
*
|
|
8423
|
+
* Если `MutationObserver` существует — используется он.
|
|
8424
|
+
* Если нет — используется заглушка с пустыми методами.
|
|
8425
|
+
*/
|
|
8426
|
+
const SafeObserver = typeof MutationObserver !== 'undefined'
|
|
8427
|
+
? MutationObserver
|
|
8428
|
+
: class {
|
|
8429
|
+
observe() { }
|
|
8430
|
+
disconnect() { }
|
|
8431
|
+
takeRecords() {
|
|
8432
|
+
return [];
|
|
8433
|
+
}
|
|
8434
|
+
};
|
|
8435
|
+
/**
|
|
8436
|
+
* Сервис `MutationObserverService` предоставляет поток `Observable<MutationRecord[]>`,
|
|
8437
|
+
* который эмитит записи изменений DOM для текущего элемента (`ElementRef`).
|
|
8438
|
+
*
|
|
8439
|
+
* Наблюдает за изменениями потомков, текстового содержимого и вложенных структур (`subtree: true`).
|
|
8440
|
+
*
|
|
8441
|
+
* Используется `SafeObserver`, чтобы гарантировать совместимость с SSR и тестовой средой.
|
|
8442
|
+
*
|
|
8443
|
+
* ⚠️ Важно: требует, чтобы `ElementRef` был доступен через DI-контекст (т.е. работает в компонентах/директивах).
|
|
8444
|
+
*
|
|
8445
|
+
* @example
|
|
8446
|
+
* this.mutationObserverService.subscribe(records => {
|
|
8447
|
+
* console.log('Mutation detected!', records);
|
|
8448
|
+
* });
|
|
8449
|
+
*/
|
|
8450
|
+
class MutationObserverService extends Observable {
|
|
8451
|
+
constructor() {
|
|
8452
|
+
const nativeElement = inject(ElementRef).nativeElement;
|
|
8453
|
+
super((subscriber) => {
|
|
8454
|
+
const observer = new SafeObserver((records) => {
|
|
8455
|
+
subscriber.next(records);
|
|
8456
|
+
});
|
|
8457
|
+
observer.observe(nativeElement, {
|
|
8458
|
+
childList: true,
|
|
8459
|
+
characterData: true,
|
|
8460
|
+
subtree: true,
|
|
8461
|
+
});
|
|
8462
|
+
return () => {
|
|
8463
|
+
observer.disconnect();
|
|
8464
|
+
};
|
|
8465
|
+
});
|
|
8466
|
+
}
|
|
8467
|
+
}
|
|
8468
|
+
MutationObserverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MutationObserverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
8469
|
+
MutationObserverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MutationObserverService });
|
|
8470
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MutationObserverService, decorators: [{
|
|
8471
|
+
type: Injectable
|
|
8472
|
+
}], ctorParameters: function () { return []; } });
|
|
8473
|
+
|
|
8474
|
+
const EVO_TAB_ACTIVATE = 'evo-tab-activate';
|
|
8475
|
+
class EvoNavigationTabDirective {
|
|
8476
|
+
constructor(el, routerLinkActiveService, rla, mutation) {
|
|
8477
|
+
this.el = el;
|
|
8478
|
+
this.routerLinkActiveService = routerLinkActiveService;
|
|
8479
|
+
this.rla = rla;
|
|
8480
|
+
this.mutation = mutation;
|
|
8481
|
+
this.tabClass = true;
|
|
8482
|
+
this.destroy$ = new Subject();
|
|
8483
|
+
this.initSubscriptions();
|
|
8484
|
+
}
|
|
8485
|
+
ngOnDestroy() {
|
|
8486
|
+
this.destroy$.next();
|
|
8487
|
+
this.destroy$.complete();
|
|
8488
|
+
}
|
|
8489
|
+
initSubscriptions() {
|
|
8490
|
+
const mutationObserver = this.rla && this.mutation ? this.mutation.pipe(filter(() => this.rla.isActive)) : EMPTY;
|
|
8491
|
+
merge(mutationObserver, this.routerLinkActiveService.pipe(filter((r) => r)), fromEvent(this.el.nativeElement, 'click').pipe(
|
|
8492
|
+
// Delaying execution until after all other click callbacks
|
|
8493
|
+
switchMap(() => fromEvent(this.el.nativeElement.parentElement, 'click').pipe(take(1)))))
|
|
8494
|
+
.pipe(tap(() => {
|
|
8495
|
+
this.el.nativeElement.dispatchEvent(new CustomEvent(EVO_TAB_ACTIVATE, { bubbles: true }));
|
|
8496
|
+
}), takeUntil(this.destroy$))
|
|
8497
|
+
.subscribe();
|
|
8498
|
+
}
|
|
8499
|
+
}
|
|
8500
|
+
EvoNavigationTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoNavigationTabDirective, deps: [{ token: i0.ElementRef }, { token: RouterLinkActiveService }, { token: i3$2.RouterLinkActive, optional: true }, { token: MutationObserverService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
8501
|
+
EvoNavigationTabDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: EvoNavigationTabDirective, selector: "button[evoNavigationTab]:not([routerLink]), button[evoNavigationTab][routerLink][routerLinkActive]", host: { properties: { "class.evo-navigation-tab": "this.tabClass" } }, providers: [MutationObserverService, RouterLinkActiveService], ngImport: i0 });
|
|
8502
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoNavigationTabDirective, decorators: [{
|
|
8503
|
+
type: Directive,
|
|
8504
|
+
args: [{
|
|
8505
|
+
selector: 'button[evoNavigationTab]:not([routerLink]), button[evoNavigationTab][routerLink][routerLinkActive]',
|
|
8506
|
+
providers: [MutationObserverService, RouterLinkActiveService],
|
|
8507
|
+
}]
|
|
8508
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: RouterLinkActiveService }, { type: i3$2.RouterLinkActive, decorators: [{
|
|
8509
|
+
type: Optional
|
|
8510
|
+
}] }, { type: MutationObserverService, decorators: [{
|
|
8511
|
+
type: Optional
|
|
8512
|
+
}] }]; }, propDecorators: { tabClass: [{
|
|
8513
|
+
type: HostBinding,
|
|
8514
|
+
args: ['class.evo-navigation-tab']
|
|
8515
|
+
}] } });
|
|
8516
|
+
|
|
8517
|
+
class EvoNavigationTabsComponent {
|
|
8518
|
+
constructor(el) {
|
|
8519
|
+
this.el = el;
|
|
8520
|
+
this.tabs = [];
|
|
8521
|
+
this.size = 'normal';
|
|
8522
|
+
this.activeItemIndexChange = new EventEmitter();
|
|
8523
|
+
this.disabled = false;
|
|
8524
|
+
this.activeIndex = 0;
|
|
8525
|
+
this.disabledSubject$ = new Subject();
|
|
8526
|
+
this.nextRenderSubject$ = new Subject();
|
|
8527
|
+
this.destroy$ = new Subject();
|
|
8528
|
+
this.initSubscriptions();
|
|
8529
|
+
}
|
|
8530
|
+
set setActiveIndex(index) {
|
|
8531
|
+
this.activeIndex = index;
|
|
8532
|
+
this.markTabAsActive();
|
|
8533
|
+
}
|
|
8534
|
+
set setDisabled(disabled) {
|
|
8535
|
+
this.disabled = disabled;
|
|
8536
|
+
this.disabledSubject$.next(disabled);
|
|
8537
|
+
}
|
|
8538
|
+
ngAfterViewInit() {
|
|
8539
|
+
this.markTabAsActive();
|
|
8540
|
+
}
|
|
8541
|
+
ngAfterViewChecked() {
|
|
8542
|
+
this.nextRenderSubject$.next();
|
|
8543
|
+
}
|
|
8544
|
+
ngOnDestroy() {
|
|
8545
|
+
this.destroy$.next();
|
|
8546
|
+
this.destroy$.complete();
|
|
8547
|
+
}
|
|
8548
|
+
onActivate(event, element) {
|
|
8549
|
+
const index = this.tabsList.findIndex((tab) => tab === element);
|
|
8550
|
+
event.stopPropagation();
|
|
8551
|
+
if (index === this.activeIndex) {
|
|
8552
|
+
return;
|
|
8553
|
+
}
|
|
8554
|
+
this.activeItemIndexChange.emit(index);
|
|
8555
|
+
this.activeIndex = index;
|
|
8556
|
+
this.markTabAsActive();
|
|
8557
|
+
}
|
|
8558
|
+
get tabsList() {
|
|
8559
|
+
return Array.from(this.el.nativeElement.querySelectorAll('[evoNavigationTab]'));
|
|
8560
|
+
}
|
|
8561
|
+
get activeElement() {
|
|
8562
|
+
return this.tabsList[this.activeIndex] || undefined;
|
|
8563
|
+
}
|
|
8564
|
+
markTabAsActive() {
|
|
8565
|
+
const { tabsList, activeElement } = this;
|
|
8566
|
+
tabsList.forEach((nativeElement) => {
|
|
8567
|
+
const active = nativeElement === activeElement;
|
|
8568
|
+
nativeElement.classList.toggle('_active', active);
|
|
8569
|
+
nativeElement.setAttribute('tabIndex', active ? '0' : '-1');
|
|
8570
|
+
});
|
|
8571
|
+
}
|
|
8572
|
+
markTabAsDisabled() {
|
|
8573
|
+
this.tabsList.forEach((nativeElement) => {
|
|
8574
|
+
const allDisabledClassName = '_all_disabled';
|
|
8575
|
+
if (this.disabled && !nativeElement.disabled) {
|
|
8576
|
+
nativeElement.classList.add(allDisabledClassName);
|
|
8577
|
+
nativeElement.setAttribute('disabled', '');
|
|
8578
|
+
}
|
|
8579
|
+
if (!this.disabled && nativeElement.classList.contains(allDisabledClassName)) {
|
|
8580
|
+
nativeElement.classList.remove(allDisabledClassName);
|
|
8581
|
+
nativeElement.removeAttribute('disabled');
|
|
8582
|
+
}
|
|
8583
|
+
});
|
|
8584
|
+
}
|
|
8585
|
+
initSubscriptions() {
|
|
8586
|
+
this.disabledSubject$
|
|
8587
|
+
.pipe(switchMap(() => this.nextRenderSubject$.pipe(take(1))), tap(() => {
|
|
8588
|
+
this.markTabAsDisabled();
|
|
8589
|
+
}), takeUntil(this.destroy$))
|
|
8590
|
+
.subscribe();
|
|
8591
|
+
}
|
|
8592
|
+
}
|
|
8593
|
+
EvoNavigationTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoNavigationTabsComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8594
|
+
EvoNavigationTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: EvoNavigationTabsComponent, selector: "evo-navigation-tabs", inputs: { tabs: "tabs", size: "size", setActiveIndex: ["activeIndex", "setActiveIndex"], setDisabled: ["disabled", "setDisabled"] }, outputs: { activeItemIndexChange: "activeItemIndexChange" }, host: { listeners: { "evo-tab-activate": "onActivate($event,$event.target)" } }, ngImport: i0, template: "<div class=\"evo-navigation-tabs\" [class]=\"{ 'evo-navigation-tabs_size_small': size === 'small' }\">\n <ng-content select=\"[position=start]\"></ng-content>\n\n <ng-container *ngFor=\"let tab of tabs; let i = index\">\n <button\n *ngIf=\"tab.link\"\n evoNavigationTab\n routerLinkActive=\"active\"\n queryParamsHandling=\"merge\"\n [routerLink]=\"tab.link\"\n [routerLinkActiveOptions]=\"{exact: true}\"\n [disabled]=\"tab.disabled || disabled\"\n >\n {{ tab.label }}\n </button>\n <button *ngIf=\"!tab.link\" evoNavigationTab [disabled]=\"tab.disabled || disabled\">{{ tab.label }}</button>\n </ng-container>\n\n <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block}.evo-navigation-tabs{display:flex;box-shadow:inset 0 -1px #c6c6c6;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.evo-navigation-tabs::-webkit-scrollbar{display:none}.evo-navigation-tab{display:flex;align-items:center;box-sizing:border-box;padding:12px 16px;border:none;background:none;color:#212121;white-space:nowrap;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:box-shadow .3s,color .3s;font-family:var(--evo-font);font-style:normal;font-size:14px;line-height:24px;font-weight:600}.evo-navigation-tabs_size_small .evo-navigation-tab{padding:7px 8px;text-transform:none;font-family:var(--evo-font);font-style:normal;font-size:12px;line-height:18px;font-weight:400}.evo-navigation-tab:hover{color:#f05023}.evo-navigation-tab:focus-visible{outline:none}.evo-navigation-tab._active:not(:disabled){color:#f05023;box-shadow:inset 0 -2px #f05023;cursor:default}.evo-navigation-tabs_size_small .evo-navigation-tab._active:not(:disabled){box-shadow:inset 0 -1px #f05023}.evo-navigation-tab:disabled{color:#b0b0b0;pointer-events:none;cursor:default}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: EvoNavigationTabDirective, selector: "button[evoNavigationTab]:not([routerLink]), button[evoNavigationTab][routerLink][routerLinkActive]" }, { type: i3$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i3$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["routerLink", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8595
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoNavigationTabsComponent, decorators: [{
|
|
8596
|
+
type: Component,
|
|
8597
|
+
args: [{
|
|
8598
|
+
selector: 'evo-navigation-tabs',
|
|
8599
|
+
templateUrl: './evo-navigation-tabs.component.html',
|
|
8600
|
+
styleUrls: ['./evo-navigation-tabs.component.scss'],
|
|
8601
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
8602
|
+
encapsulation: ViewEncapsulation.None,
|
|
8603
|
+
}]
|
|
8604
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { tabs: [{
|
|
8605
|
+
type: Input
|
|
8606
|
+
}], size: [{
|
|
8607
|
+
type: Input
|
|
8608
|
+
}], setActiveIndex: [{
|
|
8609
|
+
type: Input,
|
|
8610
|
+
args: ['activeIndex']
|
|
8611
|
+
}], setDisabled: [{
|
|
8612
|
+
type: Input,
|
|
8613
|
+
args: ['disabled']
|
|
8614
|
+
}], activeItemIndexChange: [{
|
|
8615
|
+
type: Output
|
|
8616
|
+
}], onActivate: [{
|
|
8617
|
+
type: HostListener,
|
|
8618
|
+
args: [EVO_TAB_ACTIVATE, ['$event', '$event.target']]
|
|
8619
|
+
}] } });
|
|
8620
|
+
|
|
8621
|
+
class EvoNavigationTabsModule {
|
|
8622
|
+
}
|
|
8623
|
+
EvoNavigationTabsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoNavigationTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
8624
|
+
EvoNavigationTabsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoNavigationTabsModule, declarations: [EvoNavigationTabsComponent, EvoNavigationTabDirective], imports: [CommonModule, RouterModule], exports: [EvoNavigationTabsComponent, EvoNavigationTabDirective] });
|
|
8625
|
+
EvoNavigationTabsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoNavigationTabsModule, imports: [[CommonModule, RouterModule]] });
|
|
8626
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: EvoNavigationTabsModule, decorators: [{
|
|
8627
|
+
type: NgModule,
|
|
8628
|
+
args: [{
|
|
8629
|
+
declarations: [EvoNavigationTabsComponent, EvoNavigationTabDirective],
|
|
8630
|
+
imports: [CommonModule, RouterModule],
|
|
8631
|
+
exports: [EvoNavigationTabsComponent, EvoNavigationTabDirective],
|
|
8632
|
+
}]
|
|
8633
|
+
}] });
|
|
8634
|
+
|
|
8299
8635
|
/*
|
|
8300
8636
|
* Public API Surface of evo-ui-kit
|
|
8301
8637
|
*/
|
|
@@ -8304,5 +8640,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
|
|
|
8304
8640
|
* Generated bundle index. Do not edit.
|
|
8305
8641
|
*/
|
|
8306
8642
|
|
|
8307
|
-
export { CSS_BREAKPOINTS, DESKTOP_SMALL_VIEW, DaDataEntityTypes, DaDataParty, DadataBankStatus, DadataBankType, DadataCompanyBranchType, DadataCompanyStatus, DadataCompanyType, DadataFounderShareType, DadataManagerType, DeclinationPipe, DeprecateMethod, DeprecateVariable, DesktopSmallViewProvider, EVO_DROPDOWN_POSITION_DESCRIPTION, EVO_SIDEBAR_CONFIG, EVO_SIDEBAR_DATA, EVO_SIDEBAR_ROOT_ID, EvoAbstractPortal, EvoAccordionComponent, EvoAccordionContentComponent, EvoAccordionModule, EvoAccordionPanelComponent, EvoAccordionTitleComponent, EvoAlertComponent, EvoAlertDefaultIcons, EvoAlertModule, EvoAlertSizes, EvoAlertTypes, EvoAutocompleteComponent, EvoAutocompleteDefaultOptionComponent, EvoAutocompleteFooterComponent, EvoAutocompleteHeaderComponent, EvoAutocompleteModule, EvoBadgeComponent, EvoBadgeModule, EvoBanner, EvoBannerComponent, EvoBannerLocations, EvoBannerModule, EvoBannerTypes, EvoBaseControl, EvoButtonComponent, EvoButtonModule, EvoButtonOldComponent, EvoButtonSizes, EvoButtonStyles, EvoCheckboxComponent, EvoCheckboxModule, EvoChipComponent, EvoChipModule, EvoChipTheme, EvoChipType, EvoCircularLoaderComponent, EvoClickOutsideDirective, EvoCollection, EvoCollectionFabric, EvoControlErrorComponent, EvoControlErrorModule, EvoControlLabelComponent, EvoControlLabelModule, EvoControlStateManager, EvoControlStates, EvoCounterComponent, EvoCounterModule, EvoCounterSize, EvoDatepickerComponent, EvoDatepickerModule, EvoDropdownComponent, EvoDropdownModule, EvoDropdownOriginDirective, EvoExpandedService, EvoIconButtonColor, EvoIconButtonComponent, EvoIconButtonModule, EvoIconComponent, EvoIconModule, EvoIconNumberComponent, EvoIconNumberModule, EvoIconsLibrary, EvoInputComponent, EvoInputContenteditableComponent, EvoInputContenteditableModule, EvoInputIconDirective, EvoInputModule, EvoInputSizes, EvoInputTheme, EvoIsExpandedDirective, EvoLetContext, EvoLetDirective, EvoLoaderComponent, EvoLoaderModule, EvoLoaderStyles, EvoModalCloseTargets, EvoModalComponent, EvoModalModule, EvoModalService, EvoNavbarComponent, EvoNavbarItemComponent, EvoNavbarModule, EvoNavigationButtonComponent, EvoNavigationButtonModule, EvoNoteComponent, EvoNoteModule, EvoPaginatorComponent, EvoPaginatorModule, EvoPipesModule, EvoPlusMinusComponent, EvoPlusMinusModule, EvoPopoverComponent, EvoPopoverModule, EvoPortalModule, EvoPortalOutlet, EvoPortalOutletDirective, EvoPortalService, EvoRadioComponent, EvoRadioGroupComponent, EvoRadioGroupDirections, EvoRadioGroupModule, EvoRadioGroupThemes, EvoRadioModule, EvoRadioshapeComponent, EvoRadioshapeModule, EvoSegmentedBarButtonComponent, EvoSegmentedBarComponent, EvoSegmentedBarModule, EvoSelectComponent, EvoSelectModule, EvoSidebarCloseTargets, EvoSidebarComponent, EvoSidebarContentComponent, EvoSidebarFooterComponent, EvoSidebarHeaderComponent, EvoSidebarModule, EvoSidebarService, EvoSidebarSizes, EvoSidebarStates, EvoStepperComponent, EvoStepperItemComponent, EvoStepperModule, EvoSubmenuComponent, EvoSubmenuModule, EvoSubmenuType, EvoSwitcherComponent, EvoSwitcherItemComponent, EvoSwitcherModule, EvoTabComponent, EvoTabContentComponent, EvoTabStateCollection, EvoTableColumnComponent, EvoTableComponent, EvoTableModule, EvoTableRowClickEvent, EvoTabsComponent, EvoTabsModule, EvoTabsService, EvoTabsSize, EvoTabsSizeService, EvoTextareaComponent, EvoTextareaModule, EvoToastComponent, EvoToastModule, EvoToastService, EvoToastTypes, EvoToggleComponent, EvoToggleModule, EvoTooltipDirective, EvoTooltipModule, EvoUiClassDirective, EvoUiKitModule, EvoUploadComponent, EvoUploadModule, FormHelper, ICONS_LIST_TOKEN, MOBILE_VIEW, MobileViewProvider, SafeHtmlPipe, Serializable, TABLET_VIEW, TabletViewProvider, VIEW_BREAKPOINTS_PROVIDERS, WINDOW_PROVIDERS, enterZone, evoIconsLibraryGetter, evoSidebarAnimationDuration, evoSidebarDefaultConfig, evoSidebarRootId, expandAnimation, portalProvider, sidebarAnimation, skipInitialRenderAnimation, switchQueryToList };
|
|
8643
|
+
export { CSS_BREAKPOINTS, DESKTOP_SMALL_VIEW, DaDataEntityTypes, DaDataParty, DadataBankStatus, DadataBankType, DadataCompanyBranchType, DadataCompanyStatus, DadataCompanyType, DadataFounderShareType, DadataManagerType, DeclinationPipe, DeprecateMethod, DeprecateVariable, DesktopSmallViewProvider, EVO_DROPDOWN_POSITION_DESCRIPTION, EVO_SIDEBAR_CONFIG, EVO_SIDEBAR_DATA, EVO_SIDEBAR_ROOT_ID, EVO_TAB_ACTIVATE, EvoAbstractPortal, EvoAccordionComponent, EvoAccordionContentComponent, EvoAccordionModule, EvoAccordionPanelComponent, EvoAccordionTitleComponent, EvoAlertComponent, EvoAlertDefaultIcons, EvoAlertModule, EvoAlertSizes, EvoAlertTypes, EvoAutocompleteComponent, EvoAutocompleteDefaultOptionComponent, EvoAutocompleteFooterComponent, EvoAutocompleteHeaderComponent, EvoAutocompleteModule, EvoBadgeComponent, EvoBadgeModule, EvoBanner, EvoBannerComponent, EvoBannerLocations, EvoBannerModule, EvoBannerTypes, EvoBaseControl, EvoButtonComponent, EvoButtonModule, EvoButtonOldComponent, EvoButtonSizes, EvoButtonStyles, EvoCheckboxComponent, EvoCheckboxModule, EvoChipComponent, EvoChipModule, EvoChipTheme, EvoChipType, EvoCircularLoaderComponent, EvoClickOutsideDirective, EvoCollection, EvoCollectionFabric, EvoControlErrorComponent, EvoControlErrorModule, EvoControlLabelComponent, EvoControlLabelModule, EvoControlStateManager, EvoControlStates, EvoCounterComponent, EvoCounterModule, EvoCounterSize, EvoDatepickerComponent, EvoDatepickerModule, EvoDropdownComponent, EvoDropdownModule, EvoDropdownOriginDirective, EvoExpandedService, EvoIconButtonColor, EvoIconButtonComponent, EvoIconButtonModule, EvoIconComponent, EvoIconModule, EvoIconNumberComponent, EvoIconNumberModule, EvoIconsLibrary, EvoInputComponent, EvoInputContenteditableComponent, EvoInputContenteditableModule, EvoInputIconDirective, EvoInputModule, EvoInputSizes, EvoInputTheme, EvoIsExpandedDirective, EvoLetContext, EvoLetDirective, EvoLoaderComponent, EvoLoaderModule, EvoLoaderStyles, EvoModalCloseTargets, EvoModalComponent, EvoModalModule, EvoModalService, EvoNavbarComponent, EvoNavbarItemComponent, EvoNavbarModule, EvoNavigationButtonComponent, EvoNavigationButtonModule, EvoNavigationTabDirective, EvoNavigationTabsComponent, EvoNavigationTabsModule, EvoNoteComponent, EvoNoteModule, EvoPaginatorComponent, EvoPaginatorModule, EvoPipesModule, EvoPlusMinusComponent, EvoPlusMinusModule, EvoPopoverComponent, EvoPopoverModule, EvoPortalModule, EvoPortalOutlet, EvoPortalOutletDirective, EvoPortalService, EvoRadioComponent, EvoRadioGroupComponent, EvoRadioGroupDirections, EvoRadioGroupModule, EvoRadioGroupThemes, EvoRadioModule, EvoRadioshapeComponent, EvoRadioshapeModule, EvoSegmentedBarButtonComponent, EvoSegmentedBarComponent, EvoSegmentedBarModule, EvoSelectComponent, EvoSelectModule, EvoSidebarCloseTargets, EvoSidebarComponent, EvoSidebarContentComponent, EvoSidebarFooterComponent, EvoSidebarHeaderComponent, EvoSidebarModule, EvoSidebarService, EvoSidebarSizes, EvoSidebarStates, EvoStepperComponent, EvoStepperItemComponent, EvoStepperModule, EvoSubmenuComponent, EvoSubmenuModule, EvoSubmenuType, EvoSwitcherComponent, EvoSwitcherItemComponent, EvoSwitcherModule, EvoTabComponent, EvoTabContentComponent, EvoTabStateCollection, EvoTableColumnComponent, EvoTableComponent, EvoTableModule, EvoTableRowClickEvent, EvoTabsComponent, EvoTabsModule, EvoTabsService, EvoTabsSize, EvoTabsSizeService, EvoTextareaComponent, EvoTextareaModule, EvoToastComponent, EvoToastModule, EvoToastService, EvoToastTypes, EvoToggleComponent, EvoToggleModule, EvoTooltipDirective, EvoTooltipModule, EvoUiClassDirective, EvoUiKitModule, EvoUploadComponent, EvoUploadModule, FormHelper, ICONS_LIST_TOKEN, MOBILE_VIEW, MobileViewProvider, SafeHtmlPipe, Serializable, TABLET_VIEW, TabletViewProvider, VIEW_BREAKPOINTS_PROVIDERS, WINDOW_PROVIDERS, enterZone, evoIconsLibraryGetter, evoSidebarAnimationDuration, evoSidebarDefaultConfig, evoSidebarRootId, expandAnimation, portalProvider, sidebarAnimation, skipInitialRenderAnimation, switchQueryToList };
|
|
8308
8644
|
//# sourceMappingURL=evotor-dev-ui-kit.js.map
|