@entake/particle 20.0.5 → 21.0.0
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 +263 -441
- 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: [{
|
|
@@ -3730,8 +3684,8 @@ class ProfilePicComponent {
|
|
|
3730
3684
|
this.url = `url(${imageUrl})`;
|
|
3731
3685
|
}
|
|
3732
3686
|
url = null;
|
|
3733
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3734
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3687
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfilePicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3688
|
+
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
3689
|
<div class="ptl_profile_pic"
|
|
3736
3690
|
[style.height]="size"
|
|
3737
3691
|
[style.width]="size"
|
|
@@ -3742,7 +3696,7 @@ class ProfilePicComponent {
|
|
|
3742
3696
|
tooltipPosition="top">
|
|
3743
3697
|
</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
3698
|
}
|
|
3745
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3699
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfilePicComponent, decorators: [{
|
|
3746
3700
|
type: Component,
|
|
3747
3701
|
args: [{ selector: 'particle-profile-pic', template: `
|
|
3748
3702
|
<div class="ptl_profile_pic"
|
|
@@ -3956,10 +3910,10 @@ class RichTextComponent {
|
|
|
3956
3910
|
}
|
|
3957
3911
|
this.editor.commands.focus(position);
|
|
3958
3912
|
}
|
|
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 });
|
|
3913
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3914
|
+
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 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 });
|
|
3961
3915
|
}
|
|
3962
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3916
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RichTextComponent, decorators: [{
|
|
3963
3917
|
type: Component,
|
|
3964
3918
|
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"] }]
|
|
3965
3919
|
}], 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: [{
|
|
@@ -4003,10 +3957,10 @@ class OrdinalNumberPipe {
|
|
|
4003
3957
|
}
|
|
4004
3958
|
return stringifiedNumber + ordinalSuffix;
|
|
4005
3959
|
}
|
|
4006
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4007
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
3960
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: OrdinalNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
3961
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: OrdinalNumberPipe, isStandalone: true, name: "ordinalNumber" });
|
|
4008
3962
|
}
|
|
4009
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3963
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: OrdinalNumberPipe, decorators: [{
|
|
4010
3964
|
type: Pipe,
|
|
4011
3965
|
args: [{
|
|
4012
3966
|
name: 'ordinalNumber'
|
|
@@ -4456,10 +4410,10 @@ class CalendarComponent {
|
|
|
4456
4410
|
clear() {
|
|
4457
4411
|
this.selectedDate = null;
|
|
4458
4412
|
}
|
|
4459
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4460
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4413
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4414
|
+
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
4415
|
}
|
|
4462
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4416
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
4463
4417
|
type: Component,
|
|
4464
4418
|
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
4419
|
}], ctorParameters: () => [], propDecorators: { calendarWidgetDiv: [{
|
|
@@ -4879,11 +4833,13 @@ class DatePickerComponent {
|
|
|
4879
4833
|
* @param event the click MouseEvent
|
|
4880
4834
|
*/
|
|
4881
4835
|
openCalendar(event) {
|
|
4882
|
-
if (
|
|
4883
|
-
event
|
|
4836
|
+
if (!this.disabled) {
|
|
4837
|
+
if (event) {
|
|
4838
|
+
event.stopImmediatePropagation();
|
|
4839
|
+
}
|
|
4840
|
+
this.showCalendar = { currentValue: this.value };
|
|
4841
|
+
this.calendarPopover.toggle(event);
|
|
4884
4842
|
}
|
|
4885
|
-
this.showCalendar = { currentValue: this.value };
|
|
4886
|
-
this.calendarPopover.toggle(event);
|
|
4887
4843
|
}
|
|
4888
4844
|
/**
|
|
4889
4845
|
* Hide calendar overlay and remove calendar from the DOM
|
|
@@ -4933,40 +4889,18 @@ class DatePickerComponent {
|
|
|
4933
4889
|
this.renderer.setStyle(this.calendarDiv.nativeElement, 'left', `${leftPosition}px`);
|
|
4934
4890
|
this.renderer.setStyle(this.calendarDiv.nativeElement, 'top', `${topPosition}px`);
|
|
4935
4891
|
}
|
|
4936
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4937
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4892
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4893
|
+
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
4894
|
{
|
|
4939
4895
|
provide: NG_VALUE_ACCESSOR,
|
|
4940
4896
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
4941
4897
|
multi: true
|
|
4942
4898
|
}
|
|
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
|
-
] });
|
|
4899
|
+
], 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
4900
|
}
|
|
4956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
4957
4902
|
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: [
|
|
4903
|
+
args: [{ selector: 'particle-date-picker', providers: [
|
|
4970
4904
|
{
|
|
4971
4905
|
provide: NG_VALUE_ACCESSOR,
|
|
4972
4906
|
useExisting: forwardRef(() => DatePickerComponent),
|
|
@@ -5190,8 +5124,8 @@ class DateRangePickerComponent {
|
|
|
5190
5124
|
clear() {
|
|
5191
5125
|
this.value = null;
|
|
5192
5126
|
}
|
|
5193
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5194
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5127
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5128
|
+
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
5129
|
{
|
|
5196
5130
|
provide: NG_VALUE_ACCESSOR,
|
|
5197
5131
|
useExisting: forwardRef(() => DateRangePickerComponent),
|
|
@@ -5199,7 +5133,7 @@ class DateRangePickerComponent {
|
|
|
5199
5133
|
}
|
|
5200
5134
|
], 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
5135
|
}
|
|
5202
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DateRangePickerComponent, decorators: [{
|
|
5203
5137
|
type: Component,
|
|
5204
5138
|
args: [{ selector: 'particle-date-range-picker', providers: [
|
|
5205
5139
|
{
|
|
@@ -5251,12 +5185,16 @@ class DropdownComponent {
|
|
|
5251
5185
|
this._allOptions = DropdownComponent.getAllOptions(this._options.value);
|
|
5252
5186
|
this.setSelectionIndex();
|
|
5253
5187
|
}
|
|
5254
|
-
|
|
5255
|
-
* Dependency injection site
|
|
5256
|
-
* @param renderer the Angular renderer
|
|
5257
|
-
* @param changeDetectorRef reference to the Angular change detector
|
|
5258
|
-
*/
|
|
5188
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
5259
5189
|
constructor() {
|
|
5190
|
+
effect(() => {
|
|
5191
|
+
if (this.isOpen()) {
|
|
5192
|
+
this.onAnimationStart();
|
|
5193
|
+
}
|
|
5194
|
+
else {
|
|
5195
|
+
setTimeout(() => this.render = false, 300);
|
|
5196
|
+
}
|
|
5197
|
+
});
|
|
5260
5198
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
5261
5199
|
let result = '';
|
|
5262
5200
|
for (let i = 0; i < 10; i++) {
|
|
@@ -5649,6 +5587,7 @@ class DropdownComponent {
|
|
|
5649
5587
|
if (!this.disabled()) {
|
|
5650
5588
|
this.render = true;
|
|
5651
5589
|
this.opened = true;
|
|
5590
|
+
setTimeout(() => this.toggleOpen(), 0);
|
|
5652
5591
|
}
|
|
5653
5592
|
}
|
|
5654
5593
|
/**
|
|
@@ -5656,40 +5595,29 @@ class DropdownComponent {
|
|
|
5656
5595
|
*/
|
|
5657
5596
|
closeDropdown() {
|
|
5658
5597
|
this.opened = false;
|
|
5598
|
+
this.toggleOpen();
|
|
5659
5599
|
}
|
|
5660
5600
|
/**
|
|
5661
5601
|
* 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
5602
|
*/
|
|
5689
|
-
|
|
5690
|
-
|
|
5691
|
-
|
|
5603
|
+
onAnimationStart() {
|
|
5604
|
+
this.resizeDropdownList();
|
|
5605
|
+
this.setSelectionIndex();
|
|
5606
|
+
if (this.selectionIndex !== null) {
|
|
5607
|
+
setTimeout(() => {
|
|
5608
|
+
this.dropdownOptions.toArray()[this.selectionIndex]
|
|
5609
|
+
.nativeElement
|
|
5610
|
+
.focus();
|
|
5611
|
+
});
|
|
5692
5612
|
}
|
|
5613
|
+
/*
|
|
5614
|
+
The height of the dropdown list is zero at the point where the above code executes,
|
|
5615
|
+
this is a workaround to align the list after its height is known to avoid a frame
|
|
5616
|
+
or two of the list at origin
|
|
5617
|
+
*/
|
|
5618
|
+
this.renderer.setStyle(this.dropdownList.nativeElement, 'top', '-999px');
|
|
5619
|
+
this.renderer.setStyle(this.dropdownList.nativeElement, 'left', '-999px');
|
|
5620
|
+
setTimeout(() => this.positionDropdownList());
|
|
5693
5621
|
}
|
|
5694
5622
|
/**
|
|
5695
5623
|
* Focus on the selected dropdown option on dropdown open
|
|
@@ -5842,46 +5770,27 @@ class DropdownComponent {
|
|
|
5842
5770
|
}
|
|
5843
5771
|
return previousOption;
|
|
5844
5772
|
}
|
|
5845
|
-
|
|
5846
|
-
|
|
5773
|
+
toggleOpen() {
|
|
5774
|
+
this.isOpen.update((isOpen) => !isOpen);
|
|
5775
|
+
}
|
|
5776
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5777
|
+
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
5778
|
{
|
|
5848
5779
|
provide: NG_VALUE_ACCESSOR,
|
|
5849
5780
|
useExisting: forwardRef(() => DropdownComponent),
|
|
5850
5781
|
multi: true
|
|
5851
5782
|
}
|
|
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
|
-
] });
|
|
5783
|
+
], 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
5784
|
}
|
|
5865
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5785
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
5866
5786
|
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: [
|
|
5787
|
+
args: [{ selector: 'particle-dropdown', providers: [
|
|
5879
5788
|
{
|
|
5880
5789
|
provide: NG_VALUE_ACCESSOR,
|
|
5881
5790
|
useExisting: forwardRef(() => DropdownComponent),
|
|
5882
5791
|
multi: true
|
|
5883
5792
|
}
|
|
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"] }]
|
|
5793
|
+
], 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
5794
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
5886
5795
|
type: Input
|
|
5887
5796
|
}], options: [{
|
|
@@ -6160,12 +6069,16 @@ class MultiSelectComponent {
|
|
|
6160
6069
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
6161
6070
|
onTouched = () => {
|
|
6162
6071
|
};
|
|
6163
|
-
|
|
6164
|
-
* Dependency injection site
|
|
6165
|
-
* @param renderer the Angular renderer
|
|
6166
|
-
* @param changeDetectorRef reference to the Angular change detector
|
|
6167
|
-
*/
|
|
6072
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
6168
6073
|
constructor() {
|
|
6074
|
+
effect(() => {
|
|
6075
|
+
if (this.isOpen()) {
|
|
6076
|
+
this.onAnimationStart();
|
|
6077
|
+
}
|
|
6078
|
+
else {
|
|
6079
|
+
setTimeout(() => this.render = false, 300);
|
|
6080
|
+
}
|
|
6081
|
+
});
|
|
6169
6082
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
6170
6083
|
let result = '';
|
|
6171
6084
|
for (let i = 0; i < 10; i++) {
|
|
@@ -6312,6 +6225,7 @@ class MultiSelectComponent {
|
|
|
6312
6225
|
if (!this.disabled()) {
|
|
6313
6226
|
this.render = true;
|
|
6314
6227
|
this.opened = true;
|
|
6228
|
+
setTimeout(() => this.toggleOpen(), 0);
|
|
6315
6229
|
}
|
|
6316
6230
|
}
|
|
6317
6231
|
/**
|
|
@@ -6320,39 +6234,28 @@ class MultiSelectComponent {
|
|
|
6320
6234
|
closeMultiSelect() {
|
|
6321
6235
|
this.opened = false;
|
|
6322
6236
|
this.selectionIndex = null;
|
|
6237
|
+
this.toggleOpen();
|
|
6323
6238
|
}
|
|
6324
6239
|
/**
|
|
6325
6240
|
* Position and resize the multi-select list on animation start if toState is open
|
|
6326
|
-
* @param event the Angular AnimationEvent
|
|
6327
6241
|
*/
|
|
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
|
-
}
|
|
6242
|
+
onAnimationStart() {
|
|
6243
|
+
this.resizeMultiSelectList();
|
|
6244
|
+
this.selectionIndex = null;
|
|
6245
|
+
setTimeout(() => {
|
|
6246
|
+
const option = this.getNextOption();
|
|
6247
|
+
if (option) {
|
|
6248
|
+
option.focus();
|
|
6249
|
+
}
|
|
6250
|
+
});
|
|
6251
|
+
/*
|
|
6252
|
+
The height of the multi-select list is zero at the point where the above code executes,
|
|
6253
|
+
this is a workaround to align the list after its height is known to avoid a frame
|
|
6254
|
+
or two of the list at origin
|
|
6255
|
+
*/
|
|
6256
|
+
this.renderer.setStyle(this.multiSelectList.nativeElement, 'top', '-999px');
|
|
6257
|
+
this.renderer.setStyle(this.multiSelectList.nativeElement, 'left', '-999px');
|
|
6258
|
+
setTimeout(() => this.positionMultiSelectList());
|
|
6356
6259
|
}
|
|
6357
6260
|
/**
|
|
6358
6261
|
* If the input value is already in the value array, remove it. Otherwise add it
|
|
@@ -6481,46 +6384,27 @@ class MultiSelectComponent {
|
|
|
6481
6384
|
}
|
|
6482
6385
|
return previousOption;
|
|
6483
6386
|
}
|
|
6484
|
-
|
|
6485
|
-
|
|
6387
|
+
toggleOpen() {
|
|
6388
|
+
this.isOpen.update((isOpen) => !isOpen);
|
|
6389
|
+
}
|
|
6390
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6391
|
+
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
6392
|
{
|
|
6487
6393
|
provide: NG_VALUE_ACCESSOR,
|
|
6488
6394
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
6489
6395
|
multi: true
|
|
6490
6396
|
}
|
|
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
|
-
] });
|
|
6397
|
+
], 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
6398
|
}
|
|
6504
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6399
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
6505
6400
|
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: [
|
|
6401
|
+
args: [{ selector: 'particle-multi-select', providers: [
|
|
6518
6402
|
{
|
|
6519
6403
|
provide: NG_VALUE_ACCESSOR,
|
|
6520
6404
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
6521
6405
|
multi: true
|
|
6522
6406
|
}
|
|
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"] }]
|
|
6407
|
+
], 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
6408
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
6525
6409
|
type: Input
|
|
6526
6410
|
}], options: [{
|
|
@@ -6621,10 +6505,10 @@ class NotificationService {
|
|
|
6621
6505
|
setNotificationLife(milliseconds) {
|
|
6622
6506
|
this.notificationLife = milliseconds;
|
|
6623
6507
|
}
|
|
6624
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6625
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
6508
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
6509
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationService, providedIn: 'root' });
|
|
6626
6510
|
}
|
|
6627
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6511
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationService, decorators: [{
|
|
6628
6512
|
type: Injectable,
|
|
6629
6513
|
args: [{
|
|
6630
6514
|
providedIn: 'root'
|
|
@@ -6668,74 +6552,12 @@ class NotificationComponent {
|
|
|
6668
6552
|
deleteNotification(id) {
|
|
6669
6553
|
this.notificationService.deleteNotification(id);
|
|
6670
6554
|
}
|
|
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
|
-
] });
|
|
6555
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6556
|
+
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
6557
|
}
|
|
6705
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6558
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationComponent, decorators: [{
|
|
6706
6559
|
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"] }]
|
|
6560
|
+
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
6561
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
|
|
6740
6562
|
|
|
6741
6563
|
/**
|
|
@@ -7162,8 +6984,8 @@ class WeekPickerComponent {
|
|
|
7162
6984
|
const valueBeforeUpdate = this.value;
|
|
7163
6985
|
if (!this.disabled) {
|
|
7164
6986
|
this.value = value;
|
|
7165
|
-
if (!isEqual(valueBeforeUpdate
|
|
7166
|
-
!isEqual(valueBeforeUpdate
|
|
6987
|
+
if (!isEqual(valueBeforeUpdate?.start, this.value.start) &&
|
|
6988
|
+
!isEqual(valueBeforeUpdate?.end, this.value.end)) {
|
|
7167
6989
|
this.onChange(this.value);
|
|
7168
6990
|
this.weekSelected.emit(this.value);
|
|
7169
6991
|
}
|
|
@@ -7198,16 +7020,16 @@ class WeekPickerComponent {
|
|
|
7198
7020
|
this.currentDate.selectable = isWithinInterval(startOfCurrentWeek, selectionInterval) &&
|
|
7199
7021
|
isWithinInterval(endOfCurrentWeek, selectionInterval);
|
|
7200
7022
|
}
|
|
7201
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7202
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7023
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WeekPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7024
|
+
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
7025
|
{
|
|
7204
7026
|
provide: NG_VALUE_ACCESSOR,
|
|
7205
7027
|
useExisting: forwardRef(() => WeekPickerComponent),
|
|
7206
7028
|
multi: true
|
|
7207
7029
|
}
|
|
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" }] });
|
|
7030
|
+
], 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
7031
|
}
|
|
7210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7032
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: WeekPickerComponent, decorators: [{
|
|
7211
7033
|
type: Component,
|
|
7212
7034
|
args: [{ selector: 'particle-week-picker', providers: [
|
|
7213
7035
|
{
|
|
@@ -7215,7 +7037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7215
7037
|
useExisting: forwardRef(() => WeekPickerComponent),
|
|
7216
7038
|
multi: true
|
|
7217
7039
|
}
|
|
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"] }]
|
|
7040
|
+
], 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
7041
|
}], ctorParameters: () => [], propDecorators: { value: [{
|
|
7220
7042
|
type: Input
|
|
7221
7043
|
}], disabled: [{
|
|
@@ -7488,8 +7310,8 @@ class ColorPickerComponent {
|
|
|
7488
7310
|
}
|
|
7489
7311
|
return colorPickerSupported;
|
|
7490
7312
|
}
|
|
7491
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7492
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7313
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7314
|
+
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
7315
|
{
|
|
7494
7316
|
provide: NG_VALUE_ACCESSOR,
|
|
7495
7317
|
useExisting: forwardRef(() => ColorPickerComponent),
|
|
@@ -7497,7 +7319,7 @@ class ColorPickerComponent {
|
|
|
7497
7319
|
}
|
|
7498
7320
|
], 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
7321
|
}
|
|
7500
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7322
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
7501
7323
|
type: Component,
|
|
7502
7324
|
args: [{ selector: 'particle-color-picker', providers: [
|
|
7503
7325
|
{
|
|
@@ -7704,8 +7526,8 @@ class SliderComponent {
|
|
|
7704
7526
|
setSliderWidth() {
|
|
7705
7527
|
this.sliderWidth = Math.min(100, (this.value - this._min) / (this._max - this._min) * 100);
|
|
7706
7528
|
}
|
|
7707
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7708
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
7529
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7530
|
+
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
7531
|
{
|
|
7710
7532
|
provide: NG_VALUE_ACCESSOR,
|
|
7711
7533
|
useExisting: forwardRef(() => SliderComponent),
|
|
@@ -7713,7 +7535,7 @@ class SliderComponent {
|
|
|
7713
7535
|
}
|
|
7714
7536
|
], 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
7537
|
}
|
|
7716
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7538
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SliderComponent, decorators: [{
|
|
7717
7539
|
type: Component,
|
|
7718
7540
|
args: [{ selector: 'particle-slider', providers: [
|
|
7719
7541
|
{
|
|
@@ -7806,12 +7628,12 @@ class AccordionComponent {
|
|
|
7806
7628
|
this.contentDivs.get(index).nativeElement.ariaHidden = 'false';
|
|
7807
7629
|
}
|
|
7808
7630
|
};
|
|
7809
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7810
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7631
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7632
|
+
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
7633
|
}
|
|
7812
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7634
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
7813
7635
|
type: Component,
|
|
7814
|
-
args: [{ selector: 'particle-accordion', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, NgTemplateOutlet, AccordionItemDirective], template: "@for (item of items; track
|
|
7636
|
+
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
7637
|
}], propDecorators: { multiple: [{
|
|
7816
7638
|
type: Input
|
|
7817
7639
|
}], height: [{
|
|
@@ -7916,10 +7738,10 @@ class SlideoverComponent {
|
|
|
7916
7738
|
this._determineBreakpointExceeded(window.innerWidth);
|
|
7917
7739
|
}, 100);
|
|
7918
7740
|
}
|
|
7919
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7920
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7741
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SlideoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7742
|
+
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
7743
|
}
|
|
7922
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7744
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SlideoverComponent, decorators: [{
|
|
7923
7745
|
type: Component,
|
|
7924
7746
|
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
7747
|
}], propDecorators: { position: [{
|
|
@@ -8057,10 +7879,10 @@ class IdleTimeoutComponent {
|
|
|
8057
7879
|
this.showDialog = null;
|
|
8058
7880
|
}
|
|
8059
7881
|
}
|
|
8060
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8061
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
7882
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IdleTimeoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7883
|
+
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
7884
|
}
|
|
8063
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7885
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IdleTimeoutComponent, decorators: [{
|
|
8064
7886
|
type: Component,
|
|
8065
7887
|
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
7888
|
}], propDecorators: { borderRadius: [{
|
|
@@ -8103,10 +7925,10 @@ class ScrollToTopComponent {
|
|
|
8103
7925
|
});
|
|
8104
7926
|
}
|
|
8105
7927
|
}
|
|
8106
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8107
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7928
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScrollToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7929
|
+
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
7930
|
}
|
|
8109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7931
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScrollToTopComponent, decorators: [{
|
|
8110
7932
|
type: Component,
|
|
8111
7933
|
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
7934
|
}], 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 +7958,10 @@ class LayoutFullwidthSidebarComponent {
|
|
|
8136
7958
|
+this.footerHeight().replace(/\D/g, "");
|
|
8137
7959
|
return `calc(100vh - ${offset}px)`;
|
|
8138
7960
|
}
|
|
8139
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8140
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7961
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutFullwidthSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7962
|
+
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
7963
|
}
|
|
8142
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7964
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutFullwidthSidebarComponent, decorators: [{
|
|
8143
7965
|
type: Component,
|
|
8144
7966
|
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
7967
|
}], 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 +8005,10 @@ class LayoutFullFramingComponent {
|
|
|
8183
8005
|
+this.footerHeight().replace(/\D/g, "");
|
|
8184
8006
|
return `calc(100% - ${offset}px)`;
|
|
8185
8007
|
}
|
|
8186
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8187
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8008
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutFullFramingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8009
|
+
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
8010
|
}
|
|
8189
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8011
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutFullFramingComponent, decorators: [{
|
|
8190
8012
|
type: Component,
|
|
8191
8013
|
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
8014
|
}], 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 +8093,14 @@ class ToggleSwitchComponent {
|
|
|
8271
8093
|
this.value = value;
|
|
8272
8094
|
}
|
|
8273
8095
|
}
|
|
8274
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8275
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8096
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8097
|
+
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
8098
|
provide: NG_VALUE_ACCESSOR,
|
|
8277
8099
|
useExisting: forwardRef(() => ToggleSwitchComponent),
|
|
8278
8100
|
multi: true
|
|
8279
8101
|
}], 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
8102
|
}
|
|
8281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
|
|
8282
8104
|
type: Component,
|
|
8283
8105
|
args: [{ selector: 'particle-toggle-switch', providers: [{
|
|
8284
8106
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -8361,8 +8183,8 @@ class CheckboxComponent {
|
|
|
8361
8183
|
this.onChange(this.value);
|
|
8362
8184
|
this.changeDetectorRef.detectChanges();
|
|
8363
8185
|
}
|
|
8364
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8365
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8186
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8187
|
+
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
8188
|
{
|
|
8367
8189
|
provide: NG_VALUE_ACCESSOR,
|
|
8368
8190
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
@@ -8370,7 +8192,7 @@ class CheckboxComponent {
|
|
|
8370
8192
|
}
|
|
8371
8193
|
], 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
8194
|
}
|
|
8373
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
8374
8196
|
type: Component,
|
|
8375
8197
|
args: [{ selector: 'particle-checkbox', providers: [
|
|
8376
8198
|
{
|
|
@@ -8903,14 +8725,14 @@ class InputMaskComponent {
|
|
|
8903
8725
|
focus() {
|
|
8904
8726
|
this.inputViewChild.nativeElement.focus();
|
|
8905
8727
|
}
|
|
8906
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
8907
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
8728
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: InputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8729
|
+
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
8730
|
[attr.size]="size" [attr.autocomplete]="autocomplete" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [attr.aria-label]="ariaLabel"
|
|
8909
8731
|
[attr.aria-required]="ariaRequired" [disabled]="disabled" [readonly]="readonly" [attr.required]="required"
|
|
8910
8732
|
(focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (keydown)="onKeyDown($event)"
|
|
8911
8733
|
(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
8734
|
}
|
|
8913
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8735
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: InputMaskComponent, decorators: [{
|
|
8914
8736
|
type: Component,
|
|
8915
8737
|
args: [{
|
|
8916
8738
|
selector: 'particle-input-mask',
|
|
@@ -8997,10 +8819,10 @@ class ProgressBarComponent {
|
|
|
8997
8819
|
height = input(20, ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
8998
8820
|
showBorder = input(true, ...(ngDevMode ? [{ debugName: "showBorder" }] : []));
|
|
8999
8821
|
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: "
|
|
8822
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8823
|
+
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
8824
|
}
|
|
9003
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8825
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
9004
8826
|
type: Component,
|
|
9005
8827
|
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
8828
|
}], propDecorators: { percentComplete: [{
|
|
@@ -9020,10 +8842,10 @@ class LoaderComponent {
|
|
|
9020
8842
|
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
8843
|
}
|
|
9022
8844
|
}
|
|
9023
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9024
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8845
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8846
|
+
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
8847
|
}
|
|
9026
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8848
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
9027
8849
|
type: Component,
|
|
9028
8850
|
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
8851
|
}], propDecorators: { text: [{
|
|
@@ -9082,8 +8904,8 @@ class RadioButtonsComponent {
|
|
|
9082
8904
|
this.value.set(value);
|
|
9083
8905
|
this.onChange(value);
|
|
9084
8906
|
}
|
|
9085
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9086
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
8907
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RadioButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8908
|
+
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
8909
|
{
|
|
9088
8910
|
provide: NG_VALUE_ACCESSOR,
|
|
9089
8911
|
useExisting: forwardRef(() => RadioButtonsComponent),
|
|
@@ -9091,7 +8913,7 @@ class RadioButtonsComponent {
|
|
|
9091
8913
|
}
|
|
9092
8914
|
], 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
8915
|
}
|
|
9094
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8916
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RadioButtonsComponent, decorators: [{
|
|
9095
8917
|
type: Component,
|
|
9096
8918
|
args: [{ selector: 'particle-radio-buttons', imports: [
|
|
9097
8919
|
NgClass
|
|
@@ -9118,10 +8940,10 @@ class JsonInterceptor {
|
|
|
9118
8940
|
const clone = req.clone({ setHeaders: { 'Content-Type': 'application/json' } });
|
|
9119
8941
|
return next.handle(clone);
|
|
9120
8942
|
}
|
|
9121
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9122
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
8943
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: JsonInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
8944
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: JsonInterceptor });
|
|
9123
8945
|
}
|
|
9124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
8946
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: JsonInterceptor, decorators: [{
|
|
9125
8947
|
type: Injectable
|
|
9126
8948
|
}] });
|
|
9127
8949
|
|
|
@@ -9364,10 +9186,10 @@ class LocalStorageService {
|
|
|
9364
9186
|
remove(key) {
|
|
9365
9187
|
localStorage.removeItem(key);
|
|
9366
9188
|
}
|
|
9367
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9368
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
9189
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
9190
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalStorageService, providedIn: 'root' });
|
|
9369
9191
|
}
|
|
9370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LocalStorageService, decorators: [{
|
|
9371
9193
|
type: Injectable,
|
|
9372
9194
|
args: [{
|
|
9373
9195
|
providedIn: 'root'
|
|
@@ -9408,10 +9230,10 @@ class ThemeChangeDetectionService {
|
|
|
9408
9230
|
listen() {
|
|
9409
9231
|
return this._themeChanged.asObservable();
|
|
9410
9232
|
}
|
|
9411
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9412
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
9233
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemeChangeDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
9234
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemeChangeDetectionService, providedIn: 'root' });
|
|
9413
9235
|
}
|
|
9414
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemeChangeDetectionService, decorators: [{
|
|
9415
9237
|
type: Injectable,
|
|
9416
9238
|
args: [{
|
|
9417
9239
|
providedIn: 'root'
|
|
@@ -9874,10 +9696,10 @@ class ThemingService {
|
|
|
9874
9696
|
}
|
|
9875
9697
|
return rootVars;
|
|
9876
9698
|
}
|
|
9877
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9878
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
9699
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
9700
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemingService, providedIn: 'root' });
|
|
9879
9701
|
}
|
|
9880
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
9702
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ThemingService, decorators: [{
|
|
9881
9703
|
type: Injectable,
|
|
9882
9704
|
args: [{
|
|
9883
9705
|
providedIn: 'root'
|