npm - @entake/particle - Versions diffs - 19.1.2 → 20.0.0 - Mend

@entake/particle 19.1.2 → 20.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/fesm2022/entake-particle.mjs CHANGED Viewed

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { NgModule, inject, ElementRef, Renderer2, input, Directive, Input, HostListener, TemplateRef, ContentChild, Injectable, output, Component, ViewChild, ChangeDetectorRef, forwardRef, ViewEncapsulation, Pipe, ViewChildren, model, EventEmitter, Output, ChangeDetectionStrategy, ContentChildren, signal } from '@angular/core';
+import { NgModule, inject, ElementRef, Renderer2, input, HostListener, Input, Directive, TemplateRef, ContentChild, Injectable, output, ViewChild, Component, ChangeDetectorRef, forwardRef, ViewEncapsulation, Pipe, ViewChildren, model, EventEmitter, Output, ContentChildren, ChangeDetectionStrategy, signal } from '@angular/core';
 import { BehaviorSubject, fromEvent, Subject, combineLatest, Subscription, tap as tap$1, map as map$1, withLatestFrom as withLatestFrom$1, of, shareReplay, catchError, throwError, mergeMap } from 'rxjs';
 import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { startWith, map, withLatestFrom, tap } from 'rxjs/operators';
 import { NgClass, NgStyle, AsyncPipe, NgTemplateOutlet, DatePipe, NgIf, NgFor } from '@angular/common';
-import { trigger, state, style, transition, animate, query, stagger, animateChild } from '@angular/animations';
+import { trigger, state, transition, style, animate, query, stagger, animateChild } from '@angular/animations';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { Md5 } from 'md5-typescript';
 import { Editor } from '@tiptap/core';
@@ -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: "19.0.5", ngImport: i0, type: ParticleIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: ParticleIconsModule });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ParticleIconsModule });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ParticleIconsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ParticleIconsModule, decorators: [{
             type: NgModule
         }], ctorParameters: () => [] });
@@ -226,7 +226,7 @@ class TooltipDirective {
     /**
      * The direction of the tooltip around the host element
      */
-    tooltipPosition = input('bottom');
+    tooltipPosition = input('bottom', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
     /**
      * Whether to disable the tooltip
      * @param disabled disabled or not
@@ -539,10 +539,10 @@ class TooltipDirective {
             ? parents
             : this.getParentElements(parentNode, parents.concat([parentNode]));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.5", type: TooltipDirective, isStandalone: true, selector: "[particleTooltip]", inputs: { particleTooltip: { classPropertyName: "particleTooltip", publicName: "particleTooltip", isSignal: false, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: false, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "click": "onClick()" } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[particleTooltip]',
@@ -704,10 +704,10 @@ class KeyfilterDirective {
             this.hostElement.nativeElement.value = '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: KeyfilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: KeyfilterDirective, isStandalone: true, selector: "[particleKeyfilter]", inputs: { filterType: ["particleKeyfilter", "filterType"], allowSpaces: "allowSpaces" }, host: { listeners: { "keydown": "onKeyDown($event)", "paste": "onPaste($event)", "blur": "onBlur()" } }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: KeyfilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: KeyfilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[particleKeyfilter]',
@@ -731,10 +731,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class AccordionContentDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AccordionContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: AccordionContentDirective, isStandalone: true, selector: "[particleAccordionContent]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AccordionContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AccordionContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[particleAccordionContent]',
@@ -744,10 +744,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class AccordionHeaderDirective {
     templateRef = inject(TemplateRef);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AccordionHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: AccordionHeaderDirective, isStandalone: true, selector: "[particleAccordionHeader]", ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AccordionHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: "19.0.5", ngImport: i0, type: AccordionItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: AccordionItemDirective, isStandalone: true, selector: "particle-accordion-item", inputs: { header: "header", disabled: "disabled", open: "open", headerClass: "headerClass" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: AccordionHeaderDirective, descendants: true }, { propertyName: "content", first: true, predicate: AccordionContentDirective, descendants: true }], ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AccordionItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: "19.0.5", ngImport: i0, type: BackgroundCarouselDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: BackgroundCarouselDirective, isStandalone: true, selector: "[particleCarousel]", inputs: { options: ["particleCarouselOptions", "options"] }, ngImport: i0 });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BackgroundCarouselDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: "19.0.5", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DialogService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -977,37 +977,37 @@ class DialogComponent {
     /**
      * Title to show at the top of the dialog
      */
-    title = input(null);
+    title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
     /**
      * Class to apply to the title of the dialog
      */
-    titleClass = input('header_color');
+    titleClass = input('header_color', ...(ngDevMode ? [{ debugName: "titleClass" }] : []));
     /**
      * Show or hide the title bar
      */
-    showTitle = input(true);
+    showTitle = input(true, ...(ngDevMode ? [{ debugName: "showTitle" }] : []));
     /**
      * Whether to show close button and allow escape to close
      */
-    allowClose = input(true);
+    allowClose = input(true, ...(ngDevMode ? [{ debugName: "allowClose" }] : []));
     /**
      * Class to apply to the body of the dialog
      */
-    bodyClass = input('content_color');
+    bodyClass = input('content_color', ...(ngDevMode ? [{ debugName: "bodyClass" }] : []));
     /**
      * Height of the dialog (can use any height measurement)
      */
-    height = input('500px');
+    height = input('500px', ...(ngDevMode ? [{ debugName: "height" }] : []));
     /**
      * Width of the dialog (can use any width measurement)
      */
-    width = input('900px');
-    borderRadius = input('0px');
+    width = input('900px', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    borderRadius = input('0px', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
     text = input({
         close: 'Close Dialog',
         maximize: 'Maximize',
         minimize: 'Minimize'
-    });
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     /**
      * Event Emitter for when the dialog is closed
      */
@@ -1039,8 +1039,8 @@ class DialogComponent {
             this.closed.emit();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DialogComponent, isStandalone: true, selector: "particle-dialog", inputs: { object: { classPropertyName: "object", publicName: "object", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, allowClose: { classPropertyName: "allowClose", publicName: "allowClose", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", opened: "opened" }, 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.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: [
             trigger('dialog', [
                 state('void', style({ transform: 'scale(0.5)', opacity: '0' })),
                 transition('void => *', [
@@ -1053,7 +1053,7 @@ class DialogComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-dialog', animations: [
                         trigger('dialog', [
@@ -2794,10 +2794,10 @@ class IconsService {
         }
         return icons;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: IconsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: IconsService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: IconsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2843,11 +2843,11 @@ class IconSelectComponent {
     /**
      * Color class of the button
      */
-    buttonColorClass = input(null);
+    buttonColorClass = input(null, ...(ngDevMode ? [{ debugName: "buttonColorClass" }] : []));
     /**
      * The value to set to the button's width, min-width, height and min-height
      */
-    buttonSizing = input('40px');
+    buttonSizing = input('40px', ...(ngDevMode ? [{ debugName: "buttonSizing" }] : []));
     text = input({
         selectAnIcon: 'Select an Icon',
         seeAllIcons: 'See All Icons',
@@ -2868,7 +2868,7 @@ class IconSelectComponent {
         confirm: 'Confirm',
         select: 'Select',
         close: 'Close'
-    });
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     /**
      * Icon select opened event emitter
      */
@@ -3132,8 +3132,8 @@ class IconSelectComponent {
         this._searchClick.next('');
         this._activePage.next(0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: IconSelectComponent, isStandalone: true, selector: "particle-icon-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, buttonColorClass: { classPropertyName: "buttonColorClass", publicName: "buttonColorClass", isSignal: true, isRequired: false, transformFunction: null }, buttonSizing: { classPropertyName: "buttonSizing", publicName: "buttonSizing", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", selected: "selected", closed: "closed" }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => IconSelectComponent),
@@ -3141,7 +3141,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: "19.0.5", ngImport: i0, type: IconSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: IconSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-icon-select', providers: [
                         {
@@ -3168,7 +3168,7 @@ class PopoverComponent {
     /**
      * The offset of the popover from its target (in pixels)
      */
-    offset = input(5);
+    offset = input(5, ...(ngDevMode ? [{ debugName: "offset" }] : []));
     /**
      * Set the width of the popover in pixels (defaults to auto)
      */
@@ -3190,11 +3190,11 @@ class PopoverComponent {
     /**
      * A class-list to apply to the popover content
      */
-    classList = input('content_color particle_popover_shadow');
-    targetOverride = input(null);
-    openDirection = input('above');
-    alignment = input('left');
-    scaleForMobile = input('1');
+    classList = input('content_color particle_popover_shadow', ...(ngDevMode ? [{ debugName: "classList" }] : []));
+    targetOverride = input(null, ...(ngDevMode ? [{ debugName: "targetOverride" }] : []));
+    openDirection = input('above', ...(ngDevMode ? [{ debugName: "openDirection" }] : []));
+    alignment = input('left', ...(ngDevMode ? [{ debugName: "alignment" }] : []));
+    scaleForMobile = input('1', ...(ngDevMode ? [{ debugName: "scaleForMobile" }] : []));
     /**
      * Event emitted on popover open
      */
@@ -3445,8 +3445,8 @@ class PopoverComponent {
         }
         this.escapeKeyUpUnlisteners = [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PopoverComponent, isStandalone: true, selector: "particle-popover", inputs: { offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, targetOverride: { classPropertyName: "targetOverride", publicName: "targetOverride", isSignal: true, isRequired: false, transformFunction: null }, openDirection: { classPropertyName: "openDirection", publicName: "openDirection", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, scaleForMobile: { classPropertyName: "scaleForMobile", publicName: "scaleForMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "window:click": "onClick($event)", "window:resize": "onWindowResize()" } }, 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.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: [
             trigger('openClose', [
                 transition('void => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -3459,7 +3459,7 @@ class PopoverComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-popover', animations: [
                         trigger('openClose', [
@@ -3493,7 +3493,7 @@ class PaginatorComponent {
     /**
      * An array of potential page sizes.
      */
-    pageSizeOptions = input(null);
+    pageSizeOptions = input(null, ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
     /**
      * Current page size
      */
@@ -3507,16 +3507,18 @@ class PaginatorComponent {
     /**
      * Total number of items
      */
-    totalLength = input(null);
-    showPages = input(false);
-    showFirstLast = input(false);
-    showButtonLabels = input(true);
-    showResultsPanel = input(true);
-    startingPage = input(0, {
-        transform: (page) => {
-            setTimeout(() => this.setActivePage(page, false), 0);
-        }
-    });
+    totalLength = input(null, ...(ngDevMode ? [{ debugName: "totalLength" }] : []));
+    showPages = input(false, ...(ngDevMode ? [{ debugName: "showPages" }] : []));
+    showFirstLast = input(false, ...(ngDevMode ? [{ debugName: "showFirstLast" }] : []));
+    showButtonLabels = input(true, ...(ngDevMode ? [{ debugName: "showButtonLabels" }] : []));
+    showResultsPanel = input(true, ...(ngDevMode ? [{ debugName: "showResultsPanel" }] : []));
+    startingPage = input(0, ...(ngDevMode ? [{ debugName: "startingPage", transform: (page) => {
+                setTimeout(() => this.setActivePage(page, false), 0);
+            } }] : [{
+            transform: (page) => {
+                setTimeout(() => this.setActivePage(page, false), 0);
+            }
+        }]));
     text = input({
         itemsPerPage: 'Items Per Page',
         choosePageSize: 'Choose Page Size',
@@ -3530,7 +3532,7 @@ class PaginatorComponent {
         outOf: 'out of',
         of: 'of',
         results: 'Results'
-    });
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     /**
      * Event Emitter for pagination or page size change.
      */
@@ -3682,10 +3684,10 @@ class PaginatorComponent {
         }
         this.pageJumpInput = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PaginatorComponent, isStandalone: true, selector: "particle-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, totalLength: { classPropertyName: "totalLength", publicName: "totalLength", isSignal: true, isRequired: false, transformFunction: null }, showPages: { classPropertyName: "showPages", publicName: "showPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showButtonLabels: { classPropertyName: "showButtonLabels", publicName: "showButtonLabels", isSignal: true, isRequired: false, transformFunction: null }, showResultsPanel: { classPropertyName: "showResultsPanel", publicName: "showResultsPanel", isSignal: true, isRequired: false, transformFunction: null }, startingPage: { classPropertyName: "startingPage", publicName: "startingPage", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paginate: "paginate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row wrap_reverse center_center\">\r\n  @if (!showPages() && showResultsPanel()) {\r\n    <div class=\"col min_w200\">\r\n      <div class=\"row v_center ptl_brdr_size ptl_brdr_radius ptl_brdr_color content_color mar_right5 mar_left5 pad_3 ent_r2l_row\">\r\n        <div class=\"col size_1 center_center pad_left5 pad_right5\">\r\n          @if (totalLength() > 0) {\r\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n              {{pageStartingValue}} - {{pageEndingValue > totalLength() ? totalLength() : pageEndingValue}} {{text().of}} {{totalLength()}} {{text().results}}\r\n            </div>\r\n          } @else {\r\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n              0 - 0 {{text().of}} 0 {{text().results}}\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col center_center pad_lr5\">\r\n          <button class=\"access btn clear circle_20px \" tabindex=\"0\" [attr.aria-label]=\"text().jumpToPage\"\r\n            (click)=\"config.toggle($event)\">\r\n            <i class=\"fas fa-cog\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"col pad_5\">\r\n    <div class=\"row wrap_reverse center_center\">\r\n\r\n      @if (showFirstLast()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- first -->\r\n          <button class=\"access btnset clear\"\r\n            [attr.aria-label]=\"text().firstPage\"\r\n            [disabled]=\"activePage === 0\"\r\n            (click)=\"goToFirst()\">\r\n            <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n                <i class=\"fas fa-angle-double-left ent_r2l_ico\"></i>\r\n              </div>\r\n              @if (showButtonLabels()) {\r\n                <div class=\"text ent_r2l_txt\">{{text().firstPage}}</div>\r\n              }\r\n            </div>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col pad_5\">\r\n        <!-- previous -->\r\n        <button class=\"access btnset clear\"\r\n          [attr.aria-label]=\"text().previousPage\"\r\n          [disabled]=\"activePage === 0\"\r\n          (click)=\"hasPage(activePage - 1) ? goToPage(activePage - 1) : goToPage(activePage)\">\r\n          <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n              <i class=\"fas fa-chevron-left ent_r2l_ico\"></i>\r\n            </div>\r\n            @if (showButtonLabels()) {\r\n              <div class=\"text ent_r2l_txt\">{{text().previousPage}}</div>\r\n            }\r\n          </div>\r\n        </button>\r\n      </div>\r\n\r\n      @if (showPages()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- navigation -->\r\n          <div class=\"row v_center pad_left5 pad_right5 bg_overlay brdr content_color ptl_brdr_radius ent_r2l_dir\"\r\n            style=\"flex:1 1 auto;\">\r\n            <!-- jump button -->\r\n            <div class=\"center_right\" style=\"width:20px;min-width:20px;\">\r\n              @if (activePage > 3) {\r\n                <button class=\"access btn underline_md pag_btn clear\" tabindex=\"0\"\r\n                  [attr.aria-label]=\"text().jumpToPage\"\r\n                (click)=\"op.toggle($event)\">...</button>\r\n              }\r\n            </div>\r\n            <!-- nav buttons -->\r\n            <div class=\"center_center\" style=\"min-width:180px;\">\r\n              <!-- first -->\r\n              @if ((activePage-2 >= 0 && activePage-2 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage - 1)\"\r\n                  (click)=\"goToPage(activePage - 2, true)\">\r\n                  {{activePage - 1}}\r\n                </button>\r\n              }\r\n              <!-- second -->\r\n              @if ((activePage-1 >= 0 && activePage-1 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage)\"\r\n                  (click)=\"goToPage(activePage - 1, true)\">\r\n                  {{activePage}}\r\n                </button>\r\n              }\r\n              <!-- active page -->\r\n              <div class=\"row pag_btn active brad_3 content_color\">\r\n                <button style=\"cursor:default\"\r\n                  class=\"access col size_1 btn center_center brad_3 bg_overlay_rev brdr\" id=\"activePage\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 1)\" >\r\n                  {{activePage + 1}}\r\n                </button>\r\n              </div>\r\n              <!-- fourth -->\r\n              @if ((activePage+1 >= 0 && activePage+1 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 2)\"\r\n                  (click)=\"goToPage(activePage + 1, true)\">\r\n                  {{activePage + 2}}\r\n                </button>\r\n              }\r\n              <!-- fifth -->\r\n              @if ((activePage+2 >= 0 && activePage+2 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 3)\"\r\n                  (click)=\"goToPage(activePage + 2, true)\">\r\n                  {{activePage + 3}}\r\n                </button>\r\n              }\r\n            </div>\r\n            <!-- jump button -->\r\n            <div class=\"center_left\" style=\"width:20px;min-width:20px;\">\r\n              @if (activePage < getNumberOfPages() - 4) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().jumpToPage\"\r\n                (click)=\"op.toggle($event)\" >...</button>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col pad_5\">\r\n        <!-- next -->\r\n        <button class=\"access btnset clear\"\r\n          [attr.aria-label]=\"text().nextPage\"\r\n          [disabled]=\"activePage === numberOfPages - 1 || totalLength() === 0\"\r\n          (click)=\"hasPage(activePage + 1) ? goToPage(activePage + 1) : goToPage(activePage)\">\r\n          <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n            @if (showButtonLabels()) {\r\n              <div class=\"text ent_r2l_txt\">{{text().nextPage}}</div>\r\n            }\r\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n            </div>\r\n          </div>\r\n        </button>\r\n      </div>\r\n\r\n      @if (showFirstLast()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- last -->\r\n          <button class=\"access btnset clear\"\r\n            [attr.aria-label]=\"text().lastPage\"\r\n            [disabled]=\"activePage === numberOfPages - 1\"\r\n            (click)=\"goToLast()\">\r\n            <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n              @if (showButtonLabels()) {\r\n                <div class=\"text ent_r2l_txt\">{{text().lastPage}}</div>\r\n              }\r\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n                <i class=\"fas fa-angle-double-right ent_r2l_ico\"></i>\r\n              </div>\r\n            </div>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Jump to popover -->\r\n<particle-popover #op>\r\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n</particle-popover>\r\n\r\n<particle-popover #config>\r\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n  <ng-container *ngTemplateOutlet=\"pageSizeTemplate\"></ng-container>\r\n</particle-popover>\r\n\r\n<ng-template #jumpTo>\r\n  @if (numberOfPages > 0) {\r\n    <div class=\"row_block pad_10 center\">\r\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageJump\">{{text().jumpToPage}} ({{text().outOf}} {{numberOfPages}}):</label></div>\r\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n        <div class=\"col\">\r\n          <input class=\"access fullwidth_input sm\" style=\"width:50px;\" maxlength=\"4\" id=\"pageJump\"\r\n            type=\"text\" [attr.aria-label]=\"text().page\" name=\"pagejump\" [placeholder]=\"text().page\" [(ngModel)]=\"pageJumpInput\" />\r\n          </div>\r\n          <div class=\"col\">\r\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().jumpToPage\"\r\n              (click)=\"jumpPage();op.close();config.close();\">\r\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #pageSizeTemplate>\r\n    <div class=\"row_block pad_10 center\">\r\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageSize\">{{text().itemsPerPage}}:</label></div>\r\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n        <div class=\"col\">\r\n          <select class=\"access fullwidth_input content_color text sm\" style=\"width:50px;\"\r\n            [(ngModel)]=\"pageSize\" (ngModelChange)=\"pageSizeChange();config.close();\" [title]=\"text().choosePageSize\" id=\"pageSize\">\r\n            @for (option of pageSizeOptions(); track option) {\r\n              <option [value]=\"option\" [attr.aria-label]=\"option\">\r\n                {{option}}\r\n              </option>\r\n            }\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n", styles: [".pag_btn{flex:1;max-width:60px;margin:0 1px;height:24px;font-size:10pt}.pag_btn.active{height:30px;margin-top:-3px;margin-bottom:-3px}.spinspin{opacity:.5}.spinspin:hover{animation:spin 2s linear infinite;opacity:1}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PaginatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: [{
@@ -3725,8 +3727,8 @@ class ProfilePicComponent {
         this.url = `url(${imageUrl})`;
     }
     url = null;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ProfilePicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ProfilePicComponent, isStandalone: true, selector: "particle-profile-pic", inputs: { size: "size", margin: "margin", toolTip: "toolTip", tooltipDisabled: "tooltipDisabled", gravatarEmail: "gravatarEmail", imageUrl: "imageUrl" }, ngImport: i0, template: `
+    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: `
     <div class="ptl_profile_pic"
          [style.height]="size"
          [style.width]="size"
@@ -3737,7 +3739,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: "19.0.5", ngImport: i0, type: ProfilePicComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ProfilePicComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-profile-pic', template: `
     <div class="ptl_profile_pic"
@@ -3769,9 +3771,9 @@ const RICH_TEXT_VALUE_ACCESSOR = {
     multi: true
 };
 class RichTextComponent {
-    placeholder = input('');
-    hideControls = input(false);
-    height = input('100px');
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    hideControls = input(false, ...(ngDevMode ? [{ debugName: "hideControls" }] : []));
+    height = input('100px', ...(ngDevMode ? [{ debugName: "height" }] : []));
     get readonly() {
         return this._editable;
     }
@@ -3800,7 +3802,7 @@ class RichTextComponent {
         url: 'URL',
         addImage: 'Add Image',
         modifyImage: 'Modify Image'
-    });
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     capabilities = input({
         heading: true,
         textDecoration: true,
@@ -3808,8 +3810,8 @@ class RichTextComponent {
         alignment: true,
         link: true,
         images: false
-    });
-    borderRadius = input('0px');
+    }, ...(ngDevMode ? [{ debugName: "capabilities" }] : []));
+    borderRadius = input('0px', ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
     textChanged = output();
     showDialog = null;
     dialogLink = null;
@@ -3825,16 +3827,36 @@ class RichTextComponent {
     _value = null;
     _editable = true;
     window = window;
+    CustomLink = Link.extend({
+        name: 'customLink',
+        renderHTML(HTMLAttributes) {
+            const href = HTMLAttributes.href;
+            if (href) {
+                try {
+                    const linkUrl = new URL(href, window.location.origin);
+                    const currentHost = window.location.hostname;
+                    if (linkUrl.hostname !== currentHost) {
+                        HTMLAttributes.target = '_blank';
+                        HTMLAttributes.rel = 'noopener noreferrer nofollow';
+                    }
+                    else {
+                        HTMLAttributes.target = '_self';
+                        HTMLAttributes.rel = undefined;
+                    }
+                }
+                catch (e) {
+                    console.warn('Invalid URL: ' + href);
+                    console.warn(e);
+                }
+            }
+            return ['a', HTMLAttributes, 0];
+        }
+    });
     editor = new Editor({
         extensions: [
             StarterKit,
-            Link.configure({
-                openOnClick: false,
-                HTMLAttributes: {
-                    class: 'rich-text-link',
-                    target: '_blank',
-                    ref: 'noopener'
-                },
+            this.CustomLink.configure({
+                openOnClick: false
             }),
             TextAlign.configure({
                 types: ['heading', 'paragraph'],
@@ -3850,7 +3872,7 @@ class RichTextComponent {
                 spellcheck: 'true',
             },
         },
-        enablePasteRules: [Link, StarterKit, TextAlign]
+        enablePasteRules: [this.CustomLink, StarterKit, TextAlign]
     });
     get value() {
         return this._value;
@@ -3930,10 +3952,10 @@ class RichTextComponent {
         }
         this.editor.commands.focus(position);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: RichTextComponent, isStandalone: true, selector: "particle-rich-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideControls: { classPropertyName: "hideControls", publicName: "hideControls", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, 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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RichTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: [{
@@ -3977,10 +3999,10 @@ class OrdinalNumberPipe {
         }
         return stringifiedNumber + ordinalSuffix;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OrdinalNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: OrdinalNumberPipe, isStandalone: true, name: "ordinalNumber" });
+    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" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OrdinalNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: OrdinalNumberPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'ordinalNumber'
@@ -4058,7 +4080,7 @@ class CalendarComponent {
     get text() {
         return this._text;
     }
-    showControls = input(true);
+    showControls = input(true, ...(ngDevMode ? [{ debugName: "showControls" }] : []));
     _text = {
         selectAYear: 'Select a Year',
         selectAMonth: 'Select a Month',
@@ -4430,10 +4452,10 @@ class CalendarComponent {
     clear() {
         this.selectedDate = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: CalendarComponent, isStandalone: true, selector: "particle-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", closed: "closed" }, host: { listeners: { "window:keyup": "onKeyUp($event)", "window:click": "handleClick($event)" } }, viewQueries: [{ propertyName: "calendarWidgetDiv", first: true, predicate: ["calendarWidgetDiv"], descendants: true }, { propertyName: "yearSelect", first: true, predicate: ["yearSelect"], descendants: true }, { propertyName: "doneButton", first: true, predicate: ["doneButton"], descendants: true }, { propertyName: "calendarDates", predicate: ["calendarDate"], descendants: true }], ngImport: i0, template: "<div #calendarWidgetDiv\r\n  cdkTrapFocus\r\n  cdkTrapFocusAutoCapture\r\n  class=\"particle_datepicker_options\"\r\n  role=\"application\">\r\n  <!-- month / year select -->\r\n  <div class=\"content_color pad_5 pad_bot0\">\r\n    <div class=\"row space_between\">\r\n      <div class=\"col size_1 mar_5\">\r\n        <select #yearSelect\r\n          [ngModel]=\"_selectedYear | async\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAYear\">\r\n          @for (year of validYearRange$ | async; track $index) {\r\n            <option\r\n              [value]=\"year\">\r\n              {{year}}\r\n            </option>\r\n          }\r\n        </select>\r\n      </div>\r\n      <div class=\"col size_2 mar_5\">\r\n        <select #monthSelect\r\n          [ngModel]=\"_selectedMonth | async\"\r\n          (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAMonth\">\r\n          <option value=\"0\">{{text.january}}</option>\r\n          <option value=\"1\">{{text.february}}</option>\r\n          <option value=\"2\">{{text.march}}</option>\r\n          <option value=\"3\">{{text.april}}</option>\r\n          <option value=\"4\">{{text.may}}</option>\r\n          <option value=\"5\">{{text.june}}</option>\r\n          <option value=\"6\">{{text.july}}</option>\r\n          <option value=\"7\">{{text.august}}</option>\r\n          <option value=\"8\">{{text.september}}</option>\r\n          <option value=\"9\">{{text.october}}</option>\r\n          <option value=\"10\">{{text.november}}</option>\r\n          <option value=\"11\">{{text.december}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"content_color pad_5\">\r\n    <!-- weekdays -->\r\n    <div class=\"mar_5 mar_bot10\">\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.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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: [{
@@ -4551,28 +4573,28 @@ class DatePickerComponent {
     /**
      * The ID to set on the input
      */
-    inputId = input(null);
+    inputId = input(null, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
     /**
      * Value to use as the date picker input's aria label
      */
-    ariaLabel = input('Date');
+    ariaLabel = input('Date', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     /**
      * Optional class-list to add to the date picker input
      */
-    inputClassList = input(null);
+    inputClassList = input(null, ...(ngDevMode ? [{ debugName: "inputClassList" }] : []));
     /**
      * Optional class-list to add to the calendar button
      */
-    calendarButtonClassList = input('');
+    calendarButtonClassList = input('', ...(ngDevMode ? [{ debugName: "calendarButtonClassList" }] : []));
     /**
      * Close the picker when a selection is made
      */
-    closeOnSelect = input(true);
+    closeOnSelect = input(true, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : []));
     /**
      * Placeholder override
      */
-    placeholder = input('mm/dd/yyyy');
-    inputOnly = input(false);
+    placeholder = input('mm/dd/yyyy', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    inputOnly = input(false, ...(ngDevMode ? [{ debugName: "inputOnly" }] : []));
     _text = {
         enterInFormat: 'enter in format',
         openCalendar: 'Open the calendar'
@@ -4907,8 +4929,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: "19.0.5", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DatePickerComponent, isStandalone: true, selector: "particle-date-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputClassList: { classPropertyName: "inputClassList", publicName: "inputClassList", isSignal: true, isRequired: false, transformFunction: null }, calendarButtonClassList: { classPropertyName: "calendarButtonClassList", publicName: "calendarButtonClassList", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputOnly: { classPropertyName: "inputOnly", publicName: "inputOnly", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { input: "input", dateSelected: "dateSelected" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DatePickerComponent),
@@ -4927,7 +4949,7 @@ class DatePickerComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DatePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-date-picker', animations: [
                         trigger('openClose', [
@@ -4988,9 +5010,9 @@ class DateRangePickerComponent {
             }
         }
     }));
-    inputId = input(null);
-    inputClassList = input('');
-    calendarButtonClassList = input('');
+    inputId = input(null, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
+    inputClassList = input('', ...(ngDevMode ? [{ debugName: "inputClassList" }] : []));
+    calendarButtonClassList = input('', ...(ngDevMode ? [{ debugName: "calendarButtonClassList" }] : []));
     text = input({
         begin: 'Begin',
         end: 'End',
@@ -4998,7 +5020,7 @@ class DateRangePickerComponent {
         clear: 'Clear',
         openCalendar: 'Open Calendar',
         selectRange: 'Choose a Range'
-    });
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     set dateRange(value) {
         this._dateRange = value;
         if (this.value && this.value.start) {
@@ -5043,12 +5065,12 @@ class DateRangePickerComponent {
     get disabled() {
         return this._disabled;
     }
-    ariaLabel = input(null);
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     /**
      * Format for the selected date range in the selection preview. Must
      * be a valid Angular DatePipe format
      */
-    dateFormat = input('MM/dd/y');
+    dateFormat = input('MM/dd/y', ...(ngDevMode ? [{ debugName: "dateFormat" }] : []));
     calendarPopover = null;
     beginCalendar = null;
     endCalendar = null;
@@ -5164,8 +5186,8 @@ class DateRangePickerComponent {
     clear() {
         this.value = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DateRangePickerComponent, isStandalone: true, selector: "particle-date-range-picker", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, inputClassList: { classPropertyName: "inputClassList", publicName: "inputClassList", isSignal: true, isRequired: false, transformFunction: null }, calendarButtonClassList: { classPropertyName: "calendarButtonClassList", publicName: "calendarButtonClassList", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DateRangePickerComponent),
@@ -5173,7 +5195,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: "19.0.5", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-date-range-picker', providers: [
                         {
@@ -5272,18 +5294,18 @@ class DropdownComponent {
     /**
      * Whether the dropdown should be disabled
      */
-    disabled = model(false);
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     text = input({
         placeholder: 'Make a selection'
-    });
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     /**
      * Class list to assign to the dropdown
      */
-    classList = input(null);
-    buttonClassList = input(null);
-    collapsedButtonTemplate = input(null);
-    collapsedButtonTooltipEnabled = input(true);
-    dropdownBoxMinWidth = input(200);
+    classList = input(null, ...(ngDevMode ? [{ debugName: "classList" }] : []));
+    buttonClassList = input(null, ...(ngDevMode ? [{ debugName: "buttonClassList" }] : []));
+    collapsedButtonTemplate = input(null, ...(ngDevMode ? [{ debugName: "collapsedButtonTemplate" }] : []));
+    collapsedButtonTooltipEnabled = input(true, ...(ngDevMode ? [{ debugName: "collapsedButtonTooltipEnabled" }] : []));
+    dropdownBoxMinWidth = input(200, ...(ngDevMode ? [{ debugName: "dropdownBoxMinWidth" }] : []));
     /**
      * Event emitted on value change, emits the new value
      */
@@ -5699,19 +5721,16 @@ class DropdownComponent {
      * @private
      */
     positionDropdownList() {
-        let { left, right, top, bottom } = this.dropdown.nativeElement.getBoundingClientRect();
-        if (right - left < this.dropdownBoxMinWidth()) {
-            left = left - (this.dropdownBoxMinWidth() - (right - left));
-        }
+        const { left, right, top, bottom } = this.dropdown.nativeElement.getBoundingClientRect();
         const { offsetHeight } = this.dropdownList.nativeElement;
-        const datePickerBottomLeftAnchor = bottom;
-        const availableBottomSpace = window.innerHeight - datePickerBottomLeftAnchor;
+        const bottomLeftAnchor = bottom;
+        const availableBottomSpace = window.innerHeight - bottomLeftAnchor;
         const availableTopSpace = top;
         const offsetListHeight = offsetHeight + DropdownComponent.DROPDOWN_LIST_OFFSET;
         let transformOrigin, positionTop;
         if (availableBottomSpace > offsetListHeight) {
             transformOrigin = 'top left';
-            positionTop = `${datePickerBottomLeftAnchor + DropdownComponent.DROPDOWN_LIST_OFFSET}px`;
+            positionTop = `${bottomLeftAnchor + DropdownComponent.DROPDOWN_LIST_OFFSET}px`;
         }
         else if (availableTopSpace > offsetListHeight) {
             transformOrigin = 'bottom left';
@@ -5728,8 +5747,16 @@ class DropdownComponent {
             transformOrigin = 'top left';
         }
         this.renderer.setStyle(this.dropdownList.nativeElement, 'transform-origin', transformOrigin);
-        this.renderer.setStyle(this.dropdownList.nativeElement, 'left', `${left}px`);
         this.renderer.setStyle(this.dropdownList.nativeElement, 'top', positionTop);
+        const buttonWidth = right - left;
+        const width = buttonWidth < this.dropdownBoxMinWidth() ? this.dropdownBoxMinWidth() : buttonWidth;
+        if (left + width > window.innerWidth) {
+            const newLeft = left - (this.dropdownBoxMinWidth() - buttonWidth);
+            this.renderer.setStyle(this.dropdownList.nativeElement, 'left', `${newLeft}px`);
+        }
+        else {
+            this.renderer.setStyle(this.dropdownList.nativeElement, 'left', `${left}px`);
+        }
     }
     /**
      * Match the dropdown list width to the dropdown's width
@@ -5810,14 +5837,14 @@ class DropdownComponent {
         }
         return previousOption;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DropdownComponent, isStandalone: true, selector: "particle-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTooltipEnabled: { classPropertyName: "collapsedButtonTooltipEnabled", publicName: "collapsedButtonTooltipEnabled", isSignal: true, isRequired: false, transformFunction: null }, dropdownBoxMinWidth: { classPropertyName: "dropdownBoxMinWidth", publicName: "dropdownBoxMinWidth", isSignal: true, isRequired: false, transformFunction: null } }, 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.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: [
             {
                 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }], 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          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: [
             trigger('openClose', [
                 transition('close => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -5830,7 +5857,7 @@ class DropdownComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-dropdown', animations: [
                         trigger('openClose', [
@@ -5966,25 +5993,25 @@ class MultiSelectComponent {
     /**
      * Whether the multi-select should be disabled
      */
-    disabled = model(false);
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     /**
      * Class list to assign to the multi-select
      */
-    classList = input(null);
-    buttonClassList = input(null);
-    entryClassList = input(null);
+    classList = input(null, ...(ngDevMode ? [{ debugName: "classList" }] : []));
+    buttonClassList = input(null, ...(ngDevMode ? [{ debugName: "buttonClassList" }] : []));
+    entryClassList = input(null, ...(ngDevMode ? [{ debugName: "entryClassList" }] : []));
     text = input({
         placeholder: 'Make a Selection',
         of: 'of',
         optionsSelected: 'options selected'
-    });
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     /**
      * Style of the multi-select
      */
-    type = input('input');
-    maxExpandedEntries = input(0);
-    expandedAsGrid = input(false);
-    collapsedButtonTemplate = input(null);
+    type = input('input', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    maxExpandedEntries = input(0, ...(ngDevMode ? [{ debugName: "maxExpandedEntries" }] : []));
+    expandedAsGrid = input(false, ...(ngDevMode ? [{ debugName: "expandedAsGrid" }] : []));
+    collapsedButtonTemplate = input(null, ...(ngDevMode ? [{ debugName: "collapsedButtonTemplate" }] : []));
     /**
      * Event emitted on value change, emits the new value
      */
@@ -6448,8 +6475,8 @@ class MultiSelectComponent {
         }
         return previousOption;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: MultiSelectComponent, isStandalone: true, selector: "particle-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, buttonClassList: { classPropertyName: "buttonClassList", publicName: "buttonClassList", isSignal: true, isRequired: false, transformFunction: null }, entryClassList: { classPropertyName: "entryClassList", publicName: "entryClassList", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxExpandedEntries: { classPropertyName: "maxExpandedEntries", publicName: "maxExpandedEntries", isSignal: true, isRequired: false, transformFunction: null }, expandedAsGrid: { classPropertyName: "expandedAsGrid", publicName: "expandedAsGrid", isSignal: true, isRequired: false, transformFunction: null }, collapsedButtonTemplate: { classPropertyName: "collapsedButtonTemplate", publicName: "collapsedButtonTemplate", isSignal: true, isRequired: false, transformFunction: null } }, 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.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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiSelectComponent),
@@ -6468,7 +6495,7 @@ class MultiSelectComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-multi-select', animations: [
                         trigger('openClose', [
@@ -6588,10 +6615,10 @@ class NotificationService {
     setNotificationLife(milliseconds) {
         this.notificationLife = milliseconds;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NotificationService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NotificationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: NotificationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -6605,7 +6632,7 @@ class NotificationComponent {
     notificationService = inject(NotificationService);
     text = input({
         dismiss: 'Dismiss'
-    });
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     /**
      * Array of notifications as an Observable
      */
@@ -6635,8 +6662,8 @@ class NotificationComponent {
     deleteNotification(id) {
         this.notificationService.deleteNotification(id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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.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: [
             // nice stagger effect when showing existing elements
             trigger('list', [
                 transition(':enter', [
@@ -6669,7 +6696,7 @@ class NotificationComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NotificationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-notification', animations: [
                         // nice stagger effect when showing existing elements
@@ -6762,24 +6789,24 @@ class WeekPickerComponent {
     /**
      * Class list to apply to the date range input
      */
-    inputClassList = input(null);
+    inputClassList = input(null, ...(ngDevMode ? [{ debugName: "inputClassList" }] : []));
     /**
      * Class list to apply to the week picker button
      */
-    calendarButtonClassList = input('');
+    calendarButtonClassList = input('', ...(ngDevMode ? [{ debugName: "calendarButtonClassList" }] : []));
     /**
      * The aria label to apply to the date range input
      */
-    ariaLabel = input('Date');
+    ariaLabel = input('Date', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     /**
      * Format for the selected date range in the selection preview. Must
      * be a valid Angular DatePipe format
      */
-    dateFormat = input('MM/dd/y');
+    dateFormat = input('MM/dd/y', ...(ngDevMode ? [{ debugName: "dateFormat" }] : []));
     /**
      * Close the picker when a selection is made
      */
-    closeOnSelect = input(true);
+    closeOnSelect = input(true, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : []));
     text = input({
         openCalendar: 'open calendar to select week',
         selectWeek: 'Select a week',
@@ -6809,7 +6836,7 @@ class WeekPickerComponent {
         resetWeekSelection: 'Reset week selection to current week',
         selectNextWeek: 'Select next week',
         nextWeek: 'Next Week'
-    });
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     /**
      * Event emitted on week select
      */
@@ -7165,8 +7192,8 @@ class WeekPickerComponent {
         this.currentDate.selectable = isWithinInterval(startOfCurrentWeek, selectionInterval) &&
             isWithinInterval(endOfCurrentWeek, selectionInterval);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: WeekPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: WeekPickerComponent, isStandalone: true, selector: "particle-week-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, inputClassList: { classPropertyName: "inputClassList", publicName: "inputClassList", isSignal: true, isRequired: false, transformFunction: null }, calendarButtonClassList: { classPropertyName: "calendarButtonClassList", publicName: "calendarButtonClassList", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { weekSelected: "weekSelected" }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => WeekPickerComponent),
@@ -7174,7 +7201,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: "19.0.5", ngImport: i0, type: WeekPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: WeekPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-week-picker', providers: [
                         {
@@ -7455,8 +7482,8 @@ class ColorPickerComponent {
         }
         return colorPickerSupported;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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.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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ColorPickerComponent),
@@ -7464,7 +7491,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: "19.0.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-color-picker', providers: [
                         {
@@ -7550,15 +7577,15 @@ class SliderComponent {
     /**
      * The unit being represented by the slider
      */
-    unit = input(null);
+    unit = input(null, ...(ngDevMode ? [{ debugName: "unit" }] : []));
     /**
      * The aria-label to append to the slider/input
      */
-    ariaLabel = input(null);
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     text = input({
         selectAValue: 'Select a value',
         enterAValue: 'Enter a value'
-    });
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     /**
      * Event emitted on slider/slider input input event
      */
@@ -7673,8 +7700,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: "19.0.5", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: SliderComponent, isStandalone: true, selector: "particle-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, inputClassList: { classPropertyName: "inputClassList", publicName: "inputClassList", isSignal: false, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { input: "input" }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SliderComponent),
@@ -7682,7 +7709,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: "19.0.5", ngImport: i0, type: SliderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-slider', providers: [
                         {
@@ -7775,10 +7802,10 @@ class AccordionComponent {
             this.contentDivs.get(index).nativeElement.ariaHidden = 'false';
         }
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AccordionComponent, isStandalone: true, selector: "particle-accordion", inputs: { multiple: "multiple", height: "height", headerClass: "headerClass", textClass: "textClass", iconCollapsed: "iconCollapsed", iconExpanded: "iconExpanded", showIcon: "showIcon", text: "text" }, queries: [{ propertyName: "items", predicate: AccordionItemDirective }], viewQueries: [{ propertyName: "contentDivs", predicate: ["ref"], descendants: true }], ngImport: i0, template: "@for (item of items; track 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.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: [{
@@ -7820,18 +7847,18 @@ class SlideoverComponent {
     get position() {
         return this._position;
     }
-    modal = input(true);
-    width = input('300px');
-    height = input('100px');
-    bgClass = input('content_color');
+    modal = input(true, ...(ngDevMode ? [{ debugName: "modal" }] : []));
+    width = input('300px', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    height = input('100px', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    bgClass = input('content_color', ...(ngDevMode ? [{ debugName: "bgClass" }] : []));
     text = input({
         close: 'Close Slideover'
-    });
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     /**
      * Breakpoint that will make the container take over the screen when it's crossed.
      */
-    breakpoint = input(769);
-    hideCloseButton = input(false);
+    breakpoint = input(769, ...(ngDevMode ? [{ debugName: "breakpoint" }] : []));
+    hideCloseButton = input(false, ...(ngDevMode ? [{ debugName: "hideCloseButton" }] : []));
     opened = output();
     closed = output();
     overlay = null;
@@ -7885,10 +7912,10 @@ class SlideoverComponent {
             this._determineBreakpointExceeded(window.innerWidth);
         }, 100);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SlideoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SlideoverComponent, isStandalone: true, selector: "particle-slideover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, bgClass: { classPropertyName: "bgClass", publicName: "bgClass", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, hideCloseButton: { classPropertyName: "hideCloseButton", publicName: "hideCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: "<div #overlay (click)=\"close()\"></div>\r\n<div\r\n  [ngClass]=\"bgClass() + ' ' + (slideoverOpen ? 'slideover_active_' + position : 'slideover_inactive_' + position) + ' slideover-panel ' + position\"\r\n  [style.width]=\"position === 'right' || position === 'left' ? (breakpointExceeded ? '100%' : width()) : null\"\r\n  [style.height]=\"position === 'top' || position === 'bottom' ? (breakpointExceeded ? '100%' : height()) : null\"\r\n  [style.left]=\"position === 'left' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\r\n  [style.right]=\"position === 'right' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\r\n  [style.bottom]=\"position === 'bottom' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\r\n  [style.top]=\"position === 'top' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\r\n  [style.visibility]=\"!visible ? 'hidden': 'visible'\"\r\n  [attr.aria-hidden]=\"!slideoverOpen\"\r\n  >\r\n  @if (!hideCloseButton()) {\r\n    <div class=\"push_close_bar\">\r\n      <button class=\"access btnset clear\"\r\n        [attr.aria-label]=\"text().close\"\r\n        (click)=\"close()\">\r\n        <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n          <i class=\"fas fa-times\"></i>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".slideover-panel{position:fixed;transition:transform .3s;display:flex;flex-direction:column;z-index:var(--z-dialog)}.slideover-panel.left{top:0;left:0;height:100%}.slideover-panel.right{top:0;right:0;height:100%}.slideover-panel.top{top:0;left:0;width:100%}.slideover-panel.bottom{bottom:0;left:0;width:100%}.slideover_inactive_left,.slideover_active_left{transition:left .2s ease-in-out}.slideover_inactive_right,.slideover_active_right{transition:right .2s ease-in-out}.slideover_inactive_top,.slideover_active_top{transition:top .2s ease-in-out}.slideover_inactive_bottom,.slideover_active_bottom{transition:bottom .2s ease-in-out}.push_close_bar{position:absolute;right:0;top:0;width:45px;height:45px;z-index:var(--z-dialog);display:flex;justify-content:center;align-items:center}.data_hide_button{float:right;display:flex;align-items:center;justify-content:center;font-size:9pt;min-height:20px;height:20px;min-width:20px;width:20px;border-radius:50%;cursor:pointer;padding:0;transition:all .2s ease-in-out;background-color:#ffffffe6;color:#0006;border:1px solid rgba(0,0,0,.1)}.data_hide_button:hover{background-color:#0000004d;color:#fffc;border:1px solid rgba(0,0,0,.1)}.particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SlideoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: [{
@@ -8026,10 +8053,10 @@ class IdleTimeoutComponent {
             this.showDialog = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: IdleTimeoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: IdleTimeoutComponent, isStandalone: true, selector: "particle-idle-timeout", inputs: { borderRadius: "borderRadius", timeoutInSeconds: "timeoutInSeconds", text: "text" }, outputs: { timerEnd: "timerEnd" }, viewQueries: [{ propertyName: "timeoutDialog", first: true, predicate: ["timeoutDialog"], descendants: true }], ngImport: i0, template: "<!-- timeout dialog -->\r\n<particle-dialog\r\n  [title]=\"text.sessionExpiring\"\r\n  [object]=\"showDialog\"\r\n  [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.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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: IdleTimeoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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" }]
         }], propDecorators: { borderRadius: [{
@@ -8047,12 +8074,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class ScrollToTopComponent {
     renderer = inject(Renderer2);
-    content = input(null);
-    scrollDistance = input(500);
-    bottomOffset = input(50);
+    content = input(null, ...(ngDevMode ? [{ debugName: "content" }] : []));
+    scrollDistance = input(500, ...(ngDevMode ? [{ debugName: "scrollDistance" }] : []));
+    bottomOffset = input(50, ...(ngDevMode ? [{ debugName: "bottomOffset" }] : []));
     text = input({
         scrollToTop: 'Scroll back to the top of the page'
-    });
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     $scrollTop = new BehaviorSubject(0);
     _listener;
     ngAfterViewInit() {
@@ -8072,27 +8099,27 @@ class ScrollToTopComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScrollToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScrollToTopComponent, isStandalone: true, selector: "particle-scroll-to-top", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, scrollDistance: { classPropertyName: "scrollDistance", publicName: "scrollDistance", isSignal: true, isRequired: false, transformFunction: null }, bottomOffset: { classPropertyName: "bottomOffset", publicName: "bottomOffset", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ($scrollTop | async; as scrollTop) {\r\n  <div [style.visibility]=\"scrollTop > scrollDistance() ? 'visible' : 'hidden'\"\r\n    [style.opacity]=\"scrollTop > scrollDistance() ? '1' : '0'\"\r\n    [style.bottom]=\"bottomOffset() + 'px'\"\r\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n    <button (click)=\"scrollToTop()\"\r\n      class=\"access btn pad_10 brad_3 brdr content_color\"\r\n      type=\"button\"\r\n      [attr.aria-label]=\"text().scrollToTop\">\r\n      <span class=\"icon slide_up\"><i class=\"fas fa-chevron-up\"></i></span>\r\n    </button>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] });
+    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" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScrollToTopComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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" }]
         }] });
 class LayoutFullwidthSidebarComponent {
-    mainContent = input(null);
-    rightSidebar = input(null);
-    mainContentContainerClassList = input('');
-    rightSidebarContainerClassList = input('');
-    rightSidebarSticky = input(false);
-    headerHeight = input('0');
-    footerHeight = input('0');
-    rightSidebarWidth = input('250px');
-    breakpoint = input(1024);
-    rightSidebarCollapsedTabOffset = input(150);
-    collapsedClassList = input('');
-    mobileSidebarEnabled = input(true);
+    mainContent = input(null, ...(ngDevMode ? [{ debugName: "mainContent" }] : []));
+    rightSidebar = input(null, ...(ngDevMode ? [{ debugName: "rightSidebar" }] : []));
+    mainContentContainerClassList = input('', ...(ngDevMode ? [{ debugName: "mainContentContainerClassList" }] : []));
+    rightSidebarContainerClassList = input('', ...(ngDevMode ? [{ debugName: "rightSidebarContainerClassList" }] : []));
+    rightSidebarSticky = input(false, ...(ngDevMode ? [{ debugName: "rightSidebarSticky" }] : []));
+    headerHeight = input('0', ...(ngDevMode ? [{ debugName: "headerHeight" }] : []));
+    footerHeight = input('0', ...(ngDevMode ? [{ debugName: "footerHeight" }] : []));
+    rightSidebarWidth = input('250px', ...(ngDevMode ? [{ debugName: "rightSidebarWidth" }] : []));
+    breakpoint = input(1024, ...(ngDevMode ? [{ debugName: "breakpoint" }] : []));
+    rightSidebarCollapsedTabOffset = input(150, ...(ngDevMode ? [{ debugName: "rightSidebarCollapsedTabOffset" }] : []));
+    collapsedClassList = input('', ...(ngDevMode ? [{ debugName: "collapsedClassList" }] : []));
+    mobileSidebarEnabled = input(true, ...(ngDevMode ? [{ debugName: "mobileSidebarEnabled" }] : []));
     slideover = null;
     onResize(event) {
         if (this.mobileSidebarEnabled() && event.target.innerWidth > 768 && this.slideover && this.slideover.slideoverOpen) {
@@ -8105,10 +8132,10 @@ class LayoutFullwidthSidebarComponent {
             +this.footerHeight().replace(/\D/g, "");
         return `calc(100vh - ${offset}px)`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutFullwidthSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LayoutFullwidthSidebarComponent, isStandalone: true, selector: "particle-layout-fullwidth-sidebar", inputs: { mainContent: { classPropertyName: "mainContent", publicName: "mainContent", isSignal: true, isRequired: false, transformFunction: null }, rightSidebar: { classPropertyName: "rightSidebar", publicName: "rightSidebar", isSignal: true, isRequired: false, transformFunction: null }, mainContentContainerClassList: { classPropertyName: "mainContentContainerClassList", publicName: "mainContentContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarContainerClassList: { classPropertyName: "rightSidebarContainerClassList", publicName: "rightSidebarContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarSticky: { classPropertyName: "rightSidebarSticky", publicName: "rightSidebarSticky", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarWidth: { classPropertyName: "rightSidebarWidth", publicName: "rightSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarCollapsedTabOffset: { classPropertyName: "rightSidebarCollapsedTabOffset", publicName: "rightSidebarCollapsedTabOffset", isSignal: true, isRequired: false, transformFunction: null }, collapsedClassList: { classPropertyName: "collapsedClassList", publicName: "collapsedClassList", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarEnabled: { classPropertyName: "mobileSidebarEnabled", publicName: "mobileSidebarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "slideover", first: true, predicate: ["slideover"], descendants: true }], ngImport: i0, template: "<!-- setup for a side column -->\r\n<div class=\"row height100 ent_r2l_row\">\r\n  <div class=\"row column space_between height100\"\r\n    [ngClass]=\"mainContentContainerClassList()\">\r\n    <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\r\n  </div>\r\n\r\n  @if (!rightSidebarSticky()) {\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [ngClass]=\"rightSidebarContainerClassList()\"\r\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n      [style.width]=\"rightSidebarWidth()\">\r\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n    </div>\r\n  }\r\n\r\n  @if (rightSidebarSticky()) {\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n      [style.width]=\"rightSidebarWidth()\">\r\n      <div class=\"row column sticky_sidebar\"\r\n        [ngClass]=\"rightSidebarContainerClassList()\"\r\n        [style.height]=\"stickySidebarHeight\">\r\n        <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\r\n  <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\r\n    [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\r\n    [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\r\n    style=\"z-index: var(--z-frame);\"\r\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n    <button\r\n      (click)=\"slideover.open()\"\r\n      class=\"access btn pad_10 brad_3 brdr content_color\"\r\n      type=\"button\">\r\n      <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\r\n    </button>\r\n  </div>\r\n  <particle-slideover\r\n    position=\"right\"\r\n    [width]=\"rightSidebarWidth()\"\r\n    [breakpoint]=\"1\"\r\n    #slideover\r\n    >\r\n    <div class=\"min_h40 header_color\">\r\n    </div>\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\r\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n    </div>\r\n  </particle-slideover>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlideoverComponent, selector: "particle-slideover", inputs: ["position", "modal", "width", "height", "bgClass", "text", "breakpoint", "hideCloseButton"], outputs: ["opened", "closed"] }] });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutFullwidthSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: [{
@@ -8120,21 +8147,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 class LayoutFullFramingComponent {
-    mainContent = input(null);
-    rightSidebar = input(null);
-    header = input(null);
-    footer = input(null);
-    mainContentContainerClassList = input('');
-    rightSidebarContainerClassList = input('');
-    headerClassList = input('');
-    footerClassList = input('');
-    headerHeight = input('0');
-    footerHeight = input('0');
-    rightSidebarWidth = input('250px');
-    breakpoint = input(1024);
-    rightSidebarCollapsedTabOffset = input(150);
-    collapsedClassList = input('');
-    mobileSidebarEnabled = input(true);
+    mainContent = input(null, ...(ngDevMode ? [{ debugName: "mainContent" }] : []));
+    rightSidebar = input(null, ...(ngDevMode ? [{ debugName: "rightSidebar" }] : []));
+    header = input(null, ...(ngDevMode ? [{ debugName: "header" }] : []));
+    footer = input(null, ...(ngDevMode ? [{ debugName: "footer" }] : []));
+    mainContentContainerClassList = input('', ...(ngDevMode ? [{ debugName: "mainContentContainerClassList" }] : []));
+    rightSidebarContainerClassList = input('', ...(ngDevMode ? [{ debugName: "rightSidebarContainerClassList" }] : []));
+    headerClassList = input('', ...(ngDevMode ? [{ debugName: "headerClassList" }] : []));
+    footerClassList = input('', ...(ngDevMode ? [{ debugName: "footerClassList" }] : []));
+    headerHeight = input('0', ...(ngDevMode ? [{ debugName: "headerHeight" }] : []));
+    footerHeight = input('0', ...(ngDevMode ? [{ debugName: "footerHeight" }] : []));
+    rightSidebarWidth = input('250px', ...(ngDevMode ? [{ debugName: "rightSidebarWidth" }] : []));
+    breakpoint = input(1024, ...(ngDevMode ? [{ debugName: "breakpoint" }] : []));
+    rightSidebarCollapsedTabOffset = input(150, ...(ngDevMode ? [{ debugName: "rightSidebarCollapsedTabOffset" }] : []));
+    collapsedClassList = input('', ...(ngDevMode ? [{ debugName: "collapsedClassList" }] : []));
+    mobileSidebarEnabled = input(true, ...(ngDevMode ? [{ debugName: "mobileSidebarEnabled" }] : []));
     slideover = null;
     onResize(event) {
         if (this.mobileSidebarEnabled() && event.target.innerWidth > 768 && this.slideover && this.slideover.slideoverOpen) {
@@ -8152,10 +8179,10 @@ class LayoutFullFramingComponent {
             +this.footerHeight().replace(/\D/g, "");
         return `calc(100% - ${offset}px)`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutFullFramingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LayoutFullFramingComponent, isStandalone: true, selector: "particle-layout-full-framing", inputs: { mainContent: { classPropertyName: "mainContent", publicName: "mainContent", isSignal: true, isRequired: false, transformFunction: null }, rightSidebar: { classPropertyName: "rightSidebar", publicName: "rightSidebar", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, mainContentContainerClassList: { classPropertyName: "mainContentContainerClassList", publicName: "mainContentContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarContainerClassList: { classPropertyName: "rightSidebarContainerClassList", publicName: "rightSidebarContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, headerClassList: { classPropertyName: "headerClassList", publicName: "headerClassList", isSignal: true, isRequired: false, transformFunction: null }, footerClassList: { classPropertyName: "footerClassList", publicName: "footerClassList", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarWidth: { classPropertyName: "rightSidebarWidth", publicName: "rightSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarCollapsedTabOffset: { classPropertyName: "rightSidebarCollapsedTabOffset", publicName: "rightSidebarCollapsedTabOffset", isSignal: true, isRequired: false, transformFunction: null }, collapsedClassList: { classPropertyName: "collapsedClassList", publicName: "collapsedClassList", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarEnabled: { classPropertyName: "mobileSidebarEnabled", publicName: "mobileSidebarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "slideover", first: true, predicate: ["slideover"], descendants: true }], ngImport: i0, template: "<div class=\"width100 height100\">\r\n  <div class=\"width100 header_sticky\" [ngClass]=\"headerClassList()\" [style.height]=\"headerHeight()\">\r\n    <ng-template [ngTemplateOutlet]=\"header()\"></ng-template>\r\n  </div>\r\n\r\n  <div class=\"row ent_r2l_row\" [style.height]=\"contentSidebarHeight\">\r\n    <div class=\"row column space_between height100\"\r\n      [ngClass]=\"mainContentContainerClassList()\">\r\n      <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\r\n    </div>\r\n\r\n    <div class=\"col particle_layout_sidebar height100\"\r\n      [style.width]=\"rightSidebarWidth()\"\r\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n      >\r\n      <div class=\"row column sticky_sidebar height100\"\r\n        [ngClass]=\"rightSidebarContainerClassList()\"\r\n        [style.height]=\"stickySidebarHeight\"\r\n        [style.top]=\"headerHeight()\">\r\n        <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"width100 footer_sticky\" [ngClass]=\"footerClassList()\" [style.height]=\"footerHeight()\">\r\n    <ng-template [ngTemplateOutlet]=\"footer()\"></ng-template>\r\n  </div>\r\n</div>\r\n\r\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\r\n  <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\r\n    [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\r\n    [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\r\n    style=\"z-index: var(--z-frame);\"\r\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n    <button\r\n      (click)=\"slideover.open()\"\r\n      class=\"access btn pad_10 brad_3 brdr content_color\"\r\n      type=\"button\">\r\n      <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\r\n    </button>\r\n  </div>\r\n  <particle-slideover\r\n    position=\"right\"\r\n    [width]=\"rightSidebarWidth()\"\r\n    [breakpoint]=\"1\"\r\n    #slideover\r\n    >\r\n    <div class=\"min_h40 header_color\">\r\n    </div>\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\r\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n    </div>\r\n  </particle-slideover>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlideoverComponent, selector: "particle-slideover", inputs: ["position", "modal", "width", "height", "bgClass", "text", "breakpoint", "hideCloseButton"], outputs: ["opened", "closed"] }] });
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutFullFramingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: [{
@@ -8187,7 +8214,7 @@ class ToggleSwitchComponent {
         }
         this._options$.next(options);
     }
-    disabled = model(false);
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     changed = output();
     _value = null;
     get value() {
@@ -8240,14 +8267,14 @@ class ToggleSwitchComponent {
             this.value = value;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ToggleSwitchComponent, isStandalone: true, selector: "particle-toggle-switch", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", changed: "changed" }, providers: [{
+    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: [{
                 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: "19.0.5", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-toggle-switch', providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -8288,12 +8315,12 @@ class CheckboxComponent {
         }
         return this._value ? 'Y' : 'N';
     }
-    size = input(30);
-    inputId = input(null);
+    size = input(30, ...(ngDevMode ? [{ debugName: "size" }] : []));
+    inputId = input(null, ...(ngDevMode ? [{ debugName: "inputId" }] : []));
     text = input({
         check: 'Check the Box',
         uncheck: 'Uncheck the Box'
-    });
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
     type = 'boolean';
     /**
      * Write value
@@ -8330,8 +8357,8 @@ class CheckboxComponent {
         this.onChange(this.value);
         this.changeDetectorRef.detectChanges();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: CheckboxComponent, isStandalone: true, selector: "particle-checkbox", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxComponent),
@@ -8339,7 +8366,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: "19.0.5", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-checkbox', providers: [
                         {
@@ -8872,14 +8899,14 @@ class InputMaskComponent {
     focus() {
         this.inputViewChild.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: InputMaskComponent, isStandalone: true, selector: "particle-input-mask", inputs: { type: "type", slotChar: "slotChar", autoClear: "autoClear", style: "style", inputId: "inputId", styleClass: "styleClass", placeholder: "placeholder", size: "size", maxlength: "maxlength", tabindex: "tabindex", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", disabled: "disabled", readonly: "readonly", unmask: "unmask", name: "name", required: "required", characterPattern: "characterPattern", autoFocus: "autoFocus", autocomplete: "autocomplete", mask: "mask" }, outputs: { onComplete: "onComplete", onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput" }, host: { properties: { "class.ui-inputwrapper-filled": "filled", "class.ui-inputwrapper-focus": "focus" } }, providers: [INPUTMASK_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<input #input [attr.id]="inputId" [attr.type]="type" [attr.name]="name" [ngStyle]="style" [ngClass]="styleClass" [attr.placeholder]="placeholder"
+    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"
                     [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: "19.0.5", ngImport: i0, type: InputMaskComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: InputMaskComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'particle-input-mask',
@@ -8959,17 +8986,17 @@ class ProgressBarComponent {
     get percentComplete() {
         return this._percentComplete;
     }
-    backgroundColorClass = input('content_color_dark_1');
-    progressColorClass = input('bg_blue');
-    showPercentComplete = input(true);
-    borderRadius = input(9999);
-    height = input(20);
-    showBorder = input(true);
-    showMovement = input(false);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ProgressBarComponent, isStandalone: true, selector: "particle-progress-bar", inputs: { percentComplete: { classPropertyName: "percentComplete", publicName: "percentComplete", isSignal: false, isRequired: false, transformFunction: null }, backgroundColorClass: { classPropertyName: "backgroundColorClass", publicName: "backgroundColorClass", isSignal: true, isRequired: false, transformFunction: null }, progressColorClass: { classPropertyName: "progressColorClass", publicName: "progressColorClass", isSignal: true, isRequired: false, transformFunction: null }, showPercentComplete: { classPropertyName: "showPercentComplete", publicName: "showPercentComplete", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, showMovement: { classPropertyName: "showMovement", publicName: "showMovement", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [ngClass]=\"showBorder() ? backgroundColorClass() + ' brdr' : backgroundColorClass()\"\r\n  [style.border-radius]=\"borderRadius() + 'px'\"\r\n  [style.height]=\"height() ? height() + 'px' : ''\"\r\n  >\r\n  <div class=\"container_progress\"\r\n    [ngClass]=\"progressColorClass() + (showMovement() ? ' progress_movement' : '')\"\r\n    [style.width]=\"percentComplete + '%'\"\r\n    [style.border-radius]=\"borderRadius() + 'px'\"\r\n    [style.height]=\"height() ? (showBorder() ? (height() - 2) : height()) + 'px' : ''\"\r\n    [style.font-size]=\"height() < 20 ? '65%' : ''\"\r\n    >\r\n    @if ((showPercentComplete() && height() >= 10)) {\r\n      {{percentComplete}}%\r\n    } @else {\r\n      &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"] }] });
+    backgroundColorClass = input('content_color_dark_1', ...(ngDevMode ? [{ debugName: "backgroundColorClass" }] : []));
+    progressColorClass = input('bg_blue', ...(ngDevMode ? [{ debugName: "progressColorClass" }] : []));
+    showPercentComplete = input(true, ...(ngDevMode ? [{ debugName: "showPercentComplete" }] : []));
+    borderRadius = input(9999, ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
+    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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: [{
@@ -8989,10 +9016,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: "19.0.5", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LoaderComponent, isStandalone: true, selector: "particle-loader", inputs: { text: "text", disableText: "disableText", colors: "colors" }, ngImport: i0, template: "<div class=\"row column center_center height100\" style=\"max-width: 250px;\">\r\n  <div class=\"ptl_loader\">\r\n    <div class=\"ptl_loader__progress\" [style.background]=\"backgroundStyle ?? ''\"></div>\r\n  </div>\r\n  @if (!disableText) {\r\n    @if (text.loadingText) {\r\n      <div class=\"text md bold text_center mar_top15 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\r\n        {{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span>\r\n      </div>\r\n    }\r\n    @if (text.loadingSubtext) {\r\n      <div class=\"text sm text_center mar_top5 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\r\n        {{text.loadingSubtext}}\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".ptl_loader{height:2px;position:relative;overflow:hidden;width:100%}.ptl_loader__progress{background:linear-gradient(to right,rgba(0,0,0,0) 0%,var(--bg-purple-color) 33%,var(--bg-blue-color) 50%,var(--bg-green-color) 66%,rgba(0,0,0,0) 100%);position:absolute;bottom:0;top:0;width:100%;animation-duration:2s;animation-iteration-count:infinite;animation-name:ptl_loader}@keyframes ptl_loader{0%{left:-100%}to{left:100%}}.endpoint_fadein{animation:fadeInAnimation ease 1s;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}.endpoint_shape{height:7px;width:7px;min-width:7px;min-height:7px;border-radius:7px}.endpoint_spin{animation:spin 3s linear infinite;opacity:1;z-index:var(--z-frame)}@keyframes spin{to{transform:rotate(360deg)}}.endpoint_spin_rev{animation:spin_rev 3s linear infinite;opacity:1;z-index:var(--z-frame)}@keyframes spin_rev{to{transform:rotate(-360deg)}}.bars_vertical{height:60px;width:60px;display:flex;align-items:center;justify-content:center}.bars_vertical .bar1,.bars_vertical .bar2,.bars_vertical .bar3,.bars_vertical .bar4,.bars_vertical .bar5{animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:alternate;transform-origin:center center;margin:0 5px}.bars_vertical .bar1{animation-name:bars_vertical_grow;animation-delay:.2s}.bars_vertical .bar2{animation-name:bars_vertical_grow;animation-delay:.4s}.bars_vertical .bar3{animation-name:bars_vertical_grow;animation-delay:.6s}.bars_vertical .bar4{animation-name:bars_vertical_grow;animation-delay:.8s}.bars_vertical .bar5{animation-name:bars_vertical_grow;animation-delay:1s}@keyframes bars_vertical_grow{0%{transform:scale(.2);opacity:0}to{transform:scale(2);opacity:1}}@keyframes fadein{0%{opacity:0}to{opacity:.5}}.one{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:0s;animation:dot 1.3s infinite;animation-delay:0s}.two{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:.2s;animation:dot 1.3s infinite;animation-delay:.2s}.three{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:.3s;animation:dot 1.3s infinite;animation-delay:.3s}@-webkit-keyframes dot{0%{opacity:0}50%{opacity:0}to{opacity:1}}@keyframes dot{0%{opacity:0}50%{opacity:0}to{opacity:1}}\n"] });
+    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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: [{
@@ -9005,11 +9032,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 class RadioButtonsComponent {
     changeDetectorRef = inject(ChangeDetectorRef);
-    disabled = signal(false);
-    value = signal(null);
-    options = input([]);
-    colorClass = input('ok_button_color');
-    isDisplayColumn = input(true);
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    colorClass = input('ok_button_color', ...(ngDevMode ? [{ debugName: "colorClass" }] : []));
+    isDisplayColumn = input(true, ...(ngDevMode ? [{ debugName: "isDisplayColumn" }] : []));
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onChange = () => {
     };
@@ -9050,8 +9077,8 @@ class RadioButtonsComponent {
         this.value.set(value);
         this.onChange(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RadioButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: RadioButtonsComponent, isStandalone: true, selector: "particle-radio-buttons", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, colorClass: { classPropertyName: "colorClass", publicName: "colorClass", isSignal: true, isRequired: false, transformFunction: null }, isDisplayColumn: { classPropertyName: "isDisplayColumn", publicName: "isDisplayColumn", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RadioButtonsComponent),
@@ -9059,7 +9086,7 @@ class RadioButtonsComponent {
             }
         ], 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RadioButtonsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: RadioButtonsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-radio-buttons', imports: [
                         NgClass
@@ -9086,10 +9113,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: "19.0.5", ngImport: i0, type: JsonInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: JsonInterceptor });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: JsonInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: JsonInterceptor, decorators: [{
             type: Injectable
         }] });
@@ -9332,10 +9359,10 @@ class LocalStorageService {
     remove(key) {
         localStorage.removeItem(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LocalStorageService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LocalStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: LocalStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -9376,10 +9403,10 @@ class ThemeChangeDetectionService {
     listen() {
         return this._themeChanged.asObservable();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThemeChangeDetectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThemeChangeDetectionService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThemeChangeDetectionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemeChangeDetectionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -9841,10 +9868,10 @@ class ThemingService {
         }
         return rootVars;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThemingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThemingService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ThemingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: ThemingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'