@entake/particle 20.0.5 → 21.0.1
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/fesm2022/entake-particle.mjs +267 -443
- package/fesm2022/entake-particle.mjs.map +1 -1
- package/package.json +13 -14
- package/particle.css +1 -1
- package/{index.d.ts → types/entake-particle.d.ts} +12 -38
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { NgModule, inject, ElementRef, Renderer2, input, HostListener, Input, Directive, TemplateRef, ContentChild, Injectable, output,
|
|
2
|
+
import { NgModule, inject, ElementRef, Renderer2, input, HostListener, Input, Directive, TemplateRef, ContentChild, Injectable, output, Component, ChangeDetectorRef, forwardRef, ViewChild, signal, effect, ViewEncapsulation, Pipe, ViewChildren, model, EventEmitter, Output, ContentChildren, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import { BehaviorSubject, fromEvent, Subject, combineLatest, Subscription, tap as tap$1, map as map$1, withLatestFrom as withLatestFrom$1, of, shareReplay, catchError, throwError, mergeMap } from 'rxjs';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
6
6
|
import { startWith, map, withLatestFrom, tap } from 'rxjs/operators';
|
|
7
|
-
import { NgClass, NgStyle, AsyncPipe, NgTemplateOutlet, DatePipe
|
|
8
|
-
import { trigger, state, transition, style, animate, query, stagger, animateChild } from '@angular/animations';
|
|
7
|
+
import { NgClass, NgStyle, AsyncPipe, NgTemplateOutlet, DatePipe } from '@angular/common';
|
|
9
8
|
import { CdkTrapFocus } from '@angular/cdk/a11y';
|
|
10
9
|
import { Md5 } from 'md5-typescript';
|
|
11
10
|
import { Editor } from '@tiptap/core';
|
|
@@ -186,11 +185,11 @@ class ParticleIconsModule {
|
|
|
186
185
|
const FontAwesome = window.FontAwesome;
|
|
187
186
|
FontAwesome.library.add(...ParticleIconsBrand.icons, ...ParticleIconsRegular.icons, ...ParticleIconsSolid.icons);
|
|
188
187
|
}
|
|
189
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
190
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
191
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
188
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ParticleIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
189
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: ParticleIconsModule });
|
|
190
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ParticleIconsModule });
|
|
192
191
|
}
|
|
193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ParticleIconsModule, decorators: [{
|
|
194
193
|
type: NgModule
|
|
195
194
|
}], ctorParameters: () => [] });
|
|
196
195
|
|
|
@@ -539,10 +538,10 @@ class TooltipDirective {
|
|
|
539
538
|
? parents
|
|
540
539
|
: this.getParentElements(parentNode, parents.concat([parentNode]));
|
|
541
540
|
}
|
|
542
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
543
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
541
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
542
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: TooltipDirective, isStandalone: true, selector: "[particleTooltip]", inputs: { particleTooltip: { classPropertyName: "particleTooltip", publicName: "particleTooltip", isSignal: false, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, ngImport: i0 });
|
|
544
543
|
}
|
|
545
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
544
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
546
545
|
type: Directive,
|
|
547
546
|
args: [{
|
|
548
547
|
selector: '[particleTooltip]',
|
|
@@ -704,10 +703,10 @@ class KeyfilterDirective {
|
|
|
704
703
|
this.hostElement.nativeElement.value = '';
|
|
705
704
|
}
|
|
706
705
|
}
|
|
707
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
708
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
706
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: KeyfilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
707
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: KeyfilterDirective, isStandalone: true, selector: "[particleKeyfilter]", inputs: { filterType: ["particleKeyfilter", "filterType"], allowSpaces: "allowSpaces" }, host: { listeners: { "keydown": "onKeyDown($event)", "paste": "onPaste($event)", "blur": "onBlur()" } }, ngImport: i0 });
|
|
709
708
|
}
|
|
710
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
709
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: KeyfilterDirective, decorators: [{
|
|
711
710
|
type: Directive,
|
|
712
711
|
args: [{
|
|
713
712
|
selector: '[particleKeyfilter]',
|
|
@@ -731,10 +730,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
731
730
|
|
|
732
731
|
class AccordionContentDirective {
|
|
733
732
|
templateRef = inject(TemplateRef);
|
|
734
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
735
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
733
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
734
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: AccordionContentDirective, isStandalone: true, selector: "[particleAccordionContent]", ngImport: i0 });
|
|
736
735
|
}
|
|
737
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AccordionContentDirective, decorators: [{
|
|
738
737
|
type: Directive,
|
|
739
738
|
args: [{
|
|
740
739
|
selector: '[particleAccordionContent]',
|
|
@@ -744,10 +743,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
744
743
|
|
|
745
744
|
class AccordionHeaderDirective {
|
|
746
745
|
templateRef = inject(TemplateRef);
|
|
747
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
748
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
746
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
747
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: AccordionHeaderDirective, isStandalone: true, selector: "[particleAccordionHeader]", ngImport: i0 });
|
|
749
748
|
}
|
|
750
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AccordionHeaderDirective, decorators: [{
|
|
751
750
|
type: Directive,
|
|
752
751
|
args: [{
|
|
753
752
|
selector: '[particleAccordionHeader]',
|
|
@@ -762,10 +761,10 @@ class AccordionItemDirective {
|
|
|
762
761
|
headerClass = null;
|
|
763
762
|
headerTemplate = null;
|
|
764
763
|
content = null;
|
|
765
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
766
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
764
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
765
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: AccordionItemDirective, isStandalone: true, selector: "particle-accordion-item", inputs: { header: "header", disabled: "disabled", open: "open", headerClass: "headerClass" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: AccordionHeaderDirective, descendants: true }, { propertyName: "content", first: true, predicate: AccordionContentDirective, descendants: true }], ngImport: i0 });
|
|
767
766
|
}
|
|
768
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
767
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AccordionItemDirective, decorators: [{
|
|
769
768
|
type: Directive,
|
|
770
769
|
args: [{
|
|
771
770
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -868,10 +867,10 @@ class BackgroundCarouselDirective {
|
|
|
868
867
|
ngOnDestroy() {
|
|
869
868
|
clearInterval(this._interval);
|
|
870
869
|
}
|
|
871
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
872
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
870
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BackgroundCarouselDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
871
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: BackgroundCarouselDirective, isStandalone: true, selector: "[particleCarousel]", inputs: { options: ["particleCarouselOptions", "options"] }, ngImport: i0 });
|
|
873
872
|
}
|
|
874
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
873
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BackgroundCarouselDirective, decorators: [{
|
|
875
874
|
type: Directive,
|
|
876
875
|
args: [{
|
|
877
876
|
selector: '[particleCarousel]',
|
|
@@ -920,10 +919,10 @@ class DialogService {
|
|
|
920
919
|
document.body.classList.remove('scroll_none');
|
|
921
920
|
}
|
|
922
921
|
}
|
|
923
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
924
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
922
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
923
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DialogService, providedIn: 'root' });
|
|
925
924
|
}
|
|
926
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
925
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DialogService, decorators: [{
|
|
927
926
|
type: Injectable,
|
|
928
927
|
args: [{
|
|
929
928
|
providedIn: 'root'
|
|
@@ -935,10 +934,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
935
934
|
*/
|
|
936
935
|
class DialogComponent {
|
|
937
936
|
dialogService = inject(DialogService);
|
|
938
|
-
/**
|
|
939
|
-
* Element reference to the dialog close button
|
|
940
|
-
*/
|
|
941
|
-
closeButton = null;
|
|
942
937
|
isMaximized = false;
|
|
943
938
|
/**
|
|
944
939
|
* Observable to update the effective width of the dialog on screen resize
|
|
@@ -970,6 +965,7 @@ class DialogComponent {
|
|
|
970
965
|
this.dialogService.registerDialog(this);
|
|
971
966
|
}
|
|
972
967
|
this._object = value;
|
|
968
|
+
this.opened.emit();
|
|
973
969
|
}
|
|
974
970
|
get object() {
|
|
975
971
|
return this._object;
|
|
@@ -1029,51 +1025,27 @@ class DialogComponent {
|
|
|
1029
1025
|
this._object = null;
|
|
1030
1026
|
this.isMaximized = false;
|
|
1031
1027
|
this.dialogService.unregisterDialog(this);
|
|
1028
|
+
this.closed.emit();
|
|
1032
1029
|
}
|
|
1033
1030
|
/**
|
|
1034
1031
|
* Emit closed/opened events based on state when dialog animation ends
|
|
1035
1032
|
* @param event
|
|
1036
1033
|
*/
|
|
1037
1034
|
onAnimationDone(event) {
|
|
1035
|
+
/**
|
|
1038
1036
|
if (event.fromState === 'void') {
|
|
1039
|
-
|
|
1040
|
-
}
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
}
|
|
1045
|
-
static
|
|
1046
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DialogComponent, isStandalone: true, selector: "particle-dialog", inputs: { object: { classPropertyName: "object", publicName: "object", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, allowClose: { classPropertyName: "allowClose", publicName: "allowClose", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", opened: "opened" }, viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{'particle_dialog_overlay' : object}\">\r\n @if (object) {\r\n <div\r\n [@dialog] class=\"particle_dialog_container\"\r\n (@dialog.done)=\"onAnimationDone($event)\"\r\n [cdkTrapFocus]=\"true\"\r\n [cdkTrapFocusAutoCapture]=\"true\">\r\n @if (effectiveWidth$ | async; as effectiveWidth) {\r\n <div class=\"col shadow particle_dialog_box ptl_brdr_radius\"\r\n [ngStyle]=\"{'width': isMaximized ? '90vw' : effectiveWidth, 'height': isMaximized ? '90vh' : height()}\">\r\n <!-- dialog header -->\r\n @if (showTitle()) {\r\n <div class=\"col\" [ngClass]=\"titleClass()\">\r\n <div class=\"row v_center pad_5 space_between\">\r\n <div class=\"text lg bold paragraph\">\r\n {{title()}}\r\n </div>\r\n <div class=\"row col rc_gap\">\r\n @if (allowClose()) {\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"isMaximized ? text().minimize : text().maximize\"\r\n (click)=\"isMaximized = !isMaximized\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\"\r\n innerHTML=\"<i class='fas fa-expand {{isMaximized ? 'text xsm' : ''}}'></i>\"\r\n ></div>\r\n </button>\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().close\"\r\n (click)=\"close()\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n <i class=\"fas fa-times\"></i>\r\n </div>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n <!-- dialog container -->\r\n <div class=\"row scroll_yauto center_center\" [ngClass]=\"bodyClass()\">\r\n <div class=\"row_block width100 height100\">\r\n <!-- content -->\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n", styles: [".particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}.particle_dialog_container{position:fixed;width:100%;height:100%;inset:0;flex-direction:column;display:flex;align-items:center;justify-content:center;z-index:var(--z-notification)}.particle_dialog_box{box-sizing:border-box;width:100%;display:flex;flex-direction:column;overflow:hidden}@media screen and (max-width:768px){.particle_dialog_box{border-radius:0;width:100%!important;height:100%!important;max-height:unset!important;max-width:unset!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
|
|
1047
|
-
trigger('dialog', [
|
|
1048
|
-
state('void', style({ transform: 'scale(0.5)', opacity: '0' })),
|
|
1049
|
-
transition('void => *', [
|
|
1050
|
-
style({ height: '*', width: '*' }),
|
|
1051
|
-
animate('.15s 0ms ease-in-out', style({ transform: 'scale(1)', opacity: '1' }))
|
|
1052
|
-
]),
|
|
1053
|
-
transition(':leave', [
|
|
1054
|
-
animate('.15s 0ms ease-in-out', style({ transform: 'scale(0.5)', opacity: '0' }))
|
|
1055
|
-
]),
|
|
1056
|
-
])
|
|
1057
|
-
] });
|
|
1037
|
+
this.opened.emit();
|
|
1038
|
+
} else if (event.toState === 'void') {
|
|
1039
|
+
this.closed.emit();
|
|
1040
|
+
}*/
|
|
1041
|
+
}
|
|
1042
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1043
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DialogComponent, isStandalone: true, selector: "particle-dialog", inputs: { object: { classPropertyName: "object", publicName: "object", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, allowClose: { classPropertyName: "allowClose", publicName: "allowClose", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", opened: "opened" }, ngImport: i0, template: "<div [ngClass]=\"{'particle_dialog_overlay' : object}\">\r\n @if (object) {\r\n <div class=\"particle_dialog_container\"\r\n animate.enter=\"enter-animation\"\r\n animate.leave=\"leave-animation\"\r\n [cdkTrapFocus]=\"true\"\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n >\r\n @if (effectiveWidth$ | async; as effectiveWidth) {\r\n <div class=\"col shadow particle_dialog_box ptl_brdr_radius\"\r\n [ngStyle]=\"{'width': isMaximized ? '90vw' : effectiveWidth, 'height': isMaximized ? '90vh' : height()}\">\r\n <!-- dialog header -->\r\n @if (showTitle()) {\r\n <div class=\"col\" [ngClass]=\"titleClass()\">\r\n <div class=\"row v_center pad_5 space_between\">\r\n <div class=\"text lg bold paragraph\">\r\n {{title()}}\r\n </div>\r\n <div class=\"row col rc_gap\">\r\n @if (allowClose()) {\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"isMaximized ? text().minimize : text().maximize\"\r\n (click)=\"isMaximized = !isMaximized\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\"\r\n innerHTML=\"<i class='fas fa-expand {{isMaximized ? 'text xsm' : ''}}'></i>\"\r\n ></div>\r\n </button>\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().close\"\r\n (click)=\"close()\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n <i class=\"fas fa-times\"></i>\r\n </div>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n <!-- dialog container -->\r\n <div class=\"row scroll_yauto center_center\" [ngClass]=\"bodyClass()\">\r\n <div class=\"row_block width100 height100\">\r\n <!-- content -->\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n", styles: [".particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}.particle_dialog_container{position:fixed;width:100%;height:100%;inset:0;flex-direction:column;display:flex;align-items:center;justify-content:center;z-index:var(--z-notification)}.particle_dialog_box{box-sizing:border-box;width:100%;display:flex;flex-direction:column;overflow:hidden}@media screen and (max-width:768px){.particle_dialog_box{border-radius:0;width:100%!important;height:100%!important;max-height:unset!important;max-width:unset!important}}.enter-animation{animation:enter-frames .15s 0ms ease-in-out}@keyframes enter-frames{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.leave-animation{animation:leave-frames .15s 0ms ease-in-out}@keyframes leave-frames{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
|
|
1058
1044
|
}
|
|
1059
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1045
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DialogComponent, decorators: [{
|
|
1060
1046
|
type: Component,
|
|
1061
|
-
args: [{ selector: 'particle-dialog',
|
|
1062
|
-
|
|
1063
|
-
state('void', style({ transform: 'scale(0.5)', opacity: '0' })),
|
|
1064
|
-
transition('void => *', [
|
|
1065
|
-
style({ height: '*', width: '*' }),
|
|
1066
|
-
animate('.15s 0ms ease-in-out', style({ transform: 'scale(1)', opacity: '1' }))
|
|
1067
|
-
]),
|
|
1068
|
-
transition(':leave', [
|
|
1069
|
-
animate('.15s 0ms ease-in-out', style({ transform: 'scale(0.5)', opacity: '0' }))
|
|
1070
|
-
]),
|
|
1071
|
-
])
|
|
1072
|
-
], imports: [NgClass, CdkTrapFocus, NgStyle, AsyncPipe], template: "<div [ngClass]=\"{'particle_dialog_overlay' : object}\">\r\n @if (object) {\r\n <div\r\n [@dialog] class=\"particle_dialog_container\"\r\n (@dialog.done)=\"onAnimationDone($event)\"\r\n [cdkTrapFocus]=\"true\"\r\n [cdkTrapFocusAutoCapture]=\"true\">\r\n @if (effectiveWidth$ | async; as effectiveWidth) {\r\n <div class=\"col shadow particle_dialog_box ptl_brdr_radius\"\r\n [ngStyle]=\"{'width': isMaximized ? '90vw' : effectiveWidth, 'height': isMaximized ? '90vh' : height()}\">\r\n <!-- dialog header -->\r\n @if (showTitle()) {\r\n <div class=\"col\" [ngClass]=\"titleClass()\">\r\n <div class=\"row v_center pad_5 space_between\">\r\n <div class=\"text lg bold paragraph\">\r\n {{title()}}\r\n </div>\r\n <div class=\"row col rc_gap\">\r\n @if (allowClose()) {\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"isMaximized ? text().minimize : text().maximize\"\r\n (click)=\"isMaximized = !isMaximized\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\"\r\n innerHTML=\"<i class='fas fa-expand {{isMaximized ? 'text xsm' : ''}}'></i>\"\r\n ></div>\r\n </button>\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().close\"\r\n (click)=\"close()\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n <i class=\"fas fa-times\"></i>\r\n </div>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n <!-- dialog container -->\r\n <div class=\"row scroll_yauto center_center\" [ngClass]=\"bodyClass()\">\r\n <div class=\"row_block width100 height100\">\r\n <!-- content -->\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n", styles: [".particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}.particle_dialog_container{position:fixed;width:100%;height:100%;inset:0;flex-direction:column;display:flex;align-items:center;justify-content:center;z-index:var(--z-notification)}.particle_dialog_box{box-sizing:border-box;width:100%;display:flex;flex-direction:column;overflow:hidden}@media screen and (max-width:768px){.particle_dialog_box{border-radius:0;width:100%!important;height:100%!important;max-height:unset!important;max-width:unset!important}}\n"] }]
|
|
1073
|
-
}], propDecorators: { closeButton: [{
|
|
1074
|
-
type: ViewChild,
|
|
1075
|
-
args: ['closeButton']
|
|
1076
|
-
}], object: [{
|
|
1047
|
+
args: [{ selector: 'particle-dialog', imports: [NgClass, CdkTrapFocus, NgStyle, AsyncPipe], template: "<div [ngClass]=\"{'particle_dialog_overlay' : object}\">\r\n @if (object) {\r\n <div class=\"particle_dialog_container\"\r\n animate.enter=\"enter-animation\"\r\n animate.leave=\"leave-animation\"\r\n [cdkTrapFocus]=\"true\"\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n >\r\n @if (effectiveWidth$ | async; as effectiveWidth) {\r\n <div class=\"col shadow particle_dialog_box ptl_brdr_radius\"\r\n [ngStyle]=\"{'width': isMaximized ? '90vw' : effectiveWidth, 'height': isMaximized ? '90vh' : height()}\">\r\n <!-- dialog header -->\r\n @if (showTitle()) {\r\n <div class=\"col\" [ngClass]=\"titleClass()\">\r\n <div class=\"row v_center pad_5 space_between\">\r\n <div class=\"text lg bold paragraph\">\r\n {{title()}}\r\n </div>\r\n <div class=\"row col rc_gap\">\r\n @if (allowClose()) {\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"isMaximized ? text().minimize : text().maximize\"\r\n (click)=\"isMaximized = !isMaximized\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\"\r\n innerHTML=\"<i class='fas fa-expand {{isMaximized ? 'text xsm' : ''}}'></i>\"\r\n ></div>\r\n </button>\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().close\"\r\n (click)=\"close()\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n <i class=\"fas fa-times\"></i>\r\n </div>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n <!-- dialog container -->\r\n <div class=\"row scroll_yauto center_center\" [ngClass]=\"bodyClass()\">\r\n <div class=\"row_block width100 height100\">\r\n <!-- content -->\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n", styles: [".particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}.particle_dialog_container{position:fixed;width:100%;height:100%;inset:0;flex-direction:column;display:flex;align-items:center;justify-content:center;z-index:var(--z-notification)}.particle_dialog_box{box-sizing:border-box;width:100%;display:flex;flex-direction:column;overflow:hidden}@media screen and (max-width:768px){.particle_dialog_box{border-radius:0;width:100%!important;height:100%!important;max-height:unset!important;max-width:unset!important}}.enter-animation{animation:enter-frames .15s 0ms ease-in-out}@keyframes enter-frames{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.leave-animation{animation:leave-frames .15s 0ms ease-in-out}@keyframes leave-frames{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}\n"] }]
|
|
1048
|
+
}], propDecorators: { object: [{
|
|
1077
1049
|
type: Input
|
|
1078
1050
|
}], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], allowClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClose", required: false }] }], bodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyClass", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }] } });
|
|
1079
1051
|
|
|
@@ -2797,10 +2769,10 @@ class IconsService {
|
|
|
2797
2769
|
}
|
|
2798
2770
|
return icons;
|
|
2799
2771
|
}
|
|
2800
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2801
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2772
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IconsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2773
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IconsService, providedIn: 'root' });
|
|
2802
2774
|
}
|
|
2803
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2775
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IconsService, decorators: [{
|
|
2804
2776
|
type: Injectable,
|
|
2805
2777
|
args: [{
|
|
2806
2778
|
providedIn: 'root'
|
|
@@ -3135,16 +3107,16 @@ class IconSelectComponent {
|
|
|
3135
3107
|
this._searchClick.next('');
|
|
3136
3108
|
this._activePage.next(0);
|
|
3137
3109
|
}
|
|
3138
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3110
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3111
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: IconSelectComponent, isStandalone: true, selector: "particle-icon-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, buttonColorClass: { classPropertyName: "buttonColorClass", publicName: "buttonColorClass", isSignal: true, isRequired: false, transformFunction: null }, buttonSizing: { classPropertyName: "buttonSizing", publicName: "buttonSizing", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", selected: "selected", closed: "closed" }, providers: [
|
|
3140
3112
|
{
|
|
3141
3113
|
provide: NG_VALUE_ACCESSOR,
|
|
3142
3114
|
useExisting: forwardRef(() => IconSelectComponent),
|
|
3143
3115
|
multi: true
|
|
3144
3116
|
}
|
|
3145
|
-
], viewQueries: [{ propertyName: "iconScrollContainer", first: true, predicate: ["iconScrollContainer"], descendants: true }], ngImport: i0, template: "<!-- choose button -->\r\n<button [ngClass]=\"buttonColorClass() ? buttonColorClass() : 'content_color'\"\r\n [ngStyle]=\"{\r\n 'width': buttonSizing(),\r\n 'min-width': buttonSizing(),\r\n 'height': buttonSizing(),\r\n 'min-height': buttonSizing()\r\n }\"\r\n (click)=\"openDialog()\"\r\n [particleTooltip]=\"(_internalValue | async)?.prefix + ' ' + (_internalValue | async)?.name\"\r\n [tooltipDisabled]=\"(_internalValue | async) === null\"\r\n [disabled]=\"disabled\"\r\n class=\"btnset access wis_button bg_overlay brdr brad_3\"\r\n [attr.aria-label]=\"text().selectAnIcon\">\r\n @if (!showDialog) {\r\n @if (_internalValue | async; as selectedIcon) {\r\n <div>\r\n <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} wis_icon\"></i>\r\n </div>\r\n } @else {\r\n <div><i class=\"fas fa-icons opacity_20\"></i></div>\r\n }\r\n } @else {\r\n <div><i class=\"fas fa-spinner fa-spin\"></i></div>\r\n }\r\n</button>\r\n\r\n<!-- TODO: at some point, maybe implement infinite scroll to icons -->\r\n\r\n<!-- picker dialog -->\r\n<particle-dialog [title]=\"text().selectAnIcon\"\r\n [object]=\"showDialog\"\r\n [width]=\"'850px'\"\r\n [height]=\"'500px'\"\r\n (closed)=\"closeDialog()\">\r\n <div class=\"row height100\">\r\n\r\n <!-- FILTERS -->\r\n <div class=\"col min_w250 bg_overlay brdr border_right mobile_hide\">\r\n <div class=\"row_block width100\">\r\n @if (_filter | async; as filter) {\r\n <!-- all icons -->\r\n <div class=\"mar_5 pad_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'all', type: 'all' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'all' && filter.style === 'all' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().seeAllIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'all' && filter.style === 'all') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().seeAllIcons }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n <!-- fontawesome icons -->\r\n <div class=\"mar_5\">\r\n <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().fontAwesomeIcons }}</div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'all', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'all' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'all') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().all }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'solid', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'solid' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'solid') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().solid }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'regular', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'regular' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'regular') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().regular }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'brands', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'brands' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'brands') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().brands }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n <!-- custom icons -->\r\n <div class=\"mar_5\">\r\n <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().customIcons }}</div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'all', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'all' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'all') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">All</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'solid', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'solid' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'solid') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().solid }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'regular', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'regular' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'regular') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().regular }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'brands', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'brands' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'brands') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().brands }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- ICONS -->\r\n <div class=\"col size_2 column\">\r\n <div class=\"col content_color_dark_1 pad_x5\">\r\n <!-- paginator -->\r\n @if (totalPages$ | async; as totalPages) {\r\n <div\r\n class=\"col v_center mar_10\">\r\n @if (canPaginatePrevious$ | async) {\r\n <button\r\n (click)=\"paginatePrevious()\"\r\n class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().previousPage\">\r\n <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n </button>\r\n } @else {\r\n <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().previousPage\">\r\n <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n </button>\r\n }\r\n <div\r\n class=\"text sm bolder center\"\r\n style=\"min-width:65px;\">\r\n {{ (_activePage | async)! + 1 }} / {{ totalPages }}\r\n </div>\r\n @if (canPaginateNext$ | async) {\r\n <button\r\n (click)=\"paginateNext()\"\r\n class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().nextPage\">\r\n <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n </button>\r\n } @else {\r\n <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().nextPage\">\r\n <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- search -->\r\n <div class=\"col size_1 wis_search mar_10\">\r\n <input #iconSearchInput\r\n [ngModel]=\"_searchText | async\"\r\n (input)=\"_searchText.next(iconSearchInput.value)\"\r\n (keyup.enter)=\"_searchInputEnterKeyup.next($any(null))\"\r\n class=\"access input md bg_overlay brdr content_color\"\r\n [attr.aria-label]=\"text().searchIcons\" [placeholder]=\"text().searchIcons + '...'\"\r\n />\r\n @if ((canSearch$ | async) && (_searchClick | async)) {\r\n <button\r\n (click)=\"clearSearch()\" aria-label=\"Clear search\"\r\n class=\"access btn circle_18px overlay wis_clear_btn\">\r\n <span class=\"icon grow\"><i class=\"fas fa-times fa-sm\"></i></span>\r\n </button>\r\n }\r\n @if (canSearch$ | async) {\r\n <button\r\n (click)=\"_searchClick.next(iconSearchInput.value); _activePage.next(0)\"\r\n class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n </button>\r\n } @else {\r\n <button disabled\r\n class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n <!-- icons -->\r\n <div #iconScrollContainer class=\"col size_1 top_left scroll_y pad_5\" style=\"scroll-behavior: smooth\">\r\n @if (paginatedIcons$ | async; as icons) {\r\n <div class=\"row wrap top_left\" style=\"align-items:stretch;\">\r\n @for (icon of paginatedIcons$ | async; track icon) {\r\n <div class=\"col size_1 min_w75 mar_5\">\r\n <button class=\"access wis_icon_btn\" (click)=\"handleIconSelect(icon)\"\r\n [attr.aria-label]=\"text().select + ' ' + icon.name\">\r\n <div\r\n [ngClass]=\"((_internalValue | async)?.prefix === icon.prefix) && ((_internalValue | async)?.name === icon.name) ? 'ok_button_color' : 'content_color'\"\r\n class=\"wis_icon_btn_preview square_50px brad_3 bg_overlay brdr mar_bot5\">\r\n <i class=\"{{icon.prefix}} {{icon.name}}\"></i>\r\n </div>\r\n <div class=\"text sm center faded\">{{ icon.name }}</div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"row column min_h300 center_center\">\r\n <div class=\"text md\">{{ text().couldntFindAnything }}</div>\r\n <div class=\"text sm\">{{ text().modifySearchCriteria }}</div>\r\n <button class=\"access btnset clear mar_10\"\r\n [attr.aria-label]=\"text().close\"\r\n (click)=\"clearSearch()\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n <i class=\"fas fa-times\"></i>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n @if (_internalValue | async; as selectedIcon) {\r\n <div\r\n class=\"col space_between bg_overlay brdr border_top pad_x5 wis_selection_bar\">\r\n <div class=\"col v_center mar_10\">\r\n <div class=\"text md faded mar_right10 mobile_hide\">{{ text().selection }}:</div>\r\n @if (showIconSelectionPreview) {\r\n <div class=\"v_center\">\r\n <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} fa-fw mar_right5\" style=\"font-size:16px;\"></i>\r\n <div class=\"text md bold\">{{ selectedIcon.prefix }} {{ selectedIcon.name }}</div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col v_center mar_10\">\r\n <button\r\n type=\"button\"\r\n class=\"access btnset spaced md hov_glow save_button_color ptl_brdr_radius\"\r\n [attr.aria-label]=\"text().confirm\"\r\n (click)=\"handleIconSelectConfirm()\"\r\n >\r\n <div>{{ text().confirm }}</div>\r\n <div class=\"brdr border_left mar_left10 pad_left10\"><i class=\"fas fa-check\"></i></div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</particle-dialog>\r\n", styles: [".wis_button{width:40px;min-width:40px;height:40px;min-height:40px;cursor:pointer;transition:all .1s ease}.wis_button:disabled{cursor:default;opacity:1!important}.wis_button:hover:not(:disabled){filter:brightness(1.05)}.wis_button svg{transition:transform .1s ease}.wis_button:hover:not(:disabled) .wis_icon{transform:scale(1.15)}@supports not (-ms-high-contrast:none){.wis_button svg{width:75%;height:75%}}.wis_search{position:relative}.wis_search input{padding-right:40px!important}.wis_search .wis_search_btn{position:absolute;right:0;top:0;z-index:var(--z-frame);border-top-left-radius:0;border-bottom-left-radius:0;height:100%;width:32px}.wis_search .wis_clear_btn{position:absolute;right:40px;top:7px;z-index:var(--z-frame)}.wis_filter_btn{width:100%;padding:5px 10px;border-radius:3px}.wis_filter_btn:not(:hover):not(.selected){background-color:inherit;color:inherit}.wis_icon_btn{cursor:pointer;transition:all .1s ease;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;border:none;border-radius:3px;padding:5px 2px;background-color:inherit;color:inherit}.wis_icon_btn:hover{background-color:#7878781a}.wis_icon_btn_preview{transition:all .1s ease}.wis_selection_bar{z-index:var(--z-frame);box-shadow:0 -6px 10px -8px #00000040;animation-name:slideUpSelectionBar;animation-duration:.2s;transform-origin:bottom center}@keyframes slideUpSelectionBar{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
|
|
3117
|
+
], viewQueries: [{ propertyName: "iconScrollContainer", first: true, predicate: ["iconScrollContainer"], descendants: true }], ngImport: i0, template: "<!-- choose button -->\r\n<button [ngClass]=\"buttonColorClass() ? buttonColorClass() : 'content_color'\"\r\n [ngStyle]=\"{\r\n 'width': buttonSizing(),\r\n 'min-width': buttonSizing(),\r\n 'height': buttonSizing(),\r\n 'min-height': buttonSizing()\r\n }\"\r\n (click)=\"openDialog()\"\r\n [particleTooltip]=\"(_internalValue | async)?.prefix + ' ' + (_internalValue | async)?.name\"\r\n [tooltipDisabled]=\"(_internalValue | async) === null\"\r\n [disabled]=\"disabled\"\r\n class=\"btnset access wis_button bg_overlay brdr brad_3\"\r\n [attr.aria-label]=\"text().selectAnIcon\">\r\n @if (!showDialog) {\r\n @if (_internalValue | async; as selectedIcon) {\r\n <div>\r\n <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} wis_icon\"></i>\r\n </div>\r\n } @else {\r\n <div><i class=\"fas fa-icons opacity_20\"></i></div>\r\n }\r\n } @else {\r\n <div><i class=\"fas fa-spinner fa-spin\"></i></div>\r\n }\r\n</button>\r\n\r\n<!-- TODO: at some point, maybe implement infinite scroll to icons -->\r\n\r\n<!-- picker dialog -->\r\n<particle-dialog [title]=\"text().selectAnIcon\"\r\n [object]=\"showDialog\"\r\n [width]=\"'850px'\"\r\n [height]=\"'500px'\"\r\n (closed)=\"closeDialog()\">\r\n <div class=\"row height100\">\r\n\r\n <!-- FILTERS -->\r\n <div class=\"col min_w250 bg_overlay brdr border_right mobile_hide\">\r\n <div class=\"row_block width100\">\r\n @if (_filter | async; as filter) {\r\n <!-- all icons -->\r\n <div class=\"mar_5 pad_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'all', type: 'all' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'all' && filter.style === 'all' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().seeAllIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'all' && filter.style === 'all') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().seeAllIcons }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n <!-- fontawesome icons -->\r\n <div class=\"mar_5\">\r\n <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().fontAwesomeIcons }}</div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'all', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'all' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'all') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().all }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'solid', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'solid' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'solid') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().solid }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'regular', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'regular' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'regular') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().regular }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'brands', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'brands' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'brands') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().brands }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n <!-- custom icons -->\r\n <div class=\"mar_5\">\r\n <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().customIcons }}</div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'all', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'all' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'all') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">All</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'solid', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'solid' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'solid') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().solid }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'regular', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'regular' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'regular') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().regular }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'brands', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'brands' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'brands') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().brands }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- ICONS -->\r\n <div class=\"col size_2 column\">\r\n <div class=\"col content_color_dark_1 pad_x5\">\r\n <!-- paginator -->\r\n @if (totalPages$ | async; as totalPages) {\r\n <div\r\n class=\"col v_center mar_10\">\r\n @if (canPaginatePrevious$ | async) {\r\n <button\r\n (click)=\"paginatePrevious()\"\r\n class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().previousPage\">\r\n <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n </button>\r\n } @else {\r\n <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().previousPage\">\r\n <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n </button>\r\n }\r\n <div\r\n class=\"text sm bolder center\"\r\n style=\"min-width:65px;\">\r\n {{ (_activePage | async)! + 1 }} / {{ totalPages }}\r\n </div>\r\n @if (canPaginateNext$ | async) {\r\n <button\r\n (click)=\"paginateNext()\"\r\n class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().nextPage\">\r\n <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n </button>\r\n } @else {\r\n <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().nextPage\">\r\n <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- search -->\r\n <div class=\"col size_1 wis_search mar_10\">\r\n <input #iconSearchInput\r\n [ngModel]=\"_searchText | async\"\r\n (input)=\"_searchText.next(iconSearchInput.value)\"\r\n (keyup.enter)=\"_searchInputEnterKeyup.next($any(null))\"\r\n class=\"access input md bg_overlay brdr content_color\"\r\n [attr.aria-label]=\"text().searchIcons\" [placeholder]=\"text().searchIcons + '...'\"\r\n />\r\n @if ((canSearch$ | async) && (_searchClick | async)) {\r\n <button\r\n (click)=\"clearSearch()\" aria-label=\"Clear search\"\r\n class=\"access btn circle_18px overlay wis_clear_btn\">\r\n <span class=\"icon grow\"><i class=\"fas fa-times fa-sm\"></i></span>\r\n </button>\r\n }\r\n @if (canSearch$ | async) {\r\n <button\r\n (click)=\"_searchClick.next(iconSearchInput.value); _activePage.next(0)\"\r\n class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n </button>\r\n } @else {\r\n <button disabled\r\n class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n <!-- icons -->\r\n <div #iconScrollContainer class=\"col size_1 top_left scroll_y pad_5\" style=\"scroll-behavior: smooth\">\r\n @if (paginatedIcons$ | async; as icons) {\r\n <div class=\"row wrap top_left\" style=\"align-items:stretch;\">\r\n @for (icon of paginatedIcons$ | async; track $index) {\r\n <div class=\"col size_1 min_w75 mar_5\">\r\n <button class=\"access wis_icon_btn\" (click)=\"handleIconSelect(icon)\"\r\n [attr.aria-label]=\"text().select + ' ' + icon.name\">\r\n <div\r\n [ngClass]=\"((_internalValue | async)?.prefix === icon.prefix) && ((_internalValue | async)?.name === icon.name) ? 'ok_button_color' : 'content_color'\"\r\n class=\"wis_icon_btn_preview square_50px brad_3 bg_overlay brdr mar_bot5\">\r\n <i class=\"{{icon.prefix}} {{icon.name}}\"></i>\r\n </div>\r\n <div class=\"text sm center faded\">{{ icon.name }}</div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"row column min_h300 center_center\">\r\n <div class=\"text md\">{{ text().couldntFindAnything }}</div>\r\n <div class=\"text sm\">{{ text().modifySearchCriteria }}</div>\r\n <button class=\"access btnset clear mar_10\"\r\n [attr.aria-label]=\"text().close\"\r\n (click)=\"clearSearch()\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n <i class=\"fas fa-times\"></i>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n @if (_internalValue | async; as selectedIcon) {\r\n <div\r\n class=\"col space_between bg_overlay brdr border_top pad_x5 wis_selection_bar\">\r\n <div class=\"col v_center mar_10\">\r\n <div class=\"text md faded mar_right10 mobile_hide\">{{ text().selection }}:</div>\r\n @if (showIconSelectionPreview) {\r\n <div class=\"v_center\">\r\n <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} fa-fw mar_right5\" style=\"font-size:16px;\"></i>\r\n <div class=\"text md bold\">{{ selectedIcon.prefix }} {{ selectedIcon.name }}</div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col v_center mar_10\">\r\n <button\r\n type=\"button\"\r\n class=\"access btnset spaced md hov_glow save_button_color ptl_brdr_radius\"\r\n [attr.aria-label]=\"text().confirm\"\r\n (click)=\"handleIconSelectConfirm()\"\r\n >\r\n <div>{{ text().confirm }}</div>\r\n <div class=\"brdr border_left mar_left10 pad_left10\"><i class=\"fas fa-check\"></i></div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</particle-dialog>\r\n", styles: [".wis_button{width:40px;min-width:40px;height:40px;min-height:40px;cursor:pointer;transition:all .1s ease}.wis_button:disabled{cursor:default;opacity:1!important}.wis_button:hover:not(:disabled){filter:brightness(1.05)}.wis_button svg{transition:transform .1s ease}.wis_button:hover:not(:disabled) .wis_icon{transform:scale(1.15)}@supports not (-ms-high-contrast:none){.wis_button svg{width:75%;height:75%}}.wis_search{position:relative}.wis_search input{padding-right:40px!important}.wis_search .wis_search_btn{position:absolute;right:0;top:0;z-index:var(--z-frame);border-top-left-radius:0;border-bottom-left-radius:0;height:100%;width:32px}.wis_search .wis_clear_btn{position:absolute;right:40px;top:7px;z-index:var(--z-frame)}.wis_filter_btn{width:100%;padding:5px 10px;border-radius:3px}.wis_filter_btn:not(:hover):not(.selected){background-color:inherit;color:inherit}.wis_icon_btn{cursor:pointer;transition:all .1s ease;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;border:none;border-radius:3px;padding:5px 2px;background-color:inherit;color:inherit}.wis_icon_btn:hover{background-color:#7878781a}.wis_icon_btn_preview{transition:all .1s ease}.wis_selection_bar{z-index:var(--z-frame);box-shadow:0 -6px 10px -8px #00000040;animation-name:slideUpSelectionBar;animation-duration:.2s;transform-origin:bottom center}@keyframes slideUpSelectionBar{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
|
|
3146
3118
|
}
|
|
3147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IconSelectComponent, decorators: [{
|
|
3148
3120
|
type: Component,
|
|
3149
3121
|
args: [{ selector: 'particle-icon-select', providers: [
|
|
3150
3122
|
{
|
|
@@ -3152,7 +3124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3152
3124
|
useExisting: forwardRef(() => IconSelectComponent),
|
|
3153
3125
|
multi: true
|
|
3154
3126
|
}
|
|
3155
|
-
], imports: [NgClass, NgStyle, TooltipDirective, DialogComponent, FormsModule, AsyncPipe], template: "<!-- choose button -->\r\n<button [ngClass]=\"buttonColorClass() ? buttonColorClass() : 'content_color'\"\r\n [ngStyle]=\"{\r\n 'width': buttonSizing(),\r\n 'min-width': buttonSizing(),\r\n 'height': buttonSizing(),\r\n 'min-height': buttonSizing()\r\n }\"\r\n (click)=\"openDialog()\"\r\n [particleTooltip]=\"(_internalValue | async)?.prefix + ' ' + (_internalValue | async)?.name\"\r\n [tooltipDisabled]=\"(_internalValue | async) === null\"\r\n [disabled]=\"disabled\"\r\n class=\"btnset access wis_button bg_overlay brdr brad_3\"\r\n [attr.aria-label]=\"text().selectAnIcon\">\r\n @if (!showDialog) {\r\n @if (_internalValue | async; as selectedIcon) {\r\n <div>\r\n <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} wis_icon\"></i>\r\n </div>\r\n } @else {\r\n <div><i class=\"fas fa-icons opacity_20\"></i></div>\r\n }\r\n } @else {\r\n <div><i class=\"fas fa-spinner fa-spin\"></i></div>\r\n }\r\n</button>\r\n\r\n<!-- TODO: at some point, maybe implement infinite scroll to icons -->\r\n\r\n<!-- picker dialog -->\r\n<particle-dialog [title]=\"text().selectAnIcon\"\r\n [object]=\"showDialog\"\r\n [width]=\"'850px'\"\r\n [height]=\"'500px'\"\r\n (closed)=\"closeDialog()\">\r\n <div class=\"row height100\">\r\n\r\n <!-- FILTERS -->\r\n <div class=\"col min_w250 bg_overlay brdr border_right mobile_hide\">\r\n <div class=\"row_block width100\">\r\n @if (_filter | async; as filter) {\r\n <!-- all icons -->\r\n <div class=\"mar_5 pad_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'all', type: 'all' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'all' && filter.style === 'all' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().seeAllIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'all' && filter.style === 'all') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().seeAllIcons }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n <!-- fontawesome icons -->\r\n <div class=\"mar_5\">\r\n <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().fontAwesomeIcons }}</div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'all', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'all' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'all') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().all }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'solid', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'solid' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'solid') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().solid }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'regular', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'regular' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'regular') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().regular }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'brands', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'brands' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'brands') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().brands }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n <!-- custom icons -->\r\n <div class=\"mar_5\">\r\n <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().customIcons }}</div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'all', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'all' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'all') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">All</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'solid', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'solid' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'solid') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().solid }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'regular', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'regular' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'regular') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().regular }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'brands', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'brands' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'brands') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().brands }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- ICONS -->\r\n <div class=\"col size_2 column\">\r\n <div class=\"col content_color_dark_1 pad_x5\">\r\n <!-- paginator -->\r\n @if (totalPages$ | async; as totalPages) {\r\n <div\r\n class=\"col v_center mar_10\">\r\n @if (canPaginatePrevious$ | async) {\r\n <button\r\n (click)=\"paginatePrevious()\"\r\n class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().previousPage\">\r\n <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n </button>\r\n } @else {\r\n <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().previousPage\">\r\n <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n </button>\r\n }\r\n <div\r\n class=\"text sm bolder center\"\r\n style=\"min-width:65px;\">\r\n {{ (_activePage | async)! + 1 }} / {{ totalPages }}\r\n </div>\r\n @if (canPaginateNext$ | async) {\r\n <button\r\n (click)=\"paginateNext()\"\r\n class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().nextPage\">\r\n <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n </button>\r\n } @else {\r\n <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().nextPage\">\r\n <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- search -->\r\n <div class=\"col size_1 wis_search mar_10\">\r\n <input #iconSearchInput\r\n [ngModel]=\"_searchText | async\"\r\n (input)=\"_searchText.next(iconSearchInput.value)\"\r\n (keyup.enter)=\"_searchInputEnterKeyup.next($any(null))\"\r\n class=\"access input md bg_overlay brdr content_color\"\r\n [attr.aria-label]=\"text().searchIcons\" [placeholder]=\"text().searchIcons + '...'\"\r\n />\r\n @if ((canSearch$ | async) && (_searchClick | async)) {\r\n <button\r\n (click)=\"clearSearch()\" aria-label=\"Clear search\"\r\n class=\"access btn circle_18px overlay wis_clear_btn\">\r\n <span class=\"icon grow\"><i class=\"fas fa-times fa-sm\"></i></span>\r\n </button>\r\n }\r\n @if (canSearch$ | async) {\r\n <button\r\n (click)=\"_searchClick.next(iconSearchInput.value); _activePage.next(0)\"\r\n class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n </button>\r\n } @else {\r\n <button disabled\r\n class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n <!-- icons -->\r\n <div #iconScrollContainer class=\"col size_1 top_left scroll_y pad_5\" style=\"scroll-behavior: smooth\">\r\n @if (paginatedIcons$ | async; as icons) {\r\n <div class=\"row wrap top_left\" style=\"align-items:stretch;\">\r\n @for (icon of paginatedIcons$ | async; track icon) {\r\n <div class=\"col size_1 min_w75 mar_5\">\r\n <button class=\"access wis_icon_btn\" (click)=\"handleIconSelect(icon)\"\r\n [attr.aria-label]=\"text().select + ' ' + icon.name\">\r\n <div\r\n [ngClass]=\"((_internalValue | async)?.prefix === icon.prefix) && ((_internalValue | async)?.name === icon.name) ? 'ok_button_color' : 'content_color'\"\r\n class=\"wis_icon_btn_preview square_50px brad_3 bg_overlay brdr mar_bot5\">\r\n <i class=\"{{icon.prefix}} {{icon.name}}\"></i>\r\n </div>\r\n <div class=\"text sm center faded\">{{ icon.name }}</div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"row column min_h300 center_center\">\r\n <div class=\"text md\">{{ text().couldntFindAnything }}</div>\r\n <div class=\"text sm\">{{ text().modifySearchCriteria }}</div>\r\n <button class=\"access btnset clear mar_10\"\r\n [attr.aria-label]=\"text().close\"\r\n (click)=\"clearSearch()\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n <i class=\"fas fa-times\"></i>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n @if (_internalValue | async; as selectedIcon) {\r\n <div\r\n class=\"col space_between bg_overlay brdr border_top pad_x5 wis_selection_bar\">\r\n <div class=\"col v_center mar_10\">\r\n <div class=\"text md faded mar_right10 mobile_hide\">{{ text().selection }}:</div>\r\n @if (showIconSelectionPreview) {\r\n <div class=\"v_center\">\r\n <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} fa-fw mar_right5\" style=\"font-size:16px;\"></i>\r\n <div class=\"text md bold\">{{ selectedIcon.prefix }} {{ selectedIcon.name }}</div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col v_center mar_10\">\r\n <button\r\n type=\"button\"\r\n class=\"access btnset spaced md hov_glow save_button_color ptl_brdr_radius\"\r\n [attr.aria-label]=\"text().confirm\"\r\n (click)=\"handleIconSelectConfirm()\"\r\n >\r\n <div>{{ text().confirm }}</div>\r\n <div class=\"brdr border_left mar_left10 pad_left10\"><i class=\"fas fa-check\"></i></div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</particle-dialog>\r\n", styles: [".wis_button{width:40px;min-width:40px;height:40px;min-height:40px;cursor:pointer;transition:all .1s ease}.wis_button:disabled{cursor:default;opacity:1!important}.wis_button:hover:not(:disabled){filter:brightness(1.05)}.wis_button svg{transition:transform .1s ease}.wis_button:hover:not(:disabled) .wis_icon{transform:scale(1.15)}@supports not (-ms-high-contrast:none){.wis_button svg{width:75%;height:75%}}.wis_search{position:relative}.wis_search input{padding-right:40px!important}.wis_search .wis_search_btn{position:absolute;right:0;top:0;z-index:var(--z-frame);border-top-left-radius:0;border-bottom-left-radius:0;height:100%;width:32px}.wis_search .wis_clear_btn{position:absolute;right:40px;top:7px;z-index:var(--z-frame)}.wis_filter_btn{width:100%;padding:5px 10px;border-radius:3px}.wis_filter_btn:not(:hover):not(.selected){background-color:inherit;color:inherit}.wis_icon_btn{cursor:pointer;transition:all .1s ease;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;border:none;border-radius:3px;padding:5px 2px;background-color:inherit;color:inherit}.wis_icon_btn:hover{background-color:#7878781a}.wis_icon_btn_preview{transition:all .1s ease}.wis_selection_bar{z-index:var(--z-frame);box-shadow:0 -6px 10px -8px #00000040;animation-name:slideUpSelectionBar;animation-duration:.2s;transform-origin:bottom center}@keyframes slideUpSelectionBar{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}\n"] }]
|
|
3127
|
+
], imports: [NgClass, NgStyle, TooltipDirective, DialogComponent, FormsModule, AsyncPipe], template: "<!-- choose button -->\r\n<button [ngClass]=\"buttonColorClass() ? buttonColorClass() : 'content_color'\"\r\n [ngStyle]=\"{\r\n 'width': buttonSizing(),\r\n 'min-width': buttonSizing(),\r\n 'height': buttonSizing(),\r\n 'min-height': buttonSizing()\r\n }\"\r\n (click)=\"openDialog()\"\r\n [particleTooltip]=\"(_internalValue | async)?.prefix + ' ' + (_internalValue | async)?.name\"\r\n [tooltipDisabled]=\"(_internalValue | async) === null\"\r\n [disabled]=\"disabled\"\r\n class=\"btnset access wis_button bg_overlay brdr brad_3\"\r\n [attr.aria-label]=\"text().selectAnIcon\">\r\n @if (!showDialog) {\r\n @if (_internalValue | async; as selectedIcon) {\r\n <div>\r\n <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} wis_icon\"></i>\r\n </div>\r\n } @else {\r\n <div><i class=\"fas fa-icons opacity_20\"></i></div>\r\n }\r\n } @else {\r\n <div><i class=\"fas fa-spinner fa-spin\"></i></div>\r\n }\r\n</button>\r\n\r\n<!-- TODO: at some point, maybe implement infinite scroll to icons -->\r\n\r\n<!-- picker dialog -->\r\n<particle-dialog [title]=\"text().selectAnIcon\"\r\n [object]=\"showDialog\"\r\n [width]=\"'850px'\"\r\n [height]=\"'500px'\"\r\n (closed)=\"closeDialog()\">\r\n <div class=\"row height100\">\r\n\r\n <!-- FILTERS -->\r\n <div class=\"col min_w250 bg_overlay brdr border_right mobile_hide\">\r\n <div class=\"row_block width100\">\r\n @if (_filter | async; as filter) {\r\n <!-- all icons -->\r\n <div class=\"mar_5 pad_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'all', type: 'all' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'all' && filter.style === 'all' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().seeAllIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'all' && filter.style === 'all') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().seeAllIcons }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n <!-- fontawesome icons -->\r\n <div class=\"mar_5\">\r\n <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().fontAwesomeIcons }}</div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'all', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'all' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'all') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().all }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'solid', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'solid' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'solid') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().solid }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'regular', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'regular' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'regular') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().regular }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'brands', type: 'fontawesome' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'brands' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().fontAwesomeIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'fontawesome' && filter.style === 'brands') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().brands }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n <!-- custom icons -->\r\n <div class=\"mar_5\">\r\n <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().customIcons }}</div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'all', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'all' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'all') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">All</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'solid', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'solid' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'solid') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().solid }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'regular', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'regular' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'regular') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().regular }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n <div class=\"mar_5\">\r\n <button (click)=\"handleFilterSelect({ style: 'brands', type: 'particle' })\"\r\n [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'brands' }\"\r\n class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().customIcons\">\r\n <div class=\"v_center\">\r\n <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n @if (filter.type === 'particle' && filter.style === 'brands') {\r\n <div class=\"circle_8px ok_button_color\"></div>\r\n }\r\n </div>\r\n <div class=\"text md\">{{ text().brands }}</div>\r\n </div>\r\n <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- ICONS -->\r\n <div class=\"col size_2 column\">\r\n <div class=\"col content_color_dark_1 pad_x5\">\r\n <!-- paginator -->\r\n @if (totalPages$ | async; as totalPages) {\r\n <div\r\n class=\"col v_center mar_10\">\r\n @if (canPaginatePrevious$ | async) {\r\n <button\r\n (click)=\"paginatePrevious()\"\r\n class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().previousPage\">\r\n <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n </button>\r\n } @else {\r\n <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().previousPage\">\r\n <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n </button>\r\n }\r\n <div\r\n class=\"text sm bolder center\"\r\n style=\"min-width:65px;\">\r\n {{ (_activePage | async)! + 1 }} / {{ totalPages }}\r\n </div>\r\n @if (canPaginateNext$ | async) {\r\n <button\r\n (click)=\"paginateNext()\"\r\n class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().nextPage\">\r\n <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n </button>\r\n } @else {\r\n <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n [attr.aria-label]=\"text().nextPage\">\r\n <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n </button>\r\n }\r\n </div>\r\n }\r\n <!-- search -->\r\n <div class=\"col size_1 wis_search mar_10\">\r\n <input #iconSearchInput\r\n [ngModel]=\"_searchText | async\"\r\n (input)=\"_searchText.next(iconSearchInput.value)\"\r\n (keyup.enter)=\"_searchInputEnterKeyup.next($any(null))\"\r\n class=\"access input md bg_overlay brdr content_color\"\r\n [attr.aria-label]=\"text().searchIcons\" [placeholder]=\"text().searchIcons + '...'\"\r\n />\r\n @if ((canSearch$ | async) && (_searchClick | async)) {\r\n <button\r\n (click)=\"clearSearch()\" aria-label=\"Clear search\"\r\n class=\"access btn circle_18px overlay wis_clear_btn\">\r\n <span class=\"icon grow\"><i class=\"fas fa-times fa-sm\"></i></span>\r\n </button>\r\n }\r\n @if (canSearch$ | async) {\r\n <button\r\n (click)=\"_searchClick.next(iconSearchInput.value); _activePage.next(0)\"\r\n class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n </button>\r\n } @else {\r\n <button disabled\r\n class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n <!-- icons -->\r\n <div #iconScrollContainer class=\"col size_1 top_left scroll_y pad_5\" style=\"scroll-behavior: smooth\">\r\n @if (paginatedIcons$ | async; as icons) {\r\n <div class=\"row wrap top_left\" style=\"align-items:stretch;\">\r\n @for (icon of paginatedIcons$ | async; track $index) {\r\n <div class=\"col size_1 min_w75 mar_5\">\r\n <button class=\"access wis_icon_btn\" (click)=\"handleIconSelect(icon)\"\r\n [attr.aria-label]=\"text().select + ' ' + icon.name\">\r\n <div\r\n [ngClass]=\"((_internalValue | async)?.prefix === icon.prefix) && ((_internalValue | async)?.name === icon.name) ? 'ok_button_color' : 'content_color'\"\r\n class=\"wis_icon_btn_preview square_50px brad_3 bg_overlay brdr mar_bot5\">\r\n <i class=\"{{icon.prefix}} {{icon.name}}\"></i>\r\n </div>\r\n <div class=\"text sm center faded\">{{ icon.name }}</div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"row column min_h300 center_center\">\r\n <div class=\"text md\">{{ text().couldntFindAnything }}</div>\r\n <div class=\"text sm\">{{ text().modifySearchCriteria }}</div>\r\n <button class=\"access btnset clear mar_10\"\r\n [attr.aria-label]=\"text().close\"\r\n (click)=\"clearSearch()\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n <i class=\"fas fa-times\"></i>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n @if (_internalValue | async; as selectedIcon) {\r\n <div\r\n class=\"col space_between bg_overlay brdr border_top pad_x5 wis_selection_bar\">\r\n <div class=\"col v_center mar_10\">\r\n <div class=\"text md faded mar_right10 mobile_hide\">{{ text().selection }}:</div>\r\n @if (showIconSelectionPreview) {\r\n <div class=\"v_center\">\r\n <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} fa-fw mar_right5\" style=\"font-size:16px;\"></i>\r\n <div class=\"text md bold\">{{ selectedIcon.prefix }} {{ selectedIcon.name }}</div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col v_center mar_10\">\r\n <button\r\n type=\"button\"\r\n class=\"access btnset spaced md hov_glow save_button_color ptl_brdr_radius\"\r\n [attr.aria-label]=\"text().confirm\"\r\n (click)=\"handleIconSelectConfirm()\"\r\n >\r\n <div>{{ text().confirm }}</div>\r\n <div class=\"brdr border_left mar_left10 pad_left10\"><i class=\"fas fa-check\"></i></div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</particle-dialog>\r\n", styles: [".wis_button{width:40px;min-width:40px;height:40px;min-height:40px;cursor:pointer;transition:all .1s ease}.wis_button:disabled{cursor:default;opacity:1!important}.wis_button:hover:not(:disabled){filter:brightness(1.05)}.wis_button svg{transition:transform .1s ease}.wis_button:hover:not(:disabled) .wis_icon{transform:scale(1.15)}@supports not (-ms-high-contrast:none){.wis_button svg{width:75%;height:75%}}.wis_search{position:relative}.wis_search input{padding-right:40px!important}.wis_search .wis_search_btn{position:absolute;right:0;top:0;z-index:var(--z-frame);border-top-left-radius:0;border-bottom-left-radius:0;height:100%;width:32px}.wis_search .wis_clear_btn{position:absolute;right:40px;top:7px;z-index:var(--z-frame)}.wis_filter_btn{width:100%;padding:5px 10px;border-radius:3px}.wis_filter_btn:not(:hover):not(.selected){background-color:inherit;color:inherit}.wis_icon_btn{cursor:pointer;transition:all .1s ease;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;border:none;border-radius:3px;padding:5px 2px;background-color:inherit;color:inherit}.wis_icon_btn:hover{background-color:#7878781a}.wis_icon_btn_preview{transition:all .1s ease}.wis_selection_bar{z-index:var(--z-frame);box-shadow:0 -6px 10px -8px #00000040;animation-name:slideUpSelectionBar;animation-duration:.2s;transform-origin:bottom center}@keyframes slideUpSelectionBar{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}\n"] }]
|
|
3156
3128
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
3157
3129
|
type: Input
|
|
3158
3130
|
}], disabled: [{
|
|
@@ -3206,6 +3178,7 @@ class PopoverComponent {
|
|
|
3206
3178
|
* Event emitted on popover close
|
|
3207
3179
|
*/
|
|
3208
3180
|
closed = output();
|
|
3181
|
+
container = null;
|
|
3209
3182
|
/**
|
|
3210
3183
|
* Whether the popover should render
|
|
3211
3184
|
*/
|
|
@@ -3227,16 +3200,22 @@ class PopoverComponent {
|
|
|
3227
3200
|
* @private
|
|
3228
3201
|
*/
|
|
3229
3202
|
target = null;
|
|
3230
|
-
/**
|
|
3231
|
-
* The popover content container
|
|
3232
|
-
* @private
|
|
3233
|
-
*/
|
|
3234
|
-
container = null;
|
|
3235
3203
|
/**
|
|
3236
3204
|
* Array of escape keyup unlisten functions
|
|
3237
3205
|
* @private
|
|
3238
3206
|
*/
|
|
3239
3207
|
escapeKeyUpUnlisteners = [];
|
|
3208
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
3209
|
+
constructor() {
|
|
3210
|
+
effect(() => {
|
|
3211
|
+
if (this.isOpen() && this.render) {
|
|
3212
|
+
this.onAnimationStart();
|
|
3213
|
+
}
|
|
3214
|
+
else {
|
|
3215
|
+
setTimeout(() => this.onAnimationDone(), 300);
|
|
3216
|
+
}
|
|
3217
|
+
});
|
|
3218
|
+
}
|
|
3240
3219
|
/**
|
|
3241
3220
|
* Destroy component, clean up event listeners
|
|
3242
3221
|
*/
|
|
@@ -3251,7 +3230,7 @@ class PopoverComponent {
|
|
|
3251
3230
|
if (this.visible) {
|
|
3252
3231
|
const { pageX, pageY } = event;
|
|
3253
3232
|
if (pageX > 0 && pageY > 0) {
|
|
3254
|
-
const { left, right, top, bottom } = this.container.getBoundingClientRect();
|
|
3233
|
+
const { left, right, top, bottom } = this.container.nativeElement.getBoundingClientRect();
|
|
3255
3234
|
const xPositionValid = pageX >= left && pageX <= right;
|
|
3256
3235
|
const yPositionValid = pageY >= top && pageY <= bottom;
|
|
3257
3236
|
const shouldClose = !(xPositionValid && yPositionValid);
|
|
@@ -3298,26 +3277,19 @@ class PopoverComponent {
|
|
|
3298
3277
|
}
|
|
3299
3278
|
/**
|
|
3300
3279
|
* Handle animation start
|
|
3301
|
-
* @param event the AnimationEvent
|
|
3302
3280
|
*/
|
|
3303
|
-
onAnimationStart(
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3307
|
-
this.positionPopover();
|
|
3308
|
-
this.opened.emit();
|
|
3309
|
-
}
|
|
3281
|
+
onAnimationStart() {
|
|
3282
|
+
this.addEventListeners();
|
|
3283
|
+
this.opened.emit();
|
|
3284
|
+
setTimeout(() => this.positionPopover(), 0);
|
|
3310
3285
|
}
|
|
3311
3286
|
/**
|
|
3312
3287
|
* Handle animation end
|
|
3313
|
-
* @param event the AnimationEvent
|
|
3314
3288
|
*/
|
|
3315
|
-
onAnimationDone(
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
this.closed.emit();
|
|
3320
|
-
}
|
|
3289
|
+
onAnimationDone() {
|
|
3290
|
+
this.render = false;
|
|
3291
|
+
this.removeEventListeners();
|
|
3292
|
+
this.closed.emit();
|
|
3321
3293
|
}
|
|
3322
3294
|
/**
|
|
3323
3295
|
* Open the popover
|
|
@@ -3326,12 +3298,14 @@ class PopoverComponent {
|
|
|
3326
3298
|
open() {
|
|
3327
3299
|
this.render = true;
|
|
3328
3300
|
this.visible = true;
|
|
3301
|
+
setTimeout(() => this.toggleOpen(), 0);
|
|
3329
3302
|
}
|
|
3330
3303
|
/**
|
|
3331
3304
|
* Close the popover
|
|
3332
3305
|
*/
|
|
3333
3306
|
close() {
|
|
3334
3307
|
this.visible = false;
|
|
3308
|
+
this.isOpen.update(() => false);
|
|
3335
3309
|
}
|
|
3336
3310
|
/**
|
|
3337
3311
|
* Position the popover
|
|
@@ -3339,7 +3313,7 @@ class PopoverComponent {
|
|
|
3339
3313
|
*/
|
|
3340
3314
|
positionPopover() {
|
|
3341
3315
|
const { left, top, bottom, width } = this.target.getBoundingClientRect();
|
|
3342
|
-
const { offsetHeight, offsetWidth } = this.container;
|
|
3316
|
+
const { offsetHeight, offsetWidth } = this.container.nativeElement;
|
|
3343
3317
|
const popoverBottomLeftAnchor = bottom;
|
|
3344
3318
|
const availableBottomSpace = window.innerHeight - popoverBottomLeftAnchor;
|
|
3345
3319
|
const availableTopSpace = top;
|
|
@@ -3387,9 +3361,9 @@ class PopoverComponent {
|
|
|
3387
3361
|
if (leftPosition < 0) {
|
|
3388
3362
|
leftPosition = 0;
|
|
3389
3363
|
}
|
|
3390
|
-
this.renderer.setStyle(this.container, 'transform-origin', transformOrigin);
|
|
3391
|
-
this.renderer.setStyle(this.container, 'left', `${leftPosition}px`);
|
|
3392
|
-
this.renderer.setStyle(this.container, 'top', positionTop);
|
|
3364
|
+
this.renderer.setStyle(this.container.nativeElement, 'transform-origin', transformOrigin);
|
|
3365
|
+
this.renderer.setStyle(this.container.nativeElement, 'left', `${leftPosition}px`);
|
|
3366
|
+
this.renderer.setStyle(this.container.nativeElement, 'top', positionTop);
|
|
3393
3367
|
}
|
|
3394
3368
|
/**
|
|
3395
3369
|
* Add escape keyup listeners to all focusable elements to close
|
|
@@ -3397,7 +3371,7 @@ class PopoverComponent {
|
|
|
3397
3371
|
* @private
|
|
3398
3372
|
*/
|
|
3399
3373
|
addEventListeners() {
|
|
3400
|
-
const focusableElements = this.getFocusableElements(this.container);
|
|
3374
|
+
const focusableElements = this.getFocusableElements(this.container.nativeElement);
|
|
3401
3375
|
for (const element of focusableElements) {
|
|
3402
3376
|
this.renderer.setAttribute(element, 'data-dialog-close-override', 'true');
|
|
3403
3377
|
this.escapeKeyUpUnlisteners.push(this.renderer.listen(element, 'keyup', (event) => {
|
|
@@ -3448,39 +3422,23 @@ class PopoverComponent {
|
|
|
3448
3422
|
}
|
|
3449
3423
|
this.escapeKeyUpUnlisteners = [];
|
|
3450
3424
|
}
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
|
|
3454
|
-
|
|
3455
|
-
|
|
3456
|
-
animate('200ms ease', style({ transform: 'scaleY(1)', opacity: 1 }))
|
|
3457
|
-
]),
|
|
3458
|
-
transition('open => close', [
|
|
3459
|
-
style({ transform: 'scaleY(1)', opacity: 1 }),
|
|
3460
|
-
animate('200ms ease', style({ transform: 'scaleY(0.5)', opacity: 0 }))
|
|
3461
|
-
]),
|
|
3462
|
-
])
|
|
3463
|
-
] });
|
|
3425
|
+
toggleOpen() {
|
|
3426
|
+
this.isOpen.update((isOpen) => !isOpen);
|
|
3427
|
+
}
|
|
3428
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3429
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: PopoverComponent, isStandalone: true, selector: "particle-popover", inputs: { offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, targetOverride: { classPropertyName: "targetOverride", publicName: "targetOverride", isSignal: true, isRequired: false, transformFunction: null }, openDirection: { classPropertyName: "openDirection", publicName: "openDirection", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, scaleForMobile: { classPropertyName: "scaleForMobile", publicName: "scaleForMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "window:click": "onClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"particle_popover_overlay\"\r\n [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n [style.scale]=\"window.innerWidth > 768 ? 1 : scaleForMobile()\"\r\n>\r\n <div class=\"particle_popover\"\r\n [class.open]=\"isOpen()\"\r\n [cdkTrapFocus]=\"render && visible\"\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n [ngStyle]=\"{'width': width, 'height': height}\"\r\n [ngClass]=\"classList()\"\r\n #container\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".particle_popover_overlay{position:fixed;inset:0;z-index:var(--z-notification)}.particle_popover{border-radius:3px;overflow-x:hidden;overflow-y:auto;font-size:12px;font-weight:400;z-index:var(--z-notification);width:auto;min-width:10px;height:auto;min-height:10px;position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:ease}.particle_popover.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:ease}.particle_popover_shadow{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3464
3430
|
}
|
|
3465
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3431
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
3466
3432
|
type: Component,
|
|
3467
|
-
args: [{ selector: 'particle-popover',
|
|
3468
|
-
|
|
3469
|
-
transition('void => open', [
|
|
3470
|
-
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
3471
|
-
animate('200ms ease', style({ transform: 'scaleY(1)', opacity: 1 }))
|
|
3472
|
-
]),
|
|
3473
|
-
transition('open => close', [
|
|
3474
|
-
style({ transform: 'scaleY(1)', opacity: 1 }),
|
|
3475
|
-
animate('200ms ease', style({ transform: 'scaleY(0.5)', opacity: 0 }))
|
|
3476
|
-
]),
|
|
3477
|
-
])
|
|
3478
|
-
], imports: [CdkTrapFocus, NgStyle, NgClass], template: "@if (render) {\r\n <div class=\"particle_popover_overlay\" [style.scale]=\"window.innerWidth > 768 ? 1 : scaleForMobile()\">\r\n <div [cdkTrapFocus]=\"render && visible\"\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n [@openClose]=\"visible ? 'open' : 'close'\"\r\n [ngStyle]=\"{ 'width': width, 'height': height }\"\r\n [ngClass]=\"classList()\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute particle_popover\">\r\n <ng-content></ng-content>\r\n </div>\r\n </div>\r\n}\r\n", styles: [".particle_popover_overlay{position:fixed;inset:0;z-index:var(--z-notification)}.particle_popover{border-radius:3px;overflow-x:hidden;overflow-y:auto;font-size:12px;font-weight:400;z-index:var(--z-notification);width:auto;min-width:10px;height:auto;min-height:10px}.particle_popover_shadow{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}\n"] }]
|
|
3479
|
-
}], propDecorators: { offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], width: [{
|
|
3433
|
+
args: [{ selector: 'particle-popover', imports: [CdkTrapFocus, NgStyle, NgClass], template: "<div class=\"particle_popover_overlay\"\r\n [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n [style.scale]=\"window.innerWidth > 768 ? 1 : scaleForMobile()\"\r\n>\r\n <div class=\"particle_popover\"\r\n [class.open]=\"isOpen()\"\r\n [cdkTrapFocus]=\"render && visible\"\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n [ngStyle]=\"{'width': width, 'height': height}\"\r\n [ngClass]=\"classList()\"\r\n #container\r\n >\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: [".particle_popover_overlay{position:fixed;inset:0;z-index:var(--z-notification)}.particle_popover{border-radius:3px;overflow-x:hidden;overflow-y:auto;font-size:12px;font-weight:400;z-index:var(--z-notification);width:auto;min-width:10px;height:auto;min-height:10px;position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:ease}.particle_popover.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:ease}.particle_popover_shadow{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}\n"] }]
|
|
3434
|
+
}], ctorParameters: () => [], propDecorators: { offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], width: [{
|
|
3480
3435
|
type: Input
|
|
3481
3436
|
}], height: [{
|
|
3482
3437
|
type: Input
|
|
3483
|
-
}], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], targetOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetOverride", required: false }] }], openDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDirection", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], scaleForMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "scaleForMobile", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }],
|
|
3438
|
+
}], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], targetOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetOverride", required: false }] }], openDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDirection", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], scaleForMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "scaleForMobile", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], container: [{
|
|
3439
|
+
type: ViewChild,
|
|
3440
|
+
args: ['container']
|
|
3441
|
+
}], onClick: [{
|
|
3484
3442
|
type: HostListener,
|
|
3485
3443
|
args: ['window:click', ['$event']]
|
|
3486
3444
|
}], onWindowResize: [{
|
|
@@ -3515,13 +3473,9 @@ class PaginatorComponent {
|
|
|
3515
3473
|
showFirstLast = input(false, ...(ngDevMode ? [{ debugName: "showFirstLast" }] : []));
|
|
3516
3474
|
showButtonLabels = input(true, ...(ngDevMode ? [{ debugName: "showButtonLabels" }] : []));
|
|
3517
3475
|
showResultsPanel = input(true, ...(ngDevMode ? [{ debugName: "showResultsPanel" }] : []));
|
|
3518
|
-
startingPage = input(0, ...(ngDevMode ?
|
|
3519
|
-
|
|
3520
|
-
|
|
3521
|
-
transform: (page) => {
|
|
3522
|
-
setTimeout(() => this.setActivePage(page, false), 0);
|
|
3523
|
-
}
|
|
3524
|
-
}]));
|
|
3476
|
+
startingPage = input(0, { ...(ngDevMode ? { debugName: "startingPage" } : {}), transform: (page) => {
|
|
3477
|
+
setTimeout(() => this.setActivePage(page, false), 0);
|
|
3478
|
+
} });
|
|
3525
3479
|
text = input({
|
|
3526
3480
|
itemsPerPage: 'Items Per Page',
|
|
3527
3481
|
choosePageSize: 'Choose Page Size',
|
|
@@ -3687,10 +3641,10 @@ class PaginatorComponent {
|
|
|
3687
3641
|
}
|
|
3688
3642
|
this.pageJumpInput = '';
|
|
3689
3643
|
}
|
|
3690
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3691
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: PaginatorComponent, isStandalone: true, selector: "particle-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, totalLength: { classPropertyName: "totalLength", publicName: "totalLength", isSignal: true, isRequired: false, transformFunction: null }, showPages: { classPropertyName: "showPages", publicName: "showPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showButtonLabels: { classPropertyName: "showButtonLabels", publicName: "showButtonLabels", isSignal: true, isRequired: false, transformFunction: null }, showResultsPanel: { classPropertyName: "showResultsPanel", publicName: "showResultsPanel", isSignal: true, isRequired: false, transformFunction: null }, startingPage: { classPropertyName: "startingPage", publicName: "startingPage", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paginate: "paginate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row wrap_reverse center_center\">\r\n @if (!showPages() && showResultsPanel()) {\r\n <div class=\"col min_w200\">\r\n <div class=\"row v_center ptl_brdr_size ptl_brdr_radius ptl_brdr_color content_color mar_right5 mar_left5 pad_3 ent_r2l_row\">\r\n <div class=\"col size_1 center_center pad_left5 pad_right5\">\r\n @if (totalLength() > 0) {\r\n <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n {{pageStartingValue}} - {{pageEndingValue > totalLength() ? totalLength() : pageEndingValue}} {{text().of}} {{totalLength()}} {{text().results}}\r\n </div>\r\n } @else {\r\n <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n 0 - 0 {{text().of}} 0 {{text().results}}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col center_center pad_lr5\">\r\n <button class=\"access btn clear circle_20px \" tabindex=\"0\" [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"config.toggle($event)\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <div class=\"row wrap_reverse center_center\">\r\n\r\n @if (showFirstLast()) {\r\n <div class=\"col pad_5\">\r\n <!-- first -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().firstPage\"\r\n [disabled]=\"activePage === 0\"\r\n (click)=\"goToFirst()\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-angle-double-left ent_r2l_ico\"></i>\r\n </div>\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().firstPage}}</div>\r\n }\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <!-- previous -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().previousPage\"\r\n [disabled]=\"activePage === 0\"\r\n (click)=\"hasPage(activePage - 1) ? goToPage(activePage - 1) : goToPage(activePage)\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-chevron-left ent_r2l_ico\"></i>\r\n </div>\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().previousPage}}</div>\r\n }\r\n </div>\r\n </button>\r\n </div>\r\n\r\n @if (showPages()) {\r\n <div class=\"col pad_5\">\r\n <!-- navigation -->\r\n <div class=\"row v_center pad_left5 pad_right5 bg_overlay brdr content_color ptl_brdr_radius ent_r2l_dir\"\r\n style=\"flex:1 1 auto;\">\r\n <!-- jump button -->\r\n <div class=\"center_right\" style=\"width:20px;min-width:20px;\">\r\n @if (activePage > 3) {\r\n <button class=\"access btn underline_md pag_btn clear\" tabindex=\"0\"\r\n [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"op.toggle($event)\">...</button>\r\n }\r\n </div>\r\n <!-- nav buttons -->\r\n <div class=\"center_center\" style=\"min-width:180px;\">\r\n <!-- first -->\r\n @if ((activePage-2 >= 0 && activePage-2 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage - 1)\"\r\n (click)=\"goToPage(activePage - 2, true)\">\r\n {{activePage - 1}}\r\n </button>\r\n }\r\n <!-- second -->\r\n @if ((activePage-1 >= 0 && activePage-1 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage)\"\r\n (click)=\"goToPage(activePage - 1, true)\">\r\n {{activePage}}\r\n </button>\r\n }\r\n <!-- active page -->\r\n <div class=\"row pag_btn active brad_3 content_color\">\r\n <button style=\"cursor:default\"\r\n class=\"access col size_1 btn center_center brad_3 bg_overlay_rev brdr\" id=\"activePage\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 1)\" >\r\n {{activePage + 1}}\r\n </button>\r\n </div>\r\n <!-- fourth -->\r\n @if ((activePage+1 >= 0 && activePage+1 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 2)\"\r\n (click)=\"goToPage(activePage + 1, true)\">\r\n {{activePage + 2}}\r\n </button>\r\n }\r\n <!-- fifth -->\r\n @if ((activePage+2 >= 0 && activePage+2 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 3)\"\r\n (click)=\"goToPage(activePage + 2, true)\">\r\n {{activePage + 3}}\r\n </button>\r\n }\r\n </div>\r\n <!-- jump button -->\r\n <div class=\"center_left\" style=\"width:20px;min-width:20px;\">\r\n @if (activePage < getNumberOfPages() - 4) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"op.toggle($event)\" >...</button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <!-- next -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().nextPage\"\r\n [disabled]=\"activePage === numberOfPages - 1 || totalLength() === 0\"\r\n (click)=\"hasPage(activePage + 1) ? goToPage(activePage + 1) : goToPage(activePage)\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().nextPage}}</div>\r\n }\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n </div>\r\n\r\n @if (showFirstLast()) {\r\n <div class=\"col pad_5\">\r\n <!-- last -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().lastPage\"\r\n [disabled]=\"activePage === numberOfPages - 1\"\r\n (click)=\"goToLast()\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().lastPage}}</div>\r\n }\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-angle-double-right ent_r2l_ico\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Jump to popover -->\r\n<particle-popover #op>\r\n <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n</particle-popover>\r\n\r\n<particle-popover #config>\r\n <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageSizeTemplate\"></ng-container>\r\n</particle-popover>\r\n\r\n<ng-template #jumpTo>\r\n @if (numberOfPages > 0) {\r\n <div class=\"row_block pad_10 center\">\r\n <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageJump\">{{text().jumpToPage}} ({{text().outOf}} {{numberOfPages}}):</label></div>\r\n <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n <div class=\"col\">\r\n <input class=\"access fullwidth_input sm\" style=\"width:50px;\" maxlength=\"4\" id=\"pageJump\"\r\n type=\"text\" [attr.aria-label]=\"text().page\" name=\"pagejump\" [placeholder]=\"text().page\" [(ngModel)]=\"pageJumpInput\" />\r\n </div>\r\n <div class=\"col\">\r\n <button class=\"access btn clear\" [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"jumpPage();op.close();config.close();\">\r\n <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #pageSizeTemplate>\r\n <div class=\"row_block pad_10 center\">\r\n <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageSize\">{{text().itemsPerPage}}:</label></div>\r\n <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n <div class=\"col\">\r\n <select class=\"access fullwidth_input content_color text sm\" style=\"width:50px;\"\r\n [(ngModel)]=\"pageSize\" (ngModelChange)=\"pageSizeChange();config.close();\" [title]=\"text().choosePageSize\" id=\"pageSize\">\r\n @for (option of pageSizeOptions(); track option) {\r\n <option [value]=\"option\" [attr.aria-label]=\"option\">\r\n {{option}}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n", styles: [".pag_btn{flex:1;max-width:60px;margin:0 1px;height:24px;font-size:10pt}.pag_btn.active{height:30px;margin-top:-3px;margin-bottom:-3px}.spinspin{opacity:.5}.spinspin:hover{animation:spin 2s linear infinite;opacity:1}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
3644
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3645
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PaginatorComponent, isStandalone: true, selector: "particle-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, totalLength: { classPropertyName: "totalLength", publicName: "totalLength", isSignal: true, isRequired: false, transformFunction: null }, showPages: { classPropertyName: "showPages", publicName: "showPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showButtonLabels: { classPropertyName: "showButtonLabels", publicName: "showButtonLabels", isSignal: true, isRequired: false, transformFunction: null }, showResultsPanel: { classPropertyName: "showResultsPanel", publicName: "showResultsPanel", isSignal: true, isRequired: false, transformFunction: null }, startingPage: { classPropertyName: "startingPage", publicName: "startingPage", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paginate: "paginate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row wrap_reverse center_center\">\r\n @if (!showPages() && showResultsPanel()) {\r\n <div class=\"col min_w200\">\r\n <div class=\"row v_center ptl_brdr_size ptl_brdr_radius ptl_brdr_color content_color mar_right5 mar_left5 pad_3 ent_r2l_row\">\r\n <div class=\"col size_1 center_center pad_left5 pad_right5\">\r\n @if (totalLength() > 0) {\r\n <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n {{pageStartingValue}} - {{pageEndingValue > totalLength() ? totalLength() : pageEndingValue}} {{text().of}} {{totalLength()}} {{text().results}}\r\n </div>\r\n } @else {\r\n <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n 0 - 0 {{text().of}} 0 {{text().results}}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col center_center pad_lr5\">\r\n <button class=\"access btn clear circle_20px \" tabindex=\"0\" [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"config.toggle($event)\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <div class=\"row wrap_reverse center_center\">\r\n\r\n @if (showFirstLast()) {\r\n <div class=\"col pad_5\">\r\n <!-- first -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().firstPage\"\r\n [disabled]=\"activePage === 0\"\r\n (click)=\"goToFirst()\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-angle-double-left ent_r2l_ico\"></i>\r\n </div>\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().firstPage}}</div>\r\n }\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <!-- previous -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().previousPage\"\r\n [disabled]=\"activePage === 0\"\r\n (click)=\"hasPage(activePage - 1) ? goToPage(activePage - 1) : goToPage(activePage)\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-chevron-left ent_r2l_ico\"></i>\r\n </div>\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().previousPage}}</div>\r\n }\r\n </div>\r\n </button>\r\n </div>\r\n\r\n @if (showPages()) {\r\n <div class=\"col pad_5\">\r\n <!-- navigation -->\r\n <div class=\"row v_center pad_left5 pad_right5 bg_overlay brdr content_color ptl_brdr_radius ent_r2l_dir\"\r\n style=\"flex:1 1 auto;\">\r\n <!-- jump button -->\r\n <div class=\"center_right\" style=\"width:20px;min-width:20px;\">\r\n @if (activePage > 3) {\r\n <button class=\"access btn underline_md pag_btn clear\" tabindex=\"0\"\r\n [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"op.toggle($event)\">...</button>\r\n }\r\n </div>\r\n <!-- nav buttons -->\r\n <div class=\"center_center\" style=\"min-width:180px;\">\r\n <!-- first -->\r\n @if ((activePage-2 >= 0 && activePage-2 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage - 1)\"\r\n (click)=\"goToPage(activePage - 2, true)\">\r\n {{activePage - 1}}\r\n </button>\r\n }\r\n <!-- second -->\r\n @if ((activePage-1 >= 0 && activePage-1 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage)\"\r\n (click)=\"goToPage(activePage - 1, true)\">\r\n {{activePage}}\r\n </button>\r\n }\r\n <!-- active page -->\r\n <div class=\"row pag_btn active brad_3 content_color\">\r\n <button style=\"cursor:default\"\r\n class=\"access col size_1 btn center_center brad_3 bg_overlay_rev brdr\" id=\"activePage\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 1)\" >\r\n {{activePage + 1}}\r\n </button>\r\n </div>\r\n <!-- fourth -->\r\n @if ((activePage+1 >= 0 && activePage+1 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 2)\"\r\n (click)=\"goToPage(activePage + 1, true)\">\r\n {{activePage + 2}}\r\n </button>\r\n }\r\n <!-- fifth -->\r\n @if ((activePage+2 >= 0 && activePage+2 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 3)\"\r\n (click)=\"goToPage(activePage + 2, true)\">\r\n {{activePage + 3}}\r\n </button>\r\n }\r\n </div>\r\n <!-- jump button -->\r\n <div class=\"center_left\" style=\"width:20px;min-width:20px;\">\r\n @if (activePage < getNumberOfPages() - 4) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"op.toggle($event)\" >...</button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <!-- next -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().nextPage\"\r\n [disabled]=\"activePage === numberOfPages - 1 || totalLength() === 0\"\r\n (click)=\"hasPage(activePage + 1) ? goToPage(activePage + 1) : goToPage(activePage)\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().nextPage}}</div>\r\n }\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n </div>\r\n\r\n @if (showFirstLast()) {\r\n <div class=\"col pad_5\">\r\n <!-- last -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().lastPage\"\r\n [disabled]=\"activePage === numberOfPages - 1\"\r\n (click)=\"goToLast()\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().lastPage}}</div>\r\n }\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-angle-double-right ent_r2l_ico\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Jump to popover -->\r\n<particle-popover #op>\r\n <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n</particle-popover>\r\n\r\n<particle-popover #config>\r\n <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageSizeTemplate\"></ng-container>\r\n</particle-popover>\r\n\r\n<ng-template #jumpTo>\r\n @if (numberOfPages > 0) {\r\n <div class=\"row_block pad_10 center\">\r\n <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageJump\">{{text().jumpToPage}} ({{text().outOf}} {{numberOfPages}}):</label></div>\r\n <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n <div class=\"col\">\r\n <input class=\"access fullwidth_input sm\" style=\"width:50px;\" maxlength=\"4\" id=\"pageJump\"\r\n type=\"text\" [attr.aria-label]=\"text().page\" name=\"pagejump\" [placeholder]=\"text().page\" [(ngModel)]=\"pageJumpInput\" />\r\n </div>\r\n <div class=\"col\">\r\n <button class=\"access btn clear\" [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"jumpPage();op.close();config.close();\">\r\n <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #pageSizeTemplate>\r\n <div class=\"row_block pad_10 center\">\r\n <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageSize\">{{text().itemsPerPage}}:</label></div>\r\n <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n <div class=\"col\">\r\n <select class=\"access fullwidth_input content_color text sm\" style=\"width:50px;\"\r\n [(ngModel)]=\"pageSize\" (ngModelChange)=\"pageSizeChange();config.close();\" [title]=\"text().choosePageSize\" id=\"pageSize\">\r\n @for (option of pageSizeOptions(); track option) {\r\n <option [value]=\"option\" [attr.aria-label]=\"option\">\r\n {{option}}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n", styles: [".pag_btn{flex:1;max-width:60px;margin:0 1px;height:24px;font-size:10pt}.pag_btn.active{height:30px;margin-top:-3px;margin-bottom:-3px}.spinspin{opacity:.5}.spinspin:hover{animation:spin 2s linear infinite;opacity:1}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
3692
3646
|
}
|
|
3693
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3647
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
3694
3648
|
type: Component,
|
|
3695
3649
|
args: [{ selector: 'particle-paginator', imports: [NgClass, PopoverComponent, NgTemplateOutlet, FormsModule], template: "<div class=\"row wrap_reverse center_center\">\r\n @if (!showPages() && showResultsPanel()) {\r\n <div class=\"col min_w200\">\r\n <div class=\"row v_center ptl_brdr_size ptl_brdr_radius ptl_brdr_color content_color mar_right5 mar_left5 pad_3 ent_r2l_row\">\r\n <div class=\"col size_1 center_center pad_left5 pad_right5\">\r\n @if (totalLength() > 0) {\r\n <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n {{pageStartingValue}} - {{pageEndingValue > totalLength() ? totalLength() : pageEndingValue}} {{text().of}} {{totalLength()}} {{text().results}}\r\n </div>\r\n } @else {\r\n <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n 0 - 0 {{text().of}} 0 {{text().results}}\r\n </div>\r\n }\r\n </div>\r\n <div class=\"col center_center pad_lr5\">\r\n <button class=\"access btn clear circle_20px \" tabindex=\"0\" [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"config.toggle($event)\">\r\n <i class=\"fas fa-cog\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <div class=\"row wrap_reverse center_center\">\r\n\r\n @if (showFirstLast()) {\r\n <div class=\"col pad_5\">\r\n <!-- first -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().firstPage\"\r\n [disabled]=\"activePage === 0\"\r\n (click)=\"goToFirst()\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-angle-double-left ent_r2l_ico\"></i>\r\n </div>\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().firstPage}}</div>\r\n }\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <!-- previous -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().previousPage\"\r\n [disabled]=\"activePage === 0\"\r\n (click)=\"hasPage(activePage - 1) ? goToPage(activePage - 1) : goToPage(activePage)\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-chevron-left ent_r2l_ico\"></i>\r\n </div>\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().previousPage}}</div>\r\n }\r\n </div>\r\n </button>\r\n </div>\r\n\r\n @if (showPages()) {\r\n <div class=\"col pad_5\">\r\n <!-- navigation -->\r\n <div class=\"row v_center pad_left5 pad_right5 bg_overlay brdr content_color ptl_brdr_radius ent_r2l_dir\"\r\n style=\"flex:1 1 auto;\">\r\n <!-- jump button -->\r\n <div class=\"center_right\" style=\"width:20px;min-width:20px;\">\r\n @if (activePage > 3) {\r\n <button class=\"access btn underline_md pag_btn clear\" tabindex=\"0\"\r\n [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"op.toggle($event)\">...</button>\r\n }\r\n </div>\r\n <!-- nav buttons -->\r\n <div class=\"center_center\" style=\"min-width:180px;\">\r\n <!-- first -->\r\n @if ((activePage-2 >= 0 && activePage-2 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage - 1)\"\r\n (click)=\"goToPage(activePage - 2, true)\">\r\n {{activePage - 1}}\r\n </button>\r\n }\r\n <!-- second -->\r\n @if ((activePage-1 >= 0 && activePage-1 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage)\"\r\n (click)=\"goToPage(activePage - 1, true)\">\r\n {{activePage}}\r\n </button>\r\n }\r\n <!-- active page -->\r\n <div class=\"row pag_btn active brad_3 content_color\">\r\n <button style=\"cursor:default\"\r\n class=\"access col size_1 btn center_center brad_3 bg_overlay_rev brdr\" id=\"activePage\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 1)\" >\r\n {{activePage + 1}}\r\n </button>\r\n </div>\r\n <!-- fourth -->\r\n @if ((activePage+1 >= 0 && activePage+1 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 2)\"\r\n (click)=\"goToPage(activePage + 1, true)\">\r\n {{activePage + 2}}\r\n </button>\r\n }\r\n <!-- fifth -->\r\n @if ((activePage+2 >= 0 && activePage+2 < numberOfPages)) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().page + ' ' + (activePage + 3)\"\r\n (click)=\"goToPage(activePage + 2, true)\">\r\n {{activePage + 3}}\r\n </button>\r\n }\r\n </div>\r\n <!-- jump button -->\r\n <div class=\"center_left\" style=\"width:20px;min-width:20px;\">\r\n @if (activePage < getNumberOfPages() - 4) {\r\n <button class=\"access btn underline_md pag_btn clear\"\r\n [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"op.toggle($event)\" >...</button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"col pad_5\">\r\n <!-- next -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().nextPage\"\r\n [disabled]=\"activePage === numberOfPages - 1 || totalLength() === 0\"\r\n (click)=\"hasPage(activePage + 1) ? goToPage(activePage + 1) : goToPage(activePage)\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().nextPage}}</div>\r\n }\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n </div>\r\n\r\n @if (showFirstLast()) {\r\n <div class=\"col pad_5\">\r\n <!-- last -->\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().lastPage\"\r\n [disabled]=\"activePage === numberOfPages - 1\"\r\n (click)=\"goToLast()\">\r\n <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n @if (showButtonLabels()) {\r\n <div class=\"text ent_r2l_txt\">{{text().lastPage}}</div>\r\n }\r\n <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n <i class=\"fas fa-angle-double-right ent_r2l_ico\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Jump to popover -->\r\n<particle-popover #op>\r\n <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n</particle-popover>\r\n\r\n<particle-popover #config>\r\n <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageSizeTemplate\"></ng-container>\r\n</particle-popover>\r\n\r\n<ng-template #jumpTo>\r\n @if (numberOfPages > 0) {\r\n <div class=\"row_block pad_10 center\">\r\n <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageJump\">{{text().jumpToPage}} ({{text().outOf}} {{numberOfPages}}):</label></div>\r\n <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n <div class=\"col\">\r\n <input class=\"access fullwidth_input sm\" style=\"width:50px;\" maxlength=\"4\" id=\"pageJump\"\r\n type=\"text\" [attr.aria-label]=\"text().page\" name=\"pagejump\" [placeholder]=\"text().page\" [(ngModel)]=\"pageJumpInput\" />\r\n </div>\r\n <div class=\"col\">\r\n <button class=\"access btn clear\" [attr.aria-label]=\"text().jumpToPage\"\r\n (click)=\"jumpPage();op.close();config.close();\">\r\n <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #pageSizeTemplate>\r\n <div class=\"row_block pad_10 center\">\r\n <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageSize\">{{text().itemsPerPage}}:</label></div>\r\n <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n <div class=\"col\">\r\n <select class=\"access fullwidth_input content_color text sm\" style=\"width:50px;\"\r\n [(ngModel)]=\"pageSize\" (ngModelChange)=\"pageSizeChange();config.close();\" [title]=\"text().choosePageSize\" id=\"pageSize\">\r\n @for (option of pageSizeOptions(); track option) {\r\n <option [value]=\"option\" [attr.aria-label]=\"option\">\r\n {{option}}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n", styles: [".pag_btn{flex:1;max-width:60px;margin:0 1px;height:24px;font-size:10pt}.pag_btn.active{height:30px;margin-top:-3px;margin-bottom:-3px}.spinspin{opacity:.5}.spinspin:hover{animation:spin 2s linear infinite;opacity:1}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
|
|
3696
3650
|
}], propDecorators: { pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageSize: [{
|
|
@@ -3727,11 +3681,13 @@ class ProfilePicComponent {
|
|
|
3727
3681
|
* Image URL of the profile pic
|
|
3728
3682
|
*/
|
|
3729
3683
|
set imageUrl(imageUrl) {
|
|
3730
|
-
|
|
3684
|
+
if (imageUrl) {
|
|
3685
|
+
this.url = `url(${imageUrl})`;
|
|
3686
|
+
}
|
|
3731
3687
|
}
|
|
3732
3688
|
url = null;
|
|
3733
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3734
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3689
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfilePicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3690
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: ProfilePicComponent, isStandalone: true, selector: "particle-profile-pic", inputs: { size: "size", margin: "margin", toolTip: "toolTip", tooltipDisabled: "tooltipDisabled", gravatarEmail: "gravatarEmail", imageUrl: "imageUrl" }, ngImport: i0, template: `
|
|
3735
3691
|
<div class="ptl_profile_pic"
|
|
3736
3692
|
[style.height]="size"
|
|
3737
3693
|
[style.width]="size"
|
|
@@ -3742,7 +3698,7 @@ class ProfilePicComponent {
|
|
|
3742
3698
|
tooltipPosition="top">
|
|
3743
3699
|
</div>`, isInline: true, styles: [".ptl_profile_pic{height:80px;width:80px;border-radius:50%;background-image:url(data:image/png;base64,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);background-size:105%;background-position:center center;background-repeat:no-repeat;border:1px solid rgba(0,0,0,.1)}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }] });
|
|
3744
3700
|
}
|
|
3745
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3701
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfilePicComponent, decorators: [{
|
|
3746
3702
|
type: Component,
|
|
3747
3703
|
args: [{ selector: 'particle-profile-pic', template: `
|
|
3748
3704
|
<div class="ptl_profile_pic"
|
|
@@ -3956,12 +3912,12 @@ class RichTextComponent {
|
|
|
3956
3912
|
}
|
|
3957
3913
|
this.editor.commands.focus(position);
|
|
3958
3914
|
}
|
|
3959
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3960
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RichTextComponent, isStandalone: true, selector: "particle-rich-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideControls: { classPropertyName: "hideControls", publicName: "hideControls", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, editorClass: { classPropertyName: "editorClass", publicName: "editorClass", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, capabilities: { classPropertyName: "capabilities", publicName: "capabilities", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { textChanged: "textChanged" }, providers: [RICH_TEXT_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n @if (!this.hideControls() && this.editor.isEditable) {\r\n <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n @if (capabilities().heading) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"heading1\"\r\n [attr.aria-label]=\"text().heading1\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 1 }) }\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>1\r\n </button>\r\n <button\r\n id=\"heading2\"\r\n [attr.aria-label]=\"text().heading2\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 2 }) }\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>2\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().textDecoration) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bold\"\r\n [attr.aria-label]=\"text().bold\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBold().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bold') }\"\r\n >\r\n <i class=\"fas fa-bold fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"italic\"\r\n [attr.aria-label]=\"text().italic\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('italic') }\"\r\n >\r\n <i class=\"fas fa-italic fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"strike\"\r\n [attr.aria-label]=\"text().strike\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('strike') }\"\r\n >\r\n <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().list) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bullet-list\"\r\n [attr.aria-label]=\"text().bulletedList\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bullet-list') }\"\r\n >\r\n <i class=\"fas fa-list fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"ordered-list\"\r\n [attr.aria-label]=\"text().orderedList\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('ordered-list') }\"\r\n >\r\n <i class=\"fas fa-list-ol fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().alignment) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"left-align\"\r\n [attr.aria-label]=\"text().leftAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'left' }) }\"\r\n >\r\n <i class=\"fas fa-align-left fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"center-align\"\r\n [attr.aria-label]=\"text().centerAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'center' }) }\"\r\n >\r\n <i class=\"fas fa-align-center fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"right-align\"\r\n [attr.aria-label]=\"text().rightAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'right' }) }\"\r\n >\r\n <i class=\"fas fa-align-right fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"justify-align\"\r\n [attr.aria-label]=\"text().justifyAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'justify' }) }\"\r\n >\r\n <i class=\"fas fa-align-justify fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().divider) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().divider\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setHorizontalRule().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('horizontalRule') }\"\r\n >\r\n <i class=\"fas fa-divide fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().link) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().setLink\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n (click)=\"openLinkDialog()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('link') }\"\r\n >\r\n <i class=\"fas fa-link fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"unlink\"\r\n [attr.aria-label]=\"text().removeLink\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n [disabled]=\"!this.editor.isActive('link')\"\r\n >\r\n <i class=\"fas fa-unlink fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().images) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"image\"\r\n [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n (click)=\"openImageDialog()\"\r\n [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n tooltipPosition=\"top\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('image') }\"\r\n >\r\n <i class=\"far fa-image fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n <div class=\"col v_center pad_5\">\r\n <button\r\n id=\"clear-format\"\r\n [attr.aria-label]=\"text().clearFormat\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n >\r\n <i class=\"fas fa-text-slash fa-fw\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\r\n <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n </div>\r\n</div>\r\n\r\n<particle-dialog\r\n [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n titleClass=\"header_color min_h40\"\r\n [object]=\"showDialog\"\r\n [allowClose]=\"false\"\r\n width=\"400px\"\r\n height=\"150px\"\r\n >\r\n <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n <input class=\"access input md\"\r\n [(ngModel)]=\"dialogLink\"\r\n [attr.aria-label]=\"text().url\"\r\n placeholder=\"eg. https://www.google.com\"\r\n (keyup.enter)=\"changeEditorLink('save')\"\r\n />\r\n </div>\r\n <div class=\"col min_h40 footer_color\">\r\n <div class=\"row center_right pad_right15 pad_left15\">\r\n <div class=\"col\">\r\n <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n <div class=\" pad_5\">{{text().cancel}}</div>\r\n </button>\r\n <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n [attr.aria-label]=\"text().update\"\r\n (click)=\"changeEditorLink('save')\"\r\n >\r\n <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n <div>{{text().update}}</div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TiptapEditorDirective, selector: "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", inputs: ["editor", "outputFormat"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3915
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3916
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: RichTextComponent, isStandalone: true, selector: "particle-rich-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideControls: { classPropertyName: "hideControls", publicName: "hideControls", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, editorClass: { classPropertyName: "editorClass", publicName: "editorClass", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, capabilities: { classPropertyName: "capabilities", publicName: "capabilities", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { textChanged: "textChanged" }, providers: [RICH_TEXT_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n @if (!this.hideControls() && this.editor.isEditable) {\r\n <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n @if (capabilities().heading) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"heading1\"\r\n [attr.aria-label]=\"text().heading1\"\r\n class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n [ngClass]=\"this.editor.isActive('heading', { level: 1 }) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>1\r\n </button>\r\n <button\r\n id=\"heading2\"\r\n [attr.aria-label]=\"text().heading2\"\r\n class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n [ngClass]=\"this.editor.isActive('heading', { level: 2 }) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>2\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().textDecoration) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bold\"\r\n [attr.aria-label]=\"text().bold\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBold().run()\"\r\n [ngClass]=\"this.editor.isActive('bold') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-bold fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"italic\"\r\n [attr.aria-label]=\"text().italic\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n [ngClass]=\"this.editor.isActive('italic') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-italic fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"strike\"\r\n [attr.aria-label]=\"text().strike\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n [ngClass]=\"this.editor.isActive('strike') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().list) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bullet-list\"\r\n [attr.aria-label]=\"text().bulletedList\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n [ngClass]=\"this.editor.isActive('bullet-list') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-list fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"ordered-list\"\r\n [attr.aria-label]=\"text().orderedList\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n [ngClass]=\"this.editor.isActive('ordered-list') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-list-ol fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().alignment) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"left-align\"\r\n [attr.aria-label]=\"text().leftAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'left'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-left fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"center-align\"\r\n [attr.aria-label]=\"text().centerAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'center'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-center fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"right-align\"\r\n [attr.aria-label]=\"text().rightAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'right'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-right fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"justify-align\"\r\n [attr.aria-label]=\"text().justifyAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'justify'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-justify fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().divider) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().divider\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setHorizontalRule().run()\"\r\n [ngClass]=\"this.editor.isActive('horizontalRule') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-divide fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().link) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().setLink\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n (click)=\"openLinkDialog()\"\r\n [ngClass]=\"this.editor.isActive('link') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-link fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"unlink\"\r\n [attr.aria-label]=\"text().removeLink\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n [disabled]=\"!this.editor.isActive('link')\"\r\n >\r\n <i class=\"fas fa-unlink fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().images) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"image\"\r\n [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n (click)=\"openImageDialog()\"\r\n [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n tooltipPosition=\"top\"\r\n [ngClass]=\"this.editor.isActive('image') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"far fa-image fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n <div class=\"col v_center pad_5\">\r\n <button\r\n id=\"clear-format\"\r\n [attr.aria-label]=\"text().clearFormat\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n >\r\n <i class=\"fas fa-text-slash fa-fw\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\r\n <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n </div>\r\n</div>\r\n\r\n<particle-dialog\r\n [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n titleClass=\"header_color min_h40\"\r\n [object]=\"showDialog\"\r\n [allowClose]=\"false\"\r\n width=\"400px\"\r\n height=\"150px\"\r\n >\r\n <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n <input class=\"access input md\"\r\n [(ngModel)]=\"dialogLink\"\r\n [attr.aria-label]=\"text().url\"\r\n placeholder=\"eg. https://www.google.com\"\r\n (keyup.enter)=\"changeEditorLink('save')\"\r\n />\r\n </div>\r\n <div class=\"col min_h40 footer_color\">\r\n <div class=\"row center_right pad_right15 pad_left15\">\r\n <div class=\"col\">\r\n <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n <div class=\" pad_5\">{{text().cancel}}</div>\r\n </button>\r\n <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n [attr.aria-label]=\"text().update\"\r\n (click)=\"changeEditorLink('save')\"\r\n >\r\n <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n <div>{{text().update}}</div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TiptapEditorDirective, selector: "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", inputs: ["editor", "outputFormat"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
3961
3917
|
}
|
|
3962
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3918
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RichTextComponent, decorators: [{
|
|
3963
3919
|
type: Component,
|
|
3964
|
-
args: [{ selector: 'particle-rich-text', providers: [RICH_TEXT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, imports: [TooltipDirective, NgClass, TiptapEditorDirective, FormsModule, DialogComponent], template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n @if (!this.hideControls() && this.editor.isEditable) {\r\n <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n @if (capabilities().heading) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"heading1\"\r\n [attr.aria-label]=\"text().heading1\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 1 }) }\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>1\r\n </button>\r\n <button\r\n id=\"heading2\"\r\n [attr.aria-label]=\"text().heading2\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 2 }) }\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>2\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().textDecoration) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bold\"\r\n [attr.aria-label]=\"text().bold\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBold().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bold') }\"\r\n >\r\n <i class=\"fas fa-bold fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"italic\"\r\n [attr.aria-label]=\"text().italic\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('italic') }\"\r\n >\r\n <i class=\"fas fa-italic fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"strike\"\r\n [attr.aria-label]=\"text().strike\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('strike') }\"\r\n >\r\n <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().list) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bullet-list\"\r\n [attr.aria-label]=\"text().bulletedList\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bullet-list') }\"\r\n >\r\n <i class=\"fas fa-list fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"ordered-list\"\r\n [attr.aria-label]=\"text().orderedList\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('ordered-list') }\"\r\n >\r\n <i class=\"fas fa-list-ol fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().alignment) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"left-align\"\r\n [attr.aria-label]=\"text().leftAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'left' }) }\"\r\n >\r\n <i class=\"fas fa-align-left fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"center-align\"\r\n [attr.aria-label]=\"text().centerAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'center' }) }\"\r\n >\r\n <i class=\"fas fa-align-center fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"right-align\"\r\n [attr.aria-label]=\"text().rightAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'right' }) }\"\r\n >\r\n <i class=\"fas fa-align-right fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"justify-align\"\r\n [attr.aria-label]=\"text().justifyAlign\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'justify' }) }\"\r\n >\r\n <i class=\"fas fa-align-justify fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().divider) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().divider\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setHorizontalRule().run()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('horizontalRule') }\"\r\n >\r\n <i class=\"fas fa-divide fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().link) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().setLink\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n (click)=\"openLinkDialog()\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('link') }\"\r\n >\r\n <i class=\"fas fa-link fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"unlink\"\r\n [attr.aria-label]=\"text().removeLink\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n [disabled]=\"!this.editor.isActive('link')\"\r\n >\r\n <i class=\"fas fa-unlink fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().images) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"image\"\r\n [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n (click)=\"openImageDialog()\"\r\n [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n tooltipPosition=\"top\"\r\n [ngClass]=\"{ 'ok_button_color': this.editor.isActive('image') }\"\r\n >\r\n <i class=\"far fa-image fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n <div class=\"col v_center pad_5\">\r\n <button\r\n id=\"clear-format\"\r\n [attr.aria-label]=\"text().clearFormat\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n >\r\n <i class=\"fas fa-text-slash fa-fw\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\r\n <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n </div>\r\n</div>\r\n\r\n<particle-dialog\r\n [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n titleClass=\"header_color min_h40\"\r\n [object]=\"showDialog\"\r\n [allowClose]=\"false\"\r\n width=\"400px\"\r\n height=\"150px\"\r\n >\r\n <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n <input class=\"access input md\"\r\n [(ngModel)]=\"dialogLink\"\r\n [attr.aria-label]=\"text().url\"\r\n placeholder=\"eg. https://www.google.com\"\r\n (keyup.enter)=\"changeEditorLink('save')\"\r\n />\r\n </div>\r\n <div class=\"col min_h40 footer_color\">\r\n <div class=\"row center_right pad_right15 pad_left15\">\r\n <div class=\"col\">\r\n <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n <div class=\" pad_5\">{{text().cancel}}</div>\r\n </button>\r\n <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n [attr.aria-label]=\"text().update\"\r\n (click)=\"changeEditorLink('save')\"\r\n >\r\n <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n <div>{{text().update}}</div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"] }]
|
|
3920
|
+
args: [{ selector: 'particle-rich-text', providers: [RICH_TEXT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, imports: [TooltipDirective, NgClass, TiptapEditorDirective, FormsModule, DialogComponent], template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n @if (!this.hideControls() && this.editor.isEditable) {\r\n <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n @if (capabilities().heading) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"heading1\"\r\n [attr.aria-label]=\"text().heading1\"\r\n class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n [ngClass]=\"this.editor.isActive('heading', { level: 1 }) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>1\r\n </button>\r\n <button\r\n id=\"heading2\"\r\n [attr.aria-label]=\"text().heading2\"\r\n class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n [ngClass]=\"this.editor.isActive('heading', { level: 2 }) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-header fa-fw\"></i>2\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().textDecoration) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bold\"\r\n [attr.aria-label]=\"text().bold\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBold().run()\"\r\n [ngClass]=\"this.editor.isActive('bold') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-bold fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"italic\"\r\n [attr.aria-label]=\"text().italic\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n [ngClass]=\"this.editor.isActive('italic') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-italic fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"strike\"\r\n [attr.aria-label]=\"text().strike\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n [ngClass]=\"this.editor.isActive('strike') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().list) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"bullet-list\"\r\n [attr.aria-label]=\"text().bulletedList\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n [ngClass]=\"this.editor.isActive('bullet-list') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-list fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"ordered-list\"\r\n [attr.aria-label]=\"text().orderedList\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n [ngClass]=\"this.editor.isActive('ordered-list') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-list-ol fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().alignment) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"left-align\"\r\n [attr.aria-label]=\"text().leftAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'left'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-left fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"center-align\"\r\n [attr.aria-label]=\"text().centerAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'center'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-center fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"right-align\"\r\n [attr.aria-label]=\"text().rightAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'right'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-right fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"justify-align\"\r\n [attr.aria-label]=\"text().justifyAlign\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n [ngClass]=\"this.editor.isActive({textAlign: 'justify'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-align-justify fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().divider) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().divider\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().setHorizontalRule().run()\"\r\n [ngClass]=\"this.editor.isActive('horizontalRule') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-divide fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().link) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"link\"\r\n [attr.aria-label]=\"text().setLink\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n (click)=\"openLinkDialog()\"\r\n [ngClass]=\"this.editor.isActive('link') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"fas fa-link fa-fw\"></i>\r\n </button>\r\n <button\r\n id=\"unlink\"\r\n [attr.aria-label]=\"text().removeLink\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n [disabled]=\"!this.editor.isActive('link')\"\r\n >\r\n <i class=\"fas fa-unlink fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n @if (capabilities().images) {\r\n <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n <button\r\n id=\"image\"\r\n [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n (click)=\"openImageDialog()\"\r\n [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n tooltipPosition=\"top\"\r\n [ngClass]=\"this.editor.isActive('image') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n >\r\n <i class=\"far fa-image fa-fw\"></i>\r\n </button>\r\n </div>\r\n }\r\n <div class=\"col v_center pad_5\">\r\n <button\r\n id=\"clear-format\"\r\n [attr.aria-label]=\"text().clearFormat\"\r\n class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n >\r\n <i class=\"fas fa-text-slash fa-fw\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\r\n <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n </div>\r\n</div>\r\n\r\n<particle-dialog\r\n [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n titleClass=\"header_color min_h40\"\r\n [object]=\"showDialog\"\r\n [allowClose]=\"false\"\r\n width=\"400px\"\r\n height=\"150px\"\r\n >\r\n <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n <input class=\"access input md\"\r\n [(ngModel)]=\"dialogLink\"\r\n [attr.aria-label]=\"text().url\"\r\n placeholder=\"eg. https://www.google.com\"\r\n (keyup.enter)=\"changeEditorLink('save')\"\r\n />\r\n </div>\r\n <div class=\"col min_h40 footer_color\">\r\n <div class=\"row center_right pad_right15 pad_left15\">\r\n <div class=\"col\">\r\n <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n <div class=\" pad_5\">{{text().cancel}}</div>\r\n </button>\r\n <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n [attr.aria-label]=\"text().update\"\r\n (click)=\"changeEditorLink('save')\"\r\n >\r\n <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n <div>{{text().update}}</div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"] }]
|
|
3965
3921
|
}], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hideControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideControls", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], editorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorClass", required: false }] }], readonly: [{
|
|
3966
3922
|
type: Input
|
|
3967
3923
|
}], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], capabilities: [{ type: i0.Input, args: [{ isSignal: true, alias: "capabilities", required: false }] }], textChanged: [{ type: i0.Output, args: ["textChanged"] }] } });
|
|
@@ -4003,10 +3959,10 @@ class OrdinalNumberPipe {
|
|
|
4003
3959
|
}
|
|
4004
3960
|
return stringifiedNumber + ordinalSuffix;
|
|
4005
3961
|
}
|
|
4006
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4007
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
3962
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: OrdinalNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
3963
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: OrdinalNumberPipe, isStandalone: true, name: "ordinalNumber" });
|
|
4008
3964
|
}
|
|
4009
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3965
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: OrdinalNumberPipe, decorators: [{
|
|
4010
3966
|
type: Pipe,
|
|
4011
3967
|
args: [{
|
|
4012
3968
|
name: 'ordinalNumber'
|
|
@@ -4456,10 +4412,10 @@ class CalendarComponent {
|
|
|
4456
4412
|
clear() {
|
|
4457
4413
|
this.selectedDate = null;
|
|
4458
4414
|
}
|
|
4459
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4460
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4415
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4416
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CalendarComponent, isStandalone: true, selector: "particle-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", closed: "closed" }, host: { listeners: { "window:keyup": "onKeyUp($event)", "window:click": "handleClick($event)" } }, viewQueries: [{ propertyName: "calendarWidgetDiv", first: true, predicate: ["calendarWidgetDiv"], descendants: true }, { propertyName: "yearSelect", first: true, predicate: ["yearSelect"], descendants: true }, { propertyName: "doneButton", first: true, predicate: ["doneButton"], descendants: true }, { propertyName: "calendarDates", predicate: ["calendarDate"], descendants: true }], ngImport: i0, template: "<div #calendarWidgetDiv\r\n cdkTrapFocus\r\n cdkTrapFocusAutoCapture\r\n class=\"particle_datepicker_options\"\r\n role=\"application\">\r\n <!-- month / year select -->\r\n <div class=\"content_color pad_5 pad_bot0\">\r\n <div class=\"row space_between\">\r\n <div class=\"col size_1 mar_5\">\r\n <select #yearSelect\r\n [ngModel]=\"_selectedYear | async\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text.selectAYear\">\r\n @for (year of validYearRange$ | async; track $index) {\r\n <option\r\n [value]=\"year\">\r\n {{year}}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n <div class=\"col size_2 mar_5\">\r\n <select #monthSelect\r\n [ngModel]=\"_selectedMonth | async\"\r\n (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text.selectAMonth\">\r\n <option value=\"0\">{{text.january}}</option>\r\n <option value=\"1\">{{text.february}}</option>\r\n <option value=\"2\">{{text.march}}</option>\r\n <option value=\"3\">{{text.april}}</option>\r\n <option value=\"4\">{{text.may}}</option>\r\n <option value=\"5\">{{text.june}}</option>\r\n <option value=\"6\">{{text.july}}</option>\r\n <option value=\"7\">{{text.august}}</option>\r\n <option value=\"8\">{{text.september}}</option>\r\n <option value=\"9\">{{text.october}}</option>\r\n <option value=\"10\">{{text.november}}</option>\r\n <option value=\"11\">{{text.december}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content_color pad_5\">\r\n <!-- weekdays -->\r\n <div class=\"mar_5 mar_bot10 ent_l2r_dir\">\r\n <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\r\n </div>\r\n <!-- days -->\r\n <div class=\"row wrap space_between\">\r\n @for (dayInMonth of fullMonth$ | async; track $index) {\r\n <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\r\n class=\"particle_datepicker_day\">\r\n @if (dayInMonth.selectable) {\r\n <button #calendarDate\r\n (click)=\"handleDateSelection(dayInMonth)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n [attr.data-date]=\"dayInMonth.date\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\r\n [ngClass]=\"{\r\n 'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\r\n 'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\r\n }\"\r\n class=\"access day_button\">\r\n {{dayInMonth.date}}\r\n </button>\r\n } @else {\r\n <div class=\"day_disabled\">\r\n {{dayInMonth.date}}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n @if (showControls()) {\r\n <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n <div class=\"row space_between\">\r\n @if (currentDate.selectable) {\r\n @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\r\n <button\r\n disabled\r\n class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n [attr.aria-label]=\"text.resetDateToToday\">\r\n <span class=\"text bold\">{{text.selectToday}}</span>\r\n </button>\r\n } @else {\r\n <button (keyup.escape)=\"closed.emit()\"\r\n (click)=\"selectToday()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n [attr.aria-label]=\"text.resetDateToToday\">\r\n <span class=\"text bold\">{{text.selectToday}}</span>\r\n </button>\r\n }\r\n }\r\n <button #doneButton\r\n (keyup.escape)=\"closed.emit()\"\r\n (click)=\"closed.emit()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text.saveDate\">\r\n <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".particle_datepicker_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);width:300px}.particle_datepicker_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.particle_datepicker_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent}.particle_datepicker_day.today{background-color:#8080801a}.particle_datepicker_day .day_button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;display:flex;flex:1;width:100%;align-items:center;justify-content:center;padding:0;border-radius:3px}.particle_datepicker_day .day_disabled{opacity:.3;display:flex;flex:1;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: OrdinalNumberPipe, name: "ordinalNumber" }] });
|
|
4461
4417
|
}
|
|
4462
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4418
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
4463
4419
|
type: Component,
|
|
4464
4420
|
args: [{ selector: 'particle-calendar', imports: [CdkTrapFocus, FormsModule, NgClass, AsyncPipe, OrdinalNumberPipe], template: "<div #calendarWidgetDiv\r\n cdkTrapFocus\r\n cdkTrapFocusAutoCapture\r\n class=\"particle_datepicker_options\"\r\n role=\"application\">\r\n <!-- month / year select -->\r\n <div class=\"content_color pad_5 pad_bot0\">\r\n <div class=\"row space_between\">\r\n <div class=\"col size_1 mar_5\">\r\n <select #yearSelect\r\n [ngModel]=\"_selectedYear | async\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text.selectAYear\">\r\n @for (year of validYearRange$ | async; track $index) {\r\n <option\r\n [value]=\"year\">\r\n {{year}}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n <div class=\"col size_2 mar_5\">\r\n <select #monthSelect\r\n [ngModel]=\"_selectedMonth | async\"\r\n (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text.selectAMonth\">\r\n <option value=\"0\">{{text.january}}</option>\r\n <option value=\"1\">{{text.february}}</option>\r\n <option value=\"2\">{{text.march}}</option>\r\n <option value=\"3\">{{text.april}}</option>\r\n <option value=\"4\">{{text.may}}</option>\r\n <option value=\"5\">{{text.june}}</option>\r\n <option value=\"6\">{{text.july}}</option>\r\n <option value=\"7\">{{text.august}}</option>\r\n <option value=\"8\">{{text.september}}</option>\r\n <option value=\"9\">{{text.october}}</option>\r\n <option value=\"10\">{{text.november}}</option>\r\n <option value=\"11\">{{text.december}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content_color pad_5\">\r\n <!-- weekdays -->\r\n <div class=\"mar_5 mar_bot10 ent_l2r_dir\">\r\n <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\r\n <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\r\n </div>\r\n <!-- days -->\r\n <div class=\"row wrap space_between\">\r\n @for (dayInMonth of fullMonth$ | async; track $index) {\r\n <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\r\n class=\"particle_datepicker_day\">\r\n @if (dayInMonth.selectable) {\r\n <button #calendarDate\r\n (click)=\"handleDateSelection(dayInMonth)\"\r\n (keyup.escape)=\"closed.emit()\"\r\n [attr.data-date]=\"dayInMonth.date\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\r\n [ngClass]=\"{\r\n 'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\r\n 'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\r\n }\"\r\n class=\"access day_button\">\r\n {{dayInMonth.date}}\r\n </button>\r\n } @else {\r\n <div class=\"day_disabled\">\r\n {{dayInMonth.date}}\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n @if (showControls()) {\r\n <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n <div class=\"row space_between\">\r\n @if (currentDate.selectable) {\r\n @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\r\n <button\r\n disabled\r\n class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n [attr.aria-label]=\"text.resetDateToToday\">\r\n <span class=\"text bold\">{{text.selectToday}}</span>\r\n </button>\r\n } @else {\r\n <button (keyup.escape)=\"closed.emit()\"\r\n (click)=\"selectToday()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n [attr.aria-label]=\"text.resetDateToToday\">\r\n <span class=\"text bold\">{{text.selectToday}}</span>\r\n </button>\r\n }\r\n }\r\n <button #doneButton\r\n (keyup.escape)=\"closed.emit()\"\r\n (click)=\"closed.emit()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text.saveDate\">\r\n <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".particle_datepicker_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);width:300px}.particle_datepicker_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.particle_datepicker_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent}.particle_datepicker_day.today{background-color:#8080801a}.particle_datepicker_day .day_button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;display:flex;flex:1;width:100%;align-items:center;justify-content:center;padding:0;border-radius:3px}.particle_datepicker_day .day_disabled{opacity:.3;display:flex;flex:1;align-items:center;justify-content:center}\n"] }]
|
|
4465
4421
|
}], ctorParameters: () => [], propDecorators: { calendarWidgetDiv: [{
|
|
@@ -4879,11 +4835,13 @@ class DatePickerComponent {
|
|
|
4879
4835
|
* @param event the click MouseEvent
|
|
4880
4836
|
*/
|
|
4881
4837
|
openCalendar(event) {
|
|
4882
|
-
if (
|
|
4883
|
-
event
|
|
4838
|
+
if (!this.disabled) {
|
|
4839
|
+
if (event) {
|
|
4840
|
+
event.stopImmediatePropagation();
|
|
4841
|
+
}
|
|
4842
|
+
this.showCalendar = { currentValue: this.value };
|
|
4843
|
+
this.calendarPopover.toggle(event);
|
|
4884
4844
|
}
|
|
4885
|
-
this.showCalendar = { currentValue: this.value };
|
|
4886
|
-
this.calendarPopover.toggle(event);
|
|
4887
4845
|
}
|
|
4888
4846
|
/**
|
|
4889
4847
|
* Hide calendar overlay and remove calendar from the DOM
|
|
@@ -4933,40 +4891,18 @@ class DatePickerComponent {
|
|
|
4933
4891
|
this.renderer.setStyle(this.calendarDiv.nativeElement, 'left', `${leftPosition}px`);
|
|
4934
4892
|
this.renderer.setStyle(this.calendarDiv.nativeElement, 'top', `${topPosition}px`);
|
|
4935
4893
|
}
|
|
4936
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4937
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4894
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4895
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DatePickerComponent, isStandalone: true, selector: "particle-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputClassList: { classPropertyName: "inputClassList", publicName: "inputClassList", isSignal: true, isRequired: false, transformFunction: null }, calendarButtonClassList: { classPropertyName: "calendarButtonClassList", publicName: "calendarButtonClassList", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputOnly: { classPropertyName: "inputOnly", publicName: "inputOnly", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { input: "input", dateSelected: "dateSelected" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
|
|
4938
4896
|
{
|
|
4939
4897
|
provide: NG_VALUE_ACCESSOR,
|
|
4940
4898
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
4941
4899
|
multi: true
|
|
4942
4900
|
}
|
|
4943
|
-
], viewQueries: [{ propertyName: "datePickerDiv", first: true, predicate: ["datePickerDiv"], descendants: true }, { propertyName: "calendarDiv", first: true, predicate: ["calendarDiv"], descendants: true }, { propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true }], ngImport: i0, template: "@if (!isMobile) {\r\n <div #datePickerDiv\r\n style=\"overflow: hidden;\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n >\r\n <div class=\"col size_1 height100 width100\">\r\n <input #dateInput\r\n [(ngModel)]=\"dateString\"\r\n [id]=\"inputId()\"\r\n (keydown)=\"filterInput($event)\"\r\n (input)=\"handleInput()\"\r\n (blur)=\"onTouched(); handleBlur()\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n maxlength=\"10\"\r\n [attr.aria-label]=\"ariaLabel() + ', ' + text.enterInFormat + ' mm/dd/yyyy'\"\r\n [disabled]=\"disabled\"\r\n [ngClass]=\"inputClassList() ? inputClassList() : 'ptl_input_text_size ptl_input_padding border_none'\"\r\n style=\"outline-offset: -2px;\"\r\n class=\"access height100 width100\"/>\r\n </div>\r\n @if (!inputOnly()) {\r\n <div class=\"col center_center min_w50 height100\">\r\n <button type=\"button\"\r\n (click)=\"openCalendar($event)\"\r\n [disabled]=\"disabled\"\r\n [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\"\r\n class=\"access btnset center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n [attr.aria-label]=\"text.openCalendar\" aria-haspopup=\"dialog\">\r\n <i class=\"fas fa-calendar-day\"></i>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n <!-- calendar widget -->\r\n <particle-popover [targetOverride]=\"dateInput\" #calendarPopover>\r\n <particle-calendar [value]=\"showCalendar ? showCalendar.currentValue : $any(null)\"\r\n [text]=\"$any(text.calendarText)\"\r\n [dateRange]=\"{ minDate: validSelectionInterval.start!, maxDate: validSelectionInterval.end! }\"\r\n (selected)=\"updateModel($event)\"\r\n (closed)=\"handleCalendarClose()\">\r\n </particle-calendar>\r\n </particle-popover>\r\n } @else {\r\n <div style=\"overflow: hidden;\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n [ngClass]=\"inputClassList() ? '' : 'ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius'\"\r\n >\r\n <div class=\"col size_1 height100 width100\">\r\n <input [(ngModel)]=\"mobileDateString\"\r\n [id]=\"inputId()\"\r\n (input)=\"handleMobileInput()\"\r\n (blur)=\"onTouched()\"\r\n type=\"date\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled\"\r\n [ngClass]=\"inputClassList() ? inputClassList() : 'ptl_input_text_size ptl_input_padding border_none'\"\r\n style=\"outline-offset: -2px;\"\r\n class=\"access height100 width100\"/>\r\n </div>\r\n </div>\r\n }\r\n\r\n", styles: [":host{width:100%}.particle_datepicker_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_datepicker{width:100%;min-width:150px;position:relative}.particle_datepicker:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_datepicker_input{position:absolute;inset:0;padding:inherit;width:calc(100% - 2.25em);-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;background-color:transparent;color:inherit}.particle_datepicker_input::-ms-expand{display:none}.particle_datepicker_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "component", type: CalendarComponent, selector: "particle-calendar", inputs: ["value", "dateRange", "text", "showControls"], outputs: ["selected", "closed"] }]
|
|
4944
|
-
trigger('openClose', [
|
|
4945
|
-
transition('void => open', [
|
|
4946
|
-
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
4947
|
-
animate('200ms ease', style({ transform: 'scaleY(1)', opacity: 1 }))
|
|
4948
|
-
]),
|
|
4949
|
-
transition('open => close', [
|
|
4950
|
-
style({ transform: 'scaleY(1)', opacity: 1 }),
|
|
4951
|
-
animate('200ms ease', style({ transform: 'scaleY(0.5)', opacity: 0 }))
|
|
4952
|
-
]),
|
|
4953
|
-
])
|
|
4954
|
-
] });
|
|
4901
|
+
], viewQueries: [{ propertyName: "datePickerDiv", first: true, predicate: ["datePickerDiv"], descendants: true }, { propertyName: "calendarDiv", first: true, predicate: ["calendarDiv"], descendants: true }, { propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true }], ngImport: i0, template: "@if (!isMobile) {\r\n <div #datePickerDiv\r\n style=\"overflow: hidden;\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n >\r\n <div class=\"col size_1 height100 width100\">\r\n <input #dateInput\r\n [(ngModel)]=\"dateString\"\r\n [id]=\"inputId()\"\r\n (keydown)=\"filterInput($event)\"\r\n (input)=\"handleInput()\"\r\n (blur)=\"onTouched(); handleBlur()\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder()\"\r\n maxlength=\"10\"\r\n [attr.aria-label]=\"ariaLabel() + ', ' + text.enterInFormat + ' mm/dd/yyyy'\"\r\n [disabled]=\"disabled\"\r\n [ngClass]=\"inputClassList() ? inputClassList() : 'ptl_input_text_size ptl_input_padding border_none'\"\r\n style=\"outline-offset: -2px;\"\r\n class=\"access height100 width100\"/>\r\n </div>\r\n @if (!inputOnly()) {\r\n <div class=\"col center_center min_w50 height100\">\r\n <button type=\"button\"\r\n (click)=\"openCalendar($event)\"\r\n [disabled]=\"disabled\"\r\n [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\"\r\n class=\"access btnset center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n [attr.aria-label]=\"text.openCalendar\" aria-haspopup=\"dialog\">\r\n <i class=\"fas fa-calendar-day\"></i>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n <!-- calendar widget -->\r\n <particle-popover [targetOverride]=\"dateInput\" #calendarPopover>\r\n <particle-calendar [value]=\"showCalendar ? showCalendar.currentValue : $any(null)\"\r\n [text]=\"$any(text.calendarText)\"\r\n [dateRange]=\"{ minDate: validSelectionInterval.start!, maxDate: validSelectionInterval.end! }\"\r\n (selected)=\"updateModel($event)\"\r\n (closed)=\"handleCalendarClose()\">\r\n </particle-calendar>\r\n </particle-popover>\r\n } @else {\r\n <div style=\"overflow: hidden;\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n [ngClass]=\"inputClassList() ? '' : 'ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius'\"\r\n >\r\n <div class=\"col size_1 height100 width100\">\r\n <input [(ngModel)]=\"mobileDateString\"\r\n [id]=\"inputId()\"\r\n (input)=\"handleMobileInput()\"\r\n (blur)=\"onTouched()\"\r\n type=\"date\"\r\n [placeholder]=\"placeholder()\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled\"\r\n [ngClass]=\"inputClassList() ? inputClassList() : 'ptl_input_text_size ptl_input_padding border_none'\"\r\n style=\"outline-offset: -2px;\"\r\n class=\"access height100 width100\"/>\r\n </div>\r\n </div>\r\n }\r\n\r\n", styles: [":host{width:100%}.particle_datepicker_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_datepicker{width:100%;min-width:150px;position:relative}.particle_datepicker:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_datepicker_input{position:absolute;inset:0;padding:inherit;width:calc(100% - 2.25em);-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;background-color:transparent;color:inherit}.particle_datepicker_input::-ms-expand{display:none}.particle_datepicker_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "component", type: CalendarComponent, selector: "particle-calendar", inputs: ["value", "dateRange", "text", "showControls"], outputs: ["selected", "closed"] }] });
|
|
4955
4902
|
}
|
|
4956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4903
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
4957
4904
|
type: Component,
|
|
4958
|
-
args: [{ selector: 'particle-date-picker',
|
|
4959
|
-
trigger('openClose', [
|
|
4960
|
-
transition('void => open', [
|
|
4961
|
-
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
4962
|
-
animate('200ms ease', style({ transform: 'scaleY(1)', opacity: 1 }))
|
|
4963
|
-
]),
|
|
4964
|
-
transition('open => close', [
|
|
4965
|
-
style({ transform: 'scaleY(1)', opacity: 1 }),
|
|
4966
|
-
animate('200ms ease', style({ transform: 'scaleY(0.5)', opacity: 0 }))
|
|
4967
|
-
]),
|
|
4968
|
-
])
|
|
4969
|
-
], providers: [
|
|
4905
|
+
args: [{ selector: 'particle-date-picker', providers: [
|
|
4970
4906
|
{
|
|
4971
4907
|
provide: NG_VALUE_ACCESSOR,
|
|
4972
4908
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
@@ -5190,8 +5126,8 @@ class DateRangePickerComponent {
|
|
|
5190
5126
|
clear() {
|
|
5191
5127
|
this.value = null;
|
|
5192
5128
|
}
|
|
5193
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5194
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5129
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5130
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DateRangePickerComponent, isStandalone: true, selector: "particle-date-range-picker", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, inputClassList: { classPropertyName: "inputClassList", publicName: "inputClassList", isSignal: true, isRequired: false, transformFunction: null }, calendarButtonClassList: { classPropertyName: "calendarButtonClassList", publicName: "calendarButtonClassList", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
5195
5131
|
{
|
|
5196
5132
|
provide: NG_VALUE_ACCESSOR,
|
|
5197
5133
|
useExisting: forwardRef(() => DateRangePickerComponent),
|
|
@@ -5199,7 +5135,7 @@ class DateRangePickerComponent {
|
|
|
5199
5135
|
}
|
|
5200
5136
|
], viewQueries: [{ propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true }, { propertyName: "beginCalendar", first: true, predicate: ["beginCalendar"], descendants: true }, { propertyName: "endCalendar", first: true, predicate: ["endCalendar"], descendants: true }], ngImport: i0, template: "<div style=\"cursor:default;overflow: hidden;\"\r\n [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n <button (click)=\"openCalendar($event)\"\r\n type=\"button\"\r\n aria-haspopup=\"dialog\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"(ariaLabel() ? ariaLabel() + ', ' : '') + text().openCalendar\"\r\n [attr.aria-expanded]=\"calendarPopover.visible\"\r\n [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\r\n class=\"access btnset width100 height100 center_center\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\r\n @if (valueObs$ | async; as value) {\r\n @if (value.start && value.end) {\r\n {{value.start | date: dateFormat()}} - {{value.end | date: dateFormat()}}\r\n } @else {\r\n <div class=\"ent_r2l_txt\">{{text().selectRange}}...</div>\r\n }\r\n }\r\n </div>\r\n <div class=\"col min_w50 height100 center_center\"\r\n [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\r\n <div class=\"width100 height100 center_center\">\r\n <i class=\"fas fa-calendar-days ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<particle-popover (closed)=\"checkState()\" #calendarPopover>\r\n <div class=\"width100 space_between\">\r\n <div>\r\n <div class=\"pad_10 pad_bot0\">\r\n <div>{{text().begin}}:</div>\r\n <div>\r\n <particle-date-picker\r\n inputClassList=\"access input sm content_color\"\r\n [inputOnly]=\"true\"\r\n [(ngModel)]=\"beginDate\"\r\n [dateRange]=\"dateRange\">\r\n </particle-date-picker>\r\n </div>\r\n </div>\r\n <particle-calendar [value]=\"beginDate\"\r\n [text]=\"$any(text().calendarText)\"\r\n [dateRange]=\"dateRange\"\r\n [showControls]=\"false\"\r\n class=\"hide_element\"\r\n (selected)=\"updateModel(true, $event)\"\r\n #beginCalendar>\r\n </particle-calendar>\r\n </div>\r\n <div>\r\n <div class=\"pad_10 pad_bot0\">\r\n <div>{{text().end}}:</div>\r\n <div>\r\n <particle-date-picker\r\n inputClassList=\"access input sm content_color\"\r\n [inputOnly]=\"true\"\r\n [dateRange]=\"endDateRange\"\r\n [(ngModel)]=\"endDate\">\r\n </particle-date-picker>\r\n </div>\r\n </div>\r\n <particle-calendar [value]=\"endDate\"\r\n [text]=\"$any(text().calendarText)\"\r\n [dateRange]=\"endDateRange\"\r\n [showControls]=\"false\"\r\n class=\"hide_element\"\r\n (selected)=\"updateModel(false, $event)\"\r\n #endCalendar>\r\n </particle-calendar>\r\n <div class=\"mobile_only pad_bot10\"></div>\r\n </div>\r\n </div>\r\n <div class=\"bg_overlay brdr hr mar_5 mar_top0\"></div>\r\n <div class=\"row space_between\">\r\n <button (click)=\"clear()\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text().clear\">\r\n <i class=\"fas fa-x mar_right5\"></i><span class=\"text bold\">{{text().clear}}</span>\r\n </button>\r\n\r\n <button (keyup.escape)=\"calendarPopover.close()\"\r\n (click)=\"calendarPopover.close()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text().done\">\r\n <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text().done}}</span>\r\n </button>\r\n </div>\r\n</particle-popover>\r\n\r\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "component", type: DatePickerComponent, selector: "particle-date-picker", inputs: ["value", "disabled", "dateRange", "inputId", "ariaLabel", "inputClassList", "calendarButtonClassList", "closeOnSelect", "placeholder", "inputOnly", "text"], outputs: ["input", "dateSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CalendarComponent, selector: "particle-calendar", inputs: ["value", "dateRange", "text", "showControls"], outputs: ["selected", "closed"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
5201
5137
|
}
|
|
5202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DateRangePickerComponent, decorators: [{
|
|
5203
5139
|
type: Component,
|
|
5204
5140
|
args: [{ selector: 'particle-date-range-picker', providers: [
|
|
5205
5141
|
{
|
|
@@ -5251,12 +5187,16 @@ class DropdownComponent {
|
|
|
5251
5187
|
this._allOptions = DropdownComponent.getAllOptions(this._options.value);
|
|
5252
5188
|
this.setSelectionIndex();
|
|
5253
5189
|
}
|
|
5254
|
-
|
|
5255
|
-
* Dependency injection site
|
|
5256
|
-
* @param renderer the Angular renderer
|
|
5257
|
-
* @param changeDetectorRef reference to the Angular change detector
|
|
5258
|
-
*/
|
|
5190
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
5259
5191
|
constructor() {
|
|
5192
|
+
effect(() => {
|
|
5193
|
+
if (this.isOpen()) {
|
|
5194
|
+
this.onAnimationStart();
|
|
5195
|
+
}
|
|
5196
|
+
else {
|
|
5197
|
+
setTimeout(() => this.render = false, 300);
|
|
5198
|
+
}
|
|
5199
|
+
});
|
|
5260
5200
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
5261
5201
|
let result = '';
|
|
5262
5202
|
for (let i = 0; i < 10; i++) {
|
|
@@ -5649,6 +5589,7 @@ class DropdownComponent {
|
|
|
5649
5589
|
if (!this.disabled()) {
|
|
5650
5590
|
this.render = true;
|
|
5651
5591
|
this.opened = true;
|
|
5592
|
+
setTimeout(() => this.toggleOpen(), 0);
|
|
5652
5593
|
}
|
|
5653
5594
|
}
|
|
5654
5595
|
/**
|
|
@@ -5656,40 +5597,29 @@ class DropdownComponent {
|
|
|
5656
5597
|
*/
|
|
5657
5598
|
closeDropdown() {
|
|
5658
5599
|
this.opened = false;
|
|
5600
|
+
this.toggleOpen();
|
|
5659
5601
|
}
|
|
5660
5602
|
/**
|
|
5661
5603
|
* Position and resize dropdown list on animation start if toState is open
|
|
5662
|
-
* @param event the Angular AnimationEvent
|
|
5663
|
-
*/
|
|
5664
|
-
onAnimationStart(event) {
|
|
5665
|
-
if (event.toState === 'open') {
|
|
5666
|
-
this.resizeDropdownList();
|
|
5667
|
-
this.setSelectionIndex();
|
|
5668
|
-
if (this.selectionIndex !== null) {
|
|
5669
|
-
setTimeout(() => {
|
|
5670
|
-
this.dropdownOptions.toArray()[this.selectionIndex]
|
|
5671
|
-
.nativeElement
|
|
5672
|
-
.focus();
|
|
5673
|
-
});
|
|
5674
|
-
}
|
|
5675
|
-
/*
|
|
5676
|
-
The height of the dropdown list is zero at the point where the above code executes,
|
|
5677
|
-
this is a workaround to align the list after its height is known to avoid a frame
|
|
5678
|
-
or two of the list at origin
|
|
5679
|
-
*/
|
|
5680
|
-
this.renderer.setStyle(this.dropdownList.nativeElement, 'top', '-999px');
|
|
5681
|
-
this.renderer.setStyle(this.dropdownList.nativeElement, 'left', '-999px');
|
|
5682
|
-
setTimeout(() => this.positionDropdownList());
|
|
5683
|
-
}
|
|
5684
|
-
}
|
|
5685
|
-
/**
|
|
5686
|
-
* Stop rendering dropdown list on animation done if toState is close
|
|
5687
|
-
* @param event the Angular AnimationEvent
|
|
5688
5604
|
*/
|
|
5689
|
-
|
|
5690
|
-
|
|
5691
|
-
|
|
5605
|
+
onAnimationStart() {
|
|
5606
|
+
this.resizeDropdownList();
|
|
5607
|
+
this.setSelectionIndex();
|
|
5608
|
+
if (this.selectionIndex !== null) {
|
|
5609
|
+
setTimeout(() => {
|
|
5610
|
+
this.dropdownOptions.toArray()[this.selectionIndex]
|
|
5611
|
+
.nativeElement
|
|
5612
|
+
.focus();
|
|
5613
|
+
});
|
|
5692
5614
|
}
|
|
5615
|
+
/*
|
|
5616
|
+
The height of the dropdown list is zero at the point where the above code executes,
|
|
5617
|
+
this is a workaround to align the list after its height is known to avoid a frame
|
|
5618
|
+
or two of the list at origin
|
|
5619
|
+
*/
|
|
5620
|
+
this.renderer.setStyle(this.dropdownList.nativeElement, 'top', '-999px');
|
|
5621
|
+
this.renderer.setStyle(this.dropdownList.nativeElement, 'left', '-999px');
|
|
5622
|
+
setTimeout(() => this.positionDropdownList());
|
|
5693
5623
|
}
|
|
5694
5624
|
/**
|
|
5695
5625
|
* Focus on the selected dropdown option on dropdown open
|
|
@@ -5842,46 +5772,27 @@ class DropdownComponent {
|
|
|
5842
5772
|
}
|
|
5843
5773
|
return previousOption;
|
|
5844
5774
|
}
|
|
5845
|
-
|
|
5846
|
-
|
|
5775
|
+
toggleOpen() {
|
|
5776
|
+
this.isOpen.update((isOpen) => !isOpen);
|
|
5777
|
+
}
|
|
5778
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5779
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DropdownComponent, isStandalone: true, selector: "particle-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTooltipEnabled: { classPropertyName: "collapsedButtonTooltipEnabled", publicName: "collapsedButtonTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownBoxMinWidth: { classPropertyName: "dropdownBoxMinWidth", publicName: "dropdownBoxMinWidth", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize($event)", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
|
|
5847
5780
|
{
|
|
5848
5781
|
provide: NG_VALUE_ACCESSOR,
|
|
5849
5782
|
useExisting: forwardRef(() => DropdownComponent),
|
|
5850
5783
|
multi: true
|
|
5851
5784
|
}
|
|
5852
|
-
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList() ? classList() : ''\">\r\n @if (tooltipData$ | async; as tooltipData) {\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n [attr.aria-controls]=\"(inputId() ?? dropdownId) + '_listbox'\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"inputId() ?? dropdownId\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"text().placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center\"\r\n [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n }\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\" [id]=\"(inputId() ?? dropdownId) + '_listbox'\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"inputId() ?? dropdownId\"\r\n [disabled]=\"disabled()\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
|
|
5853
|
-
trigger('openClose', [
|
|
5854
|
-
transition('close => open', [
|
|
5855
|
-
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
5856
|
-
animate('200ms ease', style({ transform: 'scaleY(1)', opacity: 1 }))
|
|
5857
|
-
]),
|
|
5858
|
-
transition('open => close', [
|
|
5859
|
-
style({ transform: 'scaleY(1)', opacity: 1 }),
|
|
5860
|
-
animate('200ms ease', style({ transform: 'scaleY(0.5)', opacity: 0 }))
|
|
5861
|
-
]),
|
|
5862
|
-
])
|
|
5863
|
-
] });
|
|
5785
|
+
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "@if (!isMobile) {\r\n <div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList() ? classList() : ''\"\r\n >\r\n @if (tooltipData$ | async; as tooltipData) {\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n [attr.aria-controls]=\"(inputId() ?? dropdownId) + '_listbox'\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"inputId() ?? dropdownId\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"text().placeholder\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n >\r\n @if (collapsedButtonTemplate()) {\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n }\r\n\r\n @if (!collapsedButtonTemplate()) {\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n @if (selectedDataContext$ | async; as dataContext) {\r\n @if (!!template) {\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n } @else {\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n }\r\n } @else {\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n }\r\n </div>\r\n <div class=\"col min_w50 height100 center_center\"\r\n [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\"\r\n >\r\n <div class=\"particle_dropdown_container\"\r\n [class.open]=\"isOpen()\"\r\n #dropdownList\r\n >\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\" [id]=\"(inputId() ?? dropdownId) + '_listbox'\">\r\n @if (_options | async; as options) {\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n @if (!!template) {\r\n @for (option of options; track $index; let i = $index;) {\r\n <!-- OPTION GROUP -->\r\n @if (option.type === 'group') {\r\n <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n @for (groupOption of option.options; track $index; let j = $index;) {\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n role=\"option\"\r\n tabindex=\"0\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n }\r\n } @else if (option.type === 'option') {\r\n <!-- SINGULAR OPTION -->\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <!-- NO CUSTOM TEMPLATE -->\r\n @for (option of options; track $index; let i = $index;) {\r\n <!-- OPTION GROUP -->\r\n @if (option.type === 'group') {\r\n <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n @for (groupOption of option.options; track $index; let j = $index;) {\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\"\r\n tabindex=\"0\"\r\n >\r\n {{groupOption.label}}\r\n </button>\r\n }\r\n } @else if (option.type === 'option') {\r\n <!-- SINGULAR OPTION -->\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\"\r\n tabindex=\"0\"\r\n >\r\n {{option.label}}\r\n </button>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-content select=\"template\"></ng-content>\r\n}\r\n\r\n@if (isMobile) {\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"inputId() ?? dropdownId\"\r\n [disabled]=\"disabled()\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\"\r\n >\r\n @if (_options | async; as options) {\r\n @for (option of options; track $index) {\r\n @if (option.type === 'group') {\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n @for (groupOption of option.options; track $index) {\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n }\r\n </optgroup>\r\n } @else if (option.type === 'option') {\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n }\r\n }\r\n }\r\n </select>\r\n}\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}.particle_dropdown_container{position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity}.particle_dropdown_container.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
|
|
5864
5786
|
}
|
|
5865
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5787
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
5866
5788
|
type: Component,
|
|
5867
|
-
args: [{ selector: 'particle-dropdown',
|
|
5868
|
-
trigger('openClose', [
|
|
5869
|
-
transition('close => open', [
|
|
5870
|
-
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
5871
|
-
animate('200ms ease', style({ transform: 'scaleY(1)', opacity: 1 }))
|
|
5872
|
-
]),
|
|
5873
|
-
transition('open => close', [
|
|
5874
|
-
style({ transform: 'scaleY(1)', opacity: 1 }),
|
|
5875
|
-
animate('200ms ease', style({ transform: 'scaleY(0.5)', opacity: 0 }))
|
|
5876
|
-
]),
|
|
5877
|
-
])
|
|
5878
|
-
], providers: [
|
|
5789
|
+
args: [{ selector: 'particle-dropdown', providers: [
|
|
5879
5790
|
{
|
|
5880
5791
|
provide: NG_VALUE_ACCESSOR,
|
|
5881
5792
|
useExisting: forwardRef(() => DropdownComponent),
|
|
5882
5793
|
multi: true
|
|
5883
5794
|
}
|
|
5884
|
-
], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, FormsModule, AsyncPipe, TooltipDirective], template: "<ng-container *ngIf=\"!isMobile else mobile\">\r\n<div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList() ? classList() : ''\">\r\n @if (tooltipData$ | async; as tooltipData) {\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n [attr.aria-controls]=\"(inputId() ?? dropdownId) + '_listbox'\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"inputId() ?? dropdownId\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"text().placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n <ng-container *ngIf=\"selectedDataContext$ | async as dataContext else placeholderTemplate\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center\"\r\n [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n }\r\n</div>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\">\r\n <div #dropdownList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\" [id]=\"(inputId() ?? dropdownId) + '_listbox'\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{groupOption.label}}\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n {{option.label}}\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n</ng-container>\r\n\r\n<ng-template #mobile>\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"inputId() ?? dropdownId\"\r\n [disabled]=\"disabled()\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\">\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <ng-container *ngFor=\"let option of options\">\r\n <ng-container *ngIf=\"option.type === 'group'\">\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n <ng-container *ngFor=\"let groupOption of option.options\">\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n </ng-container>\r\n </optgroup>\r\n </ng-container>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </select>\r\n</ng-template>\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}\n/*!* option hover/focus state *!*/\n"] }]
|
|
5795
|
+
], imports: [NgClass, NgTemplateOutlet, FormsModule, AsyncPipe, TooltipDirective], template: "@if (!isMobile) {\r\n <div #dropdown\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList() ? classList() : ''\"\r\n >\r\n @if (tooltipData$ | async; as tooltipData) {\r\n <button #dropdownButton\r\n role=\"combobox\"\r\n [attr.aria-controls]=\"(inputId() ?? dropdownId) + '_listbox'\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openDropdown($event)\"\r\n (focus)=\"setSelectionIndex()\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"inputId() ?? dropdownId\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"text().placeholder\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n >\r\n @if (collapsedButtonTemplate()) {\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n }\r\n\r\n @if (!collapsedButtonTemplate()) {\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n @if (selectedDataContext$ | async; as dataContext) {\r\n @if (!!template) {\r\n <div class=\"row v_center text_ellipsis min_w0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n </div>\r\n } @else {\r\n <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n }\r\n } @else {\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n }\r\n </div>\r\n <div class=\"col min_w50 height100 center_center\"\r\n [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n }\r\n </button>\r\n }\r\n </div>\r\n\r\n <div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_dropdown_overlay\"\r\n >\r\n <div class=\"particle_dropdown_container\"\r\n [class.open]=\"isOpen()\"\r\n #dropdownList\r\n >\r\n <div class=\"particle_dropdown_options content_color ent_r2l_dir\" [id]=\"(inputId() ?? dropdownId) + '_listbox'\">\r\n @if (_options | async; as options) {\r\n <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n <!-- CUSTOM TEMPLATE -->\r\n @if (!!template) {\r\n @for (option of options; track $index; let i = $index;) {\r\n <!-- OPTION GROUP -->\r\n @if (option.type === 'group') {\r\n <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n @for (groupOption of option.options; track $index; let j = $index;) {\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n role=\"option\"\r\n tabindex=\"0\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n }\r\n } @else if (option.type === 'option') {\r\n <!-- SINGULAR OPTION -->\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n type=\"button\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n <!-- NO CUSTOM TEMPLATE -->\r\n @for (option of options; track $index; let i = $index;) {\r\n <!-- OPTION GROUP -->\r\n @if (option.type === 'group') {\r\n <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n @for (groupOption of option.options; track $index; let j = $index;) {\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\"\r\n tabindex=\"0\"\r\n >\r\n {{groupOption.label}}\r\n </button>\r\n }\r\n } @else if (option.type === 'option') {\r\n <!-- SINGULAR OPTION -->\r\n <button #dropdownOption\r\n (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled\"\r\n class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n type=\"button\"\r\n role=\"option\"\r\n tabindex=\"0\"\r\n >\r\n {{option.label}}\r\n </button>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-content select=\"template\"></ng-content>\r\n}\r\n\r\n@if (isMobile) {\r\n <select\r\n class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [id]=\"inputId() ?? dropdownId\"\r\n [disabled]=\"disabled()\"\r\n (ngModelChange)=\"onModelChangeMobile($event)\"\r\n [(ngModel)]=\"value\"\r\n >\r\n @if (_options | async; as options) {\r\n @for (option of options; track $index) {\r\n @if (option.type === 'group') {\r\n <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n @for (groupOption of option.options; track $index) {\r\n <option\r\n [disabled]=\"groupOption.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"groupOption.value\"\r\n >\r\n {{groupOption.label}}\r\n </option>\r\n }\r\n </optgroup>\r\n } @else if (option.type === 'option') {\r\n <option\r\n [disabled]=\"option.disabled\"\r\n class=\"input_bg_color min_h50 pad_10\"\r\n [value]=\"option.value\"\r\n >\r\n {{option.label}}\r\n </option>\r\n }\r\n }\r\n }\r\n </select>\r\n}\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}.particle_dropdown_container{position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity}.particle_dropdown_container.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity}\n/*!* option hover/focus state *!*/\n"] }]
|
|
5885
5796
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
5886
5797
|
type: Input
|
|
5887
5798
|
}], options: [{
|
|
@@ -6160,12 +6071,16 @@ class MultiSelectComponent {
|
|
|
6160
6071
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
6161
6072
|
onTouched = () => {
|
|
6162
6073
|
};
|
|
6163
|
-
|
|
6164
|
-
* Dependency injection site
|
|
6165
|
-
* @param renderer the Angular renderer
|
|
6166
|
-
* @param changeDetectorRef reference to the Angular change detector
|
|
6167
|
-
*/
|
|
6074
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
6168
6075
|
constructor() {
|
|
6076
|
+
effect(() => {
|
|
6077
|
+
if (this.isOpen()) {
|
|
6078
|
+
this.onAnimationStart();
|
|
6079
|
+
}
|
|
6080
|
+
else {
|
|
6081
|
+
setTimeout(() => this.render = false, 300);
|
|
6082
|
+
}
|
|
6083
|
+
});
|
|
6169
6084
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
6170
6085
|
let result = '';
|
|
6171
6086
|
for (let i = 0; i < 10; i++) {
|
|
@@ -6312,6 +6227,7 @@ class MultiSelectComponent {
|
|
|
6312
6227
|
if (!this.disabled()) {
|
|
6313
6228
|
this.render = true;
|
|
6314
6229
|
this.opened = true;
|
|
6230
|
+
setTimeout(() => this.toggleOpen(), 0);
|
|
6315
6231
|
}
|
|
6316
6232
|
}
|
|
6317
6233
|
/**
|
|
@@ -6320,39 +6236,28 @@ class MultiSelectComponent {
|
|
|
6320
6236
|
closeMultiSelect() {
|
|
6321
6237
|
this.opened = false;
|
|
6322
6238
|
this.selectionIndex = null;
|
|
6239
|
+
this.toggleOpen();
|
|
6323
6240
|
}
|
|
6324
6241
|
/**
|
|
6325
6242
|
* Position and resize the multi-select list on animation start if toState is open
|
|
6326
|
-
* @param event the Angular AnimationEvent
|
|
6327
6243
|
*/
|
|
6328
|
-
onAnimationStart(
|
|
6329
|
-
|
|
6330
|
-
|
|
6331
|
-
|
|
6332
|
-
|
|
6333
|
-
|
|
6334
|
-
|
|
6335
|
-
|
|
6336
|
-
|
|
6337
|
-
|
|
6338
|
-
|
|
6339
|
-
|
|
6340
|
-
|
|
6341
|
-
|
|
6342
|
-
|
|
6343
|
-
|
|
6344
|
-
|
|
6345
|
-
setTimeout(() => this.positionMultiSelectList());
|
|
6346
|
-
}
|
|
6347
|
-
}
|
|
6348
|
-
/**
|
|
6349
|
-
* Stop rendering the multi-select list on animation done if toState is close
|
|
6350
|
-
* @param event the Angular AnimationEvent
|
|
6351
|
-
*/
|
|
6352
|
-
onAnimationDone(event) {
|
|
6353
|
-
if (event.toState === 'close') {
|
|
6354
|
-
this.render = false;
|
|
6355
|
-
}
|
|
6244
|
+
onAnimationStart() {
|
|
6245
|
+
this.resizeMultiSelectList();
|
|
6246
|
+
this.selectionIndex = null;
|
|
6247
|
+
setTimeout(() => {
|
|
6248
|
+
const option = this.getNextOption();
|
|
6249
|
+
if (option) {
|
|
6250
|
+
option.focus();
|
|
6251
|
+
}
|
|
6252
|
+
});
|
|
6253
|
+
/*
|
|
6254
|
+
The height of the multi-select list is zero at the point where the above code executes,
|
|
6255
|
+
this is a workaround to align the list after its height is known to avoid a frame
|
|
6256
|
+
or two of the list at origin
|
|
6257
|
+
*/
|
|
6258
|
+
this.renderer.setStyle(this.multiSelectList.nativeElement, 'top', '-999px');
|
|
6259
|
+
this.renderer.setStyle(this.multiSelectList.nativeElement, 'left', '-999px');
|
|
6260
|
+
setTimeout(() => this.positionMultiSelectList());
|
|
6356
6261
|
}
|
|
6357
6262
|
/**
|
|
6358
6263
|
* If the input value is already in the value array, remove it. Otherwise add it
|
|
@@ -6481,46 +6386,27 @@ class MultiSelectComponent {
|
|
|
6481
6386
|
}
|
|
6482
6387
|
return previousOption;
|
|
6483
6388
|
}
|
|
6484
|
-
|
|
6485
|
-
|
|
6389
|
+
toggleOpen() {
|
|
6390
|
+
this.isOpen.update((isOpen) => !isOpen);
|
|
6391
|
+
}
|
|
6392
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6393
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: MultiSelectComponent, isStandalone: true, selector: "particle-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, entryClassList: { classPropertyName: "entryClassList", publicName: "entryClassList", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxExpandedEntries: { classPropertyName: "maxExpandedEntries", publicName: "maxExpandedEntries", isSignal: true, isRequired: false, transformFunction: null }, expandedAsGrid: { classPropertyName: "expandedAsGrid", publicName: "expandedAsGrid", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize()", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
|
|
6486
6394
|
{
|
|
6487
6395
|
provide: NG_VALUE_ACCESSOR,
|
|
6488
6396
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
6489
6397
|
multi: true
|
|
6490
6398
|
}
|
|
6491
|
-
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries()) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList() ? classList() : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n [attr.aria-controls]=\"(inputId() ?? multiSelectId) + '_listbox'\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"inputId() ?? multiSelectId\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"text().placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center\"\r\n [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text().placeholder\"\r\n [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n [id]=\"(inputId() ?? multiSelectId) + (type() === 'input' ? '_listbox' : '')\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled()\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled()\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled()\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled()\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
|
|
6492
|
-
trigger('openClose', [
|
|
6493
|
-
transition('close => open', [
|
|
6494
|
-
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
6495
|
-
animate('200ms ease', style({ transform: 'scaleY(1)', opacity: 1 }))
|
|
6496
|
-
]),
|
|
6497
|
-
transition('open => close', [
|
|
6498
|
-
style({ transform: 'scaleY(1)', opacity: 1 }),
|
|
6499
|
-
animate('200ms ease', style({ transform: 'scaleY(0.5)', opacity: 0 }))
|
|
6500
|
-
]),
|
|
6501
|
-
])
|
|
6502
|
-
] });
|
|
6399
|
+
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "@if (type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries())) {\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList() ? classList() : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n [attr.aria-controls]=\"(inputId() ?? multiSelectId) + '_listbox'\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"inputId() ?? multiSelectId\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"text().placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n @if (collapsedButtonTemplate()) {\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n }\r\n\r\n @if (!collapsedButtonTemplate()) {\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n @if (selectionCount$ | async; as selectionCount) {\r\n @if (selectionCount > 1) {\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n </div>\r\n } @else {\r\n @if (dataContextMap$ | async; as dataContextMap) {\r\n @if (_internalValue | async; as internalValues) {\r\n <div class=\"col overflow_hide\">\r\n @if (!!template) {\r\n @for (value of internalValues; track $index) {\r\n <div class=\"mar_tb5 pad_tb2\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n @for (value of internalValues; track $index) {\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n }\r\n } @else {\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n }\r\n </div>\r\n <div class=\"col min_w50 height100 center_center\"\r\n [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n }\r\n </button>\r\n </div>\r\n} @else {\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n}\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div class=\"particle_multiselect_container\"\r\n [class.open]=\"isOpen()\"\r\n #multiSelectList\r\n >\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n @if (_options | async; as options) {\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text().placeholder\"\r\n [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n [id]=\"(inputId() ?? multiSelectId) + (type() === 'input' ? '_listbox' : '')\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n @if (selectionValueMap$ | async; as selectionValueMap) {\r\n @if (!!template) {\r\n @for (option of options; track $index; let i = $index;) {\r\n <!-- OPTION GROUP -->\r\n @if (option.type === 'group') {\r\n <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n @for (groupOption of option.options; track $index; let j = $index;) {\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled()\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n @if (selectionValueMap['' + groupOption.value]) {\r\n <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n }\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n }\r\n } @else if (option.type === 'option') {\r\n <!-- SINGULAR OPTION -->\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled()\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n role=\"option\" type=\"button\" tabindex=\"0\"\r\n >\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (selectionValueMap['' + option.value]) {\r\n <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n }\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n @for (option of options; track $index; let i = $index;) {\r\n <!-- OPTION GROUP -->\r\n @if (option.type === 'group') {\r\n <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n @for (groupOption of option.options; track $index; let j = $index;) {\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled()\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\" role=\"option\" tabindex=\"0\"\r\n >\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (selectionValueMap['' + groupOption.value]) {\r\n <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n }\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n }\r\n } @else if (option.type === 'option') {\r\n <!-- SINGULAR OPTION -->\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled()\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\"\r\n role=\"option\"\r\n tabindex=\"0\"\r\n >\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (selectionValueMap['' + option.value]) {\r\n <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n }\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n }\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}.particle_multiselect_container{position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity}.particle_multiselect_container.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
|
|
6503
6400
|
}
|
|
6504
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
6505
6402
|
type: Component,
|
|
6506
|
-
args: [{ selector: 'particle-multi-select',
|
|
6507
|
-
trigger('openClose', [
|
|
6508
|
-
transition('close => open', [
|
|
6509
|
-
style({ transform: 'scaleY(0.5)', opacity: 0 }),
|
|
6510
|
-
animate('200ms ease', style({ transform: 'scaleY(1)', opacity: 1 }))
|
|
6511
|
-
]),
|
|
6512
|
-
transition('open => close', [
|
|
6513
|
-
style({ transform: 'scaleY(1)', opacity: 1 }),
|
|
6514
|
-
animate('200ms ease', style({ transform: 'scaleY(0.5)', opacity: 0 }))
|
|
6515
|
-
]),
|
|
6516
|
-
])
|
|
6517
|
-
], providers: [
|
|
6403
|
+
args: [{ selector: 'particle-multi-select', providers: [
|
|
6518
6404
|
{
|
|
6519
6405
|
provide: NG_VALUE_ACCESSOR,
|
|
6520
6406
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
6521
6407
|
multi: true
|
|
6522
6408
|
}
|
|
6523
|
-
], imports: [NgIf, NgClass, NgTemplateOutlet, NgFor, AsyncPipe], template: "<ng-container *ngIf=\"type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries()) else expanded\">\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList() ? classList() : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n [attr.aria-controls]=\"(inputId() ?? multiSelectId) + '_listbox'\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"inputId() ?? multiSelectId\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"text().placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <ng-container *ngIf=\"collapsedButtonTemplate()\">\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!collapsedButtonTemplate()\">\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n <ng-container *ngIf=\"selectionCount$ | async as selectionCount else placeholderTemplate\">\r\n <ng-container *ngIf=\"selectionCount > 1 else singleEntry\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template #singleEntry>\r\n <ng-container *ngIf=\"dataContextMap$ | async as dataContextMap\">\r\n <div class=\"col overflow_hide\">\r\n <ng-container *ngIf=\"!!template else noCustomTemplate\">\r\n <div class=\"mar_tb5 pad_tb2\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #noCustomTemplate>\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\"\r\n *ngFor=\"let value of _internalValue | async\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n </ng-template>\r\n </div>\r\n <div class=\"col min_w50 height100 center_center\"\r\n [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n</ng-container>\r\n\r\n<ng-template #expanded>\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n</ng-template>\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div #multiSelectList\r\n [@openClose]=\"opened ? 'open' : 'close'\"\r\n (@openClose.start)=\"onAnimationStart($event)\"\r\n (@openClose.done)=\"onAnimationDone($event)\"\r\n class=\"position_absolute\">\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n <ng-container *ngIf=\"_options | async as options\">\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text().placeholder\"\r\n [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n [id]=\"(inputId() ?? multiSelectId) + (type() === 'input' ? '_listbox' : '')\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n <ng-container *ngIf=\"!!template else defaultOptionTemplate\">\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled()\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled()\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n role=\"option\" type=\"button\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n <!-- NO CUSTOM TEMPLATE -->\r\n <ng-template #defaultOptionTemplate>\r\n <ng-container *ngIf=\"selectionValueMap$ | async as selectionValueMap\">\r\n <ng-container *ngFor=\"let option of options; index as i\">\r\n <!-- OPTION GROUP -->\r\n <ng-container *ngIf=\"option.type === 'group' else nonGroupOption\">\r\n <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n <ng-container *ngFor=\"let groupOption of option.options; index as j\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled()\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + groupOption.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-container>\r\n <!-- SINGULAR OPTION -->\r\n <ng-template #nonGroupOption>\r\n <ng-container *ngIf=\"option.type === 'option'\">\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled()\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\" role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n <div *ngIf=\"selectionValueMap['' + option.value]\"><i class=\"fas fa-check\"></i></div>\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n </ng-container>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}\n/*!* option hover/focus state *!*/\n"] }]
|
|
6409
|
+
], imports: [NgClass, NgTemplateOutlet, AsyncPipe], template: "@if (type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries())) {\r\n <div #multiSelect\r\n class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n style=\"cursor:default;overflow:hidden;\"\r\n [ngClass]=\"classList() ? classList() : ''\">\r\n <button #multiSelectButton\r\n role=\"combobox\"\r\n [attr.aria-controls]=\"(inputId() ?? multiSelectId) + '_listbox'\"\r\n aria-haspopup=\"listbox\"\r\n type=\"button\"\r\n (click)=\"openMultiSelect($event)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"inputId() ?? multiSelectId\"\r\n [disabled]=\"disabled()\"\r\n [attr.aria-label]=\"text().placeholder\"\r\n [attr.aria-expanded]=\"opened\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n class=\"access btnset clear center_center height100 width100\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n @if (collapsedButtonTemplate()) {\r\n <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n }\r\n\r\n @if (!collapsedButtonTemplate()) {\r\n <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n @if (selectionCount$ | async; as selectionCount) {\r\n @if (selectionCount > 1) {\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n </div>\r\n } @else {\r\n @if (dataContextMap$ | async; as dataContextMap) {\r\n @if (_internalValue | async; as internalValues) {\r\n <div class=\"col overflow_hide\">\r\n @if (!!template) {\r\n @for (value of internalValues; track $index) {\r\n <div class=\"mar_tb5 pad_tb2\">\r\n <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n </div>\r\n </div>\r\n }\r\n } @else {\r\n @for (value of internalValues; track $index) {\r\n <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\">\r\n {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n }\r\n } @else {\r\n <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n }\r\n </div>\r\n <div class=\"col min_w50 height100 center_center\"\r\n [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n <div class=\"center_center height100 width100\">\r\n <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n }\r\n </button>\r\n </div>\r\n} @else {\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n}\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n [attr.aria-hidden]=\"!render\"\r\n class=\"particle_multiselect_overlay\">\r\n <div class=\"particle_multiselect_container\"\r\n [class.open]=\"isOpen()\"\r\n #multiSelectList\r\n >\r\n <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n @if (_options | async; as options) {\r\n <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n role=\"listbox\"\r\n tabindex=\"-1\"\r\n [attr.aria-label]=\"text().placeholder\"\r\n [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n [id]=\"(inputId() ?? multiSelectId) + (type() === 'input' ? '_listbox' : '')\"\r\n >\r\n <!-- CUSTOM TEMPLATE -->\r\n @if (selectionValueMap$ | async; as selectionValueMap) {\r\n @if (!!template) {\r\n @for (option of options; track $index; let i = $index;) {\r\n <!-- OPTION GROUP -->\r\n @if (option.type === 'group') {\r\n <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n @for (groupOption of option.options; track $index; let j = $index;) {\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled()\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\"\r\n role=\"option\" tabindex=\"0\">\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\">\r\n @if (selectionValueMap['' + groupOption.value]) {\r\n <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n }\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n </button>\r\n }\r\n } @else if (option.type === 'option') {\r\n <!-- SINGULAR OPTION -->\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled()\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n role=\"option\" type=\"button\" tabindex=\"0\"\r\n >\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (selectionValueMap['' + option.value]) {\r\n <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n }\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n </button>\r\n }\r\n }\r\n } @else {\r\n @for (option of options; track $index; let i = $index;) {\r\n <!-- OPTION GROUP -->\r\n @if (option.type === 'group') {\r\n <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n @for (groupOption of option.options; track $index; let j = $index;) {\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n [attr.aria-label]=\"groupOption.label\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n [attr.data-value]=\"groupOption.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"groupOption.disabled || disabled()\"\r\n [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\" role=\"option\" tabindex=\"0\"\r\n >\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (selectionValueMap['' + groupOption.value]) {\r\n <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n }\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n </button>\r\n }\r\n } @else if (option.type === 'option') {\r\n <!-- SINGULAR OPTION -->\r\n <button #multiSelectOption\r\n (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n [attr.data-value]=\"option.value\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n [disabled]=\"option.disabled || disabled()\"\r\n [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n class=\"ptl_input_text_size\"\r\n type=\"button\"\r\n role=\"option\"\r\n tabindex=\"0\"\r\n >\r\n <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n aria-hidden=\"true\"\r\n >\r\n @if (selectionValueMap['' + option.value]) {\r\n <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n }\r\n </div>\r\n <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n </button>\r\n }\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}.particle_multiselect_container{position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity}.particle_multiselect_container.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity}\n/*!* option hover/focus state *!*/\n"] }]
|
|
6524
6410
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
6525
6411
|
type: Input
|
|
6526
6412
|
}], options: [{
|
|
@@ -6621,10 +6507,10 @@ class NotificationService {
|
|
|
6621
6507
|
setNotificationLife(milliseconds) {
|
|
6622
6508
|
this.notificationLife = milliseconds;
|
|
6623
6509
|
}
|
|
6624
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6625
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
6510
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
6511
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationService, providedIn: 'root' });
|
|
6626
6512
|
}
|
|
6627
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6513
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationService, decorators: [{
|
|
6628
6514
|
type: Injectable,
|
|
6629
6515
|
args: [{
|
|
6630
6516
|
providedIn: 'root'
|
|
@@ -6668,74 +6554,12 @@ class NotificationComponent {
|
|
|
6668
6554
|
deleteNotification(id) {
|
|
6669
6555
|
this.notificationService.deleteNotification(id);
|
|
6670
6556
|
}
|
|
6671
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6672
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6673
|
-
// nice stagger effect when showing existing elements
|
|
6674
|
-
trigger('list', [
|
|
6675
|
-
transition(':enter', [
|
|
6676
|
-
// child animation selector + stagger
|
|
6677
|
-
query('@items', stagger(300, animateChild()), { optional: true })
|
|
6678
|
-
]),
|
|
6679
|
-
]),
|
|
6680
|
-
trigger('items', [
|
|
6681
|
-
// cubic-bezier for a tiny bouncing feel
|
|
6682
|
-
transition(':enter', [
|
|
6683
|
-
style({ transform: 'scale(0.5)', opacity: 0 }),
|
|
6684
|
-
animate('0.65s cubic-bezier(.8,-0.6,0.2,1.5)', style({ transform: 'scale(1)', opacity: 1 }))
|
|
6685
|
-
]),
|
|
6686
|
-
transition(':leave', [
|
|
6687
|
-
style({ transform: 'scale(1)', opacity: 1, height: '*' }),
|
|
6688
|
-
animate('0.65s cubic-bezier(.8,-0.6,0.2,1.5)', style({
|
|
6689
|
-
transform: 'scale(0.5)',
|
|
6690
|
-
opacity: 0,
|
|
6691
|
-
height: '0px',
|
|
6692
|
-
marginLeft: '0px',
|
|
6693
|
-
marginTop: '0px',
|
|
6694
|
-
marginRight: '0px',
|
|
6695
|
-
marginBottom: '0px',
|
|
6696
|
-
paddingLeft: '0px',
|
|
6697
|
-
paddingTop: '0px',
|
|
6698
|
-
paddingRight: '0px',
|
|
6699
|
-
paddingBottom: '0px'
|
|
6700
|
-
}))
|
|
6701
|
-
]),
|
|
6702
|
-
])
|
|
6703
|
-
] });
|
|
6557
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6558
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NotificationComponent, isStandalone: true, selector: "particle-notification", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- toast -->\r\n<div class=\"particle_notification_overlay ent_r2l_row\">\r\n <!-- spacer -->\r\n <!-- container -->\r\n <div class=\"row min_w280 pad_right5\" style=\"max-width:400px;\">\r\n <div class=\"row_block width100 notification_list\">\r\n <!-- item -->\r\n @for (notification of notifications$ | async; track notification.id; let i = $index;) {\r\n <div class=\"row ent_r2l_row v_center content_color pad_10 mar_10 shadow ptl_brdr_radius item\"\r\n animate.leave=\"notification_leave\" style=\"--index: {{i}}\"\r\n >\r\n <div class=\"col pad_5\">\r\n <div class=\"circle_36px\" [ngClass]=\"severityColorMap[notification.severity]\">\r\n <i class=\"fas {{severityIconMap[notification.severity]}} fa-lg ent_r2l_ico\"></i>\r\n </div>\r\n </div>\r\n <div class=\"col size_1 pad_5 ent_r2l_dir rc_gap\">\r\n <div class=\"col ptl_brdr_color border_right\"></div>\r\n <div class=\"col\">\r\n <div class=\"row_block width100\">\r\n <div class=\"text lg text_left text_wrap bold ent_r2l_txt\">{{notification.summary}}</div>\r\n <div class=\"text md text_left text_wrap ent_r2l_txt\">{{notification.detail}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col\" style=\"pointer-events: all;\">\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().dismiss\"\r\n (click)=\"deleteNotification($any(notification.id))\"\r\n >\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n <i class=\"fas fa-times\"></i>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".particle_notification_overlay{display:flex;position:fixed;justify-content:flex-end;inset:0;z-index:var(--z-notification);pointer-events:none}.notification_list{list-style:none;padding:0;margin:0}.notification_list .item{transform:scale(1);opacity:1;transition-property:opacity,transform;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5);transition-duration:.65s;transition-delay:calc(.3s * var(--index))}@starting-style{.notification_list .item{opacity:0;transform:scale(.5)}}.notification_leave{animation:slideOut .65s ease-in forwards}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
|
|
6704
6559
|
}
|
|
6705
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6560
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationComponent, decorators: [{
|
|
6706
6561
|
type: Component,
|
|
6707
|
-
args: [{ selector: 'particle-notification',
|
|
6708
|
-
// nice stagger effect when showing existing elements
|
|
6709
|
-
trigger('list', [
|
|
6710
|
-
transition(':enter', [
|
|
6711
|
-
// child animation selector + stagger
|
|
6712
|
-
query('@items', stagger(300, animateChild()), { optional: true })
|
|
6713
|
-
]),
|
|
6714
|
-
]),
|
|
6715
|
-
trigger('items', [
|
|
6716
|
-
// cubic-bezier for a tiny bouncing feel
|
|
6717
|
-
transition(':enter', [
|
|
6718
|
-
style({ transform: 'scale(0.5)', opacity: 0 }),
|
|
6719
|
-
animate('0.65s cubic-bezier(.8,-0.6,0.2,1.5)', style({ transform: 'scale(1)', opacity: 1 }))
|
|
6720
|
-
]),
|
|
6721
|
-
transition(':leave', [
|
|
6722
|
-
style({ transform: 'scale(1)', opacity: 1, height: '*' }),
|
|
6723
|
-
animate('0.65s cubic-bezier(.8,-0.6,0.2,1.5)', style({
|
|
6724
|
-
transform: 'scale(0.5)',
|
|
6725
|
-
opacity: 0,
|
|
6726
|
-
height: '0px',
|
|
6727
|
-
marginLeft: '0px',
|
|
6728
|
-
marginTop: '0px',
|
|
6729
|
-
marginRight: '0px',
|
|
6730
|
-
marginBottom: '0px',
|
|
6731
|
-
paddingLeft: '0px',
|
|
6732
|
-
paddingTop: '0px',
|
|
6733
|
-
paddingRight: '0px',
|
|
6734
|
-
paddingBottom: '0px'
|
|
6735
|
-
}))
|
|
6736
|
-
]),
|
|
6737
|
-
])
|
|
6738
|
-
], imports: [NgClass, AsyncPipe], template: "<!-- TODO: figure out why closing toast that is between others causes jumpy animation -->\r\n\r\n<!-- toast -->\r\n<div class=\"particle_notification_overlay ent_r2l_row\">\r\n <!-- spacer -->\r\n <!-- container -->\r\n <div class=\"row min_w280 pad_right5\" style=\"max-width:400px;\">\r\n <div @list class=\"row_block width100\">\r\n <!-- item -->\r\n @for (notification of notifications$ | async; track notification) {\r\n <div @items class=\"row ent_r2l_row v_center content_color pad_10 mar_10 shadow ptl_brdr_radius\">\r\n <div class=\"col pad_5\">\r\n <div class=\"circle_36px\" [ngClass]=\"severityColorMap[notification.severity]\">\r\n <i class=\"fas {{severityIconMap[notification.severity]}} fa-lg ent_r2l_ico\"></i>\r\n </div>\r\n </div>\r\n <div class=\"col size_1 pad_5 ent_r2l_dir rc_gap\">\r\n <div class=\"col ptl_brdr_color border_right\"></div>\r\n <div class=\"col\">\r\n <div class=\"row_block width100\">\r\n <div class=\"text lg text_left text_wrap bold ent_r2l_txt\">{{notification.summary}}</div>\r\n <div class=\"text md text_left text_wrap ent_r2l_txt\">{{notification.detail}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col\" style=\"pointer-events: all;\">\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().dismiss\"\r\n (click)=\"deleteNotification($any(notification.id))\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n <i class=\"fas fa-times\"></i>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".particle_notification_overlay{display:flex;position:fixed;justify-content:flex-end;inset:0;z-index:var(--z-notification);pointer-events:none}\n"] }]
|
|
6562
|
+
args: [{ selector: 'particle-notification', imports: [NgClass, AsyncPipe], template: "<!-- toast -->\r\n<div class=\"particle_notification_overlay ent_r2l_row\">\r\n <!-- spacer -->\r\n <!-- container -->\r\n <div class=\"row min_w280 pad_right5\" style=\"max-width:400px;\">\r\n <div class=\"row_block width100 notification_list\">\r\n <!-- item -->\r\n @for (notification of notifications$ | async; track notification.id; let i = $index;) {\r\n <div class=\"row ent_r2l_row v_center content_color pad_10 mar_10 shadow ptl_brdr_radius item\"\r\n animate.leave=\"notification_leave\" style=\"--index: {{i}}\"\r\n >\r\n <div class=\"col pad_5\">\r\n <div class=\"circle_36px\" [ngClass]=\"severityColorMap[notification.severity]\">\r\n <i class=\"fas {{severityIconMap[notification.severity]}} fa-lg ent_r2l_ico\"></i>\r\n </div>\r\n </div>\r\n <div class=\"col size_1 pad_5 ent_r2l_dir rc_gap\">\r\n <div class=\"col ptl_brdr_color border_right\"></div>\r\n <div class=\"col\">\r\n <div class=\"row_block width100\">\r\n <div class=\"text lg text_left text_wrap bold ent_r2l_txt\">{{notification.summary}}</div>\r\n <div class=\"text md text_left text_wrap ent_r2l_txt\">{{notification.detail}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col\" style=\"pointer-events: all;\">\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().dismiss\"\r\n (click)=\"deleteNotification($any(notification.id))\"\r\n >\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n <i class=\"fas fa-times\"></i>\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".particle_notification_overlay{display:flex;position:fixed;justify-content:flex-end;inset:0;z-index:var(--z-notification);pointer-events:none}.notification_list{list-style:none;padding:0;margin:0}.notification_list .item{transform:scale(1);opacity:1;transition-property:opacity,transform;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5);transition-duration:.65s;transition-delay:calc(.3s * var(--index))}@starting-style{.notification_list .item{opacity:0;transform:scale(.5)}}.notification_leave{animation:slideOut .65s ease-in forwards}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}\n"] }]
|
|
6739
6563
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
|
|
6740
6564
|
|
|
6741
6565
|
/**
|
|
@@ -7162,8 +6986,8 @@ class WeekPickerComponent {
|
|
|
7162
6986
|
const valueBeforeUpdate = this.value;
|
|
7163
6987
|
if (!this.disabled) {
|
|
7164
6988
|
this.value = value;
|
|
7165
|
-
if (!isEqual(valueBeforeUpdate
|
|
7166
|
-
!isEqual(valueBeforeUpdate
|
|
6989
|
+
if (!isEqual(valueBeforeUpdate?.start, this.value.start) &&
|
|
6990
|
+
!isEqual(valueBeforeUpdate?.end, this.value.end)) {
|
|
7167
6991
|
this.onChange(this.value);
|
|
7168
6992
|
this.weekSelected.emit(this.value);
|
|
7169
6993
|
}
|
|
@@ -7198,16 +7022,16 @@ class WeekPickerComponent {
|
|
|
7198
7022
|
this.currentDate.selectable = isWithinInterval(startOfCurrentWeek, selectionInterval) &&
|
|
7199
7023
|
isWithinInterval(endOfCurrentWeek, selectionInterval);
|
|
7200
7024
|
}
|
|
7201
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7202
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7025
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WeekPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7026
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: WeekPickerComponent, isStandalone: true, selector: "particle-week-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, inputClassList: { classPropertyName: "inputClassList", publicName: "inputClassList", isSignal: true, isRequired: false, transformFunction: null }, calendarButtonClassList: { classPropertyName: "calendarButtonClassList", publicName: "calendarButtonClassList", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { weekSelected: "weekSelected" }, providers: [
|
|
7203
7027
|
{
|
|
7204
7028
|
provide: NG_VALUE_ACCESSOR,
|
|
7205
7029
|
useExisting: forwardRef(() => WeekPickerComponent),
|
|
7206
7030
|
multi: true
|
|
7207
7031
|
}
|
|
7208
|
-
], viewQueries: [{ propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true }], ngImport: i0, template: "<div style=\"cursor:default;overflow: hidden;\"\r\n [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n <button (click)=\"openCalendar($event)\"\r\n aria-haspopup=\"dialog\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"ariaLabel() + ', ' + text().openCalendar\"\r\n [attr.aria-expanded]=\"calendarPopover.visible\"\r\n [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\r\n type=\"button\"\r\n class=\"access btnset width100 height100 center_center\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\r\n @if (_internalValue | async; as internalValue) {\r\n {{internalValue.start | date: dateFormat()}} - {{internalValue.end | date: dateFormat()}}\r\n } @else {\r\n <div class=\"ent_r2l_txt\">{{text().selectWeek}}...</div>\r\n }\r\n </div>\r\n <div class=\"col min_w50 height100 center_center\"\r\n [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\r\n <div class=\"width100 height100 center_center\">\r\n <i class=\"fas fa-calendar-week ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n\r\n<!-- week picker input\r\n<div class=\"wwp_container\" style=\"cursor:default;\"\r\n [ngClass]=\"inputClassList\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n\r\n <button (click)=\"openCalendar($event)\"\r\n aria-haspopup=\"dialog\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"ariaLabel + ', ' + text.openCalendar\"\r\n [attr.aria-expanded]=\"calendarPopover.visible\"\r\n class=\"access content_color wwp_input\">\r\n <ng-container *ngIf=\"_internalValue | async as internalValue else placeholderTemplate\">\r\n {{internalValue.start | date: dateFormat}} - {{internalValue.end | date: dateFormat}}\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"wwp_placeholder\">{{text.selectWeek}}...</div>\r\n </ng-template>\r\n </button>\r\n <div class=\"wwp_button\" [ngClass]=\"calendarButtonClassList\">\r\n <i class=\"fas fa-calendar-week\"></i>\r\n </div>\r\n</div>\r\n-->\r\n<!-- TODO: instead of offset 1, attach to wwp_container -->\r\n<!-- calendar widget -->\r\n<particle-popover [offset]=\"1\" #calendarPopover>\r\n <!-- month / year select -->\r\n <div class=\"wwp_options\">\r\n <div class=\"content_color pad_5 pad_bot0\">\r\n <div class=\"row space_between\">\r\n <div class=\"col size_1 mar_5\">\r\n <select #yearSelect\r\n [ngModel]=\"_selectedYear | async\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text().selectYear\">\r\n @for (year of validYearRange$ | async; track year) {\r\n <option\r\n [value]=\"year\">\r\n {{year}}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n <div class=\"col size_2 mar_5\">\r\n <select #monthSelect\r\n [ngModel]=\"_selectedMonth | async\"\r\n (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text().selectMonth\">\r\n <option value=\"0\">{{text().january}}</option>\r\n <option value=\"1\">{{text().february}}</option>\r\n <option value=\"2\">{{text().march}}</option>\r\n <option value=\"3\">{{text().april}}</option>\r\n <option value=\"4\">{{text().may}}</option>\r\n <option value=\"5\">{{text().june}}</option>\r\n <option value=\"6\">{{text().july}}</option>\r\n <option value=\"7\">{{text().august}}</option>\r\n <option value=\"8\">{{text().september}}</option>\r\n <option value=\"9\">{{text().october}}</option>\r\n <option value=\"10\">{{text().november}}</option>\r\n <option value=\"11\">{{text().december}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content_color pad_5\">\r\n <!-- weekdays -->\r\n <div class=\"mar_5 mar_bot10\">\r\n <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n <div class=\"wwp_weekday\">{{text().sundayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().mondayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().tuesdayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().wednesdayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().thursdayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().fridayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().saturdayAbbr}}</div>\r\n </div>\r\n <!-- days -->\r\n @if (fullMonth$ | async; as fullMonth) {\r\n @for (week of fullMonth; track week) {\r\n <div class=\"wwp_week\"\r\n [ngClass]=\"{ 'currentWeek': week.week === currentDate.week && week.year === currentDate.year }\">\r\n <button (click)=\"onWeekSelect(week.week, week.selectable)\"\r\n [disabled]=\"!week.selectable\"\r\n [ngClass]=\"((selectedWeek$ | async) === week.week) && ((selectedYear$ | async) === week.year)\r\n ? 'ok_button_color'\r\n : 'bg_overlay_rev brdr hov_bg'\"\r\n class=\"access wwp_week_btn\">\r\n @for (date of week.dates; track date) {\r\n <div class=\"wwp_day\">\r\n {{date}}\r\n </div>\r\n }\r\n </button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n <div class=\"row space_between\">\r\n @if (canSelectLastWeek$ | async) {\r\n <button\r\n (click)=\"selectLastWeek()\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text().selectLastWeek\">\r\n <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n </button>\r\n } @else {\r\n <button disabled\r\n class=\"access btn sm mar_5\"\r\n [attr.aria-label]=\"text().selectLastWeek\">\r\n <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n </button>\r\n }\r\n @if (currentDate.selectable) {\r\n @if (((selectedWeek$ | async) === currentDate.week) && ((selectedYear$ | async) === currentDate.year)) {\r\n <button\r\n disabled\r\n class=\"access btn sm mar_5\"\r\n [attr.aria-label]=\"text().resetWeekSelection\">\r\n <i class=\"fas fa-undo-alt\"></i>\r\n </button>\r\n } @else {\r\n <button (click)=\"selectCurrentWeek()\"\r\n particleTooltip=\"Reset to Current Week\"\r\n class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n [attr.aria-label]=\"text().resetWeekSelection\">\r\n <i class=\"fas fa-undo-alt\"></i>\r\n </button>\r\n }\r\n }\r\n @if (canSelectNextWeek$ | async) {\r\n <button\r\n (click)=\"selectNextWeek()\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text().selectNextWeek\">\r\n <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n </button>\r\n } @else {\r\n <button disabled\r\n class=\"access btn sm mar_5\"\r\n [attr.aria-label]=\"text().selectNextWeek\">\r\n <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</particle-popover>\r\n", styles: [":host{width:100%}.wwp_container{width:100%;min-width:150px;position:relative}.wwp_container:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.wwp_input{position:absolute;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wwp_input:not([disabled]){cursor:pointer}.wwp_input::-ms-expand{display:none}.wwp_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px;-webkit-user-select:none;user-select:none;pointer-events:none;display:flex;align-items:center;justify-content:center}.wwp_button>svg{transition:all .2s ease}.wwp_container:hover .wwp_button>svg{transform:scale(1.2)}.wwp_placeholder{opacity:.5;display:inline}.wwp_options{border-radius:3px;line-height:1.5;overflow:hidden;font-weight:400;z-index:var(--z-overlay);width:300px;background:#fff0;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.wwp_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.wwp_week.currentWeek{border-radius:3px;background-color:#8080801a}.wwp_week_btn{display:flex;align-items:center;width:100%;border:none;padding:0;cursor:pointer}.wwp_week_btn:disabled{cursor:default}.wwp_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
7032
|
+
], viewQueries: [{ propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true }], ngImport: i0, template: "<div style=\"cursor:default;overflow: hidden;\"\r\n [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n <button (click)=\"openCalendar($event)\"\r\n aria-haspopup=\"dialog\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"ariaLabel() + ', ' + text().openCalendar\"\r\n [attr.aria-expanded]=\"calendarPopover.visible\"\r\n [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\r\n type=\"button\"\r\n class=\"access btnset width100 height100 center_center\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\r\n @if (_internalValue | async; as internalValue) {\r\n {{internalValue.start | date: dateFormat()}} - {{internalValue.end | date: dateFormat()}}\r\n } @else {\r\n <div class=\"ent_r2l_txt\">{{text().selectWeek}}...</div>\r\n }\r\n </div>\r\n <div class=\"col min_w50 height100 center_center\"\r\n [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\r\n <div class=\"width100 height100 center_center\">\r\n <i class=\"fas fa-calendar-week ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<!-- TODO: instead of offset 1, attach to wwp_container -->\r\n<!-- calendar widget -->\r\n<particle-popover [offset]=\"1\" #calendarPopover>\r\n <!-- month / year select -->\r\n <div class=\"wwp_options\">\r\n <div class=\"content_color pad_5 pad_bot0\">\r\n <div class=\"row space_between\">\r\n <div class=\"col size_1 mar_5\">\r\n <select #yearSelect\r\n [ngModel]=\"_selectedYear | async\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text().selectYear\">\r\n @for (year of validYearRange$ | async; track $index) {\r\n <option\r\n [value]=\"year\">\r\n {{year}}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n <div class=\"col size_2 mar_5\">\r\n <select #monthSelect\r\n [ngModel]=\"_selectedMonth | async\"\r\n (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text().selectMonth\">\r\n <option value=\"0\">{{text().january}}</option>\r\n <option value=\"1\">{{text().february}}</option>\r\n <option value=\"2\">{{text().march}}</option>\r\n <option value=\"3\">{{text().april}}</option>\r\n <option value=\"4\">{{text().may}}</option>\r\n <option value=\"5\">{{text().june}}</option>\r\n <option value=\"6\">{{text().july}}</option>\r\n <option value=\"7\">{{text().august}}</option>\r\n <option value=\"8\">{{text().september}}</option>\r\n <option value=\"9\">{{text().october}}</option>\r\n <option value=\"10\">{{text().november}}</option>\r\n <option value=\"11\">{{text().december}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content_color pad_5\">\r\n <!-- weekdays -->\r\n <div class=\"mar_5 mar_bot10\">\r\n <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n <div class=\"wwp_weekday\">{{text().sundayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().mondayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().tuesdayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().wednesdayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().thursdayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().fridayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().saturdayAbbr}}</div>\r\n </div>\r\n <!-- days -->\r\n @if (fullMonth$ | async; as fullMonth) {\r\n @for (week of fullMonth; track $index) {\r\n <div class=\"wwp_week\"\r\n [ngClass]=\"{ 'currentWeek': week.week === currentDate.week && week.year === currentDate.year }\">\r\n <button (click)=\"onWeekSelect(week.week, week.selectable)\"\r\n [disabled]=\"!week.selectable\"\r\n [ngClass]=\"((selectedWeek$ | async) === week.week) && ((selectedYear$ | async) === week.year)\r\n ? 'ok_button_color'\r\n : 'bg_overlay_rev brdr hov_bg'\"\r\n class=\"access wwp_week_btn\">\r\n @for (date of week.dates; track $index) {\r\n <div class=\"wwp_day\">\r\n {{date}}\r\n </div>\r\n }\r\n </button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n <div class=\"row space_between\">\r\n @if (canSelectLastWeek$ | async) {\r\n <button\r\n (click)=\"selectLastWeek()\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text().selectLastWeek\">\r\n <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n </button>\r\n } @else {\r\n <button disabled\r\n class=\"access btn sm mar_5\"\r\n [attr.aria-label]=\"text().selectLastWeek\">\r\n <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n </button>\r\n }\r\n @if (currentDate.selectable) {\r\n @if (((selectedWeek$ | async) === currentDate.week) && ((selectedYear$ | async) === currentDate.year)) {\r\n <button\r\n disabled\r\n class=\"access btn sm mar_5\"\r\n [attr.aria-label]=\"text().resetWeekSelection\">\r\n <i class=\"fas fa-undo-alt\"></i>\r\n </button>\r\n } @else {\r\n <button (click)=\"selectCurrentWeek()\"\r\n particleTooltip=\"Reset to Current Week\"\r\n class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n [attr.aria-label]=\"text().resetWeekSelection\">\r\n <i class=\"fas fa-undo-alt\"></i>\r\n </button>\r\n }\r\n }\r\n @if (canSelectNextWeek$ | async) {\r\n <button\r\n (click)=\"selectNextWeek()\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text().selectNextWeek\">\r\n <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n </button>\r\n } @else {\r\n <button disabled\r\n class=\"access btn sm mar_5\"\r\n [attr.aria-label]=\"text().selectNextWeek\">\r\n <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</particle-popover>\r\n", styles: [":host{width:100%}.wwp_container{width:100%;min-width:150px;position:relative}.wwp_container:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.wwp_input{position:absolute;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wwp_input:not([disabled]){cursor:pointer}.wwp_input::-ms-expand{display:none}.wwp_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px;-webkit-user-select:none;user-select:none;pointer-events:none;display:flex;align-items:center;justify-content:center}.wwp_button>svg{transition:all .2s ease}.wwp_container:hover .wwp_button>svg{transform:scale(1.2)}.wwp_placeholder{opacity:.5;display:inline}.wwp_options{border-radius:3px;line-height:1.5;overflow:hidden;font-weight:400;z-index:var(--z-overlay);width:300px;background:#fff0;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.wwp_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.wwp_week.currentWeek{border-radius:3px;background-color:#8080801a}.wwp_week_btn{display:flex;align-items:center;width:100%;border:none;padding:0;cursor:pointer}.wwp_week_btn:disabled{cursor:default}.wwp_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
7209
7033
|
}
|
|
7210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7034
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WeekPickerComponent, decorators: [{
|
|
7211
7035
|
type: Component,
|
|
7212
7036
|
args: [{ selector: 'particle-week-picker', providers: [
|
|
7213
7037
|
{
|
|
@@ -7215,7 +7039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7215
7039
|
useExisting: forwardRef(() => WeekPickerComponent),
|
|
7216
7040
|
multi: true
|
|
7217
7041
|
}
|
|
7218
|
-
], imports: [NgClass, PopoverComponent, FormsModule, TooltipDirective, AsyncPipe, DatePipe], template: "<div style=\"cursor:default;overflow: hidden;\"\r\n [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n <button (click)=\"openCalendar($event)\"\r\n aria-haspopup=\"dialog\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"ariaLabel() + ', ' + text().openCalendar\"\r\n [attr.aria-expanded]=\"calendarPopover.visible\"\r\n [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\r\n type=\"button\"\r\n class=\"access btnset width100 height100 center_center\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\r\n @if (_internalValue | async; as internalValue) {\r\n {{internalValue.start | date: dateFormat()}} - {{internalValue.end | date: dateFormat()}}\r\n } @else {\r\n <div class=\"ent_r2l_txt\">{{text().selectWeek}}...</div>\r\n }\r\n </div>\r\n <div class=\"col min_w50 height100 center_center\"\r\n [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\r\n <div class=\"width100 height100 center_center\">\r\n <i class=\"fas fa-calendar-week ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n\r\n<!-- week picker input\r\n<div class=\"wwp_container\" style=\"cursor:default;\"\r\n [ngClass]=\"inputClassList\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n\r\n <button (click)=\"openCalendar($event)\"\r\n aria-haspopup=\"dialog\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"ariaLabel + ', ' + text.openCalendar\"\r\n [attr.aria-expanded]=\"calendarPopover.visible\"\r\n class=\"access content_color wwp_input\">\r\n <ng-container *ngIf=\"_internalValue | async as internalValue else placeholderTemplate\">\r\n {{internalValue.start | date: dateFormat}} - {{internalValue.end | date: dateFormat}}\r\n </ng-container>\r\n <ng-template #placeholderTemplate>\r\n <div class=\"wwp_placeholder\">{{text.selectWeek}}...</div>\r\n </ng-template>\r\n </button>\r\n <div class=\"wwp_button\" [ngClass]=\"calendarButtonClassList\">\r\n <i class=\"fas fa-calendar-week\"></i>\r\n </div>\r\n</div>\r\n-->\r\n<!-- TODO: instead of offset 1, attach to wwp_container -->\r\n<!-- calendar widget -->\r\n<particle-popover [offset]=\"1\" #calendarPopover>\r\n <!-- month / year select -->\r\n <div class=\"wwp_options\">\r\n <div class=\"content_color pad_5 pad_bot0\">\r\n <div class=\"row space_between\">\r\n <div class=\"col size_1 mar_5\">\r\n <select #yearSelect\r\n [ngModel]=\"_selectedYear | async\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text().selectYear\">\r\n @for (year of validYearRange$ | async; track year) {\r\n <option\r\n [value]=\"year\">\r\n {{year}}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n <div class=\"col size_2 mar_5\">\r\n <select #monthSelect\r\n [ngModel]=\"_selectedMonth | async\"\r\n (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text().selectMonth\">\r\n <option value=\"0\">{{text().january}}</option>\r\n <option value=\"1\">{{text().february}}</option>\r\n <option value=\"2\">{{text().march}}</option>\r\n <option value=\"3\">{{text().april}}</option>\r\n <option value=\"4\">{{text().may}}</option>\r\n <option value=\"5\">{{text().june}}</option>\r\n <option value=\"6\">{{text().july}}</option>\r\n <option value=\"7\">{{text().august}}</option>\r\n <option value=\"8\">{{text().september}}</option>\r\n <option value=\"9\">{{text().october}}</option>\r\n <option value=\"10\">{{text().november}}</option>\r\n <option value=\"11\">{{text().december}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content_color pad_5\">\r\n <!-- weekdays -->\r\n <div class=\"mar_5 mar_bot10\">\r\n <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n <div class=\"wwp_weekday\">{{text().sundayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().mondayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().tuesdayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().wednesdayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().thursdayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().fridayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().saturdayAbbr}}</div>\r\n </div>\r\n <!-- days -->\r\n @if (fullMonth$ | async; as fullMonth) {\r\n @for (week of fullMonth; track week) {\r\n <div class=\"wwp_week\"\r\n [ngClass]=\"{ 'currentWeek': week.week === currentDate.week && week.year === currentDate.year }\">\r\n <button (click)=\"onWeekSelect(week.week, week.selectable)\"\r\n [disabled]=\"!week.selectable\"\r\n [ngClass]=\"((selectedWeek$ | async) === week.week) && ((selectedYear$ | async) === week.year)\r\n ? 'ok_button_color'\r\n : 'bg_overlay_rev brdr hov_bg'\"\r\n class=\"access wwp_week_btn\">\r\n @for (date of week.dates; track date) {\r\n <div class=\"wwp_day\">\r\n {{date}}\r\n </div>\r\n }\r\n </button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n <div class=\"row space_between\">\r\n @if (canSelectLastWeek$ | async) {\r\n <button\r\n (click)=\"selectLastWeek()\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text().selectLastWeek\">\r\n <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n </button>\r\n } @else {\r\n <button disabled\r\n class=\"access btn sm mar_5\"\r\n [attr.aria-label]=\"text().selectLastWeek\">\r\n <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n </button>\r\n }\r\n @if (currentDate.selectable) {\r\n @if (((selectedWeek$ | async) === currentDate.week) && ((selectedYear$ | async) === currentDate.year)) {\r\n <button\r\n disabled\r\n class=\"access btn sm mar_5\"\r\n [attr.aria-label]=\"text().resetWeekSelection\">\r\n <i class=\"fas fa-undo-alt\"></i>\r\n </button>\r\n } @else {\r\n <button (click)=\"selectCurrentWeek()\"\r\n particleTooltip=\"Reset to Current Week\"\r\n class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n [attr.aria-label]=\"text().resetWeekSelection\">\r\n <i class=\"fas fa-undo-alt\"></i>\r\n </button>\r\n }\r\n }\r\n @if (canSelectNextWeek$ | async) {\r\n <button\r\n (click)=\"selectNextWeek()\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text().selectNextWeek\">\r\n <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n </button>\r\n } @else {\r\n <button disabled\r\n class=\"access btn sm mar_5\"\r\n [attr.aria-label]=\"text().selectNextWeek\">\r\n <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</particle-popover>\r\n", styles: [":host{width:100%}.wwp_container{width:100%;min-width:150px;position:relative}.wwp_container:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.wwp_input{position:absolute;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wwp_input:not([disabled]){cursor:pointer}.wwp_input::-ms-expand{display:none}.wwp_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px;-webkit-user-select:none;user-select:none;pointer-events:none;display:flex;align-items:center;justify-content:center}.wwp_button>svg{transition:all .2s ease}.wwp_container:hover .wwp_button>svg{transform:scale(1.2)}.wwp_placeholder{opacity:.5;display:inline}.wwp_options{border-radius:3px;line-height:1.5;overflow:hidden;font-weight:400;z-index:var(--z-overlay);width:300px;background:#fff0;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.wwp_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.wwp_week.currentWeek{border-radius:3px;background-color:#8080801a}.wwp_week_btn{display:flex;align-items:center;width:100%;border:none;padding:0;cursor:pointer}.wwp_week_btn:disabled{cursor:default}.wwp_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent;align-items:center;justify-content:center}\n"] }]
|
|
7042
|
+
], imports: [NgClass, PopoverComponent, FormsModule, TooltipDirective, AsyncPipe, DatePipe], template: "<div style=\"cursor:default;overflow: hidden;\"\r\n [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n <button (click)=\"openCalendar($event)\"\r\n aria-haspopup=\"dialog\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"ariaLabel() + ', ' + text().openCalendar\"\r\n [attr.aria-expanded]=\"calendarPopover.visible\"\r\n [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\r\n type=\"button\"\r\n class=\"access btnset width100 height100 center_center\"\r\n style=\"outline-offset: -2px;\"\r\n >\r\n <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\r\n @if (_internalValue | async; as internalValue) {\r\n {{internalValue.start | date: dateFormat()}} - {{internalValue.end | date: dateFormat()}}\r\n } @else {\r\n <div class=\"ent_r2l_txt\">{{text().selectWeek}}...</div>\r\n }\r\n </div>\r\n <div class=\"col min_w50 height100 center_center\"\r\n [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\r\n <div class=\"width100 height100 center_center\">\r\n <i class=\"fas fa-calendar-week ptl_input_text_size\"></i>\r\n </div>\r\n </div>\r\n </button>\r\n</div>\r\n\r\n<!-- TODO: instead of offset 1, attach to wwp_container -->\r\n<!-- calendar widget -->\r\n<particle-popover [offset]=\"1\" #calendarPopover>\r\n <!-- month / year select -->\r\n <div class=\"wwp_options\">\r\n <div class=\"content_color pad_5 pad_bot0\">\r\n <div class=\"row space_between\">\r\n <div class=\"col size_1 mar_5\">\r\n <select #yearSelect\r\n [ngModel]=\"_selectedYear | async\"\r\n [attr.data-dialog-close-override]=\"true\"\r\n (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text().selectYear\">\r\n @for (year of validYearRange$ | async; track $index) {\r\n <option\r\n [value]=\"year\">\r\n {{year}}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n <div class=\"col size_2 mar_5\">\r\n <select #monthSelect\r\n [ngModel]=\"_selectedMonth | async\"\r\n (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n class=\"access input sm content_color\"\r\n [attr.aria-label]=\"text().selectMonth\">\r\n <option value=\"0\">{{text().january}}</option>\r\n <option value=\"1\">{{text().february}}</option>\r\n <option value=\"2\">{{text().march}}</option>\r\n <option value=\"3\">{{text().april}}</option>\r\n <option value=\"4\">{{text().may}}</option>\r\n <option value=\"5\">{{text().june}}</option>\r\n <option value=\"6\">{{text().july}}</option>\r\n <option value=\"7\">{{text().august}}</option>\r\n <option value=\"8\">{{text().september}}</option>\r\n <option value=\"9\">{{text().october}}</option>\r\n <option value=\"10\">{{text().november}}</option>\r\n <option value=\"11\">{{text().december}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"content_color pad_5\">\r\n <!-- weekdays -->\r\n <div class=\"mar_5 mar_bot10\">\r\n <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n <div class=\"wwp_weekday\">{{text().sundayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().mondayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().tuesdayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().wednesdayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().thursdayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().fridayAbbr}}</div>\r\n <div class=\"wwp_weekday\">{{text().saturdayAbbr}}</div>\r\n </div>\r\n <!-- days -->\r\n @if (fullMonth$ | async; as fullMonth) {\r\n @for (week of fullMonth; track $index) {\r\n <div class=\"wwp_week\"\r\n [ngClass]=\"{ 'currentWeek': week.week === currentDate.week && week.year === currentDate.year }\">\r\n <button (click)=\"onWeekSelect(week.week, week.selectable)\"\r\n [disabled]=\"!week.selectable\"\r\n [ngClass]=\"((selectedWeek$ | async) === week.week) && ((selectedYear$ | async) === week.year)\r\n ? 'ok_button_color'\r\n : 'bg_overlay_rev brdr hov_bg'\"\r\n class=\"access wwp_week_btn\">\r\n @for (date of week.dates; track $index) {\r\n <div class=\"wwp_day\">\r\n {{date}}\r\n </div>\r\n }\r\n </button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n <div class=\"row space_between\">\r\n @if (canSelectLastWeek$ | async) {\r\n <button\r\n (click)=\"selectLastWeek()\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text().selectLastWeek\">\r\n <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n </button>\r\n } @else {\r\n <button disabled\r\n class=\"access btn sm mar_5\"\r\n [attr.aria-label]=\"text().selectLastWeek\">\r\n <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n </button>\r\n }\r\n @if (currentDate.selectable) {\r\n @if (((selectedWeek$ | async) === currentDate.week) && ((selectedYear$ | async) === currentDate.year)) {\r\n <button\r\n disabled\r\n class=\"access btn sm mar_5\"\r\n [attr.aria-label]=\"text().resetWeekSelection\">\r\n <i class=\"fas fa-undo-alt\"></i>\r\n </button>\r\n } @else {\r\n <button (click)=\"selectCurrentWeek()\"\r\n particleTooltip=\"Reset to Current Week\"\r\n class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n [attr.aria-label]=\"text().resetWeekSelection\">\r\n <i class=\"fas fa-undo-alt\"></i>\r\n </button>\r\n }\r\n }\r\n @if (canSelectNextWeek$ | async) {\r\n <button\r\n (click)=\"selectNextWeek()\"\r\n class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n [attr.aria-label]=\"text().selectNextWeek\">\r\n <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n </button>\r\n } @else {\r\n <button disabled\r\n class=\"access btn sm mar_5\"\r\n [attr.aria-label]=\"text().selectNextWeek\">\r\n <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</particle-popover>\r\n", styles: [":host{width:100%}.wwp_container{width:100%;min-width:150px;position:relative}.wwp_container:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.wwp_input{position:absolute;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wwp_input:not([disabled]){cursor:pointer}.wwp_input::-ms-expand{display:none}.wwp_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px;-webkit-user-select:none;user-select:none;pointer-events:none;display:flex;align-items:center;justify-content:center}.wwp_button>svg{transition:all .2s ease}.wwp_container:hover .wwp_button>svg{transform:scale(1.2)}.wwp_placeholder{opacity:.5;display:inline}.wwp_options{border-radius:3px;line-height:1.5;overflow:hidden;font-weight:400;z-index:var(--z-overlay);width:300px;background:#fff0;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.wwp_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.wwp_week.currentWeek{border-radius:3px;background-color:#8080801a}.wwp_week_btn{display:flex;align-items:center;width:100%;border:none;padding:0;cursor:pointer}.wwp_week_btn:disabled{cursor:default}.wwp_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent;align-items:center;justify-content:center}\n"] }]
|
|
7219
7043
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
7220
7044
|
type: Input
|
|
7221
7045
|
}], disabled: [{
|
|
@@ -7488,8 +7312,8 @@ class ColorPickerComponent {
|
|
|
7488
7312
|
}
|
|
7489
7313
|
return colorPickerSupported;
|
|
7490
7314
|
}
|
|
7491
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7492
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7315
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7316
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ColorPickerComponent, isStandalone: true, selector: "particle-color-picker", inputs: { value: "value", disabled: "disabled", classList: "classList", text: "text" }, outputs: { input: "input", colorSelected: "colorSelected" }, providers: [
|
|
7493
7317
|
{
|
|
7494
7318
|
provide: NG_VALUE_ACCESSOR,
|
|
7495
7319
|
useExisting: forwardRef(() => ColorPickerComponent),
|
|
@@ -7497,7 +7321,7 @@ class ColorPickerComponent {
|
|
|
7497
7321
|
}
|
|
7498
7322
|
], viewQueries: [{ propertyName: "colorInput", first: true, predicate: ["colorInput"], descendants: true }], ngImport: i0, template: "@if (render) {\r\n <div [style.filter]=\"_disabled ? 'brightness(.95)' : ''\"\r\n class=\"cp_container\"\r\n [ngClass]=\"classList ? classList : 'input md bg_overlay brdr content_color'\"\r\n >\r\n @if (colorPickerSupported) {\r\n <input #colorPicker\r\n type=\"color\"\r\n class=\"access cp_color\"\r\n [value]=\"'#' + _value\"\r\n [disabled]=\"_disabled\"\r\n [attr.aria-label]=\"text.chooseColor\"\r\n (input)=\"updateModel(colorPicker.value)\"\r\n (change)=\"updateModel(colorPicker.value); colorSelected.emit(colorPicker.value)\"/>\r\n <i class=\"fas fa-caret-down cp_caret\"></i>\r\n } @else {\r\n <div class=\"cp_swatch\">\r\n <div class=\"width100 height100 bg_overlay brdr\" style=\"border-radius:inherit;\"\r\n [style.background-color]=\"'#' + (_value || '000000')\"></div>\r\n </div>\r\n }\r\n <div class=\"bg_overlay brdr vr cp_divider\"></div>\r\n <div class=\"cp_hashtag\">#</div>\r\n <input #colorInput\r\n type=\"text\"\r\n class=\"access cp_input\"\r\n placeholder=\"000000\"\r\n maxlength=\"6\"\r\n [attr.aria-label]=\"text.enterHexCode\"\r\n [ngModel]=\"_value\"\r\n [disabled]=\"_disabled\"\r\n (input)=\"input.emit(colorInput.value)\"\r\n (paste)=\"handlePaste($event)\"\r\n (keydown)=\"handleKeyDown($event)\"\r\n (ngModelChange)=\"updateModel($event, true)\"\r\n (blur)=\"handleBlur(colorInput.value)\"/>\r\n </div>\r\n }\r\n", styles: [":host{width:100%}.cp_container{width:100%;min-width:120px;position:relative}.cp_container:after{content:\"#\";opacity:0;pointer-events:none}.cp_color{width:4em;padding:3px 1.5em 3px 3px;height:inherit;cursor:pointer;position:absolute;inset:0;border:none;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;background-color:transparent;color:inherit}.cp_color:disabled{cursor:not-allowed}.cp_caret{position:absolute;left:2.75em;top:50%;margin-top:-.5em;pointer-events:none;opacity:.8}.cp_swatch{width:4em;padding:5px;height:inherit;border-radius:inherit;position:absolute;inset:0;border:none;-moz-appearance:none;-webkit-appearance:none;appearance:none;outline:none}.cp_divider{position:absolute;left:4em;top:0;width:1px;height:100%}.cp_hashtag{position:absolute;left:4.8em}.cp_input{position:absolute;inset:0 0 0 4em;padding:inherit;padding-left:1.8em;border:none;width:calc(100% - 4em);-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;background-color:transparent;color:inherit}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
7499
7323
|
}
|
|
7500
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7324
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
7501
7325
|
type: Component,
|
|
7502
7326
|
args: [{ selector: 'particle-color-picker', providers: [
|
|
7503
7327
|
{
|
|
@@ -7704,8 +7528,8 @@ class SliderComponent {
|
|
|
7704
7528
|
setSliderWidth() {
|
|
7705
7529
|
this.sliderWidth = Math.min(100, (this.value - this._min) / (this._max - this._min) * 100);
|
|
7706
7530
|
}
|
|
7707
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7708
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
7531
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7532
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: SliderComponent, isStandalone: true, selector: "particle-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, inputClassList: { classPropertyName: "inputClassList", publicName: "inputClassList", isSignal: false, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { input: "input" }, providers: [
|
|
7709
7533
|
{
|
|
7710
7534
|
provide: NG_VALUE_ACCESSOR,
|
|
7711
7535
|
useExisting: forwardRef(() => SliderComponent),
|
|
@@ -7713,7 +7537,7 @@ class SliderComponent {
|
|
|
7713
7537
|
}
|
|
7714
7538
|
], viewQueries: [{ propertyName: "sliderInput", first: true, predicate: ["sliderInput"], descendants: true }], ngImport: i0, template: "<div class=\"row wrap v_center\">\r\n <!-- range slider -->\r\n <div class=\"col size_1 min_w100 v_center position_relative\" style=\"margin:0 12px 0 -3px;\">\r\n <div class=\"ws_track_container v_center position_absolute\">\r\n <div class=\"ws_track bg_overlay_rev brdr width100 position_absolute\"></div>\r\n <div class=\"ws_track_fill ent_r2l_slider ok_button_color position_absolute\"\r\n [style.width]=\"sliderWidth + '%'\">\r\n </div>\r\n </div>\r\n <input #slider\r\n type=\"range\"\r\n [ngModel]=\"_value\"\r\n [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n [disabled]=\"_disabled\"\r\n [attr.aria-label]=\"text().selectAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n (input)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n (change)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n class=\"access\" style=\"width:100%; z-index: var(--z-frame); margin:10px 0;\" />\r\n </div>\r\n <div class=\"col v_center\">\r\n <!-- slider value input -->\r\n <input #sliderInput\r\n type=\"number\"\r\n [ngModel]=\"_value\"\r\n [ngClass]=\"_inputClassList\"\r\n [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n [size]=\"(_max + '').length\"\r\n [disabled]=\"_disabled\"\r\n [attr.aria-label]=\"text().enterAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n (input)=\"handleInput(+sliderInput.value); input.emit(+sliderInput.value)\"\r\n (blur)=\"handleInput(+sliderInput.value)\"\r\n (paste)=\"preventPaste($event)\"\r\n class=\"access\"\r\n style=\"width:auto;\" />\r\n <div class=\"text ptl_input_text_size mar_lr10\">{{unit()}}</div>\r\n </div>\r\n</div>\r\n", styles: [":host{width:100%}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;border:none;padding:0;margin:0}input[type=range]:focus{outline:none}input[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border:none;color:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;margin-top:-8px;box-shadow:0 1px 4px #00000026}input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}input[type=range]::-moz-range-thumb{border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-moz-range-thumb:active{cursor:grabbing}input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}input[type=range]::-ms-thumb{border:1px solid rgba(0,0,0,.2);height:8px;width:30px;border-radius:5px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-ms-thumb:active{cursor:grabbing}input[type=range]:disabled::-ms-thumb{cursor:not-allowed}input[type=range]::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-webkit-slider-runnable-track{cursor:default}input[type=range]::-moz-range-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-moz-range-track{cursor:default}input[type=range]::-ms-track{width:100%;height:10px;cursor:pointer;border-radius:50px;background:transparent;border:none;color:transparent}input[type=range]:disabled::-ms-track{cursor:default}input[type=range]::-ms-fill-lower{background:transparent;border:none}.ws_track_container{z-index:var(--z-base);margin:10px 0 10px 3px;width:calc(100% - 6px);top:0;border-radius:25px;height:10px;overflow:hidden}.ws_track{height:10px;z-index:var(--z-base);border-radius:25px;inset:0}.ws_track_fill{height:10px;z-index:var(--z-frame);border-radius:25px 0 0 25px;top:0;left:0;bottom:0}@-moz-document url-prefix(){.ws_track_container{top:4px!important}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7715
7539
|
}
|
|
7716
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7540
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SliderComponent, decorators: [{
|
|
7717
7541
|
type: Component,
|
|
7718
7542
|
args: [{ selector: 'particle-slider', providers: [
|
|
7719
7543
|
{
|
|
@@ -7806,12 +7630,12 @@ class AccordionComponent {
|
|
|
7806
7630
|
this.contentDivs.get(index).nativeElement.ariaHidden = 'false';
|
|
7807
7631
|
}
|
|
7808
7632
|
};
|
|
7809
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7810
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7633
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7634
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AccordionComponent, isStandalone: true, selector: "particle-accordion", inputs: { multiple: "multiple", height: "height", headerClass: "headerClass", textClass: "textClass", iconCollapsed: "iconCollapsed", iconExpanded: "iconExpanded", showIcon: "showIcon", text: "text" }, queries: [{ propertyName: "items", predicate: AccordionItemDirective }], viewQueries: [{ propertyName: "contentDivs", predicate: ["ref"], descendants: true }], ngImport: i0, template: "@for (item of items; track $index; let i = $index) {\r\n <div class=\"particle_accordion_item\" [class.disabled]=\"item.disabled\" [class.active]=\"expanded.has(i)\">\r\n <button type=\"button\" class=\"particle_accordion_header width100\"\r\n [ngClass]=\"(item.headerClass ? item.headerClass : headerClass) + (!item.disabled ? ' access' : '')\"\r\n [style.height]=\"height\"\r\n (click)=\"!item.disabled ? toggleState(i) : {}\"\r\n [attr.aria-label]=\"!expanded.has(i) ? text.expand : text.collapse\"\r\n >\r\n @if (item.headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"item.headerTemplate.templateRef\"></ng-container>\r\n }\r\n @if (!item.headerTemplate) {\r\n @if (showIcon) {\r\n <div class=\"text\" [ngClass]=\"textClass\">\r\n @if (!expanded.has(i)) {\r\n <span><i [ngClass]=\"iconCollapsed + ' fa-fw'\"></i></span>\r\n }\r\n @if (expanded.has(i)) {\r\n <span><i [ngClass]=\"iconExpanded + ' fa-fw'\"></i></span>\r\n }\r\n {{item?.header}}\r\n </div>\r\n }\r\n @if (!showIcon) {\r\n <div class=\"text\" [ngClass]=\"textClass\">\r\n <span>{{item?.header}}</span>\r\n </div>\r\n }\r\n }\r\n </button>\r\n <div class=\"particle_accordion_content\" #ref>\r\n <ng-container *ngTemplateOutlet=\"$any(item?.content?.templateRef)\"></ng-container>\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{--accordion-disabled: rgb(159, 159, 161)}.particle_accordion_header{display:flex;justify-content:flex-start;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.particle_accordion_toggle_button{border:none;transition:transform .2s ease-in;background:none}.particle_accordion_item.disabled .particle_accordion_header{color:var(--accordion-disabled);cursor:auto}.particle_accordion_toggle_button:disabled{cursor:auto}.particle_accordion_toggle_button:disabled svg path:nth-child(2){fill:var(--accordion-disabled)}.particle_accordion_toggle_button:focus{outline:none}.particle_accordion_content{-webkit-user-select:text;user-select:text;overflow:hidden;transition:max-height .2s ease-out}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7811
7635
|
}
|
|
7812
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7636
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
7813
7637
|
type: Component,
|
|
7814
|
-
args: [{ selector: 'particle-accordion', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, NgTemplateOutlet, AccordionItemDirective], template: "@for (item of items; track
|
|
7638
|
+
args: [{ selector: 'particle-accordion', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, NgTemplateOutlet, AccordionItemDirective], template: "@for (item of items; track $index; let i = $index) {\r\n <div class=\"particle_accordion_item\" [class.disabled]=\"item.disabled\" [class.active]=\"expanded.has(i)\">\r\n <button type=\"button\" class=\"particle_accordion_header width100\"\r\n [ngClass]=\"(item.headerClass ? item.headerClass : headerClass) + (!item.disabled ? ' access' : '')\"\r\n [style.height]=\"height\"\r\n (click)=\"!item.disabled ? toggleState(i) : {}\"\r\n [attr.aria-label]=\"!expanded.has(i) ? text.expand : text.collapse\"\r\n >\r\n @if (item.headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"item.headerTemplate.templateRef\"></ng-container>\r\n }\r\n @if (!item.headerTemplate) {\r\n @if (showIcon) {\r\n <div class=\"text\" [ngClass]=\"textClass\">\r\n @if (!expanded.has(i)) {\r\n <span><i [ngClass]=\"iconCollapsed + ' fa-fw'\"></i></span>\r\n }\r\n @if (expanded.has(i)) {\r\n <span><i [ngClass]=\"iconExpanded + ' fa-fw'\"></i></span>\r\n }\r\n {{item?.header}}\r\n </div>\r\n }\r\n @if (!showIcon) {\r\n <div class=\"text\" [ngClass]=\"textClass\">\r\n <span>{{item?.header}}</span>\r\n </div>\r\n }\r\n }\r\n </button>\r\n <div class=\"particle_accordion_content\" #ref>\r\n <ng-container *ngTemplateOutlet=\"$any(item?.content?.templateRef)\"></ng-container>\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{--accordion-disabled: rgb(159, 159, 161)}.particle_accordion_header{display:flex;justify-content:flex-start;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.particle_accordion_toggle_button{border:none;transition:transform .2s ease-in;background:none}.particle_accordion_item.disabled .particle_accordion_header{color:var(--accordion-disabled);cursor:auto}.particle_accordion_toggle_button:disabled{cursor:auto}.particle_accordion_toggle_button:disabled svg path:nth-child(2){fill:var(--accordion-disabled)}.particle_accordion_toggle_button:focus{outline:none}.particle_accordion_content{-webkit-user-select:text;user-select:text;overflow:hidden;transition:max-height .2s ease-out}\n"] }]
|
|
7815
7639
|
}], propDecorators: { multiple: [{
|
|
7816
7640
|
type: Input
|
|
7817
7641
|
}], height: [{
|
|
@@ -7916,10 +7740,10 @@ class SlideoverComponent {
|
|
|
7916
7740
|
this._determineBreakpointExceeded(window.innerWidth);
|
|
7917
7741
|
}, 100);
|
|
7918
7742
|
}
|
|
7919
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7920
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7743
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SlideoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7744
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SlideoverComponent, isStandalone: true, selector: "particle-slideover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, bgClass: { classPropertyName: "bgClass", publicName: "bgClass", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, hideCloseButton: { classPropertyName: "hideCloseButton", publicName: "hideCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: "<div #overlay (click)=\"close()\"></div>\r\n<div\r\n [ngClass]=\"bgClass() + ' ' + (slideoverOpen ? 'slideover_active_' + position : 'slideover_inactive_' + position) + ' slideover-panel ' + position\"\r\n [style.width]=\"position === 'right' || position === 'left' ? (breakpointExceeded ? '100%' : width()) : null\"\r\n [style.height]=\"position === 'top' || position === 'bottom' ? (breakpointExceeded ? '100%' : height()) : null\"\r\n [style.left]=\"position === 'left' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\r\n [style.right]=\"position === 'right' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\r\n [style.bottom]=\"position === 'bottom' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\r\n [style.top]=\"position === 'top' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\r\n [style.visibility]=\"!visible ? 'hidden': 'visible'\"\r\n [attr.aria-hidden]=\"!slideoverOpen\"\r\n >\r\n @if (!hideCloseButton()) {\r\n <div class=\"push_close_bar\">\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().close\"\r\n (click)=\"close()\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n <i class=\"fas fa-times\"></i>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".slideover-panel{position:fixed;transition:transform .3s;display:flex;flex-direction:column;z-index:var(--z-dialog)}.slideover-panel.left{top:0;left:0;height:100%}.slideover-panel.right{top:0;right:0;height:100%}.slideover-panel.top{top:0;left:0;width:100%}.slideover-panel.bottom{bottom:0;left:0;width:100%}.slideover_inactive_left,.slideover_active_left{transition:left .2s ease-in-out}.slideover_inactive_right,.slideover_active_right{transition:right .2s ease-in-out}.slideover_inactive_top,.slideover_active_top{transition:top .2s ease-in-out}.slideover_inactive_bottom,.slideover_active_bottom{transition:bottom .2s ease-in-out}.push_close_bar{position:absolute;right:0;top:0;width:45px;height:45px;z-index:var(--z-dialog);display:flex;justify-content:center;align-items:center}.data_hide_button{float:right;display:flex;align-items:center;justify-content:center;font-size:9pt;min-height:20px;height:20px;min-width:20px;width:20px;border-radius:50%;cursor:pointer;padding:0;transition:all .2s ease-in-out;background-color:#ffffffe6;color:#0006;border:1px solid rgba(0,0,0,.1)}.data_hide_button:hover{background-color:#0000004d;color:#fffc;border:1px solid rgba(0,0,0,.1)}.particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
7921
7745
|
}
|
|
7922
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7746
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SlideoverComponent, decorators: [{
|
|
7923
7747
|
type: Component,
|
|
7924
7748
|
args: [{ selector: 'particle-slideover', imports: [NgClass], template: "<div #overlay (click)=\"close()\"></div>\r\n<div\r\n [ngClass]=\"bgClass() + ' ' + (slideoverOpen ? 'slideover_active_' + position : 'slideover_inactive_' + position) + ' slideover-panel ' + position\"\r\n [style.width]=\"position === 'right' || position === 'left' ? (breakpointExceeded ? '100%' : width()) : null\"\r\n [style.height]=\"position === 'top' || position === 'bottom' ? (breakpointExceeded ? '100%' : height()) : null\"\r\n [style.left]=\"position === 'left' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\r\n [style.right]=\"position === 'right' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\r\n [style.bottom]=\"position === 'bottom' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\r\n [style.top]=\"position === 'top' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\r\n [style.visibility]=\"!visible ? 'hidden': 'visible'\"\r\n [attr.aria-hidden]=\"!slideoverOpen\"\r\n >\r\n @if (!hideCloseButton()) {\r\n <div class=\"push_close_bar\">\r\n <button class=\"access btnset clear\"\r\n [attr.aria-label]=\"text().close\"\r\n (click)=\"close()\">\r\n <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n <i class=\"fas fa-times\"></i>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".slideover-panel{position:fixed;transition:transform .3s;display:flex;flex-direction:column;z-index:var(--z-dialog)}.slideover-panel.left{top:0;left:0;height:100%}.slideover-panel.right{top:0;right:0;height:100%}.slideover-panel.top{top:0;left:0;width:100%}.slideover-panel.bottom{bottom:0;left:0;width:100%}.slideover_inactive_left,.slideover_active_left{transition:left .2s ease-in-out}.slideover_inactive_right,.slideover_active_right{transition:right .2s ease-in-out}.slideover_inactive_top,.slideover_active_top{transition:top .2s ease-in-out}.slideover_inactive_bottom,.slideover_active_bottom{transition:bottom .2s ease-in-out}.push_close_bar{position:absolute;right:0;top:0;width:45px;height:45px;z-index:var(--z-dialog);display:flex;justify-content:center;align-items:center}.data_hide_button{float:right;display:flex;align-items:center;justify-content:center;font-size:9pt;min-height:20px;height:20px;min-width:20px;width:20px;border-radius:50%;cursor:pointer;padding:0;transition:all .2s ease-in-out;background-color:#ffffffe6;color:#0006;border:1px solid rgba(0,0,0,.1)}.data_hide_button:hover{background-color:#0000004d;color:#fffc;border:1px solid rgba(0,0,0,.1)}.particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}\n"] }]
|
|
7925
7749
|
}], propDecorators: { position: [{
|
|
@@ -8057,10 +7881,10 @@ class IdleTimeoutComponent {
|
|
|
8057
7881
|
this.showDialog = null;
|
|
8058
7882
|
}
|
|
8059
7883
|
}
|
|
8060
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8061
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
7884
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IdleTimeoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7885
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: IdleTimeoutComponent, isStandalone: true, selector: "particle-idle-timeout", inputs: { borderRadius: "borderRadius", timeoutInSeconds: "timeoutInSeconds", text: "text" }, outputs: { timerEnd: "timerEnd" }, viewQueries: [{ propertyName: "timeoutDialog", first: true, predicate: ["timeoutDialog"], descendants: true }], ngImport: i0, template: "<!-- timeout dialog -->\r\n<particle-dialog\r\n [title]=\"text.sessionExpiring\"\r\n [object]=\"showDialog\"\r\n (closed)=\"resetTimer()\"\r\n width=\"350px\" height=\"150px\"\r\n #timeoutDialog\r\n>\r\n <div class=\"row column center_center height100\">\r\n <div class=\"header sm bold center mar_bot10\">{{ count }} {{ count !== 1 ? text.seconds : text.second }}</div>\r\n <button class=\"access btn md bg_overlay brdr ok_button_color\" [attr.aria-label]=\"text.stayLoggedIn\"\r\n (click)=\"resetTimer()\">\r\n <span class=\"text\">{{ text.stayLoggedIn }}</span>\r\n </button>\r\n </div>\r\n</particle-dialog>\r\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }] });
|
|
8062
7886
|
}
|
|
8063
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IdleTimeoutComponent, decorators: [{
|
|
8064
7888
|
type: Component,
|
|
8065
7889
|
args: [{ selector: 'particle-idle-timeout', standalone: true, imports: [DialogComponent], template: "<!-- timeout dialog -->\r\n<particle-dialog\r\n [title]=\"text.sessionExpiring\"\r\n [object]=\"showDialog\"\r\n (closed)=\"resetTimer()\"\r\n width=\"350px\" height=\"150px\"\r\n #timeoutDialog\r\n>\r\n <div class=\"row column center_center height100\">\r\n <div class=\"header sm bold center mar_bot10\">{{ count }} {{ count !== 1 ? text.seconds : text.second }}</div>\r\n <button class=\"access btn md bg_overlay brdr ok_button_color\" [attr.aria-label]=\"text.stayLoggedIn\"\r\n (click)=\"resetTimer()\">\r\n <span class=\"text\">{{ text.stayLoggedIn }}</span>\r\n </button>\r\n </div>\r\n</particle-dialog>\r\n" }]
|
|
8066
7890
|
}], propDecorators: { borderRadius: [{
|
|
@@ -8103,10 +7927,10 @@ class ScrollToTopComponent {
|
|
|
8103
7927
|
});
|
|
8104
7928
|
}
|
|
8105
7929
|
}
|
|
8106
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8107
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7930
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScrollToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7931
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ScrollToTopComponent, isStandalone: true, selector: "particle-scroll-to-top", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, scrollDistance: { classPropertyName: "scrollDistance", publicName: "scrollDistance", isSignal: true, isRequired: false, transformFunction: null }, bottomOffset: { classPropertyName: "bottomOffset", publicName: "bottomOffset", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ($scrollTop | async; as scrollTop) {\r\n <div [style.visibility]=\"scrollTop > scrollDistance() ? 'visible' : 'hidden'\"\r\n [style.opacity]=\"scrollTop > scrollDistance() ? '1' : '0'\"\r\n [style.bottom]=\"bottomOffset() + 'px'\"\r\n class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n <button (click)=\"scrollToTop()\"\r\n class=\"access btn pad_10 brad_3 brdr content_color\"\r\n type=\"button\"\r\n [attr.aria-label]=\"text().scrollToTop\">\r\n <span class=\"icon slide_up\"><i class=\"fas fa-chevron-up\"></i></span>\r\n </button>\r\n </div>\r\n}\r\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] });
|
|
8108
7932
|
}
|
|
8109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7933
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScrollToTopComponent, decorators: [{
|
|
8110
7934
|
type: Component,
|
|
8111
7935
|
args: [{ selector: 'particle-scroll-to-top', imports: [AsyncPipe], template: "@if ($scrollTop | async; as scrollTop) {\r\n <div [style.visibility]=\"scrollTop > scrollDistance() ? 'visible' : 'hidden'\"\r\n [style.opacity]=\"scrollTop > scrollDistance() ? '1' : '0'\"\r\n [style.bottom]=\"bottomOffset() + 'px'\"\r\n class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n <button (click)=\"scrollToTop()\"\r\n class=\"access btn pad_10 brad_3 brdr content_color\"\r\n type=\"button\"\r\n [attr.aria-label]=\"text().scrollToTop\">\r\n <span class=\"icon slide_up\"><i class=\"fas fa-chevron-up\"></i></span>\r\n </button>\r\n </div>\r\n}\r\n" }]
|
|
8112
7936
|
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], scrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollDistance", required: false }] }], bottomOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomOffset", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
|
|
@@ -8136,10 +7960,10 @@ class LayoutFullwidthSidebarComponent {
|
|
|
8136
7960
|
+this.footerHeight().replace(/\D/g, "");
|
|
8137
7961
|
return `calc(100vh - ${offset}px)`;
|
|
8138
7962
|
}
|
|
8139
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8140
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7963
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutFullwidthSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7964
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LayoutFullwidthSidebarComponent, isStandalone: true, selector: "particle-layout-fullwidth-sidebar", inputs: { mainContent: { classPropertyName: "mainContent", publicName: "mainContent", isSignal: true, isRequired: false, transformFunction: null }, rightSidebar: { classPropertyName: "rightSidebar", publicName: "rightSidebar", isSignal: true, isRequired: false, transformFunction: null }, mainContentContainerClassList: { classPropertyName: "mainContentContainerClassList", publicName: "mainContentContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarContainerClassList: { classPropertyName: "rightSidebarContainerClassList", publicName: "rightSidebarContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarSticky: { classPropertyName: "rightSidebarSticky", publicName: "rightSidebarSticky", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarWidth: { classPropertyName: "rightSidebarWidth", publicName: "rightSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarCollapsedTabOffset: { classPropertyName: "rightSidebarCollapsedTabOffset", publicName: "rightSidebarCollapsedTabOffset", isSignal: true, isRequired: false, transformFunction: null }, collapsedClassList: { classPropertyName: "collapsedClassList", publicName: "collapsedClassList", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarEnabled: { classPropertyName: "mobileSidebarEnabled", publicName: "mobileSidebarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "slideover", first: true, predicate: ["slideover"], descendants: true }], ngImport: i0, template: "<!-- setup for a side column -->\r\n<div class=\"row height100 ent_r2l_row\">\r\n <div class=\"row column space_between height100\"\r\n [ngClass]=\"mainContentContainerClassList()\">\r\n <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\r\n </div>\r\n\r\n @if (!rightSidebarSticky()) {\r\n <div class=\"particle_layout_sidebar height100\"\r\n [ngClass]=\"rightSidebarContainerClassList()\"\r\n [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n [style.width]=\"rightSidebarWidth()\">\r\n <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n </div>\r\n }\r\n\r\n @if (rightSidebarSticky()) {\r\n <div class=\"particle_layout_sidebar height100\"\r\n [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n [style.width]=\"rightSidebarWidth()\">\r\n <div class=\"row column sticky_sidebar\"\r\n [ngClass]=\"rightSidebarContainerClassList()\"\r\n [style.height]=\"stickySidebarHeight\">\r\n <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\r\n <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\r\n [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\r\n [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\r\n style=\"z-index: var(--z-frame);\"\r\n class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n <button\r\n (click)=\"slideover.open()\"\r\n class=\"access btn pad_10 brad_3 brdr content_color\"\r\n type=\"button\">\r\n <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\r\n </button>\r\n </div>\r\n <particle-slideover\r\n position=\"right\"\r\n [width]=\"rightSidebarWidth()\"\r\n [breakpoint]=\"1\"\r\n #slideover\r\n >\r\n <div class=\"min_h40 header_color\">\r\n </div>\r\n <div class=\"particle_layout_sidebar height100\"\r\n [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\r\n <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n </div>\r\n </particle-slideover>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlideoverComponent, selector: "particle-slideover", inputs: ["position", "modal", "width", "height", "bgClass", "text", "breakpoint", "hideCloseButton"], outputs: ["opened", "closed"] }] });
|
|
8141
7965
|
}
|
|
8142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7966
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutFullwidthSidebarComponent, decorators: [{
|
|
8143
7967
|
type: Component,
|
|
8144
7968
|
args: [{ selector: 'particle-layout-fullwidth-sidebar', imports: [NgClass, NgTemplateOutlet, SlideoverComponent], template: "<!-- setup for a side column -->\r\n<div class=\"row height100 ent_r2l_row\">\r\n <div class=\"row column space_between height100\"\r\n [ngClass]=\"mainContentContainerClassList()\">\r\n <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\r\n </div>\r\n\r\n @if (!rightSidebarSticky()) {\r\n <div class=\"particle_layout_sidebar height100\"\r\n [ngClass]=\"rightSidebarContainerClassList()\"\r\n [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n [style.width]=\"rightSidebarWidth()\">\r\n <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n </div>\r\n }\r\n\r\n @if (rightSidebarSticky()) {\r\n <div class=\"particle_layout_sidebar height100\"\r\n [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n [style.width]=\"rightSidebarWidth()\">\r\n <div class=\"row column sticky_sidebar\"\r\n [ngClass]=\"rightSidebarContainerClassList()\"\r\n [style.height]=\"stickySidebarHeight\">\r\n <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\r\n <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\r\n [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\r\n [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\r\n style=\"z-index: var(--z-frame);\"\r\n class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n <button\r\n (click)=\"slideover.open()\"\r\n class=\"access btn pad_10 brad_3 brdr content_color\"\r\n type=\"button\">\r\n <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\r\n </button>\r\n </div>\r\n <particle-slideover\r\n position=\"right\"\r\n [width]=\"rightSidebarWidth()\"\r\n [breakpoint]=\"1\"\r\n #slideover\r\n >\r\n <div class=\"min_h40 header_color\">\r\n </div>\r\n <div class=\"particle_layout_sidebar height100\"\r\n [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\r\n <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n </div>\r\n </particle-slideover>\r\n}\r\n" }]
|
|
8145
7969
|
}], propDecorators: { mainContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainContent", required: false }] }], rightSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebar", required: false }] }], mainContentContainerClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainContentContainerClassList", required: false }] }], rightSidebarContainerClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarContainerClassList", required: false }] }], rightSidebarSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarSticky", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], footerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerHeight", required: false }] }], rightSidebarWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarWidth", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], rightSidebarCollapsedTabOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarCollapsedTabOffset", required: false }] }], collapsedClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedClassList", required: false }] }], mobileSidebarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSidebarEnabled", required: false }] }], slideover: [{
|
|
@@ -8183,10 +8007,10 @@ class LayoutFullFramingComponent {
|
|
|
8183
8007
|
+this.footerHeight().replace(/\D/g, "");
|
|
8184
8008
|
return `calc(100% - ${offset}px)`;
|
|
8185
8009
|
}
|
|
8186
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8187
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8010
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutFullFramingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8011
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LayoutFullFramingComponent, isStandalone: true, selector: "particle-layout-full-framing", inputs: { mainContent: { classPropertyName: "mainContent", publicName: "mainContent", isSignal: true, isRequired: false, transformFunction: null }, rightSidebar: { classPropertyName: "rightSidebar", publicName: "rightSidebar", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, mainContentContainerClassList: { classPropertyName: "mainContentContainerClassList", publicName: "mainContentContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarContainerClassList: { classPropertyName: "rightSidebarContainerClassList", publicName: "rightSidebarContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, headerClassList: { classPropertyName: "headerClassList", publicName: "headerClassList", isSignal: true, isRequired: false, transformFunction: null }, footerClassList: { classPropertyName: "footerClassList", publicName: "footerClassList", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarWidth: { classPropertyName: "rightSidebarWidth", publicName: "rightSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarCollapsedTabOffset: { classPropertyName: "rightSidebarCollapsedTabOffset", publicName: "rightSidebarCollapsedTabOffset", isSignal: true, isRequired: false, transformFunction: null }, collapsedClassList: { classPropertyName: "collapsedClassList", publicName: "collapsedClassList", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarEnabled: { classPropertyName: "mobileSidebarEnabled", publicName: "mobileSidebarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "slideover", first: true, predicate: ["slideover"], descendants: true }], ngImport: i0, template: "<div class=\"width100 height100\">\r\n <div class=\"width100 header_sticky\" [ngClass]=\"headerClassList()\" [style.height]=\"headerHeight()\">\r\n <ng-template [ngTemplateOutlet]=\"header()\"></ng-template>\r\n </div>\r\n\r\n <div class=\"row ent_r2l_row\" [style.height]=\"contentSidebarHeight\">\r\n <div class=\"row column space_between height100\"\r\n [ngClass]=\"mainContentContainerClassList()\">\r\n <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\r\n </div>\r\n\r\n <div class=\"col particle_layout_sidebar height100\"\r\n [style.width]=\"rightSidebarWidth()\"\r\n [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n >\r\n <div class=\"row column sticky_sidebar height100\"\r\n [ngClass]=\"rightSidebarContainerClassList()\"\r\n [style.height]=\"stickySidebarHeight\"\r\n [style.top]=\"headerHeight()\">\r\n <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"width100 footer_sticky\" [ngClass]=\"footerClassList()\" [style.height]=\"footerHeight()\">\r\n <ng-template [ngTemplateOutlet]=\"footer()\"></ng-template>\r\n </div>\r\n</div>\r\n\r\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\r\n <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\r\n [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\r\n [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\r\n style=\"z-index: var(--z-frame);\"\r\n class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n <button\r\n (click)=\"slideover.open()\"\r\n class=\"access btn pad_10 brad_3 brdr content_color\"\r\n type=\"button\">\r\n <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\r\n </button>\r\n </div>\r\n <particle-slideover\r\n position=\"right\"\r\n [width]=\"rightSidebarWidth()\"\r\n [breakpoint]=\"1\"\r\n #slideover\r\n >\r\n <div class=\"min_h40 header_color\">\r\n </div>\r\n <div class=\"particle_layout_sidebar height100\"\r\n [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\r\n <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n </div>\r\n </particle-slideover>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlideoverComponent, selector: "particle-slideover", inputs: ["position", "modal", "width", "height", "bgClass", "text", "breakpoint", "hideCloseButton"], outputs: ["opened", "closed"] }] });
|
|
8188
8012
|
}
|
|
8189
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutFullFramingComponent, decorators: [{
|
|
8190
8014
|
type: Component,
|
|
8191
8015
|
args: [{ selector: 'particle-layout-full-framing', imports: [NgClass, NgTemplateOutlet, SlideoverComponent], template: "<div class=\"width100 height100\">\r\n <div class=\"width100 header_sticky\" [ngClass]=\"headerClassList()\" [style.height]=\"headerHeight()\">\r\n <ng-template [ngTemplateOutlet]=\"header()\"></ng-template>\r\n </div>\r\n\r\n <div class=\"row ent_r2l_row\" [style.height]=\"contentSidebarHeight\">\r\n <div class=\"row column space_between height100\"\r\n [ngClass]=\"mainContentContainerClassList()\">\r\n <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\r\n </div>\r\n\r\n <div class=\"col particle_layout_sidebar height100\"\r\n [style.width]=\"rightSidebarWidth()\"\r\n [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n >\r\n <div class=\"row column sticky_sidebar height100\"\r\n [ngClass]=\"rightSidebarContainerClassList()\"\r\n [style.height]=\"stickySidebarHeight\"\r\n [style.top]=\"headerHeight()\">\r\n <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"width100 footer_sticky\" [ngClass]=\"footerClassList()\" [style.height]=\"footerHeight()\">\r\n <ng-template [ngTemplateOutlet]=\"footer()\"></ng-template>\r\n </div>\r\n</div>\r\n\r\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\r\n <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\r\n [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\r\n [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\r\n style=\"z-index: var(--z-frame);\"\r\n class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n <button\r\n (click)=\"slideover.open()\"\r\n class=\"access btn pad_10 brad_3 brdr content_color\"\r\n type=\"button\">\r\n <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\r\n </button>\r\n </div>\r\n <particle-slideover\r\n position=\"right\"\r\n [width]=\"rightSidebarWidth()\"\r\n [breakpoint]=\"1\"\r\n #slideover\r\n >\r\n <div class=\"min_h40 header_color\">\r\n </div>\r\n <div class=\"particle_layout_sidebar height100\"\r\n [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\r\n <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n </div>\r\n </particle-slideover>\r\n}\r\n" }]
|
|
8192
8016
|
}], propDecorators: { mainContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainContent", required: false }] }], rightSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebar", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], mainContentContainerClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainContentContainerClassList", required: false }] }], rightSidebarContainerClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarContainerClassList", required: false }] }], headerClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerClassList", required: false }] }], footerClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerClassList", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], footerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerHeight", required: false }] }], rightSidebarWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarWidth", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], rightSidebarCollapsedTabOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarCollapsedTabOffset", required: false }] }], collapsedClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedClassList", required: false }] }], mobileSidebarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSidebarEnabled", required: false }] }], slideover: [{
|
|
@@ -8271,14 +8095,14 @@ class ToggleSwitchComponent {
|
|
|
8271
8095
|
this.value = value;
|
|
8272
8096
|
}
|
|
8273
8097
|
}
|
|
8274
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8275
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8098
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8099
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ToggleSwitchComponent, isStandalone: true, selector: "particle-toggle-switch", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, providers: [{
|
|
8276
8100
|
provide: NG_VALUE_ACCESSOR,
|
|
8277
8101
|
useExisting: forwardRef(() => ToggleSwitchComponent),
|
|
8278
8102
|
multi: true
|
|
8279
8103
|
}], ngImport: i0, template: "@if (options$ | async; as options) {\r\n <button\r\n (click)=\"handleClick()\"\r\n [attr.aria-label]=\"options.accessibilityLabel\"\r\n [disabled]=\"disabled()\"\r\n [ngClass]=\"value ? options.affirmativeColorClass : options.negativeColorClass\"\r\n class=\"access btn sm v_center hov_glow p_toggle_button\"\r\n >\r\n @if (value) {\r\n <ng-container [ngTemplateOutlet]=\"affirmativeSelected\"></ng-container>\r\n } @else {\r\n <div class=\"content_color p_toggle_shadow p_toggle_status\" [style.min-width]=\"options.toggleSwitchWidth + 'px'\">\r\n <i [ngClass]=\"options.negativeIcon\" class=\"fa-fw\"></i>\r\n </div>\r\n <div class=\"opac_50 p_toggle_status\" [style.min-width]=\"(options.toggleTrackWidth - options.toggleSwitchWidth) + 'px'\">\r\n {{options.negativeLabel}}\r\n </div>\r\n }\r\n </button>\r\n <ng-template #affirmativeSelected>\r\n <div class=\"opac_50 p_toggle_status\" [style.min-width]=\"(options.toggleTrackWidth - options.toggleSwitchWidth) + 'px'\">\r\n {{options.affirmativeLabel}}\r\n </div>\r\n <div class=\"content_color p_toggle_shadow p_toggle_status\" [style.min-width]=\"options.toggleSwitchWidth + 'px'\">\r\n <i [ngClass]=\"options.affirmativeIcon\" class=\"fa-fw mar_right5\"></i>\r\n </div>\r\n </ng-template>\r\n}\r\n", styles: [".p_toggle_button{padding:2px;border-radius:50px}.p_toggle_status{min-width:65px;border-radius:50px;padding:5px 3px;transition:all .4s ease-in-out}.p_toggle_shadow{box-shadow:0 0 10px #323232bf}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
|
|
8280
8104
|
}
|
|
8281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
|
|
8282
8106
|
type: Component,
|
|
8283
8107
|
args: [{ selector: 'particle-toggle-switch', providers: [{
|
|
8284
8108
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -8361,8 +8185,8 @@ class CheckboxComponent {
|
|
|
8361
8185
|
this.onChange(this.value);
|
|
8362
8186
|
this.changeDetectorRef.detectChanges();
|
|
8363
8187
|
}
|
|
8364
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8365
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8188
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8189
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CheckboxComponent, isStandalone: true, selector: "particle-checkbox", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
8366
8190
|
{
|
|
8367
8191
|
provide: NG_VALUE_ACCESSOR,
|
|
8368
8192
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
@@ -8370,7 +8194,7 @@ class CheckboxComponent {
|
|
|
8370
8194
|
}
|
|
8371
8195
|
], ngImport: i0, template: "<div class=\"access ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n [style.height]=\"size() + 'px'\"\r\n [style.width]=\"size() + 'px'\"\r\n [style.min-width]=\"size() + 'px'\"\r\n [style.min-height]=\"size() + 'px'\"\r\n >\r\n <button class=\"access btn clear width100 height100\"\r\n tabindex=\"0\"\r\n role=\"checkbox\"\r\n type=\"button\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"_value ? text().uncheck : text().check\"\r\n [attr.aria-checked]=\"_value\"\r\n (click)=\"click()\"\r\n >\r\n <!-- show if checked state -->\r\n @if (_value) {\r\n <div><i class=\"fas fa-check fa-fw\" [style.font-size]=\"(size() / 2) + 'px'\"></i></div>\r\n }\r\n </button>\r\n\r\n <input type=\"hidden\" [id]=\"inputId()\" [value]=\"value\" #hiddenInput/>\r\n</div>\r\n\r\n", styles: [""] });
|
|
8372
8196
|
}
|
|
8373
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8197
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
8374
8198
|
type: Component,
|
|
8375
8199
|
args: [{ selector: 'particle-checkbox', providers: [
|
|
8376
8200
|
{
|
|
@@ -8903,14 +8727,14 @@ class InputMaskComponent {
|
|
|
8903
8727
|
focus() {
|
|
8904
8728
|
this.inputViewChild.nativeElement.focus();
|
|
8905
8729
|
}
|
|
8906
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8907
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
8730
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: InputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8731
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: InputMaskComponent, isStandalone: true, selector: "particle-input-mask", inputs: { type: "type", slotChar: "slotChar", autoClear: "autoClear", style: "style", inputId: "inputId", styleClass: "styleClass", placeholder: "placeholder", size: "size", maxlength: "maxlength", tabindex: "tabindex", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", disabled: "disabled", readonly: "readonly", unmask: "unmask", name: "name", required: "required", characterPattern: "characterPattern", autoFocus: "autoFocus", autocomplete: "autocomplete", mask: "mask" }, outputs: { onComplete: "onComplete", onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput" }, host: { properties: { "class.ui-inputwrapper-filled": "filled", "class.ui-inputwrapper-focus": "focus" } }, providers: [INPUTMASK_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<input #input [attr.id]="inputId" [attr.type]="type" [attr.name]="name" [ngStyle]="style" [ngClass]="styleClass" [attr.placeholder]="placeholder"
|
|
8908
8732
|
[attr.size]="size" [attr.autocomplete]="autocomplete" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [attr.aria-label]="ariaLabel"
|
|
8909
8733
|
[attr.aria-required]="ariaRequired" [disabled]="disabled" [readonly]="readonly" [attr.required]="required"
|
|
8910
8734
|
(focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (keydown)="onKeyDown($event)"
|
|
8911
8735
|
(input)="onInputChange($event)" (paste)="handleInputChange($event)" (click)="onClick()">`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
8912
8736
|
}
|
|
8913
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8737
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: InputMaskComponent, decorators: [{
|
|
8914
8738
|
type: Component,
|
|
8915
8739
|
args: [{
|
|
8916
8740
|
selector: 'particle-input-mask',
|
|
@@ -8997,10 +8821,10 @@ class ProgressBarComponent {
|
|
|
8997
8821
|
height = input(20, ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
8998
8822
|
showBorder = input(true, ...(ngDevMode ? [{ debugName: "showBorder" }] : []));
|
|
8999
8823
|
showMovement = input(false, ...(ngDevMode ? [{ debugName: "showMovement" }] : []));
|
|
9000
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9001
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8824
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8825
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ProgressBarComponent, isStandalone: true, selector: "particle-progress-bar", inputs: { percentComplete: { classPropertyName: "percentComplete", publicName: "percentComplete", isSignal: false, isRequired: false, transformFunction: null }, backgroundColorClass: { classPropertyName: "backgroundColorClass", publicName: "backgroundColorClass", isSignal: true, isRequired: false, transformFunction: null }, progressColorClass: { classPropertyName: "progressColorClass", publicName: "progressColorClass", isSignal: true, isRequired: false, transformFunction: null }, showPercentComplete: { classPropertyName: "showPercentComplete", publicName: "showPercentComplete", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, showMovement: { classPropertyName: "showMovement", publicName: "showMovement", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [ngClass]=\"showBorder() ? backgroundColorClass() + ' brdr' : backgroundColorClass()\"\r\n [style.border-radius]=\"borderRadius() + 'px'\"\r\n [style.height]=\"height() ? height() + 'px' : ''\"\r\n >\r\n <div class=\"container_progress\"\r\n [ngClass]=\"progressColorClass() + (showMovement() ? ' progress_movement' : '')\"\r\n [style.width]=\"percentComplete + '%'\"\r\n [style.border-radius]=\"borderRadius() + 'px'\"\r\n [style.height]=\"height() ? (showBorder() ? (height() - 2) : height()) + 'px' : ''\"\r\n [style.font-size]=\"height() < 20 ? '65%' : ''\"\r\n >\r\n @if ((showPercentComplete() && height() >= 10)) {\r\n {{percentComplete}}%\r\n } @else {\r\n \r\n }\r\n </div>\r\n</div>\r\n", styles: [".container_progress{align-items:center;display:flex;justify-content:center}.progress_movement{animation:progress 10s linear infinite;background-image:url(data:image/png;base64,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)}@keyframes progress{0%{background-position:0% 0%}to{background-position:0% -100%}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
9002
8826
|
}
|
|
9003
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8827
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
9004
8828
|
type: Component,
|
|
9005
8829
|
args: [{ selector: 'particle-progress-bar', imports: [NgClass], template: "<div [ngClass]=\"showBorder() ? backgroundColorClass() + ' brdr' : backgroundColorClass()\"\r\n [style.border-radius]=\"borderRadius() + 'px'\"\r\n [style.height]=\"height() ? height() + 'px' : ''\"\r\n >\r\n <div class=\"container_progress\"\r\n [ngClass]=\"progressColorClass() + (showMovement() ? ' progress_movement' : '')\"\r\n [style.width]=\"percentComplete + '%'\"\r\n [style.border-radius]=\"borderRadius() + 'px'\"\r\n [style.height]=\"height() ? (showBorder() ? (height() - 2) : height()) + 'px' : ''\"\r\n [style.font-size]=\"height() < 20 ? '65%' : ''\"\r\n >\r\n @if ((showPercentComplete() && height() >= 10)) {\r\n {{percentComplete}}%\r\n } @else {\r\n \r\n }\r\n </div>\r\n</div>\r\n", styles: [".container_progress{align-items:center;display:flex;justify-content:center}.progress_movement{animation:progress 10s linear infinite;background-image:url(data:image/png;base64,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)}@keyframes progress{0%{background-position:0% 0%}to{background-position:0% -100%}}\n"] }]
|
|
9006
8830
|
}], propDecorators: { percentComplete: [{
|
|
@@ -9020,10 +8844,10 @@ class LoaderComponent {
|
|
|
9020
8844
|
this.backgroundStyle = 'linear-gradient(to right, rgba(0,0,0,0) 0%, ' + colors[0] + ' 33%, ' + colors[1] + ' 50% , ' + colors[2] + ' 66%, rgba(0,0,0,0) 100%)';
|
|
9021
8845
|
}
|
|
9022
8846
|
}
|
|
9023
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9024
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8847
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8848
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LoaderComponent, isStandalone: true, selector: "particle-loader", inputs: { text: "text", disableText: "disableText", colors: "colors" }, ngImport: i0, template: "<div class=\"row column center_center height100\" style=\"max-width: 250px;\">\r\n <div class=\"ptl_loader\">\r\n <div class=\"ptl_loader__progress\" [style.background]=\"backgroundStyle ?? ''\"></div>\r\n </div>\r\n @if (!disableText) {\r\n @if (text.loadingText) {\r\n <div class=\"text md bold text_center mar_top15 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\r\n {{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span>\r\n </div>\r\n }\r\n @if (text.loadingSubtext) {\r\n <div class=\"text sm text_center mar_top5 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\r\n {{text.loadingSubtext}}\r\n </div>\r\n }\r\n }\r\n</div>\r\n", styles: [".ptl_loader{height:2px;position:relative;overflow:hidden;width:100%}.ptl_loader__progress{background:linear-gradient(to right,rgba(0,0,0,0) 0%,var(--bg-purple-color) 33%,var(--bg-blue-color) 50%,var(--bg-green-color) 66%,rgba(0,0,0,0) 100%);position:absolute;bottom:0;top:0;width:100%;animation-duration:2s;animation-iteration-count:infinite;animation-name:ptl_loader}@keyframes ptl_loader{0%{left:-100%}to{left:100%}}.endpoint_fadein{animation:fadeInAnimation ease 1s;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}.endpoint_shape{height:7px;width:7px;min-width:7px;min-height:7px;border-radius:7px}.endpoint_spin{animation:spin 3s linear infinite;opacity:1;z-index:var(--z-frame)}@keyframes spin{to{transform:rotate(360deg)}}.endpoint_spin_rev{animation:spin_rev 3s linear infinite;opacity:1;z-index:var(--z-frame)}@keyframes spin_rev{to{transform:rotate(-360deg)}}.bars_vertical{height:60px;width:60px;display:flex;align-items:center;justify-content:center}.bars_vertical .bar1,.bars_vertical .bar2,.bars_vertical .bar3,.bars_vertical .bar4,.bars_vertical .bar5{animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:alternate;transform-origin:center center;margin:0 5px}.bars_vertical .bar1{animation-name:bars_vertical_grow;animation-delay:.2s}.bars_vertical .bar2{animation-name:bars_vertical_grow;animation-delay:.4s}.bars_vertical .bar3{animation-name:bars_vertical_grow;animation-delay:.6s}.bars_vertical .bar4{animation-name:bars_vertical_grow;animation-delay:.8s}.bars_vertical .bar5{animation-name:bars_vertical_grow;animation-delay:1s}@keyframes bars_vertical_grow{0%{transform:scale(.2);opacity:0}to{transform:scale(2);opacity:1}}@keyframes fadein{0%{opacity:0}to{opacity:.5}}.one{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:0s;animation:dot 1.3s infinite;animation-delay:0s}.two{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:.2s;animation:dot 1.3s infinite;animation-delay:.2s}.three{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:.3s;animation:dot 1.3s infinite;animation-delay:.3s}@-webkit-keyframes dot{0%{opacity:0}50%{opacity:0}to{opacity:1}}@keyframes dot{0%{opacity:0}50%{opacity:0}to{opacity:1}}\n"] });
|
|
9025
8849
|
}
|
|
9026
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8850
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
9027
8851
|
type: Component,
|
|
9028
8852
|
args: [{ selector: 'particle-loader', standalone: true, imports: [], template: "<div class=\"row column center_center height100\" style=\"max-width: 250px;\">\r\n <div class=\"ptl_loader\">\r\n <div class=\"ptl_loader__progress\" [style.background]=\"backgroundStyle ?? ''\"></div>\r\n </div>\r\n @if (!disableText) {\r\n @if (text.loadingText) {\r\n <div class=\"text md bold text_center mar_top15 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\r\n {{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span>\r\n </div>\r\n }\r\n @if (text.loadingSubtext) {\r\n <div class=\"text sm text_center mar_top5 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\r\n {{text.loadingSubtext}}\r\n </div>\r\n }\r\n }\r\n</div>\r\n", styles: [".ptl_loader{height:2px;position:relative;overflow:hidden;width:100%}.ptl_loader__progress{background:linear-gradient(to right,rgba(0,0,0,0) 0%,var(--bg-purple-color) 33%,var(--bg-blue-color) 50%,var(--bg-green-color) 66%,rgba(0,0,0,0) 100%);position:absolute;bottom:0;top:0;width:100%;animation-duration:2s;animation-iteration-count:infinite;animation-name:ptl_loader}@keyframes ptl_loader{0%{left:-100%}to{left:100%}}.endpoint_fadein{animation:fadeInAnimation ease 1s;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}.endpoint_shape{height:7px;width:7px;min-width:7px;min-height:7px;border-radius:7px}.endpoint_spin{animation:spin 3s linear infinite;opacity:1;z-index:var(--z-frame)}@keyframes spin{to{transform:rotate(360deg)}}.endpoint_spin_rev{animation:spin_rev 3s linear infinite;opacity:1;z-index:var(--z-frame)}@keyframes spin_rev{to{transform:rotate(-360deg)}}.bars_vertical{height:60px;width:60px;display:flex;align-items:center;justify-content:center}.bars_vertical .bar1,.bars_vertical .bar2,.bars_vertical .bar3,.bars_vertical .bar4,.bars_vertical .bar5{animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:alternate;transform-origin:center center;margin:0 5px}.bars_vertical .bar1{animation-name:bars_vertical_grow;animation-delay:.2s}.bars_vertical .bar2{animation-name:bars_vertical_grow;animation-delay:.4s}.bars_vertical .bar3{animation-name:bars_vertical_grow;animation-delay:.6s}.bars_vertical .bar4{animation-name:bars_vertical_grow;animation-delay:.8s}.bars_vertical .bar5{animation-name:bars_vertical_grow;animation-delay:1s}@keyframes bars_vertical_grow{0%{transform:scale(.2);opacity:0}to{transform:scale(2);opacity:1}}@keyframes fadein{0%{opacity:0}to{opacity:.5}}.one{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:0s;animation:dot 1.3s infinite;animation-delay:0s}.two{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:.2s;animation:dot 1.3s infinite;animation-delay:.2s}.three{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:.3s;animation:dot 1.3s infinite;animation-delay:.3s}@-webkit-keyframes dot{0%{opacity:0}50%{opacity:0}to{opacity:1}}@keyframes dot{0%{opacity:0}50%{opacity:0}to{opacity:1}}\n"] }]
|
|
9029
8853
|
}], propDecorators: { text: [{
|
|
@@ -9082,8 +8906,8 @@ class RadioButtonsComponent {
|
|
|
9082
8906
|
this.value.set(value);
|
|
9083
8907
|
this.onChange(value);
|
|
9084
8908
|
}
|
|
9085
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9086
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8909
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RadioButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8910
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: RadioButtonsComponent, isStandalone: true, selector: "particle-radio-buttons", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, colorClass: { classPropertyName: "colorClass", publicName: "colorClass", isSignal: true, isRequired: false, transformFunction: null }, isDisplayColumn: { classPropertyName: "isDisplayColumn", publicName: "isDisplayColumn", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
9087
8911
|
{
|
|
9088
8912
|
provide: NG_VALUE_ACCESSOR,
|
|
9089
8913
|
useExisting: forwardRef(() => RadioButtonsComponent),
|
|
@@ -9091,7 +8915,7 @@ class RadioButtonsComponent {
|
|
|
9091
8915
|
}
|
|
9092
8916
|
], ngImport: i0, template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\r\n @for (option of options(); track $index) {\r\n <div class=\"col\">\r\n <button class=\"access btnset clear\"\r\n style=\"cursor:default;\"\r\n (click)=\"handleInput(option.value)\"\r\n [disabled]=\"disabled() || option.disabled\"\r\n [attr.aria-label]=\"option.label\"\r\n [id]=\"$index === 0 && inputId() ? inputId() : ''\"\r\n >\r\n <div class=\"row rc_gap v_center ent_r2l_dir\">\r\n <div class=\"col\">\r\n <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\r\n <div class=\"circle_20px\"\r\n [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\r\n ></div>\r\n </div>\r\n </div>\r\n <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\r\n {{option.label}}\r\n </div>\r\n </div>\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
9093
8917
|
}
|
|
9094
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8918
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RadioButtonsComponent, decorators: [{
|
|
9095
8919
|
type: Component,
|
|
9096
8920
|
args: [{ selector: 'particle-radio-buttons', imports: [
|
|
9097
8921
|
NgClass
|
|
@@ -9118,10 +8942,10 @@ class JsonInterceptor {
|
|
|
9118
8942
|
const clone = req.clone({ setHeaders: { 'Content-Type': 'application/json' } });
|
|
9119
8943
|
return next.handle(clone);
|
|
9120
8944
|
}
|
|
9121
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9122
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
8945
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: JsonInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
8946
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: JsonInterceptor });
|
|
9123
8947
|
}
|
|
9124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8948
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: JsonInterceptor, decorators: [{
|
|
9125
8949
|
type: Injectable
|
|
9126
8950
|
}] });
|
|
9127
8951
|
|
|
@@ -9364,10 +9188,10 @@ class LocalStorageService {
|
|
|
9364
9188
|
remove(key) {
|
|
9365
9189
|
localStorage.removeItem(key);
|
|
9366
9190
|
}
|
|
9367
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9368
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
9191
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
9192
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalStorageService, providedIn: 'root' });
|
|
9369
9193
|
}
|
|
9370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9194
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalStorageService, decorators: [{
|
|
9371
9195
|
type: Injectable,
|
|
9372
9196
|
args: [{
|
|
9373
9197
|
providedIn: 'root'
|
|
@@ -9408,10 +9232,10 @@ class ThemeChangeDetectionService {
|
|
|
9408
9232
|
listen() {
|
|
9409
9233
|
return this._themeChanged.asObservable();
|
|
9410
9234
|
}
|
|
9411
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9412
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
9235
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemeChangeDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
9236
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemeChangeDetectionService, providedIn: 'root' });
|
|
9413
9237
|
}
|
|
9414
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemeChangeDetectionService, decorators: [{
|
|
9415
9239
|
type: Injectable,
|
|
9416
9240
|
args: [{
|
|
9417
9241
|
providedIn: 'root'
|
|
@@ -9874,10 +9698,10 @@ class ThemingService {
|
|
|
9874
9698
|
}
|
|
9875
9699
|
return rootVars;
|
|
9876
9700
|
}
|
|
9877
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9878
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
9701
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
9702
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemingService, providedIn: 'root' });
|
|
9879
9703
|
}
|
|
9880
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9704
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemingService, decorators: [{
|
|
9881
9705
|
type: Injectable,
|
|
9882
9706
|
args: [{
|
|
9883
9707
|
providedIn: 'root'
|