@entake/particle 20.0.1 → 20.0.3

package/fesm2022/entake-particle.mjs

@@ -186,11 +186,11 @@ class ParticleIconsModule {
         const FontAwesome = window.FontAwesome;
         FontAwesome.library.add(...ParticleIconsBrand.icons, ...ParticleIconsRegular.icons, ...ParticleIconsSolid.icons);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ParticleIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: ParticleIconsModule });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ParticleIconsModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ParticleIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ParticleIconsModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ParticleIconsModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ParticleIconsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ParticleIconsModule, decorators: [{
             type: NgModule
         }], ctorParameters: () => [] });
 
@@ -539,10 +539,10 @@ class TooltipDirective {
             ? parents
             : this.getParentElements(parentNode, parents.concat([parentNode]));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.4", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[particleTooltip]',
@@ -550,7 +550,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 }]
         }], propDecorators: { particleTooltip: [{
                 type: Input
-            }], tooltipDisabled: [{
+            }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], tooltipDisabled: [{
                 type: Input
             }], onMouseEnter: [{
                 type: HostListener,
@@ -704,10 +704,10 @@ class KeyfilterDirective {
             this.hostElement.nativeElement.value = '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: KeyfilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: KeyfilterDirective, isStandalone: true, selector: "[particleKeyfilter]", inputs: { filterType: ["particleKeyfilter", "filterType"], allowSpaces: "allowSpaces" }, host: { listeners: { "keydown": "onKeyDown($event)", "paste": "onPaste($event)", "blur": "onBlur()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KeyfilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: KeyfilterDirective, isStandalone: true, selector: "[particleKeyfilter]", inputs: { filterType: ["particleKeyfilter", "filterType"], allowSpaces: "allowSpaces" }, host: { listeners: { "keydown": "onKeyDown($event)", "paste": "onPaste($event)", "blur": "onBlur()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: KeyfilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: KeyfilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[particleKeyfilter]',
@@ -731,10 +731,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
 
 class AccordionContentDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: AccordionContentDirective, isStandalone: true, selector: "[particleAccordionContent]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: AccordionContentDirective, isStandalone: true, selector: "[particleAccordionContent]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[particleAccordionContent]',
@@ -744,10 +744,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
 
 class AccordionHeaderDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: AccordionHeaderDirective, isStandalone: true, selector: "[particleAccordionHeader]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: AccordionHeaderDirective, isStandalone: true, selector: "[particleAccordionHeader]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[particleAccordionHeader]',
@@ -762,10 +762,10 @@ class AccordionItemDirective {
     headerClass = null;
     headerTemplate = null;
     content = null;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionItemDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -868,10 +868,10 @@ class BackgroundCarouselDirective {
     ngOnDestroy() {
         clearInterval(this._interval);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BackgroundCarouselDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: BackgroundCarouselDirective, isStandalone: true, selector: "[particleCarousel]", inputs: { options: ["particleCarouselOptions", "options"] }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BackgroundCarouselDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: BackgroundCarouselDirective, isStandalone: true, selector: "[particleCarousel]", inputs: { options: ["particleCarouselOptions", "options"] }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: BackgroundCarouselDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BackgroundCarouselDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[particleCarousel]',
@@ -920,10 +920,10 @@ class DialogService {
             document.body.classList.remove('scroll_none');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1002,6 +1002,9 @@ class DialogComponent {
      * Width of the dialog (can use any width measurement)
      */
     width = input('900px', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    /**
+     * @deprecated This is no longer used and will be removed
+     */
     borderRadius = input('0px', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
     text = input({
         close: 'Close Dialog',
@@ -1039,8 +1042,8 @@ class DialogComponent {
             this.closed.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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\" [style.border-radius]=\"borderRadius()\"\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                        <i class=\"fas fa-maximize\"></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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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: [
             trigger('dialog', [
                 state('void', style({ transform: 'scale(0.5)', opacity: '0' })),
                 transition('void => *', [
@@ -1053,7 +1056,7 @@ class DialogComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-dialog', animations: [
                         trigger('dialog', [
@@ -1066,13 +1069,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                                 animate('.15s 0ms ease-in-out', style({ transform: 'scale(0.5)', opacity: '0' }))
                             ]),
                         ])
-                    ], 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\" [style.border-radius]=\"borderRadius()\"\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                        <i class=\"fas fa-maximize\"></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"] }]
+                    ], 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"] }]
         }], propDecorators: { closeButton: [{
                 type: ViewChild,
                 args: ['closeButton']
             }], object: [{
                 type: Input
-            }] } });
+            }], 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"] }] } });
 
 /**
  * Model representing Fontawesome's brands icons
@@ -2794,10 +2797,10 @@ class IconsService {
         }
         return icons;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3132,8 +3135,8 @@ class IconSelectComponent {
         this._searchClick.next('');
         this._activePage.next(0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => IconSelectComponent),
@@ -3141,7 +3144,7 @@ class IconSelectComponent {
             }
         ], 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IconSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-icon-select', providers: [
                         {
@@ -3154,7 +3157,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
-            }], iconScrollContainer: [{
+            }], buttonColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonColorClass", required: false }] }], buttonSizing: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSizing", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], selected: [{ type: i0.Output, args: ["selected"] }], closed: [{ type: i0.Output, args: ["closed"] }], iconScrollContainer: [{
                 type: ViewChild,
                 args: ['iconScrollContainer']
             }] } });
@@ -3445,8 +3448,8 @@ class PopoverComponent {
         }
         this.escapeKeyUpUnlisteners = [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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()" } }, ngImport: i0, 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"], 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"] }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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()" } }, ngImport: i0, 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"], 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"] }], animations: [
             trigger('openClose', [
                 transition('void => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -3459,7 +3462,7 @@ class PopoverComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-popover', animations: [
                         trigger('openClose', [
@@ -3473,11 +3476,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             ]),
                         ])
                     ], 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"] }]
-        }], propDecorators: { width: [{
+        }], propDecorators: { offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], width: [{
                 type: Input
             }], height: [{
                 type: Input
-            }], onClick: [{
+            }], 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"] }], onClick: [{
                 type: HostListener,
                 args: ['window:click', ['$event']]
             }], onWindowResize: [{
@@ -3684,15 +3687,15 @@ class PaginatorComponent {
         }
         this.pageJumpInput = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
             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"] }]
-        }], propDecorators: { pageSize: [{
+        }], propDecorators: { pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageSize: [{
                 type: Input
-            }] } });
+            }], totalLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalLength", required: false }] }], showPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPages", required: false }] }], showFirstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLast", required: false }] }], showButtonLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonLabels", required: false }] }], showResultsPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResultsPanel", required: false }] }], startingPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "startingPage", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], paginate: [{ type: i0.Output, args: ["paginate"] }] } });
 
 /**
  * Profile Pic display shortcut
@@ -3727,8 +3730,8 @@ class ProfilePicComponent {
         this.url = `url(${imageUrl})`;
     }
     url = null;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ProfilePicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: ProfilePicComponent, isStandalone: true, selector: "particle-profile-pic", inputs: { size: "size", margin: "margin", toolTip: "toolTip", tooltipDisabled: "tooltipDisabled", gravatarEmail: "gravatarEmail", imageUrl: "imageUrl" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ProfilePicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ProfilePicComponent, isStandalone: true, selector: "particle-profile-pic", inputs: { size: "size", margin: "margin", toolTip: "toolTip", tooltipDisabled: "tooltipDisabled", gravatarEmail: "gravatarEmail", imageUrl: "imageUrl" }, ngImport: i0, template: `
     <div class="ptl_profile_pic"
          [style.height]="size"
          [style.width]="size"
@@ -3739,7 +3742,7 @@ class ProfilePicComponent {
          tooltipPosition="top">
     </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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ProfilePicComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ProfilePicComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-profile-pic', template: `
     <div class="ptl_profile_pic"
@@ -3811,7 +3814,6 @@ class RichTextComponent {
         link: true,
         images: false
     }, ...(ngDevMode ? [{ debugName: "capabilities" }] : []));
-    borderRadius = input('0px', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
     textChanged = output();
     showDialog = null;
     dialogLink = null;
@@ -3879,7 +3881,7 @@ class RichTextComponent {
     }
     set value(value) {
         if (value === '<p></p>') {
-            return;
+            value = null;
         }
         if (value !== this._value) {
             this._value = value;
@@ -3952,15 +3954,15 @@ class RichTextComponent {
         }
         this.editor.commands.focus(position);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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 }, 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 }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", 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().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\" [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  [borderRadius]=\"borderRadius()\"\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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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 }, 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().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\" [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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RichTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RichTextComponent, decorators: [{
             type: Component,
-            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().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\" [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  [borderRadius]=\"borderRadius()\"\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"] }]
-        }], propDecorators: { readonly: [{
+            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().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\" [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"] }]
+        }], 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 }] }], readonly: [{
                 type: Input
-            }] } });
+            }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], capabilities: [{ type: i0.Input, args: [{ isSignal: true, alias: "capabilities", required: false }] }], textChanged: [{ type: i0.Output, args: ["textChanged"] }] } });
 
 /**
  * Pipe to transform an input number into its ordinal format
@@ -3999,10 +4001,10 @@ class OrdinalNumberPipe {
         }
         return stringifiedNumber + ordinalSuffix;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: OrdinalNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.2.4", ngImport: i0, type: OrdinalNumberPipe, isStandalone: true, name: "ordinalNumber" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OrdinalNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: OrdinalNumberPipe, isStandalone: true, name: "ordinalNumber" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: OrdinalNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OrdinalNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'ordinalNumber'
@@ -4452,10 +4454,10 @@ class CalendarComponent {
     clear() {
         this.selectedDate = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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\">\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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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\">\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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             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\">\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"] }]
         }], ctorParameters: () => [], propDecorators: { calendarWidgetDiv: [{
@@ -4476,7 +4478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 type: Input
             }], text: [{
                 type: Input
-            }], onKeyUp: [{
+            }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], closed: [{ type: i0.Output, args: ["closed"] }], onKeyUp: [{
                 type: HostListener,
                 args: ['window:keyup', ['$event']]
             }], handleClick: [{
@@ -4929,8 +4931,8 @@ class DatePickerComponent {
         this.renderer.setStyle(this.calendarDiv.nativeElement, 'left', `${leftPosition}px`);
         this.renderer.setStyle(this.calendarDiv.nativeElement, 'top', `${topPosition}px`);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatePickerComponent),
@@ -4949,7 +4951,7 @@ class DatePickerComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-date-picker', animations: [
                         trigger('openClose', [
@@ -4975,9 +4977,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 type: Input
             }], dateRange: [{
                 type: Input
-            }], text: [{
+            }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClassList", required: false }] }], calendarButtonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarButtonClassList", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputOnly", required: false }] }], text: [{
                 type: Input
-            }], datePickerDiv: [{
+            }], input: [{ type: i0.Output, args: ["input"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], datePickerDiv: [{
                 type: ViewChild,
                 args: ['datePickerDiv']
             }], calendarDiv: [{
@@ -5186,8 +5188,8 @@ class DateRangePickerComponent {
     clear() {
         this.value = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateRangePickerComponent),
@@ -5195,7 +5197,7 @@ class DateRangePickerComponent {
             }
         ], 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-date-range-picker', providers: [
                         {
@@ -5204,13 +5206,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             multi: true
                         }
                     ], imports: [NgClass, PopoverComponent, DatePickerComponent, FormsModule, CalendarComponent, 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    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"] }]
-        }], propDecorators: { dateRange: [{
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], inputClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClassList", required: false }] }], calendarButtonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarButtonClassList", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], dateRange: [{
                 type: Input
             }], value: [{
                 type: Input
             }], disabled: [{
                 type: Input
-            }], calendarPopover: [{
+            }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], calendarPopover: [{
                 type: ViewChild,
                 args: ['calendarPopover']
             }], beginCalendar: [{
@@ -5306,6 +5308,7 @@ class DropdownComponent {
     collapsedButtonTemplate = input(null, ...(ngDevMode ? [{ debugName: "collapsedButtonTemplate" }] : []));
     collapsedButtonTooltipEnabled = input(true, ...(ngDevMode ? [{ debugName: "collapsedButtonTooltipEnabled" }] : []));
     dropdownBoxMinWidth = input(200, ...(ngDevMode ? [{ debugName: "dropdownBoxMinWidth" }] : []));
+    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
     /**
      * Event emitted on value change, emits the new value
      */
@@ -5538,7 +5541,7 @@ class DropdownComponent {
      * @param event the keydown KeyboardEvent
      */
     onKeyDown(event) {
-        if (document.activeElement?.id?.includes(this.dropdownId) && !this.disabled()) {
+        if (document.activeElement?.id?.includes(this.inputId() ?? this.dropdownId) && !this.disabled()) {
             const { key } = event;
             if (DropdownComponent.ARROW_KEYS.includes(key)) {
                 event.preventDefault();
@@ -5550,7 +5553,7 @@ class DropdownComponent {
      * @param event the keyup KeyboardEvent
      */
     onKeyUp(event) {
-        if (document.activeElement?.id?.includes(this.dropdownId) && !this.disabled()) {
+        if (document.activeElement?.id?.includes(this.inputId() ?? this.dropdownId) && !this.disabled()) {
             const { key } = event;
             if (DropdownComponent.ARROW_KEYS.includes(key)) {
                 this.onArrowKeyUp(key);
@@ -5837,14 +5840,14 @@ class DropdownComponent {
         }
         return previousOption;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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 } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize($event)", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DropdownComponent),
                 multi: true
             }
-        ], 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          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]=\"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\">\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]=\"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]=\"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]=\"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]=\"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]=\"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: [
+        ], 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: [
             trigger('openClose', [
                 transition('close => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -5857,7 +5860,7 @@ class DropdownComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-dropdown', animations: [
                         trigger('openClose', [
@@ -5876,7 +5879,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             useExisting: forwardRef(() => DropdownComponent),
                             multi: true
                         }
-                    ], 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          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]=\"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\">\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]=\"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]=\"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]=\"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]=\"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]=\"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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], options: [{
@@ -5896,7 +5899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
             }], template: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], onWindowResize: [{
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], buttonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClassList", required: false }] }], collapsedButtonTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTemplate", required: false }] }], collapsedButtonTooltipEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTooltipEnabled", required: false }] }], dropdownBoxMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownBoxMinWidth", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
             }], onKeyDown: [{
@@ -6012,6 +6015,7 @@ class MultiSelectComponent {
     maxExpandedEntries = input(0, ...(ngDevMode ? [{ debugName: "maxExpandedEntries" }] : []));
     expandedAsGrid = input(false, ...(ngDevMode ? [{ debugName: "expandedAsGrid" }] : []));
     collapsedButtonTemplate = input(null, ...(ngDevMode ? [{ debugName: "collapsedButtonTemplate" }] : []));
+    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
     /**
      * Event emitted on value change, emits the new value
      */
@@ -6211,7 +6215,7 @@ class MultiSelectComponent {
      * @param event the keydown KeyboardEvent
      */
     onKeyDown(event) {
-        if (document.activeElement?.id?.includes(this.multiSelectId) && !this.disabled()) {
+        if (document.activeElement?.id?.includes(this.inputId() ?? this.multiSelectId) && !this.disabled()) {
             const { key } = event;
             if (MultiSelectComponent.ARROW_KEYS.includes(key)) {
                 event.preventDefault();
@@ -6223,7 +6227,7 @@ class MultiSelectComponent {
      * @param event the keyup KeyboardEvent
      */
     onKeyUp(event) {
-        if (document.activeElement?.id?.includes(this.multiSelectId) && !this.disabled()) {
+        if (document.activeElement?.id?.includes(this.inputId() ?? this.multiSelectId) && !this.disabled()) {
             const { key } = event;
             if (MultiSelectComponent.ARROW_KEYS.includes(key)) {
                 this.onArrowKeyUp(key);
@@ -6475,14 +6479,14 @@ class MultiSelectComponent {
         }
         return previousOption;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", 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 } }, outputs: { disabled: "disabledChange", changed: "changed" }, host: { listeners: { "window:resize": "onWindowResize()", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], 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            aria-haspopup=\"listbox\"\r\n            type=\"button\"\r\n            (click)=\"openMultiSelect($event)\"\r\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n            [id]=\"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    >\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]=\"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]=\"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]=\"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]=\"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: [
+        ], 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: [
             trigger('openClose', [
                 transition('close => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -6495,7 +6499,7 @@ class MultiSelectComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-multi-select', animations: [
                         trigger('openClose', [
@@ -6514,7 +6518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true
                         }
-                    ], 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            aria-haspopup=\"listbox\"\r\n            type=\"button\"\r\n            (click)=\"openMultiSelect($event)\"\r\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n            [id]=\"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    >\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]=\"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]=\"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]=\"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]=\"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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], options: [{
@@ -6534,7 +6538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
             }], template: [{
                 type: ContentChild,
                 args: [TemplateRef]
-            }], onWindowResize: [{
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], buttonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClassList", required: false }] }], entryClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "entryClassList", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], maxExpandedEntries: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxExpandedEntries", required: false }] }], expandedAsGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedAsGrid", required: false }] }], collapsedButtonTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedButtonTemplate", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }], onKeyDown: [{
@@ -6615,10 +6619,10 @@ class NotificationService {
     setNotificationLife(milliseconds) {
         this.notificationLife = milliseconds;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: NotificationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NotificationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: NotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NotificationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -6662,8 +6666,8 @@ class NotificationComponent {
     deleteNotification(id) {
         this.notificationService.deleteNotification(id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: NotificationComponent, isStandalone: true, selector: "particle-notification", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: NotificationComponent, isStandalone: true, selector: "particle-notification", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
             // nice stagger effect when showing existing elements
             trigger('list', [
                 transition(':enter', [
@@ -6696,7 +6700,7 @@ class NotificationComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: NotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-notification', animations: [
                         // nice stagger effect when showing existing elements
@@ -6730,7 +6734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             ]),
                         ])
                     ], 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"] }]
-        }] });
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 
 /**
  * Component to allow a user to select a week
@@ -7192,8 +7196,8 @@ class WeekPickerComponent {
         this.currentDate.selectable = isWithinInterval(startOfCurrentWeek, selectionInterval) &&
             isWithinInterval(endOfCurrentWeek, selectionInterval);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: WeekPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WeekPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => WeekPickerComponent),
@@ -7201,7 +7205,7 @@ class WeekPickerComponent {
             }
         ], 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: WeekPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WeekPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-week-picker', providers: [
                         {
@@ -7216,7 +7220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 type: Input
             }], dateRange: [{
                 type: Input
-            }], calendarPopover: [{
+            }], inputClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClassList", required: false }] }], calendarButtonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarButtonClassList", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], weekSelected: [{ type: i0.Output, args: ["weekSelected"] }], calendarPopover: [{
                 type: ViewChild,
                 args: ['calendarPopover']
             }] } });
@@ -7482,8 +7486,8 @@ class ColorPickerComponent {
         }
         return colorPickerSupported;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: ColorPickerComponent, isStandalone: true, selector: "particle-color-picker", inputs: { value: "value", disabled: "disabled", classList: "classList", text: "text" }, outputs: { input: "input", colorSelected: "colorSelected" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ColorPickerComponent, isStandalone: true, selector: "particle-color-picker", inputs: { value: "value", disabled: "disabled", classList: "classList", text: "text" }, outputs: { input: "input", colorSelected: "colorSelected" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorPickerComponent),
@@ -7491,7 +7495,7 @@ class ColorPickerComponent {
             }
         ], 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-color-picker', providers: [
                         {
@@ -7508,9 +7512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 type: Input
             }], text: [{
                 type: Input
-            }], 
-        // eslint-disable-next-line @angular-eslint/no-output-native
-        input: [{
+            }], input: [{
                 type: Output
             }], colorSelected: [{
                 type: Output
@@ -7700,8 +7702,8 @@ class SliderComponent {
     setSliderWidth() {
         this.sliderWidth = Math.min(100, (this.value - this._min) / (this._max - this._min) * 100);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SliderComponent),
@@ -7709,7 +7711,7 @@ class SliderComponent {
             }
         ], 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 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-slider', providers: [
                         {
@@ -7733,7 +7735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 type: Input
             }], inputClassList: [{
                 type: Input
-            }] } });
+            }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], input: [{ type: i0.Output, args: ["input"] }] } });
 
 class AccordionComponent {
     expanded = new Set();
@@ -7802,10 +7804,10 @@ class AccordionComponent {
             this.contentDivs.get(index).nativeElement.ariaHidden = 'false';
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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 item; 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 item; 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-accordion', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, NgTemplateOutlet, AccordionItemDirective], template: "@for (item of items; track item; 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"] }]
         }], propDecorators: { multiple: [{
@@ -7912,15 +7914,15 @@ class SlideoverComponent {
             this._determineBreakpointExceeded(window.innerWidth);
         }, 100);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SlideoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SlideoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SlideoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SlideoverComponent, decorators: [{
             type: Component,
             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"] }]
         }], propDecorators: { position: [{
                 type: Input
-            }], overlay: [{
+            }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], bgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgClass", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], hideCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCloseButton", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], overlay: [{
                 type: ViewChild,
                 args: ['overlay']
             }], onResize: [{
@@ -8053,12 +8055,12 @@ class IdleTimeoutComponent {
             this.showDialog = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IdleTimeoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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  [borderRadius]=\"borderRadius\"\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IdleTimeoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IdleTimeoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: IdleTimeoutComponent, decorators: [{
             type: Component,
-            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  [borderRadius]=\"borderRadius\"\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" }]
+            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" }]
         }], propDecorators: { borderRadius: [{
                 type: Input
             }], timeoutInSeconds: [{
@@ -8099,13 +8101,13 @@ class ScrollToTopComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ScrollToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ScrollToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ScrollToTopComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ScrollToTopComponent, decorators: [{
             type: Component,
             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" }]
-        }] });
+        }], 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 }] }] } });
 
 class LayoutFullwidthSidebarComponent {
     mainContent = input(null, ...(ngDevMode ? [{ debugName: "mainContent" }] : []));
@@ -8132,13 +8134,13 @@ class LayoutFullwidthSidebarComponent {
             +this.footerHeight().replace(/\D/g, "");
         return `calc(100vh - ${offset}px)`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LayoutFullwidthSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutFullwidthSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LayoutFullwidthSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutFullwidthSidebarComponent, decorators: [{
             type: Component,
             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" }]
-        }], propDecorators: { slideover: [{
+        }], 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: [{
                 type: ViewChild,
                 args: ['slideover']
             }], onResize: [{
@@ -8179,13 +8181,13 @@ class LayoutFullFramingComponent {
             +this.footerHeight().replace(/\D/g, "");
         return `calc(100% - ${offset}px)`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LayoutFullFramingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutFullFramingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LayoutFullFramingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LayoutFullFramingComponent, decorators: [{
             type: Component,
             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" }]
-        }], propDecorators: { slideover: [{
+        }], 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: [{
                 type: ViewChild,
                 args: ['slideover']
             }], onResize: [{
@@ -8267,14 +8269,14 @@ class ToggleSwitchComponent {
             this.value = value;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ToggleSwitchComponent),
                 multi: true
             }], 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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-toggle-switch', providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -8283,7 +8285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         }], imports: [NgClass, NgTemplateOutlet, AsyncPipe], 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"] }]
         }], propDecorators: { options: [{
                 type: Input
-            }] } });
+            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
 
 class CheckboxComponent {
     changeDetectorRef = inject(ChangeDetectorRef);
@@ -8357,8 +8359,8 @@ class CheckboxComponent {
         this.onChange(this.value);
         this.changeDetectorRef.detectChanges();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxComponent),
@@ -8366,7 +8368,7 @@ class CheckboxComponent {
             }
         ], 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: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-checkbox', providers: [
                         {
@@ -8379,7 +8381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                 type: Input
             }], value: [{
                 type: Input
-            }] } });
+            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 
 const INPUTMASK_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -8899,14 +8901,14 @@ class InputMaskComponent {
     focus() {
         this.inputViewChild.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", 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"
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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"
                     [attr.size]="size" [attr.autocomplete]="autocomplete" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [attr.aria-label]="ariaLabel"
                     [attr.aria-required]="ariaRequired" [disabled]="disabled" [readonly]="readonly" [attr.required]="required"
                     (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (keydown)="onKeyDown($event)"
                     (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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputMaskComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: InputMaskComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'particle-input-mask',
@@ -8993,15 +8995,15 @@ class ProgressBarComponent {
     height = input(20, ...(ngDevMode ? [{ debugName: "height" }] : []));
     showBorder = input(true, ...(ngDevMode ? [{ debugName: "showBorder" }] : []));
     showMovement = input(false, ...(ngDevMode ? [{ debugName: "showMovement" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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      &nbsp;\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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      &nbsp;\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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
             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      &nbsp;\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"] }]
         }], propDecorators: { percentComplete: [{
                 type: Input
-            }] } });
+            }], backgroundColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColorClass", required: false }] }], progressColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressColorClass", required: false }] }], showPercentComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentComplete", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorder", required: false }] }], showMovement: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMovement", required: false }] }] } });
 
 class LoaderComponent {
     text = {
@@ -9016,10 +9018,10 @@ class LoaderComponent {
             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%)';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
             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"] }]
         }], propDecorators: { text: [{
@@ -9037,6 +9039,7 @@ class RadioButtonsComponent {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     colorClass = input('ok_button_color', ...(ngDevMode ? [{ debugName: "colorClass" }] : []));
     isDisplayColumn = input(true, ...(ngDevMode ? [{ debugName: "isDisplayColumn" }] : []));
+    inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onChange = () => {
     };
@@ -9077,16 +9080,16 @@ class RadioButtonsComponent {
         this.value.set(value);
         this.onChange(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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 } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioButtonsComponent),
                 multi: true
             }
-        ], 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      >\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"] }] });
+        ], 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RadioButtonsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-radio-buttons', imports: [
                         NgClass
@@ -9096,8 +9099,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                             useExisting: forwardRef(() => RadioButtonsComponent),
                             multi: true
                         }
-                    ], 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      >\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" }]
-        }] });
+                    ], 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" }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], colorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorClass", required: false }] }], isDisplayColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisplayColumn", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
 
 /**
  * This interceptor will force the Content-Type header to application/json so that each http call doesn't have to.
@@ -9113,10 +9116,10 @@ class JsonInterceptor {
         const clone = req.clone({ setHeaders: { 'Content-Type': 'application/json' } });
         return next.handle(clone);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: JsonInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: JsonInterceptor });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: JsonInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: JsonInterceptor });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: JsonInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: JsonInterceptor, decorators: [{
             type: Injectable
         }] });
 
@@ -9359,10 +9362,10 @@ class LocalStorageService {
     remove(key) {
         localStorage.removeItem(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LocalStorageService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LocalStorageService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LocalStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: LocalStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -9403,10 +9406,10 @@ class ThemeChangeDetectionService {
     listen() {
         return this._themeChanged.asObservable();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemeChangeDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemeChangeDetectionService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThemeChangeDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThemeChangeDetectionService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemeChangeDetectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThemeChangeDetectionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -9868,10 +9871,10 @@ class ThemingService {
         }
         return rootVars;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemingService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThemingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThemingService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThemingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'