@tetacom/ng-components 1.1.19 → 1.1.21
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/component/icon/icon/icon.component.d.ts +1 -4
- package/directive/scrollable/scrollable/scrollable.component.d.ts +7 -9
- package/esm2022/component/icon/icon/icon.component.mjs +2 -4
- package/esm2022/component/select/select/select.component.mjs +5 -3
- package/esm2022/directive/scrollable/scrollable/scrollable.component.mjs +33 -42
- package/fesm2022/tetacom-ng-components.mjs +114 -120
- package/fesm2022/tetacom-ng-components.mjs.map +1 -1
- package/package.json +1 -1
- package/style/icon.scss +1 -0
- package/style/list.scss +1 -1
- package/style/select.scss +0 -17
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Host, HostListener, Injectable, NgModule, forwardRef, EventEmitter, Output, PLATFORM_ID, ElementRef, TemplateRef, Injector, Pipe, ViewChild,
|
|
2
|
+
import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Host, HostListener, Injectable, NgModule, forwardRef, EventEmitter, Output, PLATFORM_ID, ElementRef, TemplateRef, Injector, Pipe, ViewChild, ViewEncapsulation, ChangeDetectorRef, ViewContainerRef, ContentChildren, inject, CUSTOM_ELEMENTS_SCHEMA, SkipSelf, InjectionToken } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { DOCUMENT, CommonModule, isPlatformBrowser, DatePipe } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/common/http';
|
|
@@ -12,8 +12,7 @@ import { MaskitoModule } from '@maskito/angular';
|
|
|
12
12
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
13
13
|
import { trigger, transition, style, animate } from '@angular/animations';
|
|
14
14
|
import dayjs from 'dayjs';
|
|
15
|
-
import
|
|
16
|
-
import { ReplaySubject, BehaviorSubject, combineLatest, takeWhile as takeWhile$1, filter as filter$1, map as map$1, shareReplay, Observable, share, pipe, fromEvent, tap, Subject, merge } from 'rxjs';
|
|
15
|
+
import { ReplaySubject, BehaviorSubject, combineLatest, takeWhile as takeWhile$1, filter as filter$1, map as map$1, shareReplay, fromEvent, tap, Subject, merge, Observable, pipe, share } from 'rxjs';
|
|
17
16
|
import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoDateRangeOptionsGenerator } from '@maskito/kit';
|
|
18
17
|
import * as i1$2 from '@ngneat/transloco';
|
|
19
18
|
import { TranslocoModule, TRANSLOCO_SCOPE } from '@ngneat/transloco';
|
|
@@ -131,8 +130,6 @@ class IconComponent {
|
|
|
131
130
|
}
|
|
132
131
|
return result.join(' ');
|
|
133
132
|
}
|
|
134
|
-
constructor() { }
|
|
135
|
-
ngOnInit() { }
|
|
136
133
|
getName() {
|
|
137
134
|
return `#${this.name}`;
|
|
138
135
|
}
|
|
@@ -142,7 +139,7 @@ class IconComponent {
|
|
|
142
139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: IconComponent, decorators: [{
|
|
143
140
|
type: Component,
|
|
144
141
|
args: [{ selector: 'teta-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg class=\"icon__image\">\n <use [attr.xlink:href]=\"getName()\"></use>\n</svg>\n" }]
|
|
145
|
-
}],
|
|
142
|
+
}], propDecorators: { name: [{
|
|
146
143
|
type: Input
|
|
147
144
|
}], size: [{
|
|
148
145
|
type: Input
|
|
@@ -4348,90 +4345,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
4348
4345
|
args: ['class.scrollable_hide_scroll']
|
|
4349
4346
|
}] } });
|
|
4350
4347
|
|
|
4351
|
-
const ANIMATION_FRAME = new InjectionToken('Shared Observable based on `window.requestAnimationFrame`', {
|
|
4352
|
-
factory: () => {
|
|
4353
|
-
const { requestAnimationFrame, cancelAnimationFrame } = inject(WINDOW);
|
|
4354
|
-
const animationFrame$ = new Observable(subscriber => {
|
|
4355
|
-
let id = NaN;
|
|
4356
|
-
const callback = (timestamp) => {
|
|
4357
|
-
subscriber.next(timestamp);
|
|
4358
|
-
id = requestAnimationFrame(callback);
|
|
4359
|
-
};
|
|
4360
|
-
id = requestAnimationFrame(callback);
|
|
4361
|
-
return () => {
|
|
4362
|
-
cancelAnimationFrame(id);
|
|
4363
|
-
};
|
|
4364
|
-
});
|
|
4365
|
-
return animationFrame$.pipe(share());
|
|
4366
|
-
},
|
|
4367
|
-
});
|
|
4368
|
-
const WINDOW = new InjectionToken('An abstraction over global window object', {
|
|
4369
|
-
factory: () => {
|
|
4370
|
-
const { defaultView } = inject(DOCUMENT);
|
|
4371
|
-
if (!defaultView) {
|
|
4372
|
-
throw new Error('Window is not available');
|
|
4373
|
-
}
|
|
4374
|
-
return defaultView;
|
|
4375
|
-
},
|
|
4376
|
-
});
|
|
4377
|
-
|
|
4378
|
-
function tetaZoneFull(ngZone) {
|
|
4379
|
-
return source => new Observable(subscriber => source.subscribe({
|
|
4380
|
-
next: value => ngZone.run(() => subscriber.next(value)),
|
|
4381
|
-
error: (error) => ngZone.run(() => subscriber.error(error)),
|
|
4382
|
-
complete: () => ngZone.run(() => subscriber.complete()),
|
|
4383
|
-
}));
|
|
4384
|
-
}
|
|
4385
|
-
function tetaZoneFree(ngZone) {
|
|
4386
|
-
return source => new Observable(subscriber => ngZone.runOutsideAngular(() => source.subscribe(subscriber)));
|
|
4387
|
-
}
|
|
4388
|
-
function tetaZoneOptimized(ngZone) {
|
|
4389
|
-
return pipe(tetaZoneFree(ngZone), tetaZoneFull(ngZone));
|
|
4390
|
-
}
|
|
4391
|
-
|
|
4392
|
-
class LetDirective {
|
|
4393
|
-
tetaLet;
|
|
4394
|
-
constructor(viewContainer, templateRef) {
|
|
4395
|
-
viewContainer.createEmbeddedView(templateRef, new LetContext(this));
|
|
4396
|
-
}
|
|
4397
|
-
static ngTemplateContextGuard(_dir, _ctx) {
|
|
4398
|
-
return true;
|
|
4399
|
-
}
|
|
4400
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LetDirective, deps: [{ token: ViewContainerRef }, { token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
4401
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: LetDirective, selector: "[tetaLet]", inputs: { tetaLet: "tetaLet" }, ngImport: i0 });
|
|
4402
|
-
}
|
|
4403
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LetDirective, decorators: [{
|
|
4404
|
-
type: Directive,
|
|
4405
|
-
args: [{
|
|
4406
|
-
selector: '[tetaLet]'
|
|
4407
|
-
}]
|
|
4408
|
-
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef, decorators: [{
|
|
4409
|
-
type: Inject,
|
|
4410
|
-
args: [ViewContainerRef]
|
|
4411
|
-
}] }, { type: i0.TemplateRef, decorators: [{
|
|
4412
|
-
type: Inject,
|
|
4413
|
-
args: [TemplateRef]
|
|
4414
|
-
}] }]; }, propDecorators: { tetaLet: [{
|
|
4415
|
-
type: Input
|
|
4416
|
-
}] } });
|
|
4417
|
-
class LetContext {
|
|
4418
|
-
internalDirectiveInstance;
|
|
4419
|
-
constructor(internalDirectiveInstance) {
|
|
4420
|
-
this.internalDirectiveInstance = internalDirectiveInstance;
|
|
4421
|
-
}
|
|
4422
|
-
get $implicit() {
|
|
4423
|
-
return this.internalDirectiveInstance.tetaLet;
|
|
4424
|
-
}
|
|
4425
|
-
get tetaLet() {
|
|
4426
|
-
return this.internalDirectiveInstance.tetaLet;
|
|
4427
|
-
}
|
|
4428
|
-
}
|
|
4429
|
-
|
|
4430
4348
|
class ScrollableComponent {
|
|
4431
|
-
|
|
4432
|
-
_injector;
|
|
4433
|
-
_ngZone;
|
|
4434
|
-
_animationFrame;
|
|
4349
|
+
_cdr;
|
|
4435
4350
|
_scrollDirective;
|
|
4436
4351
|
_scrollableWrapper;
|
|
4437
4352
|
_scrollbarVertical;
|
|
@@ -4443,29 +4358,25 @@ class ScrollableComponent {
|
|
|
4443
4358
|
scrollSize;
|
|
4444
4359
|
_container;
|
|
4445
4360
|
_alive = true;
|
|
4446
|
-
|
|
4447
|
-
|
|
4448
|
-
this.
|
|
4449
|
-
this.
|
|
4450
|
-
|
|
4451
|
-
|
|
4361
|
+
_observer;
|
|
4362
|
+
constructor(_cdr) {
|
|
4363
|
+
this._cdr = _cdr;
|
|
4364
|
+
this._observer = new ResizeObserver(this._observe);
|
|
4365
|
+
}
|
|
4366
|
+
_observe = () => {
|
|
4367
|
+
this.scrollSize = {
|
|
4452
4368
|
scrollHeight: this._container.nativeElement.scrollHeight,
|
|
4453
4369
|
scrollWidth: this._container.nativeElement.scrollWidth,
|
|
4454
4370
|
clientHeight: this._container.nativeElement.clientHeight,
|
|
4455
4371
|
clientWidth: this._container.nativeElement.clientWidth,
|
|
4456
|
-
}
|
|
4457
|
-
|
|
4372
|
+
};
|
|
4373
|
+
this._cdr.detectChanges();
|
|
4374
|
+
};
|
|
4458
4375
|
scrollVertical(event) {
|
|
4459
4376
|
this._container.nativeElement.scrollTop = event.target.scrollTop;
|
|
4460
|
-
// event.scrollLeft = this._container.nativeElement.scrollLeft;
|
|
4461
|
-
// this._elementRef.nativeElement.dispatchEvent(event);
|
|
4462
|
-
// this.scroll.emit(event);
|
|
4463
4377
|
}
|
|
4464
4378
|
scrollHorizontal(event) {
|
|
4465
4379
|
this._container.nativeElement.scrollLeft = event.target.scrollLeft;
|
|
4466
|
-
// event.scrollTop = this._container.nativeElement.scrollTop;
|
|
4467
|
-
// this._elementRef.nativeElement.dispatchEvent(event);
|
|
4468
|
-
// this.scroll.emit(event);
|
|
4469
4380
|
}
|
|
4470
4381
|
ngOnInit() {
|
|
4471
4382
|
this._container = this._scrollableWrapper;
|
|
@@ -4474,44 +4385,46 @@ class ScrollableComponent {
|
|
|
4474
4385
|
}
|
|
4475
4386
|
fromEvent(this._container.nativeElement, 'scroll')
|
|
4476
4387
|
.pipe(takeWhile(() => this._alive), tap((event) => {
|
|
4477
|
-
this._scrollbarHorizontal.nativeElement.scrollLeft =
|
|
4478
|
-
|
|
4479
|
-
|
|
4388
|
+
this._scrollbarHorizontal.nativeElement.scrollLeft =
|
|
4389
|
+
event.target.scrollLeft;
|
|
4390
|
+
this._scrollbarVertical.nativeElement.scrollTop =
|
|
4391
|
+
event.target.scrollTop;
|
|
4480
4392
|
this.scroll.emit(event);
|
|
4481
|
-
}))
|
|
4393
|
+
}))
|
|
4394
|
+
.subscribe();
|
|
4395
|
+
this._observer.observe(this._container.nativeElement);
|
|
4482
4396
|
}
|
|
4483
4397
|
ngOnDestroy() {
|
|
4484
4398
|
this._alive = false;
|
|
4399
|
+
this._observer.unobserve(this._container.nativeElement);
|
|
4400
|
+
this._observer.disconnect();
|
|
4485
4401
|
}
|
|
4486
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollableComponent, deps: [{ token: i0.
|
|
4487
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ScrollableComponent, selector: "teta-scrollable", inputs: { direction: "direction", showScrollbars: "showScrollbars", contentClass: "contentClass" }, outputs: { scroll: "scroll" }, host: { properties: { "class.show-scrollbars": "this.showScrollbars" } }, queries: [{ propertyName: "_scrollDirective", first: true, predicate: ScrollableDirective, descendants: true, read: ElementRef, static: true }], viewQueries: [{ propertyName: "_scrollableWrapper", first: true, predicate: ["scrollableWrapper"], descendants: true, static: true }, { propertyName: "_scrollbarVertical", first: true, predicate: ["scrollbarVertical"], descendants: true, static: true }, { propertyName: "_scrollbarHorizontal", first: true, predicate: ["scrollbarHorizontal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"scroll-controls\"
|
|
4402
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4403
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ScrollableComponent, selector: "teta-scrollable", inputs: { direction: "direction", showScrollbars: "showScrollbars", contentClass: "contentClass" }, outputs: { scroll: "scroll" }, host: { properties: { "class.show-scrollbars": "this.showScrollbars" } }, queries: [{ propertyName: "_scrollDirective", first: true, predicate: ScrollableDirective, descendants: true, read: ElementRef, static: true }], viewQueries: [{ propertyName: "_scrollableWrapper", first: true, predicate: ["scrollableWrapper"], descendants: true, static: true }, { propertyName: "_scrollbarVertical", first: true, predicate: ["scrollbarVertical"], descendants: true, static: true }, { propertyName: "_scrollbarHorizontal", first: true, predicate: ["scrollbarHorizontal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"scroll-controls\">\n <div #scrollbarVertical\n [class.display-none]=\"scrollSize?.scrollHeight <= scrollSize?.clientHeight\"\n class=\"scroll-scrollbar scroll-scrollbar-vertical\"\n (scroll)=\"scrollVertical($event)\">\n <div [style.height.px]=\"scrollSize?.scrollHeight\" style=\"width: 1px;\"></div>\n </div>\n <div #scrollbarHorizontal\n [class.display-none]=\"scrollSize?.scrollWidth <= scrollSize?.clientWidth\"\n class=\"scroll-scrollbar scroll-scrollbar-horizontal\"\n (scroll)=\"scrollHorizontal($event)\">\n <div [style.width.px]=\"scrollSize?.scrollWidth\" style=\"height: 1px;\"></div>\n </div>\n</div>\n\n\n<!--<div #scrollableWrapper class=\"scroll-content-wrapper\">-->\n<!-- <div class=\"scroll-content\"-->\n<!-- [class.column]=\"direction === 'column'\">-->\n<!-- <!– <div class=\"scroll-content\">–>-->\n<!-- <ng-content></ng-content>-->\n<!-- </div>-->\n<!--</div>-->\n<div #scrollableWrapper class=\"scroll-content-wrapper\"\n [ngClass]=\"contentClass\"\n [class.column]=\"direction === 'column'\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:hidden;position:relative;z-index:0;display:flex}:host:hover .scroll-controls{opacity:1}:host.show-scrollbars .scroll-controls{opacity:1}:host::-webkit-scrollbar{width:0;height:0}.scroll-content-wrapper{display:flex;overflow:auto;flex-grow:1}.scroll-content-wrapper::-webkit-scrollbar{width:0;height:0}.scroll-content{position:relative;z-index:0;flex:1;display:flex;height:auto;min-width:0}.scroll-controls{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s linear}.scroll-scrollbar{position:absolute;overflow:auto;pointer-events:auto}.scroll-scrollbar-vertical{right:0;top:0;bottom:12px;width:12px}.scroll-scrollbar-horizontal{right:12px;left:0;bottom:0;height:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4488
4404
|
}
|
|
4489
4405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollableComponent, decorators: [{
|
|
4490
4406
|
type: Component,
|
|
4491
|
-
args: [{ selector: 'teta-scrollable', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scroll-controls\"
|
|
4492
|
-
}], ctorParameters: function () { return [{ type: i0.
|
|
4493
|
-
type: Inject,
|
|
4494
|
-
args: [ANIMATION_FRAME]
|
|
4495
|
-
}] }]; }, propDecorators: { _scrollDirective: [{
|
|
4407
|
+
args: [{ selector: 'teta-scrollable', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scroll-controls\">\n <div #scrollbarVertical\n [class.display-none]=\"scrollSize?.scrollHeight <= scrollSize?.clientHeight\"\n class=\"scroll-scrollbar scroll-scrollbar-vertical\"\n (scroll)=\"scrollVertical($event)\">\n <div [style.height.px]=\"scrollSize?.scrollHeight\" style=\"width: 1px;\"></div>\n </div>\n <div #scrollbarHorizontal\n [class.display-none]=\"scrollSize?.scrollWidth <= scrollSize?.clientWidth\"\n class=\"scroll-scrollbar scroll-scrollbar-horizontal\"\n (scroll)=\"scrollHorizontal($event)\">\n <div [style.width.px]=\"scrollSize?.scrollWidth\" style=\"height: 1px;\"></div>\n </div>\n</div>\n\n\n<!--<div #scrollableWrapper class=\"scroll-content-wrapper\">-->\n<!-- <div class=\"scroll-content\"-->\n<!-- [class.column]=\"direction === 'column'\">-->\n<!-- <!– <div class=\"scroll-content\">–>-->\n<!-- <ng-content></ng-content>-->\n<!-- </div>-->\n<!--</div>-->\n<div #scrollableWrapper class=\"scroll-content-wrapper\"\n [ngClass]=\"contentClass\"\n [class.column]=\"direction === 'column'\">\n <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:hidden;position:relative;z-index:0;display:flex}:host:hover .scroll-controls{opacity:1}:host.show-scrollbars .scroll-controls{opacity:1}:host::-webkit-scrollbar{width:0;height:0}.scroll-content-wrapper{display:flex;overflow:auto;flex-grow:1}.scroll-content-wrapper::-webkit-scrollbar{width:0;height:0}.scroll-content{position:relative;z-index:0;flex:1;display:flex;height:auto;min-width:0}.scroll-controls{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s linear}.scroll-scrollbar{position:absolute;overflow:auto;pointer-events:auto}.scroll-scrollbar-vertical{right:0;top:0;bottom:12px;width:12px}.scroll-scrollbar-horizontal{right:12px;left:0;bottom:0;height:12px}\n"] }]
|
|
4408
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _scrollDirective: [{
|
|
4496
4409
|
type: ContentChild,
|
|
4497
4410
|
args: [ScrollableDirective, {
|
|
4498
4411
|
static: true,
|
|
4499
|
-
read: ElementRef
|
|
4412
|
+
read: ElementRef,
|
|
4500
4413
|
}]
|
|
4501
4414
|
}], _scrollableWrapper: [{
|
|
4502
4415
|
type: ViewChild,
|
|
4503
4416
|
args: ['scrollableWrapper', {
|
|
4504
|
-
static: true
|
|
4417
|
+
static: true,
|
|
4505
4418
|
}]
|
|
4506
4419
|
}], _scrollbarVertical: [{
|
|
4507
4420
|
type: ViewChild,
|
|
4508
4421
|
args: ['scrollbarVertical', {
|
|
4509
|
-
static: true
|
|
4422
|
+
static: true,
|
|
4510
4423
|
}]
|
|
4511
4424
|
}], _scrollbarHorizontal: [{
|
|
4512
4425
|
type: ViewChild,
|
|
4513
4426
|
args: ['scrollbarHorizontal', {
|
|
4514
|
-
static: true
|
|
4427
|
+
static: true,
|
|
4515
4428
|
}]
|
|
4516
4429
|
}], direction: [{
|
|
4517
4430
|
type: Input
|
|
@@ -5280,6 +5193,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
5280
5193
|
type: Input
|
|
5281
5194
|
}] } });
|
|
5282
5195
|
|
|
5196
|
+
class LetDirective {
|
|
5197
|
+
tetaLet;
|
|
5198
|
+
constructor(viewContainer, templateRef) {
|
|
5199
|
+
viewContainer.createEmbeddedView(templateRef, new LetContext(this));
|
|
5200
|
+
}
|
|
5201
|
+
static ngTemplateContextGuard(_dir, _ctx) {
|
|
5202
|
+
return true;
|
|
5203
|
+
}
|
|
5204
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LetDirective, deps: [{ token: ViewContainerRef }, { token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
5205
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: LetDirective, selector: "[tetaLet]", inputs: { tetaLet: "tetaLet" }, ngImport: i0 });
|
|
5206
|
+
}
|
|
5207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LetDirective, decorators: [{
|
|
5208
|
+
type: Directive,
|
|
5209
|
+
args: [{
|
|
5210
|
+
selector: '[tetaLet]'
|
|
5211
|
+
}]
|
|
5212
|
+
}], ctorParameters: function () { return [{ type: i0.ViewContainerRef, decorators: [{
|
|
5213
|
+
type: Inject,
|
|
5214
|
+
args: [ViewContainerRef]
|
|
5215
|
+
}] }, { type: i0.TemplateRef, decorators: [{
|
|
5216
|
+
type: Inject,
|
|
5217
|
+
args: [TemplateRef]
|
|
5218
|
+
}] }]; }, propDecorators: { tetaLet: [{
|
|
5219
|
+
type: Input
|
|
5220
|
+
}] } });
|
|
5221
|
+
class LetContext {
|
|
5222
|
+
internalDirectiveInstance;
|
|
5223
|
+
constructor(internalDirectiveInstance) {
|
|
5224
|
+
this.internalDirectiveInstance = internalDirectiveInstance;
|
|
5225
|
+
}
|
|
5226
|
+
get $implicit() {
|
|
5227
|
+
return this.internalDirectiveInstance.tetaLet;
|
|
5228
|
+
}
|
|
5229
|
+
get tetaLet() {
|
|
5230
|
+
return this.internalDirectiveInstance.tetaLet;
|
|
5231
|
+
}
|
|
5232
|
+
}
|
|
5233
|
+
|
|
5283
5234
|
class SelectComponent {
|
|
5284
5235
|
_cdr;
|
|
5285
5236
|
_elementRef;
|
|
@@ -5381,9 +5332,11 @@ class SelectComponent {
|
|
|
5381
5332
|
}
|
|
5382
5333
|
itemSelected(option) {
|
|
5383
5334
|
if (this.multiple) {
|
|
5335
|
+
console.log(this.value?.indexOf(option) >= 0);
|
|
5384
5336
|
return this.value?.indexOf(option) >= 0;
|
|
5385
5337
|
}
|
|
5386
5338
|
else {
|
|
5339
|
+
console.log(this.value === option);
|
|
5387
5340
|
return this.value === option;
|
|
5388
5341
|
}
|
|
5389
5342
|
}
|
|
@@ -5472,7 +5425,7 @@ class SelectComponent {
|
|
|
5472
5425
|
useExisting: forwardRef(() => SelectComponent),
|
|
5473
5426
|
multi: true,
|
|
5474
5427
|
},
|
|
5475
|
-
], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-container *tetaLet='locale | async as loc'>\n <teta-dropdown [align]='align'\n [verticalAlign]='verticalAlign'\n [autoClose]='autoClose'\n [autoCloseIgnore]='autoCloseIgnore'\n [(open)]='open'\n [appendToBody]='appendToBody'\n [disabled]='disabled'\n [viewType]='viewType'\n class='row row_auto'>\n <div tetaDropdownHead\n [class]=\"'row row_auto select-head select_'+viewType\"\n [class.select-head_invalid]='invalid'>\n <div class='row_auto flex align-center'>\n <teta-icon *ngIf='icon' [name]='icon' [palette]=\"'text'\" class='margin-right-1'></teta-icon>\n <span class='placeholder' *ngIf='(value=== null ||value=== undefined || value?.length === 0)&&!multiple'>\n {{placeholder || loc.notSelected}}\n </span>\n <ng-container\n *ngTemplateOutlet='valueDirective ? valueDirective.template : valueDefault; context: {$implicit: value, value: value}'></ng-container>\n </div>\n <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n </div>\n <div *ngIf='options?.length'\n tetaDropdownContent\n class='select-body row_auto'\n (click)='$event.preventDefault()'>\n <ng-container *ngIf='searchRef'>\n <div class='select-search padding-h-2'>\n <teta-text-field [ngModel]='searchText'\n [class]=\"'select_'+viewType\"\n (ngModelChange)='search($event)'\n [placeholder]='loc.search'\n [leftIconName]=\"'search'\"></teta-text-field>\n </div>\n </ng-container>\n <ng-container *ngIf='visibleOptions?.length;else notFound '>\n <ng-container *ngIf='!multiple && allowNull'>\n <div [class]=\"'margin-h-2 list-item list-item_interactive select_'+viewType\"\n (click)='clear()'>\n {{loc.notSelected}}\n </div>\n <div class='list-divider margin-bottom-0'></div>\n </ng-container>\n <teta-scrollable *ngIf='virtual; else default' class='column column_auto padding-h-2'>\n <cdk-virtual-scroll-viewport tetaScrollable\n [itemSize]='40'\n minBufferPx='200'\n maxBufferPx='600'>\n <div [class]=\"'
|
|
5428
|
+
], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], ngImport: i0, template: "<ng-container *tetaLet='locale | async as loc'>\n <teta-dropdown [align]='align'\n [verticalAlign]='verticalAlign'\n [autoClose]='autoClose'\n [autoCloseIgnore]='autoCloseIgnore'\n [(open)]='open'\n [appendToBody]='appendToBody'\n [disabled]='disabled'\n [viewType]='viewType'\n class='row row_auto'>\n <div tetaDropdownHead\n [class]=\"'row row_auto select-head select_'+viewType\"\n [class.select-head_invalid]='invalid'>\n <div class='row_auto flex align-center'>\n <teta-icon *ngIf='icon' [name]='icon' [palette]=\"'text'\" class='margin-right-1'></teta-icon>\n <span class='placeholder' *ngIf='(value=== null ||value=== undefined || value?.length === 0)&&!multiple'>\n {{placeholder || loc.notSelected}}\n </span>\n <ng-container\n *ngTemplateOutlet='valueDirective ? valueDirective.template : valueDefault; context: {$implicit: value, value: value}'></ng-container>\n </div>\n <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n </div>\n <div *ngIf='options?.length'\n tetaDropdownContent\n class='select-body row_auto'\n (click)='$event.preventDefault()'>\n <ng-container *ngIf='searchRef'>\n <div class='select-search padding-h-2'>\n <teta-text-field [ngModel]='searchText'\n [class]=\"'select_'+viewType\"\n (ngModelChange)='search($event)'\n [placeholder]='loc.search'\n [leftIconName]=\"'search'\"></teta-text-field>\n </div>\n </ng-container>\n <ng-container *ngIf='visibleOptions?.length;else notFound '>\n <ng-container *ngIf='!multiple && allowNull'>\n <div [class]=\"'margin-h-2 list-item list-item_interactive select_'+viewType\"\n (click)='clear()'>\n {{loc.notSelected}}\n </div>\n <div class='list-divider margin-bottom-0'></div>\n </ng-container>\n <teta-scrollable *ngIf='virtual; else default' class='column column_auto padding-h-2'>\n <cdk-virtual-scroll-viewport tetaScrollable\n [itemSize]='40'\n minBufferPx='200'\n maxBufferPx='600'>\n <div [class]=\"'list-item list-item_interactive justify-content-between select_'+viewType\"\n *cdkVirtualFor='let option of visibleOptions; templateCacheSize: 0;'\n [class.list-item_active]='itemSelected(option)'\n [tetaHighlight]='searchText'\n (click)='clickOption(option, $event)'>\n <div [tetaHighlight]='searchText'>\n <ng-container\n *ngTemplateOutlet='optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}'>\n </ng-container>\n </div>\n <teta-icon *ngIf='itemSelected(option)' [name]=\"'tick'\" [palette]=\"'text'\"\n class='margin-left-2'></teta-icon>\n </div>\n </cdk-virtual-scroll-viewport>\n </teta-scrollable>\n <ng-template #default>\n <teta-scrollable class='column column_auto padding-h-2' [contentClass]=\"['column', 'column_auto']\">\n <div class='list'>\n <div [class]=\"'list-item list-item_interactive justify-content-between select_'+viewType\"\n *ngFor='let option of visibleOptions'\n [class.list-item_active]='itemSelected(option)'\n (click)='clickOption(option, $event)'>\n <span [tetaHighlight]='searchText'>\n <ng-container\n *ngTemplateOutlet='optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}'>\n </ng-container>\n </span>\n <teta-icon *ngIf='itemSelected(option) && multiple' [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </div>\n </teta-scrollable>\n </ng-template>\n </ng-container>\n <div class='row row_auto select-chip-field flex-wrap' *ngIf='multiple && value?.length'>\n <div *ngFor='let item of value' class='tag'>\n {{getText(item)}}\n <teta-icon class='cursor-pointer' [palette]=\"'text'\" [name]=\"'closeCircle'\"\n (click)='removeItemClick(item, $event)'></teta-icon>\n </div>\n </div>\n </div>\n </teta-dropdown>\n <ng-template #notFound>\n <p\n class='padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option'>{{notFoundText || loc.notFound}}</p>\n </ng-template>\n <ng-template #optionDefault let-option>\n {{getText(option)}}\n </ng-template>\n <ng-template #valueDefault let-value>\n <div class='row_auto overflow-hidden text-overflow-ellipsis' *ngIf='multiple'>\n {{loc.selected + ' ' + value?.length}}\n </div>\n <ng-container *ngIf='!multiple'>\n <span class='row row_auto overflow-hidden text-overflow-ellipsis'>{{getText(value)}}</span>\n </ng-container>\n </ng-template>\n</ng-container>\n\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "directive", type: LetDirective, selector: "[tetaLet]", inputs: ["tetaLet"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5476
5429
|
}
|
|
5477
5430
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SelectComponent, decorators: [{
|
|
5478
5431
|
type: Component,
|
|
@@ -5482,7 +5435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
|
|
|
5482
5435
|
useExisting: forwardRef(() => SelectComponent),
|
|
5483
5436
|
multi: true,
|
|
5484
5437
|
},
|
|
5485
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *tetaLet='locale | async as loc'>\n <teta-dropdown [align]='align'\n [verticalAlign]='verticalAlign'\n [autoClose]='autoClose'\n [autoCloseIgnore]='autoCloseIgnore'\n [(open)]='open'\n [appendToBody]='appendToBody'\n [disabled]='disabled'\n [viewType]='viewType'\n class='row row_auto'>\n <div tetaDropdownHead\n [class]=\"'row row_auto select-head select_'+viewType\"\n [class.select-head_invalid]='invalid'>\n <div class='row_auto flex align-center'>\n <teta-icon *ngIf='icon' [name]='icon' [palette]=\"'text'\" class='margin-right-1'></teta-icon>\n <span class='placeholder' *ngIf='(value=== null ||value=== undefined || value?.length === 0)&&!multiple'>\n {{placeholder || loc.notSelected}}\n </span>\n <ng-container\n *ngTemplateOutlet='valueDirective ? valueDirective.template : valueDefault; context: {$implicit: value, value: value}'></ng-container>\n </div>\n <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n </div>\n <div *ngIf='options?.length'\n tetaDropdownContent\n class='select-body row_auto'\n (click)='$event.preventDefault()'>\n <ng-container *ngIf='searchRef'>\n <div class='select-search padding-h-2'>\n <teta-text-field [ngModel]='searchText'\n [class]=\"'select_'+viewType\"\n (ngModelChange)='search($event)'\n [placeholder]='loc.search'\n [leftIconName]=\"'search'\"></teta-text-field>\n </div>\n </ng-container>\n <ng-container *ngIf='visibleOptions?.length;else notFound '>\n <ng-container *ngIf='!multiple && allowNull'>\n <div [class]=\"'margin-h-2 list-item list-item_interactive select_'+viewType\"\n (click)='clear()'>\n {{loc.notSelected}}\n </div>\n <div class='list-divider margin-bottom-0'></div>\n </ng-container>\n <teta-scrollable *ngIf='virtual; else default' class='column column_auto padding-h-2'>\n <cdk-virtual-scroll-viewport tetaScrollable\n [itemSize]='40'\n minBufferPx='200'\n maxBufferPx='600'>\n <div [class]=\"'
|
|
5438
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *tetaLet='locale | async as loc'>\n <teta-dropdown [align]='align'\n [verticalAlign]='verticalAlign'\n [autoClose]='autoClose'\n [autoCloseIgnore]='autoCloseIgnore'\n [(open)]='open'\n [appendToBody]='appendToBody'\n [disabled]='disabled'\n [viewType]='viewType'\n class='row row_auto'>\n <div tetaDropdownHead\n [class]=\"'row row_auto select-head select_'+viewType\"\n [class.select-head_invalid]='invalid'>\n <div class='row_auto flex align-center'>\n <teta-icon *ngIf='icon' [name]='icon' [palette]=\"'text'\" class='margin-right-1'></teta-icon>\n <span class='placeholder' *ngIf='(value=== null ||value=== undefined || value?.length === 0)&&!multiple'>\n {{placeholder || loc.notSelected}}\n </span>\n <ng-container\n *ngTemplateOutlet='valueDirective ? valueDirective.template : valueDefault; context: {$implicit: value, value: value}'></ng-container>\n </div>\n <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n </div>\n <div *ngIf='options?.length'\n tetaDropdownContent\n class='select-body row_auto'\n (click)='$event.preventDefault()'>\n <ng-container *ngIf='searchRef'>\n <div class='select-search padding-h-2'>\n <teta-text-field [ngModel]='searchText'\n [class]=\"'select_'+viewType\"\n (ngModelChange)='search($event)'\n [placeholder]='loc.search'\n [leftIconName]=\"'search'\"></teta-text-field>\n </div>\n </ng-container>\n <ng-container *ngIf='visibleOptions?.length;else notFound '>\n <ng-container *ngIf='!multiple && allowNull'>\n <div [class]=\"'margin-h-2 list-item list-item_interactive select_'+viewType\"\n (click)='clear()'>\n {{loc.notSelected}}\n </div>\n <div class='list-divider margin-bottom-0'></div>\n </ng-container>\n <teta-scrollable *ngIf='virtual; else default' class='column column_auto padding-h-2'>\n <cdk-virtual-scroll-viewport tetaScrollable\n [itemSize]='40'\n minBufferPx='200'\n maxBufferPx='600'>\n <div [class]=\"'list-item list-item_interactive justify-content-between select_'+viewType\"\n *cdkVirtualFor='let option of visibleOptions; templateCacheSize: 0;'\n [class.list-item_active]='itemSelected(option)'\n [tetaHighlight]='searchText'\n (click)='clickOption(option, $event)'>\n <div [tetaHighlight]='searchText'>\n <ng-container\n *ngTemplateOutlet='optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}'>\n </ng-container>\n </div>\n <teta-icon *ngIf='itemSelected(option)' [name]=\"'tick'\" [palette]=\"'text'\"\n class='margin-left-2'></teta-icon>\n </div>\n </cdk-virtual-scroll-viewport>\n </teta-scrollable>\n <ng-template #default>\n <teta-scrollable class='column column_auto padding-h-2' [contentClass]=\"['column', 'column_auto']\">\n <div class='list'>\n <div [class]=\"'list-item list-item_interactive justify-content-between select_'+viewType\"\n *ngFor='let option of visibleOptions'\n [class.list-item_active]='itemSelected(option)'\n (click)='clickOption(option, $event)'>\n <span [tetaHighlight]='searchText'>\n <ng-container\n *ngTemplateOutlet='optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}'>\n </ng-container>\n </span>\n <teta-icon *ngIf='itemSelected(option) && multiple' [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n </div>\n </div>\n </teta-scrollable>\n </ng-template>\n </ng-container>\n <div class='row row_auto select-chip-field flex-wrap' *ngIf='multiple && value?.length'>\n <div *ngFor='let item of value' class='tag'>\n {{getText(item)}}\n <teta-icon class='cursor-pointer' [palette]=\"'text'\" [name]=\"'closeCircle'\"\n (click)='removeItemClick(item, $event)'></teta-icon>\n </div>\n </div>\n </div>\n </teta-dropdown>\n <ng-template #notFound>\n <p\n class='padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option'>{{notFoundText || loc.notFound}}</p>\n </ng-template>\n <ng-template #optionDefault let-option>\n {{getText(option)}}\n </ng-template>\n <ng-template #valueDefault let-value>\n <div class='row_auto overflow-hidden text-overflow-ellipsis' *ngIf='multiple'>\n {{loc.selected + ' ' + value?.length}}\n </div>\n <ng-container *ngIf='!multiple'>\n <span class='row row_auto overflow-hidden text-overflow-ellipsis'>{{getText(value)}}</span>\n </ng-container>\n </ng-template>\n</ng-container>\n\n" }]
|
|
5486
5439
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: TetaConfigService }]; }, propDecorators: { multiple: [{
|
|
5487
5440
|
type: HostBinding,
|
|
5488
5441
|
args: ['class.select_multiple']
|
|
@@ -14282,6 +14235,47 @@ const ruLocale = {
|
|
|
14282
14235
|
]
|
|
14283
14236
|
};
|
|
14284
14237
|
|
|
14238
|
+
function tetaZoneFull(ngZone) {
|
|
14239
|
+
return source => new Observable(subscriber => source.subscribe({
|
|
14240
|
+
next: value => ngZone.run(() => subscriber.next(value)),
|
|
14241
|
+
error: (error) => ngZone.run(() => subscriber.error(error)),
|
|
14242
|
+
complete: () => ngZone.run(() => subscriber.complete()),
|
|
14243
|
+
}));
|
|
14244
|
+
}
|
|
14245
|
+
function tetaZoneFree(ngZone) {
|
|
14246
|
+
return source => new Observable(subscriber => ngZone.runOutsideAngular(() => source.subscribe(subscriber)));
|
|
14247
|
+
}
|
|
14248
|
+
function tetaZoneOptimized(ngZone) {
|
|
14249
|
+
return pipe(tetaZoneFree(ngZone), tetaZoneFull(ngZone));
|
|
14250
|
+
}
|
|
14251
|
+
|
|
14252
|
+
const ANIMATION_FRAME = new InjectionToken('Shared Observable based on `window.requestAnimationFrame`', {
|
|
14253
|
+
factory: () => {
|
|
14254
|
+
const { requestAnimationFrame, cancelAnimationFrame } = inject(WINDOW);
|
|
14255
|
+
const animationFrame$ = new Observable(subscriber => {
|
|
14256
|
+
let id = NaN;
|
|
14257
|
+
const callback = (timestamp) => {
|
|
14258
|
+
subscriber.next(timestamp);
|
|
14259
|
+
id = requestAnimationFrame(callback);
|
|
14260
|
+
};
|
|
14261
|
+
id = requestAnimationFrame(callback);
|
|
14262
|
+
return () => {
|
|
14263
|
+
cancelAnimationFrame(id);
|
|
14264
|
+
};
|
|
14265
|
+
});
|
|
14266
|
+
return animationFrame$.pipe(share());
|
|
14267
|
+
},
|
|
14268
|
+
});
|
|
14269
|
+
const WINDOW = new InjectionToken('An abstraction over global window object', {
|
|
14270
|
+
factory: () => {
|
|
14271
|
+
const { defaultView } = inject(DOCUMENT);
|
|
14272
|
+
if (!defaultView) {
|
|
14273
|
+
throw new Error('Window is not available');
|
|
14274
|
+
}
|
|
14275
|
+
return defaultView;
|
|
14276
|
+
},
|
|
14277
|
+
});
|
|
14278
|
+
|
|
14285
14279
|
/**
|
|
14286
14280
|
* Components
|
|
14287
14281
|
*/
|