@entake/particle 21.0.2 → 21.1.0

package/fesm2022/entake-particle.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { NgModule, inject, ElementRef, Renderer2, input, HostListener, Input, Directive, TemplateRef, ContentChild, Injectable, output, Component, ChangeDetectorRef, forwardRef, ViewChild, signal, effect, ViewEncapsulation, Pipe, ViewChildren, model, EventEmitter, Output, ContentChildren, ChangeDetectionStrategy } from '@angular/core';
-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 { BehaviorSubject, fromEvent, Subject, combineLatest, Subscription, tap as tap$1, map as map$1, withLatestFrom as withLatestFrom$1, of, shareReplay, debounceTime, catchError, throwError, mergeMap } from 'rxjs';
 import * as i1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { startWith, map, withLatestFrom, tap } from 'rxjs/operators';
 import { NgClass, NgStyle, AsyncPipe, NgTemplateOutlet, DatePipe } from '@angular/common';
 import { CdkTrapFocus } from '@angular/cdk/a11y';
@@ -16,6 +16,7 @@ import Image from '@tiptap/extension-image';
 import { TiptapEditorDirective } from 'ngx-tiptap';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { endOfMonth, isWithinInterval, subDays, addDays, isEqual, format, parse, isValid, getWeek, setWeek, add, startOfWeek, endOfWeek, sub, endOfDay } from 'date-fns';
+import _ from 'lodash';
 
 /**
  * Particle Icons - Brand
@@ -897,6 +898,9 @@ class DialogService {
                         topDialog.close();
                         event.stopPropagation();
                     }
+                    else {
+                        topDialog.closeAttempt.emit();
+                    }
                 }
             }
         }
@@ -1011,6 +1015,7 @@ class DialogComponent {
      * Event Emitter for when the dialog is closed
      */
     closed = output();
+    closeAttempt = output();
     /**
      * Event emitted when dialog has finished opening
      */
@@ -1022,32 +1027,21 @@ class DialogComponent {
      * Null the object to close the dialog, emit the close event.
      */
     close() {
+        document.activeElement?.blur();
         this._object = null;
         this.isMaximized = false;
         this.dialogService.unregisterDialog(this);
         this.closed.emit();
     }
-    /**
-     * Emit closed/opened events based on state when dialog animation ends
-     * @param event
-     */
-    onAnimationDone(event) {
-        /**
-        if (event.fromState === 'void') {
-          this.opened.emit();
-        } else if (event.toState === 'void') {
-          this.closed.emit();
-        }*/
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DialogComponent, isStandalone: true, selector: "particle-dialog", inputs: { object: { classPropertyName: "object", publicName: "object", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, allowClose: { classPropertyName: "allowClose", publicName: "allowClose", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", opened: "opened" }, ngImport: i0, template: "<div [ngClass]=\"{'particle_dialog_overlay' : object}\">\r\n  @if (object) {\r\n    <div class=\"particle_dialog_container\"\r\n         animate.enter=\"enter-animation\"\r\n         animate.leave=\"leave-animation\"\r\n         [cdkTrapFocus]=\"true\"\r\n         [cdkTrapFocusAutoCapture]=\"true\"\r\n    >\r\n      @if (effectiveWidth$ | async; as effectiveWidth) {\r\n        <div class=\"col shadow particle_dialog_box ptl_brdr_radius\"\r\n          [ngStyle]=\"{'width': isMaximized ? '90vw' : effectiveWidth, 'height': isMaximized ? '90vh' : height()}\">\r\n          <!-- dialog header -->\r\n          @if (showTitle()) {\r\n            <div class=\"col\" [ngClass]=\"titleClass()\">\r\n              <div class=\"row v_center pad_5 space_between\">\r\n                <div class=\"text lg bold paragraph\">\r\n                  {{title()}}\r\n                </div>\r\n                <div class=\"row col rc_gap\">\r\n                  @if (allowClose()) {\r\n                    <button class=\"access btnset clear\"\r\n                            [attr.aria-label]=\"isMaximized ? text().minimize : text().maximize\"\r\n                            (click)=\"isMaximized = !isMaximized\">\r\n                      <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\"\r\n                           innerHTML=\"<i class='fas fa-expand {{isMaximized ? 'text xsm' : ''}}'></i>\"\r\n                      ></div>\r\n                    </button>\r\n                    <button class=\"access btnset clear\"\r\n                      [attr.aria-label]=\"text().close\"\r\n                      (click)=\"close()\">\r\n                      <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                        <i class=\"fas fa-times\"></i>\r\n                      </div>\r\n                    </button>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n          <!-- dialog container -->\r\n          <div class=\"row scroll_yauto center_center\" [ngClass]=\"bodyClass()\">\r\n            <div class=\"row_block width100 height100\">\r\n              <!-- content -->\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n", styles: [".particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}.particle_dialog_container{position:fixed;width:100%;height:100%;inset:0;flex-direction:column;display:flex;align-items:center;justify-content:center;z-index:var(--z-notification)}.particle_dialog_box{box-sizing:border-box;width:100%;display:flex;flex-direction:column;overflow:hidden}@media screen and (max-width:768px){.particle_dialog_box{border-radius:0;width:100%!important;height:100%!important;max-height:unset!important;max-width:unset!important}}.enter-animation{animation:enter-frames .15s 0ms ease-in-out}@keyframes enter-frames{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.leave-animation{animation:leave-frames .15s 0ms ease-in-out}@keyframes leave-frames{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: DialogComponent, isStandalone: true, selector: "particle-dialog", inputs: { object: { classPropertyName: "object", publicName: "object", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, allowClose: { classPropertyName: "allowClose", publicName: "allowClose", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", closeAttempt: "closeAttempt", opened: "opened" }, ngImport: i0, template: "<div [ngClass]=\"{'particle_dialog_overlay' : object}\">\n  @if (object) {\n    <div class=\"particle_dialog_container\"\n         animate.enter=\"enter-animation\"\n         animate.leave=\"leave-animation\"\n         [cdkTrapFocus]=\"true\"\n         [cdkTrapFocusAutoCapture]=\"true\"\n    >\n      @if (effectiveWidth$ | async; as effectiveWidth) {\n        <div class=\"col shadow particle_dialog_box ptl_brdr_radius\"\n          [ngStyle]=\"{'width': isMaximized ? '90vw' : effectiveWidth, 'height': isMaximized ? '90vh' : height()}\">\n          <!-- dialog header -->\n          @if (showTitle()) {\n            <div class=\"col\" [ngClass]=\"titleClass()\">\n              <div class=\"row v_center pad_5 space_between\">\n                <div class=\"text lg bold paragraph\">\n                  {{title()}}\n                </div>\n                <div class=\"row col rc_gap\">\n                  @if (allowClose()) {\n                    <button class=\"access btnset clear\"\n                            [attr.aria-label]=\"isMaximized ? text().minimize : text().maximize\"\n                            (click)=\"isMaximized = !isMaximized\">\n                      <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\"\n                           innerHTML=\"<i class='fas fa-expand {{isMaximized ? 'text xsm' : ''}}'></i>\"\n                      ></div>\n                    </button>\n                    <button class=\"access btnset clear\"\n                      [attr.aria-label]=\"text().close\"\n                      (click)=\"close()\">\n                      <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\n                        <i class=\"fas fa-times\"></i>\n                      </div>\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n          <!-- dialog container -->\n          <div class=\"row scroll_yauto center_center\" [ngClass]=\"bodyClass()\">\n            <div class=\"row_block width100 height100\">\n              <!-- content -->\n              <ng-content></ng-content>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n", styles: [".particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}.particle_dialog_container{position:fixed;width:100%;height:100%;inset:0;flex-direction:column;display:flex;align-items:center;justify-content:center;z-index:var(--z-notification)}.particle_dialog_box{box-sizing:border-box;width:100%;display:flex;flex-direction:column;overflow:hidden}@media screen and (max-width:768px){.particle_dialog_box{border-radius:0;width:100%!important;height:100%!important;max-height:unset!important;max-width:unset!important}}.enter-animation{animation:enter-frames .15s 0ms ease-in-out}@keyframes enter-frames{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.leave-animation{animation:leave-frames .15s 0ms ease-in-out}@keyframes leave-frames{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'particle-dialog', imports: [NgClass, CdkTrapFocus, NgStyle, AsyncPipe], template: "<div [ngClass]=\"{'particle_dialog_overlay' : object}\">\r\n  @if (object) {\r\n    <div class=\"particle_dialog_container\"\r\n         animate.enter=\"enter-animation\"\r\n         animate.leave=\"leave-animation\"\r\n         [cdkTrapFocus]=\"true\"\r\n         [cdkTrapFocusAutoCapture]=\"true\"\r\n    >\r\n      @if (effectiveWidth$ | async; as effectiveWidth) {\r\n        <div class=\"col shadow particle_dialog_box ptl_brdr_radius\"\r\n          [ngStyle]=\"{'width': isMaximized ? '90vw' : effectiveWidth, 'height': isMaximized ? '90vh' : height()}\">\r\n          <!-- dialog header -->\r\n          @if (showTitle()) {\r\n            <div class=\"col\" [ngClass]=\"titleClass()\">\r\n              <div class=\"row v_center pad_5 space_between\">\r\n                <div class=\"text lg bold paragraph\">\r\n                  {{title()}}\r\n                </div>\r\n                <div class=\"row col rc_gap\">\r\n                  @if (allowClose()) {\r\n                    <button class=\"access btnset clear\"\r\n                            [attr.aria-label]=\"isMaximized ? text().minimize : text().maximize\"\r\n                            (click)=\"isMaximized = !isMaximized\">\r\n                      <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\"\r\n                           innerHTML=\"<i class='fas fa-expand {{isMaximized ? 'text xsm' : ''}}'></i>\"\r\n                      ></div>\r\n                    </button>\r\n                    <button class=\"access btnset clear\"\r\n                      [attr.aria-label]=\"text().close\"\r\n                      (click)=\"close()\">\r\n                      <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                        <i class=\"fas fa-times\"></i>\r\n                      </div>\r\n                    </button>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n          <!-- dialog container -->\r\n          <div class=\"row scroll_yauto center_center\" [ngClass]=\"bodyClass()\">\r\n            <div class=\"row_block width100 height100\">\r\n              <!-- content -->\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n", styles: [".particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}.particle_dialog_container{position:fixed;width:100%;height:100%;inset:0;flex-direction:column;display:flex;align-items:center;justify-content:center;z-index:var(--z-notification)}.particle_dialog_box{box-sizing:border-box;width:100%;display:flex;flex-direction:column;overflow:hidden}@media screen and (max-width:768px){.particle_dialog_box{border-radius:0;width:100%!important;height:100%!important;max-height:unset!important;max-width:unset!important}}.enter-animation{animation:enter-frames .15s 0ms ease-in-out}@keyframes enter-frames{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.leave-animation{animation:leave-frames .15s 0ms ease-in-out}@keyframes leave-frames{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}\n"] }]
+            args: [{ selector: 'particle-dialog', imports: [NgClass, CdkTrapFocus, NgStyle, AsyncPipe], template: "<div [ngClass]=\"{'particle_dialog_overlay' : object}\">\n  @if (object) {\n    <div class=\"particle_dialog_container\"\n         animate.enter=\"enter-animation\"\n         animate.leave=\"leave-animation\"\n         [cdkTrapFocus]=\"true\"\n         [cdkTrapFocusAutoCapture]=\"true\"\n    >\n      @if (effectiveWidth$ | async; as effectiveWidth) {\n        <div class=\"col shadow particle_dialog_box ptl_brdr_radius\"\n          [ngStyle]=\"{'width': isMaximized ? '90vw' : effectiveWidth, 'height': isMaximized ? '90vh' : height()}\">\n          <!-- dialog header -->\n          @if (showTitle()) {\n            <div class=\"col\" [ngClass]=\"titleClass()\">\n              <div class=\"row v_center pad_5 space_between\">\n                <div class=\"text lg bold paragraph\">\n                  {{title()}}\n                </div>\n                <div class=\"row col rc_gap\">\n                  @if (allowClose()) {\n                    <button class=\"access btnset clear\"\n                            [attr.aria-label]=\"isMaximized ? text().minimize : text().maximize\"\n                            (click)=\"isMaximized = !isMaximized\">\n                      <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\"\n                           innerHTML=\"<i class='fas fa-expand {{isMaximized ? 'text xsm' : ''}}'></i>\"\n                      ></div>\n                    </button>\n                    <button class=\"access btnset clear\"\n                      [attr.aria-label]=\"text().close\"\n                      (click)=\"close()\">\n                      <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\n                        <i class=\"fas fa-times\"></i>\n                      </div>\n                    </button>\n                  }\n                </div>\n              </div>\n            </div>\n          }\n          <!-- dialog container -->\n          <div class=\"row scroll_yauto center_center\" [ngClass]=\"bodyClass()\">\n            <div class=\"row_block width100 height100\">\n              <!-- content -->\n              <ng-content></ng-content>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n", styles: [".particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}.particle_dialog_container{position:fixed;width:100%;height:100%;inset:0;flex-direction:column;display:flex;align-items:center;justify-content:center;z-index:var(--z-notification)}.particle_dialog_box{box-sizing:border-box;width:100%;display:flex;flex-direction:column;overflow:hidden}@media screen and (max-width:768px){.particle_dialog_box{border-radius:0;width:100%!important;height:100%!important;max-height:unset!important;max-width:unset!important}}.enter-animation{animation:enter-frames .15s 0ms ease-in-out}@keyframes enter-frames{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.leave-animation{animation:leave-frames .15s 0ms ease-in-out}@keyframes leave-frames{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}\n"] }]
         }], propDecorators: { object: [{
                 type: Input
-            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], allowClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClose", required: false }] }], bodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyClass", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], opened: [{ type: i0.Output, args: ["opened"] }] } });
+            }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleClass", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], allowClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClose", required: false }] }], bodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyClass", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], closeAttempt: [{ type: i0.Output, args: ["closeAttempt"] }], opened: [{ type: i0.Output, args: ["opened"] }] } });
 
 /**
  * Model representing Fontawesome's brands icons
@@ -2790,6 +2784,7 @@ class IconSelectComponent {
      * @private
      */
     static PAGE_SIZE = 48;
+    tooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : []));
     /**
      * Set the value of the icon select
      * @param value the value to set
@@ -3108,13 +3103,13 @@ class IconSelectComponent {
         this._activePage.next(0);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IconSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: IconSelectComponent, isStandalone: true, selector: "particle-icon-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, buttonColorClass: { classPropertyName: "buttonColorClass", publicName: "buttonColorClass", isSignal: true, isRequired: false, transformFunction: null }, buttonSizing: { classPropertyName: "buttonSizing", publicName: "buttonSizing", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", selected: "selected", closed: "closed" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: IconSelectComponent, isStandalone: true, selector: "particle-icon-select", inputs: { tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, 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 }, 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),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "iconScrollContainer", first: true, predicate: ["iconScrollContainer"], descendants: true }], ngImport: i0, template: "<!-- choose button -->\r\n<button [ngClass]=\"buttonColorClass() ? buttonColorClass() : 'content_color'\"\r\n        [ngStyle]=\"{\r\n                     'width': buttonSizing(),\r\n                     'min-width': buttonSizing(),\r\n                     'height': buttonSizing(),\r\n                     'min-height': buttonSizing()\r\n                   }\"\r\n        (click)=\"openDialog()\"\r\n        [particleTooltip]=\"(_internalValue | async)?.prefix + ' ' + (_internalValue | async)?.name\"\r\n        [tooltipDisabled]=\"(_internalValue | async) === null\"\r\n        [disabled]=\"disabled\"\r\n        class=\"btnset access wis_button bg_overlay brdr brad_3\"\r\n        [attr.aria-label]=\"text().selectAnIcon\">\r\n  @if (!showDialog) {\r\n    @if (_internalValue | async; as selectedIcon) {\r\n      <div>\r\n        <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} wis_icon\"></i>\r\n      </div>\r\n    } @else {\r\n      <div><i class=\"fas fa-icons opacity_20\"></i></div>\r\n    }\r\n  } @else {\r\n    <div><i class=\"fas fa-spinner fa-spin\"></i></div>\r\n  }\r\n</button>\r\n\r\n<!-- TODO: at some point, maybe implement infinite scroll to icons -->\r\n\r\n<!-- picker dialog -->\r\n<particle-dialog [title]=\"text().selectAnIcon\"\r\n                 [object]=\"showDialog\"\r\n                 [width]=\"'850px'\"\r\n                 [height]=\"'500px'\"\r\n                 (closed)=\"closeDialog()\">\r\n  <div class=\"row height100\">\r\n\r\n    <!-- FILTERS -->\r\n    <div class=\"col min_w250 bg_overlay brdr border_right mobile_hide\">\r\n      <div class=\"row_block width100\">\r\n        @if (_filter | async; as filter) {\r\n          <!-- all icons -->\r\n          <div class=\"mar_5 pad_5\">\r\n            <button (click)=\"handleFilterSelect({ style: 'all', type: 'all' })\"\r\n                    [ngClass]=\"{ 'selected': filter.type === 'all' && filter.style === 'all' }\"\r\n                    class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                    [attr.aria-label]=\"text().seeAllIcons\">\r\n              <div class=\"v_center\">\r\n                <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                  @if (filter.type === 'all' && filter.style === 'all') {\r\n                    <div class=\"circle_8px ok_button_color\"></div>\r\n                  }\r\n                </div>\r\n                <div class=\"text md\">{{ text().seeAllIcons }}</div>\r\n              </div>\r\n              <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n            </button>\r\n          </div>\r\n          <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n          <!-- fontawesome icons -->\r\n          <div class=\"mar_5\">\r\n            <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().fontAwesomeIcons }}</div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'all', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'all' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'all') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().all }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'solid', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'solid' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'solid') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().solid }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'regular', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'regular' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'regular') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().regular }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'brands', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'brands' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'brands') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().brands }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n          <!-- custom icons -->\r\n          <div class=\"mar_5\">\r\n            <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().customIcons }}</div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'all', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'all' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'all') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">All</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'solid', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'solid' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'solid') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().solid }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'regular', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'regular' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'regular') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().regular }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'brands', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'brands' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'brands') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().brands }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ICONS -->\r\n    <div class=\"col size_2 column\">\r\n      <div class=\"col content_color_dark_1 pad_x5\">\r\n        <!-- paginator -->\r\n        @if (totalPages$ | async; as totalPages) {\r\n          <div\r\n            class=\"col v_center mar_10\">\r\n            @if (canPaginatePrevious$ | async) {\r\n              <button\r\n                (click)=\"paginatePrevious()\"\r\n                class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                [attr.aria-label]=\"text().previousPage\">\r\n                <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n              </button>\r\n            } @else {\r\n              <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                      [attr.aria-label]=\"text().previousPage\">\r\n                <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n              </button>\r\n            }\r\n            <div\r\n              class=\"text sm bolder center\"\r\n              style=\"min-width:65px;\">\r\n              {{ (_activePage | async)! + 1 }} / {{ totalPages }}\r\n            </div>\r\n            @if (canPaginateNext$ | async) {\r\n              <button\r\n                (click)=\"paginateNext()\"\r\n                class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                [attr.aria-label]=\"text().nextPage\">\r\n                <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n              </button>\r\n            } @else {\r\n              <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                      [attr.aria-label]=\"text().nextPage\">\r\n                <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n        <!-- search -->\r\n        <div class=\"col size_1 wis_search mar_10\">\r\n          <input #iconSearchInput\r\n                 [ngModel]=\"_searchText | async\"\r\n                 (input)=\"_searchText.next(iconSearchInput.value)\"\r\n                 (keyup.enter)=\"_searchInputEnterKeyup.next($any(null))\"\r\n                 class=\"access input md bg_overlay brdr content_color\"\r\n                 [attr.aria-label]=\"text().searchIcons\" [placeholder]=\"text().searchIcons + '...'\"\r\n          />\r\n          @if ((canSearch$ | async) && (_searchClick | async)) {\r\n            <button\r\n              (click)=\"clearSearch()\" aria-label=\"Clear search\"\r\n              class=\"access btn circle_18px overlay wis_clear_btn\">\r\n              <span class=\"icon grow\"><i class=\"fas fa-times fa-sm\"></i></span>\r\n            </button>\r\n          }\r\n          @if (canSearch$ | async) {\r\n            <button\r\n              (click)=\"_searchClick.next(iconSearchInput.value); _activePage.next(0)\"\r\n              class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n              [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n              <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n            </button>\r\n          } @else {\r\n            <button disabled\r\n                    class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n                    [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n              <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n      <!-- icons -->\r\n      <div #iconScrollContainer class=\"col size_1 top_left scroll_y pad_5\" style=\"scroll-behavior: smooth\">\r\n        @if (paginatedIcons$ | async; as icons) {\r\n          <div class=\"row wrap top_left\" style=\"align-items:stretch;\">\r\n            @for (icon of paginatedIcons$ | async; track $index) {\r\n              <div class=\"col size_1 min_w75 mar_5\">\r\n                <button class=\"access wis_icon_btn\" (click)=\"handleIconSelect(icon)\"\r\n                        [attr.aria-label]=\"text().select + ' ' + icon.name\">\r\n                  <div\r\n                    [ngClass]=\"((_internalValue | async)?.prefix === icon.prefix) && ((_internalValue | async)?.name === icon.name) ? 'ok_button_color' : 'content_color'\"\r\n                    class=\"wis_icon_btn_preview square_50px brad_3 bg_overlay brdr mar_bot5\">\r\n                    <i class=\"{{icon.prefix}} {{icon.name}}\"></i>\r\n                  </div>\r\n                  <div class=\"text sm center faded\">{{ icon.name }}</div>\r\n                </button>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <div class=\"row column min_h300 center_center\">\r\n            <div class=\"text md\">{{ text().couldntFindAnything }}</div>\r\n            <div class=\"text sm\">{{ text().modifySearchCriteria }}</div>\r\n            <button class=\"access btnset clear mar_10\"\r\n                    [attr.aria-label]=\"text().close\"\r\n                    (click)=\"clearSearch()\">\r\n              <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </div>\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n      @if (_internalValue | async; as selectedIcon) {\r\n        <div\r\n          class=\"col space_between bg_overlay brdr border_top pad_x5 wis_selection_bar\">\r\n          <div class=\"col v_center mar_10\">\r\n            <div class=\"text md faded mar_right10 mobile_hide\">{{ text().selection }}:</div>\r\n            @if (showIconSelectionPreview) {\r\n              <div class=\"v_center\">\r\n                <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} fa-fw mar_right5\" style=\"font-size:16px;\"></i>\r\n                <div class=\"text md bold\">{{ selectedIcon.prefix }} {{ selectedIcon.name }}</div>\r\n              </div>\r\n            }\r\n          </div>\r\n          <div class=\"col v_center mar_10\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"access btnset spaced md hov_glow save_button_color ptl_brdr_radius\"\r\n              [attr.aria-label]=\"text().confirm\"\r\n              (click)=\"handleIconSelectConfirm()\"\r\n            >\r\n              <div>{{ text().confirm }}</div>\r\n              <div class=\"brdr border_left mar_left10 pad_left10\"><i class=\"fas fa-check\"></i></div>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</particle-dialog>\r\n", styles: [".wis_button{width:40px;min-width:40px;height:40px;min-height:40px;cursor:pointer;transition:all .1s ease}.wis_button:disabled{cursor:default;opacity:1!important}.wis_button:hover:not(:disabled){filter:brightness(1.05)}.wis_button svg{transition:transform .1s ease}.wis_button:hover:not(:disabled) .wis_icon{transform:scale(1.15)}@supports not (-ms-high-contrast:none){.wis_button svg{width:75%;height:75%}}.wis_search{position:relative}.wis_search input{padding-right:40px!important}.wis_search .wis_search_btn{position:absolute;right:0;top:0;z-index:var(--z-frame);border-top-left-radius:0;border-bottom-left-radius:0;height:100%;width:32px}.wis_search .wis_clear_btn{position:absolute;right:40px;top:7px;z-index:var(--z-frame)}.wis_filter_btn{width:100%;padding:5px 10px;border-radius:3px}.wis_filter_btn:not(:hover):not(.selected){background-color:inherit;color:inherit}.wis_icon_btn{cursor:pointer;transition:all .1s ease;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;border:none;border-radius:3px;padding:5px 2px;background-color:inherit;color:inherit}.wis_icon_btn:hover{background-color:#7878781a}.wis_icon_btn_preview{transition:all .1s ease}.wis_selection_bar{z-index:var(--z-frame);box-shadow:0 -6px 10px -8px #00000040;animation-name:slideUpSelectionBar;animation-duration:.2s;transform-origin:bottom center}@keyframes slideUpSelectionBar{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+        ], viewQueries: [{ propertyName: "iconScrollContainer", first: true, predicate: ["iconScrollContainer"], descendants: true }], ngImport: i0, template: "<!-- choose button -->\n<button [ngClass]=\"buttonColorClass() ? buttonColorClass() : 'content_color'\"\n        [ngStyle]=\"{\n                     'width': buttonSizing(),\n                     'min-width': buttonSizing(),\n                     'height': buttonSizing(),\n                     'min-height': buttonSizing()\n                   }\"\n        (click)=\"openDialog()\"\n        [particleTooltip]=\"(_internalValue | async)?.prefix + ' ' + (_internalValue | async)?.name\"\n        [tooltipDisabled]=\"(_internalValue | async) === null\"\n        [tooltipPosition]=\"tooltipPosition()\"\n        [disabled]=\"disabled\"\n        class=\"btnset access wis_button bg_overlay brdr brad_3\"\n        [attr.aria-label]=\"text().selectAnIcon\">\n  @if (!showDialog) {\n    @if (_internalValue | async; as selectedIcon) {\n      <div>\n        <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} wis_icon\"></i>\n      </div>\n    } @else {\n      <div><i class=\"fas fa-icons opacity_20\"></i></div>\n    }\n  } @else {\n    <div><i class=\"fas fa-spinner fa-spin\"></i></div>\n  }\n</button>\n\n<!-- TODO: at some point, maybe implement infinite scroll to icons -->\n\n<!-- picker dialog -->\n<particle-dialog [title]=\"text().selectAnIcon\"\n                 [object]=\"showDialog\"\n                 [width]=\"'850px'\"\n                 [height]=\"'500px'\"\n                 (closed)=\"closeDialog()\">\n  <div class=\"row height100\">\n\n    <!-- FILTERS -->\n    <div class=\"col min_w250 bg_overlay brdr border_right mobile_hide\">\n      <div class=\"row_block width100\">\n        @if (_filter | async; as filter) {\n          <!-- all icons -->\n          <div class=\"mar_5 pad_5\">\n            <button (click)=\"handleFilterSelect({ style: 'all', type: 'all' })\"\n                    [ngClass]=\"{ 'selected': filter.type === 'all' && filter.style === 'all' }\"\n                    class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                    [attr.aria-label]=\"text().seeAllIcons\">\n              <div class=\"v_center\">\n                <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                  @if (filter.type === 'all' && filter.style === 'all') {\n                    <div class=\"circle_8px ok_button_color\"></div>\n                  }\n                </div>\n                <div class=\"text md\">{{ text().seeAllIcons }}</div>\n              </div>\n              <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n            </button>\n          </div>\n          <div class=\"bg_overlay brdr hr mar_10\"></div>\n          <!-- fontawesome icons -->\n          <div class=\"mar_5\">\n            <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().fontAwesomeIcons }}</div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'all', type: 'fontawesome' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'all' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().fontAwesomeIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'fontawesome' && filter.style === 'all') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().all }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'solid', type: 'fontawesome' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'solid' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().fontAwesomeIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'fontawesome' && filter.style === 'solid') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().solid }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'regular', type: 'fontawesome' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'regular' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().fontAwesomeIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'fontawesome' && filter.style === 'regular') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().regular }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'brands', type: 'fontawesome' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'brands' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().fontAwesomeIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'fontawesome' && filter.style === 'brands') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().brands }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n          </div>\n          <div class=\"bg_overlay brdr hr mar_10\"></div>\n          <!-- custom icons -->\n          <div class=\"mar_5\">\n            <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().customIcons }}</div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'all', type: 'particle' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'all' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().customIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'particle' && filter.style === 'all') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">All</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'solid', type: 'particle' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'solid' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().customIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'particle' && filter.style === 'solid') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().solid }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'regular', type: 'particle' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'regular' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().customIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'particle' && filter.style === 'regular') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().regular }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'brands', type: 'particle' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'brands' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().customIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'particle' && filter.style === 'brands') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().brands }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- ICONS -->\n    <div class=\"col size_2 column\">\n      <div class=\"col content_color_dark_1 pad_x5\">\n        <!-- paginator -->\n        @if (totalPages$ | async; as totalPages) {\n          <div\n            class=\"col v_center mar_10\">\n            @if (canPaginatePrevious$ | async) {\n              <button\n                (click)=\"paginatePrevious()\"\n                class=\"access btn square_24px bg_overlay brdr ok_button_color\"\n                [attr.aria-label]=\"text().previousPage\">\n                <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\n              </button>\n            } @else {\n              <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\n                      [attr.aria-label]=\"text().previousPage\">\n                <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\n              </button>\n            }\n            <div\n              class=\"text sm bolder center\"\n              style=\"min-width:65px;\">\n              {{ (_activePage | async)! + 1 }} / {{ totalPages }}\n            </div>\n            @if (canPaginateNext$ | async) {\n              <button\n                (click)=\"paginateNext()\"\n                class=\"access btn square_24px bg_overlay brdr ok_button_color\"\n                [attr.aria-label]=\"text().nextPage\">\n                <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\n              </button>\n            } @else {\n              <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\n                      [attr.aria-label]=\"text().nextPage\">\n                <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\n              </button>\n            }\n          </div>\n        }\n        <!-- search -->\n        <div class=\"col size_1 wis_search mar_10\">\n          <input #iconSearchInput\n                 [ngModel]=\"_searchText | async\"\n                 (input)=\"_searchText.next(iconSearchInput.value)\"\n                 (keyup.enter)=\"_searchInputEnterKeyup.next($any(null))\"\n                 class=\"access input md bg_overlay brdr content_color\"\n                 [attr.aria-label]=\"text().searchIcons\" [placeholder]=\"text().searchIcons + '...'\"\n          />\n          @if ((canSearch$ | async) && (_searchClick | async)) {\n            <button\n              (click)=\"clearSearch()\" aria-label=\"Clear search\"\n              class=\"access btn circle_18px overlay wis_clear_btn\">\n              <span class=\"icon grow\"><i class=\"fas fa-times fa-sm\"></i></span>\n            </button>\n          }\n          @if (canSearch$ | async) {\n            <button\n              (click)=\"_searchClick.next(iconSearchInput.value); _activePage.next(0)\"\n              class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\n              [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\n              <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\n            </button>\n          } @else {\n            <button disabled\n                    class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\n                    [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\n              <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\n            </button>\n          }\n        </div>\n      </div>\n      <!-- icons -->\n      <div #iconScrollContainer class=\"col size_1 top_left scroll_y pad_5\" style=\"scroll-behavior: smooth\">\n        @if (paginatedIcons$ | async; as icons) {\n          <div class=\"row wrap top_left\" style=\"align-items:stretch;\">\n            @for (icon of paginatedIcons$ | async; track $index) {\n              <div class=\"col size_1 min_w75 mar_5\">\n                <button class=\"access wis_icon_btn\" (click)=\"handleIconSelect(icon)\"\n                        [attr.aria-label]=\"text().select + ' ' + icon.name\">\n                  <div\n                    [ngClass]=\"((_internalValue | async)?.prefix === icon.prefix) && ((_internalValue | async)?.name === icon.name) ? 'ok_button_color' : 'content_color'\"\n                    class=\"wis_icon_btn_preview square_50px brad_3 bg_overlay brdr mar_bot5\">\n                    <i class=\"{{icon.prefix}} {{icon.name}}\"></i>\n                  </div>\n                  <div class=\"text sm center faded\">{{ icon.name }}</div>\n                </button>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"row column min_h300 center_center\">\n            <div class=\"text md\">{{ text().couldntFindAnything }}</div>\n            <div class=\"text sm\">{{ text().modifySearchCriteria }}</div>\n            <button class=\"access btnset clear mar_10\"\n                    [attr.aria-label]=\"text().close\"\n                    (click)=\"clearSearch()\">\n              <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\n                <i class=\"fas fa-times\"></i>\n              </div>\n            </button>\n          </div>\n        }\n      </div>\n      @if (_internalValue | async; as selectedIcon) {\n        <div\n          class=\"col space_between bg_overlay brdr border_top pad_x5 wis_selection_bar\">\n          <div class=\"col v_center mar_10\">\n            <div class=\"text md faded mar_right10 mobile_hide\">{{ text().selection }}:</div>\n            @if (showIconSelectionPreview) {\n              <div class=\"v_center\">\n                <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} fa-fw mar_right5\" style=\"font-size:16px;\"></i>\n                <div class=\"text md bold\">{{ selectedIcon.prefix }} {{ selectedIcon.name }}</div>\n              </div>\n            }\n          </div>\n          <div class=\"col v_center mar_10\">\n            <button\n              type=\"button\"\n              class=\"access btnset spaced md hov_glow save_button_color ptl_brdr_radius\"\n              [attr.aria-label]=\"text().confirm\"\n              (click)=\"handleIconSelectConfirm()\"\n            >\n              <div>{{ text().confirm }}</div>\n              <div class=\"brdr border_left mar_left10 pad_left10\"><i class=\"fas fa-check\"></i></div>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</particle-dialog>\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", "closeAttempt", "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: "21.1.5", ngImport: i0, type: IconSelectComponent, decorators: [{
             type: Component,
@@ -3124,8 +3119,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                             useExisting: forwardRef(() => IconSelectComponent),
                             multi: true
                         }
-                    ], imports: [NgClass, NgStyle, TooltipDirective, DialogComponent, FormsModule, AsyncPipe], template: "<!-- choose button -->\r\n<button [ngClass]=\"buttonColorClass() ? buttonColorClass() : 'content_color'\"\r\n        [ngStyle]=\"{\r\n                     'width': buttonSizing(),\r\n                     'min-width': buttonSizing(),\r\n                     'height': buttonSizing(),\r\n                     'min-height': buttonSizing()\r\n                   }\"\r\n        (click)=\"openDialog()\"\r\n        [particleTooltip]=\"(_internalValue | async)?.prefix + ' ' + (_internalValue | async)?.name\"\r\n        [tooltipDisabled]=\"(_internalValue | async) === null\"\r\n        [disabled]=\"disabled\"\r\n        class=\"btnset access wis_button bg_overlay brdr brad_3\"\r\n        [attr.aria-label]=\"text().selectAnIcon\">\r\n  @if (!showDialog) {\r\n    @if (_internalValue | async; as selectedIcon) {\r\n      <div>\r\n        <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} wis_icon\"></i>\r\n      </div>\r\n    } @else {\r\n      <div><i class=\"fas fa-icons opacity_20\"></i></div>\r\n    }\r\n  } @else {\r\n    <div><i class=\"fas fa-spinner fa-spin\"></i></div>\r\n  }\r\n</button>\r\n\r\n<!-- TODO: at some point, maybe implement infinite scroll to icons -->\r\n\r\n<!-- picker dialog -->\r\n<particle-dialog [title]=\"text().selectAnIcon\"\r\n                 [object]=\"showDialog\"\r\n                 [width]=\"'850px'\"\r\n                 [height]=\"'500px'\"\r\n                 (closed)=\"closeDialog()\">\r\n  <div class=\"row height100\">\r\n\r\n    <!-- FILTERS -->\r\n    <div class=\"col min_w250 bg_overlay brdr border_right mobile_hide\">\r\n      <div class=\"row_block width100\">\r\n        @if (_filter | async; as filter) {\r\n          <!-- all icons -->\r\n          <div class=\"mar_5 pad_5\">\r\n            <button (click)=\"handleFilterSelect({ style: 'all', type: 'all' })\"\r\n                    [ngClass]=\"{ 'selected': filter.type === 'all' && filter.style === 'all' }\"\r\n                    class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                    [attr.aria-label]=\"text().seeAllIcons\">\r\n              <div class=\"v_center\">\r\n                <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                  @if (filter.type === 'all' && filter.style === 'all') {\r\n                    <div class=\"circle_8px ok_button_color\"></div>\r\n                  }\r\n                </div>\r\n                <div class=\"text md\">{{ text().seeAllIcons }}</div>\r\n              </div>\r\n              <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n            </button>\r\n          </div>\r\n          <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n          <!-- fontawesome icons -->\r\n          <div class=\"mar_5\">\r\n            <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().fontAwesomeIcons }}</div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'all', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'all' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'all') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().all }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'solid', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'solid' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'solid') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().solid }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'regular', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'regular' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'regular') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().regular }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'brands', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'brands' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'brands') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().brands }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n          <!-- custom icons -->\r\n          <div class=\"mar_5\">\r\n            <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().customIcons }}</div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'all', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'all' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'all') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">All</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'solid', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'solid' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'solid') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().solid }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'regular', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'regular' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'regular') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().regular }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'brands', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'brands' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'brands') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().brands }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ICONS -->\r\n    <div class=\"col size_2 column\">\r\n      <div class=\"col content_color_dark_1 pad_x5\">\r\n        <!-- paginator -->\r\n        @if (totalPages$ | async; as totalPages) {\r\n          <div\r\n            class=\"col v_center mar_10\">\r\n            @if (canPaginatePrevious$ | async) {\r\n              <button\r\n                (click)=\"paginatePrevious()\"\r\n                class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                [attr.aria-label]=\"text().previousPage\">\r\n                <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n              </button>\r\n            } @else {\r\n              <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                      [attr.aria-label]=\"text().previousPage\">\r\n                <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n              </button>\r\n            }\r\n            <div\r\n              class=\"text sm bolder center\"\r\n              style=\"min-width:65px;\">\r\n              {{ (_activePage | async)! + 1 }} / {{ totalPages }}\r\n            </div>\r\n            @if (canPaginateNext$ | async) {\r\n              <button\r\n                (click)=\"paginateNext()\"\r\n                class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                [attr.aria-label]=\"text().nextPage\">\r\n                <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n              </button>\r\n            } @else {\r\n              <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                      [attr.aria-label]=\"text().nextPage\">\r\n                <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n        <!-- search -->\r\n        <div class=\"col size_1 wis_search mar_10\">\r\n          <input #iconSearchInput\r\n                 [ngModel]=\"_searchText | async\"\r\n                 (input)=\"_searchText.next(iconSearchInput.value)\"\r\n                 (keyup.enter)=\"_searchInputEnterKeyup.next($any(null))\"\r\n                 class=\"access input md bg_overlay brdr content_color\"\r\n                 [attr.aria-label]=\"text().searchIcons\" [placeholder]=\"text().searchIcons + '...'\"\r\n          />\r\n          @if ((canSearch$ | async) && (_searchClick | async)) {\r\n            <button\r\n              (click)=\"clearSearch()\" aria-label=\"Clear search\"\r\n              class=\"access btn circle_18px overlay wis_clear_btn\">\r\n              <span class=\"icon grow\"><i class=\"fas fa-times fa-sm\"></i></span>\r\n            </button>\r\n          }\r\n          @if (canSearch$ | async) {\r\n            <button\r\n              (click)=\"_searchClick.next(iconSearchInput.value); _activePage.next(0)\"\r\n              class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n              [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n              <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n            </button>\r\n          } @else {\r\n            <button disabled\r\n                    class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n                    [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n              <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n      <!-- icons -->\r\n      <div #iconScrollContainer class=\"col size_1 top_left scroll_y pad_5\" style=\"scroll-behavior: smooth\">\r\n        @if (paginatedIcons$ | async; as icons) {\r\n          <div class=\"row wrap top_left\" style=\"align-items:stretch;\">\r\n            @for (icon of paginatedIcons$ | async; track $index) {\r\n              <div class=\"col size_1 min_w75 mar_5\">\r\n                <button class=\"access wis_icon_btn\" (click)=\"handleIconSelect(icon)\"\r\n                        [attr.aria-label]=\"text().select + ' ' + icon.name\">\r\n                  <div\r\n                    [ngClass]=\"((_internalValue | async)?.prefix === icon.prefix) && ((_internalValue | async)?.name === icon.name) ? 'ok_button_color' : 'content_color'\"\r\n                    class=\"wis_icon_btn_preview square_50px brad_3 bg_overlay brdr mar_bot5\">\r\n                    <i class=\"{{icon.prefix}} {{icon.name}}\"></i>\r\n                  </div>\r\n                  <div class=\"text sm center faded\">{{ icon.name }}</div>\r\n                </button>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <div class=\"row column min_h300 center_center\">\r\n            <div class=\"text md\">{{ text().couldntFindAnything }}</div>\r\n            <div class=\"text sm\">{{ text().modifySearchCriteria }}</div>\r\n            <button class=\"access btnset clear mar_10\"\r\n                    [attr.aria-label]=\"text().close\"\r\n                    (click)=\"clearSearch()\">\r\n              <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </div>\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n      @if (_internalValue | async; as selectedIcon) {\r\n        <div\r\n          class=\"col space_between bg_overlay brdr border_top pad_x5 wis_selection_bar\">\r\n          <div class=\"col v_center mar_10\">\r\n            <div class=\"text md faded mar_right10 mobile_hide\">{{ text().selection }}:</div>\r\n            @if (showIconSelectionPreview) {\r\n              <div class=\"v_center\">\r\n                <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} fa-fw mar_right5\" style=\"font-size:16px;\"></i>\r\n                <div class=\"text md bold\">{{ selectedIcon.prefix }} {{ selectedIcon.name }}</div>\r\n              </div>\r\n            }\r\n          </div>\r\n          <div class=\"col v_center mar_10\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"access btnset spaced md hov_glow save_button_color ptl_brdr_radius\"\r\n              [attr.aria-label]=\"text().confirm\"\r\n              (click)=\"handleIconSelectConfirm()\"\r\n            >\r\n              <div>{{ text().confirm }}</div>\r\n              <div class=\"brdr border_left mar_left10 pad_left10\"><i class=\"fas fa-check\"></i></div>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</particle-dialog>\r\n", styles: [".wis_button{width:40px;min-width:40px;height:40px;min-height:40px;cursor:pointer;transition:all .1s ease}.wis_button:disabled{cursor:default;opacity:1!important}.wis_button:hover:not(:disabled){filter:brightness(1.05)}.wis_button svg{transition:transform .1s ease}.wis_button:hover:not(:disabled) .wis_icon{transform:scale(1.15)}@supports not (-ms-high-contrast:none){.wis_button svg{width:75%;height:75%}}.wis_search{position:relative}.wis_search input{padding-right:40px!important}.wis_search .wis_search_btn{position:absolute;right:0;top:0;z-index:var(--z-frame);border-top-left-radius:0;border-bottom-left-radius:0;height:100%;width:32px}.wis_search .wis_clear_btn{position:absolute;right:40px;top:7px;z-index:var(--z-frame)}.wis_filter_btn{width:100%;padding:5px 10px;border-radius:3px}.wis_filter_btn:not(:hover):not(.selected){background-color:inherit;color:inherit}.wis_icon_btn{cursor:pointer;transition:all .1s ease;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;border:none;border-radius:3px;padding:5px 2px;background-color:inherit;color:inherit}.wis_icon_btn:hover{background-color:#7878781a}.wis_icon_btn_preview{transition:all .1s ease}.wis_selection_bar{z-index:var(--z-frame);box-shadow:0 -6px 10px -8px #00000040;animation-name:slideUpSelectionBar;animation-duration:.2s;transform-origin:bottom center}@keyframes slideUpSelectionBar{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { value: [{
+                    ], imports: [NgClass, NgStyle, TooltipDirective, DialogComponent, FormsModule, AsyncPipe], template: "<!-- choose button -->\n<button [ngClass]=\"buttonColorClass() ? buttonColorClass() : 'content_color'\"\n        [ngStyle]=\"{\n                     'width': buttonSizing(),\n                     'min-width': buttonSizing(),\n                     'height': buttonSizing(),\n                     'min-height': buttonSizing()\n                   }\"\n        (click)=\"openDialog()\"\n        [particleTooltip]=\"(_internalValue | async)?.prefix + ' ' + (_internalValue | async)?.name\"\n        [tooltipDisabled]=\"(_internalValue | async) === null\"\n        [tooltipPosition]=\"tooltipPosition()\"\n        [disabled]=\"disabled\"\n        class=\"btnset access wis_button bg_overlay brdr brad_3\"\n        [attr.aria-label]=\"text().selectAnIcon\">\n  @if (!showDialog) {\n    @if (_internalValue | async; as selectedIcon) {\n      <div>\n        <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} wis_icon\"></i>\n      </div>\n    } @else {\n      <div><i class=\"fas fa-icons opacity_20\"></i></div>\n    }\n  } @else {\n    <div><i class=\"fas fa-spinner fa-spin\"></i></div>\n  }\n</button>\n\n<!-- TODO: at some point, maybe implement infinite scroll to icons -->\n\n<!-- picker dialog -->\n<particle-dialog [title]=\"text().selectAnIcon\"\n                 [object]=\"showDialog\"\n                 [width]=\"'850px'\"\n                 [height]=\"'500px'\"\n                 (closed)=\"closeDialog()\">\n  <div class=\"row height100\">\n\n    <!-- FILTERS -->\n    <div class=\"col min_w250 bg_overlay brdr border_right mobile_hide\">\n      <div class=\"row_block width100\">\n        @if (_filter | async; as filter) {\n          <!-- all icons -->\n          <div class=\"mar_5 pad_5\">\n            <button (click)=\"handleFilterSelect({ style: 'all', type: 'all' })\"\n                    [ngClass]=\"{ 'selected': filter.type === 'all' && filter.style === 'all' }\"\n                    class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                    [attr.aria-label]=\"text().seeAllIcons\">\n              <div class=\"v_center\">\n                <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                  @if (filter.type === 'all' && filter.style === 'all') {\n                    <div class=\"circle_8px ok_button_color\"></div>\n                  }\n                </div>\n                <div class=\"text md\">{{ text().seeAllIcons }}</div>\n              </div>\n              <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n            </button>\n          </div>\n          <div class=\"bg_overlay brdr hr mar_10\"></div>\n          <!-- fontawesome icons -->\n          <div class=\"mar_5\">\n            <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().fontAwesomeIcons }}</div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'all', type: 'fontawesome' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'all' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().fontAwesomeIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'fontawesome' && filter.style === 'all') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().all }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'solid', type: 'fontawesome' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'solid' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().fontAwesomeIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'fontawesome' && filter.style === 'solid') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().solid }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'regular', type: 'fontawesome' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'regular' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().fontAwesomeIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'fontawesome' && filter.style === 'regular') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().regular }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'brands', type: 'fontawesome' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'brands' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().fontAwesomeIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'fontawesome' && filter.style === 'brands') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().brands }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n          </div>\n          <div class=\"bg_overlay brdr hr mar_10\"></div>\n          <!-- custom icons -->\n          <div class=\"mar_5\">\n            <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().customIcons }}</div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'all', type: 'particle' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'all' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().customIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'particle' && filter.style === 'all') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">All</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'solid', type: 'particle' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'solid' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().customIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'particle' && filter.style === 'solid') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().solid }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'regular', type: 'particle' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'regular' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().customIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'particle' && filter.style === 'regular') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().regular }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n            <div class=\"mar_5\">\n              <button (click)=\"handleFilterSelect({ style: 'brands', type: 'particle' })\"\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'brands' }\"\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().customIcons\">\n                <div class=\"v_center\">\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\n                    @if (filter.type === 'particle' && filter.style === 'brands') {\n                      <div class=\"circle_8px ok_button_color\"></div>\n                    }\n                  </div>\n                  <div class=\"text md\">{{ text().brands }}</div>\n                </div>\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- ICONS -->\n    <div class=\"col size_2 column\">\n      <div class=\"col content_color_dark_1 pad_x5\">\n        <!-- paginator -->\n        @if (totalPages$ | async; as totalPages) {\n          <div\n            class=\"col v_center mar_10\">\n            @if (canPaginatePrevious$ | async) {\n              <button\n                (click)=\"paginatePrevious()\"\n                class=\"access btn square_24px bg_overlay brdr ok_button_color\"\n                [attr.aria-label]=\"text().previousPage\">\n                <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\n              </button>\n            } @else {\n              <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\n                      [attr.aria-label]=\"text().previousPage\">\n                <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\n              </button>\n            }\n            <div\n              class=\"text sm bolder center\"\n              style=\"min-width:65px;\">\n              {{ (_activePage | async)! + 1 }} / {{ totalPages }}\n            </div>\n            @if (canPaginateNext$ | async) {\n              <button\n                (click)=\"paginateNext()\"\n                class=\"access btn square_24px bg_overlay brdr ok_button_color\"\n                [attr.aria-label]=\"text().nextPage\">\n                <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\n              </button>\n            } @else {\n              <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\n                      [attr.aria-label]=\"text().nextPage\">\n                <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\n              </button>\n            }\n          </div>\n        }\n        <!-- search -->\n        <div class=\"col size_1 wis_search mar_10\">\n          <input #iconSearchInput\n                 [ngModel]=\"_searchText | async\"\n                 (input)=\"_searchText.next(iconSearchInput.value)\"\n                 (keyup.enter)=\"_searchInputEnterKeyup.next($any(null))\"\n                 class=\"access input md bg_overlay brdr content_color\"\n                 [attr.aria-label]=\"text().searchIcons\" [placeholder]=\"text().searchIcons + '...'\"\n          />\n          @if ((canSearch$ | async) && (_searchClick | async)) {\n            <button\n              (click)=\"clearSearch()\" aria-label=\"Clear search\"\n              class=\"access btn circle_18px overlay wis_clear_btn\">\n              <span class=\"icon grow\"><i class=\"fas fa-times fa-sm\"></i></span>\n            </button>\n          }\n          @if (canSearch$ | async) {\n            <button\n              (click)=\"_searchClick.next(iconSearchInput.value); _activePage.next(0)\"\n              class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\n              [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\n              <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\n            </button>\n          } @else {\n            <button disabled\n                    class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\n                    [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\n              <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\n            </button>\n          }\n        </div>\n      </div>\n      <!-- icons -->\n      <div #iconScrollContainer class=\"col size_1 top_left scroll_y pad_5\" style=\"scroll-behavior: smooth\">\n        @if (paginatedIcons$ | async; as icons) {\n          <div class=\"row wrap top_left\" style=\"align-items:stretch;\">\n            @for (icon of paginatedIcons$ | async; track $index) {\n              <div class=\"col size_1 min_w75 mar_5\">\n                <button class=\"access wis_icon_btn\" (click)=\"handleIconSelect(icon)\"\n                        [attr.aria-label]=\"text().select + ' ' + icon.name\">\n                  <div\n                    [ngClass]=\"((_internalValue | async)?.prefix === icon.prefix) && ((_internalValue | async)?.name === icon.name) ? 'ok_button_color' : 'content_color'\"\n                    class=\"wis_icon_btn_preview square_50px brad_3 bg_overlay brdr mar_bot5\">\n                    <i class=\"{{icon.prefix}} {{icon.name}}\"></i>\n                  </div>\n                  <div class=\"text sm center faded\">{{ icon.name }}</div>\n                </button>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"row column min_h300 center_center\">\n            <div class=\"text md\">{{ text().couldntFindAnything }}</div>\n            <div class=\"text sm\">{{ text().modifySearchCriteria }}</div>\n            <button class=\"access btnset clear mar_10\"\n                    [attr.aria-label]=\"text().close\"\n                    (click)=\"clearSearch()\">\n              <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\n                <i class=\"fas fa-times\"></i>\n              </div>\n            </button>\n          </div>\n        }\n      </div>\n      @if (_internalValue | async; as selectedIcon) {\n        <div\n          class=\"col space_between bg_overlay brdr border_top pad_x5 wis_selection_bar\">\n          <div class=\"col v_center mar_10\">\n            <div class=\"text md faded mar_right10 mobile_hide\">{{ text().selection }}:</div>\n            @if (showIconSelectionPreview) {\n              <div class=\"v_center\">\n                <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} fa-fw mar_right5\" style=\"font-size:16px;\"></i>\n                <div class=\"text md bold\">{{ selectedIcon.prefix }} {{ selectedIcon.name }}</div>\n              </div>\n            }\n          </div>\n          <div class=\"col v_center mar_10\">\n            <button\n              type=\"button\"\n              class=\"access btnset spaced md hov_glow save_button_color ptl_brdr_radius\"\n              [attr.aria-label]=\"text().confirm\"\n              (click)=\"handleIconSelectConfirm()\"\n            >\n              <div>{{ text().confirm }}</div>\n              <div class=\"brdr border_left mar_left10 pad_left10\"><i class=\"fas fa-check\"></i></div>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</particle-dialog>\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"] }]
+        }], ctorParameters: () => [], propDecorators: { tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], value: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -3179,6 +3174,8 @@ class PopoverComponent {
      * Event emitted on popover close
      */
     closed = output();
+    arrowDown = output();
+    arrowUp = output();
     container = null;
     /**
      * Whether the popover should render
@@ -3206,6 +3203,7 @@ class PopoverComponent {
      * @private
      */
     escapeKeyUpUnlisteners = [];
+    _elements = [];
     isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
     constructor() {
         effect(() => {
@@ -3291,6 +3289,7 @@ class PopoverComponent {
      * Handle animation end
      */
     onAnimationDone() {
+        document.activeElement?.blur();
         this.render = false;
         this.removeEventListeners();
         this.closed.emit();
@@ -3376,6 +3375,7 @@ class PopoverComponent {
      */
     addEventListeners() {
         const focusableElements = this.getFocusableElements(this.container.nativeElement);
+        this._elements = focusableElements;
         for (const element of focusableElements) {
             this.renderer.setAttribute(element, 'data-dialog-close-override', 'true');
             this.escapeKeyUpUnlisteners.push(this.renderer.listen(element, 'keyup', (event) => {
@@ -3385,6 +3385,12 @@ class PopoverComponent {
                     if (key === 'Esc' || key === 'Escape') {
                         this.close();
                     }
+                    if (key === 'ArrowDown') {
+                        this.arrowDown.emit();
+                    }
+                    if (key === 'ArrowUp') {
+                        this.arrowUp.emit();
+                    }
                 }
             }));
         }
@@ -3429,17 +3435,52 @@ class PopoverComponent {
     toggleOpen() {
         this.isOpen.update((isOpen) => !isOpen);
     }
+    focusOnFirstElement() {
+        this._elements[0]?.focus();
+    }
+    focusOnNextElement() {
+        let index = 0;
+        for (const element of this._elements) {
+            if (element === document.activeElement) {
+                break;
+            }
+            index++;
+        }
+        if (index + 1 > this._elements.length - 1) {
+            index = 0;
+        }
+        else {
+            index++;
+        }
+        this._elements[index]?.focus();
+    }
+    focusOnPreviousElement() {
+        let index = 0;
+        for (const element of this._elements) {
+            if (element === document.activeElement) {
+                break;
+            }
+            index++;
+        }
+        if (index - 1 < 0) {
+            index = this._elements.length - 1;
+        }
+        else {
+            index--;
+        }
+        this._elements[index]?.focus();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: PopoverComponent, isStandalone: true, selector: "particle-popover", inputs: { offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, targetOverride: { classPropertyName: "targetOverride", publicName: "targetOverride", isSignal: true, isRequired: false, transformFunction: null }, openDirection: { classPropertyName: "openDirection", publicName: "openDirection", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, scaleForMobile: { classPropertyName: "scaleForMobile", publicName: "scaleForMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "window:click": "onClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"particle_popover_overlay\"\r\n     [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     [style.scale]=\"window.innerWidth > 768 ? 1 : scaleForMobile()\"\r\n>\r\n  <div class=\"particle_popover\"\r\n       [class.open]=\"isOpen()\"\r\n       [cdkTrapFocus]=\"render && visible\"\r\n       [cdkTrapFocusAutoCapture]=\"true\"\r\n       [ngStyle]=\"{'width': width, 'height': height}\"\r\n       [ngClass]=\"classList()\"\r\n       #container\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".particle_popover_overlay{position:fixed;inset:0;z-index:var(--z-notification)}.particle_popover{border-radius:3px;overflow-x:hidden;overflow-y:auto;font-size:12px;font-weight:400;z-index:var(--z-notification);width:auto;min-width:10px;height:auto;min-height:10px;position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:ease}.particle_popover.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:ease}.particle_popover_shadow{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: PopoverComponent, isStandalone: true, selector: "particle-popover", inputs: { offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, targetOverride: { classPropertyName: "targetOverride", publicName: "targetOverride", isSignal: true, isRequired: false, transformFunction: null }, openDirection: { classPropertyName: "openDirection", publicName: "openDirection", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, scaleForMobile: { classPropertyName: "scaleForMobile", publicName: "scaleForMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", arrowDown: "arrowDown", arrowUp: "arrowUp" }, host: { listeners: { "window:click": "onClick($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"particle_popover_overlay\"\n     [style.display]=\"render ? '' : 'none'\"\n     [attr.aria-hidden]=\"!render\"\n     [style.scale]=\"window.innerWidth > 768 ? 1 : scaleForMobile()\"\n>\n  <div class=\"particle_popover\"\n       [class.open]=\"isOpen()\"\n       [cdkTrapFocus]=\"render && visible\"\n       [cdkTrapFocusAutoCapture]=\"true\"\n       [ngStyle]=\"{'width': width, 'height': height}\"\n       [ngClass]=\"classList()\"\n       #container\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".particle_popover_overlay{position:fixed;inset:0;z-index:var(--z-notification)}.particle_popover{border-radius:3px;overflow-x:hidden;overflow-y:auto;font-size:12px;font-weight:400;z-index:var(--z-notification);width:auto;min-width:10px;height:auto;min-height:10px;position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:ease}.particle_popover.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:ease}.particle_popover_shadow{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'particle-popover', imports: [CdkTrapFocus, NgStyle, NgClass], template: "<div class=\"particle_popover_overlay\"\r\n     [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     [style.scale]=\"window.innerWidth > 768 ? 1 : scaleForMobile()\"\r\n>\r\n  <div class=\"particle_popover\"\r\n       [class.open]=\"isOpen()\"\r\n       [cdkTrapFocus]=\"render && visible\"\r\n       [cdkTrapFocusAutoCapture]=\"true\"\r\n       [ngStyle]=\"{'width': width, 'height': height}\"\r\n       [ngClass]=\"classList()\"\r\n       #container\r\n  >\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".particle_popover_overlay{position:fixed;inset:0;z-index:var(--z-notification)}.particle_popover{border-radius:3px;overflow-x:hidden;overflow-y:auto;font-size:12px;font-weight:400;z-index:var(--z-notification);width:auto;min-width:10px;height:auto;min-height:10px;position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:ease}.particle_popover.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:ease}.particle_popover_shadow{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}\n"] }]
+            args: [{ selector: 'particle-popover', imports: [CdkTrapFocus, NgStyle, NgClass], template: "<div class=\"particle_popover_overlay\"\n     [style.display]=\"render ? '' : 'none'\"\n     [attr.aria-hidden]=\"!render\"\n     [style.scale]=\"window.innerWidth > 768 ? 1 : scaleForMobile()\"\n>\n  <div class=\"particle_popover\"\n       [class.open]=\"isOpen()\"\n       [cdkTrapFocus]=\"render && visible\"\n       [cdkTrapFocusAutoCapture]=\"true\"\n       [ngStyle]=\"{'width': width, 'height': height}\"\n       [ngClass]=\"classList()\"\n       #container\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".particle_popover_overlay{position:fixed;inset:0;z-index:var(--z-notification)}.particle_popover{border-radius:3px;overflow-x:hidden;overflow-y:auto;font-size:12px;font-weight:400;z-index:var(--z-notification);width:auto;min-width:10px;height:auto;min-height:10px;position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:ease}.particle_popover.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:ease}.particle_popover_shadow{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}\n"] }]
         }], ctorParameters: () => [], propDecorators: { offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], width: [{
                 type: Input
             }], height: [{
                 type: Input
-            }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], targetOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetOverride", required: false }] }], openDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDirection", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], scaleForMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "scaleForMobile", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], container: [{
+            }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], targetOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetOverride", required: false }] }], openDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "openDirection", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], scaleForMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "scaleForMobile", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], arrowDown: [{ type: i0.Output, args: ["arrowDown"] }], arrowUp: [{ type: i0.Output, args: ["arrowUp"] }], container: [{
                 type: ViewChild,
                 args: ['container']
             }], onClick: [{
@@ -3646,11 +3687,11 @@ class PaginatorComponent {
         this.pageJumpInput = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PaginatorComponent, isStandalone: true, selector: "particle-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, totalLength: { classPropertyName: "totalLength", publicName: "totalLength", isSignal: true, isRequired: false, transformFunction: null }, showPages: { classPropertyName: "showPages", publicName: "showPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showButtonLabels: { classPropertyName: "showButtonLabels", publicName: "showButtonLabels", isSignal: true, isRequired: false, transformFunction: null }, showResultsPanel: { classPropertyName: "showResultsPanel", publicName: "showResultsPanel", isSignal: true, isRequired: false, transformFunction: null }, startingPage: { classPropertyName: "startingPage", publicName: "startingPage", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paginate: "paginate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row wrap_reverse center_center\">\r\n  @if (!showPages() && showResultsPanel()) {\r\n    <div class=\"col min_w200\">\r\n      <div class=\"row v_center ptl_brdr_size ptl_brdr_radius ptl_brdr_color content_color mar_right5 mar_left5 pad_3 ent_r2l_row\">\r\n        <div class=\"col size_1 center_center pad_left5 pad_right5\">\r\n          @if (totalLength() > 0) {\r\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n              {{pageStartingValue}} - {{pageEndingValue > totalLength() ? totalLength() : pageEndingValue}} {{text().of}} {{totalLength()}} {{text().results}}\r\n            </div>\r\n          } @else {\r\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n              0 - 0 {{text().of}} 0 {{text().results}}\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col center_center pad_lr5\">\r\n          <button class=\"access btn clear circle_20px \" tabindex=\"0\" [attr.aria-label]=\"text().jumpToPage\"\r\n            (click)=\"config.toggle($event)\">\r\n            <i class=\"fas fa-cog\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"col pad_5\">\r\n    <div class=\"row wrap_reverse center_center\">\r\n\r\n      @if (showFirstLast()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- first -->\r\n          <button class=\"access btnset clear\"\r\n            [attr.aria-label]=\"text().firstPage\"\r\n            [disabled]=\"activePage === 0\"\r\n            (click)=\"goToFirst()\">\r\n            <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n                <i class=\"fas fa-angle-double-left ent_r2l_ico\"></i>\r\n              </div>\r\n              @if (showButtonLabels()) {\r\n                <div class=\"text ent_r2l_txt\">{{text().firstPage}}</div>\r\n              }\r\n            </div>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col pad_5\">\r\n        <!-- previous -->\r\n        <button class=\"access btnset clear\"\r\n          [attr.aria-label]=\"text().previousPage\"\r\n          [disabled]=\"activePage === 0\"\r\n          (click)=\"hasPage(activePage - 1) ? goToPage(activePage - 1) : goToPage(activePage)\">\r\n          <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n              <i class=\"fas fa-chevron-left ent_r2l_ico\"></i>\r\n            </div>\r\n            @if (showButtonLabels()) {\r\n              <div class=\"text ent_r2l_txt\">{{text().previousPage}}</div>\r\n            }\r\n          </div>\r\n        </button>\r\n      </div>\r\n\r\n      @if (showPages()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- navigation -->\r\n          <div class=\"row v_center pad_left5 pad_right5 bg_overlay brdr content_color ptl_brdr_radius ent_r2l_dir\"\r\n            style=\"flex:1 1 auto;\">\r\n            <!-- jump button -->\r\n            <div class=\"center_right\" style=\"width:20px;min-width:20px;\">\r\n              @if (activePage > 3) {\r\n                <button class=\"access btn underline_md pag_btn clear\" tabindex=\"0\"\r\n                  [attr.aria-label]=\"text().jumpToPage\"\r\n                (click)=\"op.toggle($event)\">...</button>\r\n              }\r\n            </div>\r\n            <!-- nav buttons -->\r\n            <div class=\"center_center\" style=\"min-width:180px;\">\r\n              <!-- first -->\r\n              @if ((activePage-2 >= 0 && activePage-2 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage - 1)\"\r\n                  (click)=\"goToPage(activePage - 2, true)\">\r\n                  {{activePage - 1}}\r\n                </button>\r\n              }\r\n              <!-- second -->\r\n              @if ((activePage-1 >= 0 && activePage-1 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage)\"\r\n                  (click)=\"goToPage(activePage - 1, true)\">\r\n                  {{activePage}}\r\n                </button>\r\n              }\r\n              <!-- active page -->\r\n              <div class=\"row pag_btn active brad_3 content_color\">\r\n                <button style=\"cursor:default\"\r\n                  class=\"access col size_1 btn center_center brad_3 bg_overlay_rev brdr\" id=\"activePage\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 1)\" >\r\n                  {{activePage + 1}}\r\n                </button>\r\n              </div>\r\n              <!-- fourth -->\r\n              @if ((activePage+1 >= 0 && activePage+1 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 2)\"\r\n                  (click)=\"goToPage(activePage + 1, true)\">\r\n                  {{activePage + 2}}\r\n                </button>\r\n              }\r\n              <!-- fifth -->\r\n              @if ((activePage+2 >= 0 && activePage+2 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 3)\"\r\n                  (click)=\"goToPage(activePage + 2, true)\">\r\n                  {{activePage + 3}}\r\n                </button>\r\n              }\r\n            </div>\r\n            <!-- jump button -->\r\n            <div class=\"center_left\" style=\"width:20px;min-width:20px;\">\r\n              @if (activePage < getNumberOfPages() - 4) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().jumpToPage\"\r\n                (click)=\"op.toggle($event)\" >...</button>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col pad_5\">\r\n        <!-- next -->\r\n        <button class=\"access btnset clear\"\r\n          [attr.aria-label]=\"text().nextPage\"\r\n          [disabled]=\"activePage === numberOfPages - 1 || totalLength() === 0\"\r\n          (click)=\"hasPage(activePage + 1) ? goToPage(activePage + 1) : goToPage(activePage)\">\r\n          <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n            @if (showButtonLabels()) {\r\n              <div class=\"text ent_r2l_txt\">{{text().nextPage}}</div>\r\n            }\r\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n            </div>\r\n          </div>\r\n        </button>\r\n      </div>\r\n\r\n      @if (showFirstLast()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- last -->\r\n          <button class=\"access btnset clear\"\r\n            [attr.aria-label]=\"text().lastPage\"\r\n            [disabled]=\"activePage === numberOfPages - 1\"\r\n            (click)=\"goToLast()\">\r\n            <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n              @if (showButtonLabels()) {\r\n                <div class=\"text ent_r2l_txt\">{{text().lastPage}}</div>\r\n              }\r\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n                <i class=\"fas fa-angle-double-right ent_r2l_ico\"></i>\r\n              </div>\r\n            </div>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Jump to popover -->\r\n<particle-popover #op>\r\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n</particle-popover>\r\n\r\n<particle-popover #config>\r\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n  <ng-container *ngTemplateOutlet=\"pageSizeTemplate\"></ng-container>\r\n</particle-popover>\r\n\r\n<ng-template #jumpTo>\r\n  @if (numberOfPages > 0) {\r\n    <div class=\"row_block pad_10 center\">\r\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageJump\">{{text().jumpToPage}} ({{text().outOf}} {{numberOfPages}}):</label></div>\r\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n        <div class=\"col\">\r\n          <input class=\"access fullwidth_input sm\" style=\"width:50px;\" maxlength=\"4\" id=\"pageJump\"\r\n            type=\"text\" [attr.aria-label]=\"text().page\" name=\"pagejump\" [placeholder]=\"text().page\" [(ngModel)]=\"pageJumpInput\" />\r\n          </div>\r\n          <div class=\"col\">\r\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().jumpToPage\"\r\n              (click)=\"jumpPage();op.close();config.close();\">\r\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #pageSizeTemplate>\r\n    <div class=\"row_block pad_10 center\">\r\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageSize\">{{text().itemsPerPage}}:</label></div>\r\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n        <div class=\"col\">\r\n          <select class=\"access fullwidth_input content_color text sm\" style=\"width:50px;\"\r\n            [(ngModel)]=\"pageSize\" (ngModelChange)=\"pageSizeChange();config.close();\" [title]=\"text().choosePageSize\" id=\"pageSize\">\r\n            @for (option of pageSizeOptions(); track option) {\r\n              <option [value]=\"option\" [attr.aria-label]=\"option\">\r\n                {{option}}\r\n              </option>\r\n            }\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n", styles: [".pag_btn{flex:1;max-width:60px;margin:0 1px;height:24px;font-size:10pt}.pag_btn.active{height:30px;margin-top:-3px;margin-bottom:-3px}.spinspin{opacity:.5}.spinspin:hover{animation:spin 2s linear infinite;opacity:1}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: PaginatorComponent, isStandalone: true, selector: "particle-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, totalLength: { classPropertyName: "totalLength", publicName: "totalLength", isSignal: true, isRequired: false, transformFunction: null }, showPages: { classPropertyName: "showPages", publicName: "showPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showButtonLabels: { classPropertyName: "showButtonLabels", publicName: "showButtonLabels", isSignal: true, isRequired: false, transformFunction: null }, showResultsPanel: { classPropertyName: "showResultsPanel", publicName: "showResultsPanel", isSignal: true, isRequired: false, transformFunction: null }, startingPage: { classPropertyName: "startingPage", publicName: "startingPage", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paginate: "paginate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row wrap_reverse center_center\">\n  @if (!showPages() && showResultsPanel()) {\n    <div class=\"col min_w200\">\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\">\n        <div class=\"col size_1 center_center pad_left5 pad_right5\">\n          @if (totalLength() > 0) {\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\n              {{pageStartingValue}} - {{pageEndingValue > totalLength() ? totalLength() : pageEndingValue}} {{text().of}} {{totalLength()}} {{text().results}}\n            </div>\n          } @else {\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\n              0 - 0 {{text().of}} 0 {{text().results}}\n            </div>\n          }\n        </div>\n        <div class=\"col center_center pad_lr5\">\n          <button class=\"access btn clear circle_20px \" tabindex=\"0\" [attr.aria-label]=\"text().jumpToPage\"\n            (click)=\"config.toggle($event)\">\n            <i class=\"fas fa-cog\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <div class=\"col pad_5\">\n    <div class=\"row wrap_reverse center_center\">\n\n      @if (showFirstLast()) {\n        <div class=\"col pad_5\">\n          <!-- first -->\n          <button class=\"access btnset clear\"\n            [attr.aria-label]=\"text().firstPage\"\n            [disabled]=\"activePage === 0\"\n            (click)=\"goToFirst()\">\n            <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\n                <i class=\"fas fa-angle-double-left ent_r2l_ico\"></i>\n              </div>\n              @if (showButtonLabels()) {\n                <div class=\"text ent_r2l_txt\">{{text().firstPage}}</div>\n              }\n            </div>\n          </button>\n        </div>\n      }\n\n      <div class=\"col pad_5\">\n        <!-- previous -->\n        <button class=\"access btnset clear\"\n          [attr.aria-label]=\"text().previousPage\"\n          [disabled]=\"activePage === 0\"\n          (click)=\"hasPage(activePage - 1) ? goToPage(activePage - 1) : goToPage(activePage)\">\n          <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\n              <i class=\"fas fa-chevron-left ent_r2l_ico\"></i>\n            </div>\n            @if (showButtonLabels()) {\n              <div class=\"text ent_r2l_txt\">{{text().previousPage}}</div>\n            }\n          </div>\n        </button>\n      </div>\n\n      @if (showPages()) {\n        <div class=\"col pad_5\">\n          <!-- navigation -->\n          <div class=\"row v_center pad_left5 pad_right5 bg_overlay brdr content_color ptl_brdr_radius ent_r2l_dir\"\n            style=\"flex:1 1 auto;\">\n            <!-- jump button -->\n            <div class=\"center_right\" style=\"width:20px;min-width:20px;\">\n              @if (activePage > 3) {\n                <button class=\"access btn underline_md pag_btn clear\" tabindex=\"0\"\n                  [attr.aria-label]=\"text().jumpToPage\"\n                (click)=\"op.toggle($event)\">...</button>\n              }\n            </div>\n            <!-- nav buttons -->\n            <div class=\"center_center\" style=\"min-width:180px;\">\n              <!-- first -->\n              @if ((activePage-2 >= 0 && activePage-2 < numberOfPages)) {\n                <button class=\"access btn underline_md pag_btn clear\"\n                  [attr.aria-label]=\"text().page + ' ' + (activePage - 1)\"\n                  (click)=\"goToPage(activePage - 2, true)\">\n                  {{activePage - 1}}\n                </button>\n              }\n              <!-- second -->\n              @if ((activePage-1 >= 0 && activePage-1 < numberOfPages)) {\n                <button class=\"access btn underline_md pag_btn clear\"\n                  [attr.aria-label]=\"text().page + ' ' + (activePage)\"\n                  (click)=\"goToPage(activePage - 1, true)\">\n                  {{activePage}}\n                </button>\n              }\n              <!-- active page -->\n              <div class=\"row pag_btn active brad_3 content_color\">\n                <button style=\"cursor:default\"\n                  class=\"access col size_1 btn center_center brad_3 bg_overlay_rev brdr\" id=\"activePage\"\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 1)\" >\n                  {{activePage + 1}}\n                </button>\n              </div>\n              <!-- fourth -->\n              @if ((activePage+1 >= 0 && activePage+1 < numberOfPages)) {\n                <button class=\"access btn underline_md pag_btn clear\"\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 2)\"\n                  (click)=\"goToPage(activePage + 1, true)\">\n                  {{activePage + 2}}\n                </button>\n              }\n              <!-- fifth -->\n              @if ((activePage+2 >= 0 && activePage+2 < numberOfPages)) {\n                <button class=\"access btn underline_md pag_btn clear\"\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 3)\"\n                  (click)=\"goToPage(activePage + 2, true)\">\n                  {{activePage + 3}}\n                </button>\n              }\n            </div>\n            <!-- jump button -->\n            <div class=\"center_left\" style=\"width:20px;min-width:20px;\">\n              @if (activePage < getNumberOfPages() - 4) {\n                <button class=\"access btn underline_md pag_btn clear\"\n                  [attr.aria-label]=\"text().jumpToPage\"\n                (click)=\"op.toggle($event)\" >...</button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <div class=\"col pad_5\">\n        <!-- next -->\n        <button class=\"access btnset clear\"\n          [attr.aria-label]=\"text().nextPage\"\n          [disabled]=\"activePage === numberOfPages - 1 || totalLength() === 0\"\n          (click)=\"hasPage(activePage + 1) ? goToPage(activePage + 1) : goToPage(activePage)\">\n          <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\n            @if (showButtonLabels()) {\n              <div class=\"text ent_r2l_txt\">{{text().nextPage}}</div>\n            }\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\n            </div>\n          </div>\n        </button>\n      </div>\n\n      @if (showFirstLast()) {\n        <div class=\"col pad_5\">\n          <!-- last -->\n          <button class=\"access btnset clear\"\n            [attr.aria-label]=\"text().lastPage\"\n            [disabled]=\"activePage === numberOfPages - 1\"\n            (click)=\"goToLast()\">\n            <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\n              @if (showButtonLabels()) {\n                <div class=\"text ent_r2l_txt\">{{text().lastPage}}</div>\n              }\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\n                <i class=\"fas fa-angle-double-right ent_r2l_ico\"></i>\n              </div>\n            </div>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<!-- Jump to popover -->\n<particle-popover #op>\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\n</particle-popover>\n\n<particle-popover #config>\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"pageSizeTemplate\"></ng-container>\n</particle-popover>\n\n<ng-template #jumpTo>\n  @if (numberOfPages > 0) {\n    <div class=\"row_block pad_10 center\">\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>\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\n        <div class=\"col\">\n          <input class=\"access fullwidth_input sm\" style=\"width:50px;\" maxlength=\"4\" id=\"pageJump\" (keydown.enter)=\"jumpPage();op.close();config.close();\"\n            type=\"text\" [attr.aria-label]=\"text().page\" name=\"pagejump\" [placeholder]=\"text().page\" [(ngModel)]=\"pageJumpInput\" />\n          </div>\n          <div class=\"col\">\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().jumpToPage\"\n              (click)=\"jumpPage();op.close();config.close();\">\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  </ng-template>\n\n  <ng-template #pageSizeTemplate>\n    <div class=\"row_block pad_10 center\">\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageSize\">{{text().itemsPerPage}}:</label></div>\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\n        <div class=\"col\">\n          <select class=\"access fullwidth_input content_color text sm\" style=\"width:50px;\"\n            [(ngModel)]=\"pageSize\" (ngModelChange)=\"pageSizeChange();config.close();\" [title]=\"text().choosePageSize\" id=\"pageSize\">\n            @for (option of pageSizeOptions(); track option) {\n              <option [value]=\"option\" [attr.aria-label]=\"option\">\n                {{option}}\n              </option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  </ng-template>\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", "arrowDown", "arrowUp"] }, { 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: "21.1.5", 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"] }]
+            args: [{ selector: 'particle-paginator', imports: [NgClass, PopoverComponent, NgTemplateOutlet, FormsModule], template: "<div class=\"row wrap_reverse center_center\">\n  @if (!showPages() && showResultsPanel()) {\n    <div class=\"col min_w200\">\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\">\n        <div class=\"col size_1 center_center pad_left5 pad_right5\">\n          @if (totalLength() > 0) {\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\n              {{pageStartingValue}} - {{pageEndingValue > totalLength() ? totalLength() : pageEndingValue}} {{text().of}} {{totalLength()}} {{text().results}}\n            </div>\n          } @else {\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\n              0 - 0 {{text().of}} 0 {{text().results}}\n            </div>\n          }\n        </div>\n        <div class=\"col center_center pad_lr5\">\n          <button class=\"access btn clear circle_20px \" tabindex=\"0\" [attr.aria-label]=\"text().jumpToPage\"\n            (click)=\"config.toggle($event)\">\n            <i class=\"fas fa-cog\"></i>\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <div class=\"col pad_5\">\n    <div class=\"row wrap_reverse center_center\">\n\n      @if (showFirstLast()) {\n        <div class=\"col pad_5\">\n          <!-- first -->\n          <button class=\"access btnset clear\"\n            [attr.aria-label]=\"text().firstPage\"\n            [disabled]=\"activePage === 0\"\n            (click)=\"goToFirst()\">\n            <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\n                <i class=\"fas fa-angle-double-left ent_r2l_ico\"></i>\n              </div>\n              @if (showButtonLabels()) {\n                <div class=\"text ent_r2l_txt\">{{text().firstPage}}</div>\n              }\n            </div>\n          </button>\n        </div>\n      }\n\n      <div class=\"col pad_5\">\n        <!-- previous -->\n        <button class=\"access btnset clear\"\n          [attr.aria-label]=\"text().previousPage\"\n          [disabled]=\"activePage === 0\"\n          (click)=\"hasPage(activePage - 1) ? goToPage(activePage - 1) : goToPage(activePage)\">\n          <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\n              <i class=\"fas fa-chevron-left ent_r2l_ico\"></i>\n            </div>\n            @if (showButtonLabels()) {\n              <div class=\"text ent_r2l_txt\">{{text().previousPage}}</div>\n            }\n          </div>\n        </button>\n      </div>\n\n      @if (showPages()) {\n        <div class=\"col pad_5\">\n          <!-- navigation -->\n          <div class=\"row v_center pad_left5 pad_right5 bg_overlay brdr content_color ptl_brdr_radius ent_r2l_dir\"\n            style=\"flex:1 1 auto;\">\n            <!-- jump button -->\n            <div class=\"center_right\" style=\"width:20px;min-width:20px;\">\n              @if (activePage > 3) {\n                <button class=\"access btn underline_md pag_btn clear\" tabindex=\"0\"\n                  [attr.aria-label]=\"text().jumpToPage\"\n                (click)=\"op.toggle($event)\">...</button>\n              }\n            </div>\n            <!-- nav buttons -->\n            <div class=\"center_center\" style=\"min-width:180px;\">\n              <!-- first -->\n              @if ((activePage-2 >= 0 && activePage-2 < numberOfPages)) {\n                <button class=\"access btn underline_md pag_btn clear\"\n                  [attr.aria-label]=\"text().page + ' ' + (activePage - 1)\"\n                  (click)=\"goToPage(activePage - 2, true)\">\n                  {{activePage - 1}}\n                </button>\n              }\n              <!-- second -->\n              @if ((activePage-1 >= 0 && activePage-1 < numberOfPages)) {\n                <button class=\"access btn underline_md pag_btn clear\"\n                  [attr.aria-label]=\"text().page + ' ' + (activePage)\"\n                  (click)=\"goToPage(activePage - 1, true)\">\n                  {{activePage}}\n                </button>\n              }\n              <!-- active page -->\n              <div class=\"row pag_btn active brad_3 content_color\">\n                <button style=\"cursor:default\"\n                  class=\"access col size_1 btn center_center brad_3 bg_overlay_rev brdr\" id=\"activePage\"\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 1)\" >\n                  {{activePage + 1}}\n                </button>\n              </div>\n              <!-- fourth -->\n              @if ((activePage+1 >= 0 && activePage+1 < numberOfPages)) {\n                <button class=\"access btn underline_md pag_btn clear\"\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 2)\"\n                  (click)=\"goToPage(activePage + 1, true)\">\n                  {{activePage + 2}}\n                </button>\n              }\n              <!-- fifth -->\n              @if ((activePage+2 >= 0 && activePage+2 < numberOfPages)) {\n                <button class=\"access btn underline_md pag_btn clear\"\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 3)\"\n                  (click)=\"goToPage(activePage + 2, true)\">\n                  {{activePage + 3}}\n                </button>\n              }\n            </div>\n            <!-- jump button -->\n            <div class=\"center_left\" style=\"width:20px;min-width:20px;\">\n              @if (activePage < getNumberOfPages() - 4) {\n                <button class=\"access btn underline_md pag_btn clear\"\n                  [attr.aria-label]=\"text().jumpToPage\"\n                (click)=\"op.toggle($event)\" >...</button>\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <div class=\"col pad_5\">\n        <!-- next -->\n        <button class=\"access btnset clear\"\n          [attr.aria-label]=\"text().nextPage\"\n          [disabled]=\"activePage === numberOfPages - 1 || totalLength() === 0\"\n          (click)=\"hasPage(activePage + 1) ? goToPage(activePage + 1) : goToPage(activePage)\">\n          <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\n            @if (showButtonLabels()) {\n              <div class=\"text ent_r2l_txt\">{{text().nextPage}}</div>\n            }\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\n            </div>\n          </div>\n        </button>\n      </div>\n\n      @if (showFirstLast()) {\n        <div class=\"col pad_5\">\n          <!-- last -->\n          <button class=\"access btnset clear\"\n            [attr.aria-label]=\"text().lastPage\"\n            [disabled]=\"activePage === numberOfPages - 1\"\n            (click)=\"goToLast()\">\n            <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\n              @if (showButtonLabels()) {\n                <div class=\"text ent_r2l_txt\">{{text().lastPage}}</div>\n              }\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\n                <i class=\"fas fa-angle-double-right ent_r2l_ico\"></i>\n              </div>\n            </div>\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<!-- Jump to popover -->\n<particle-popover #op>\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\n</particle-popover>\n\n<particle-popover #config>\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"pageSizeTemplate\"></ng-container>\n</particle-popover>\n\n<ng-template #jumpTo>\n  @if (numberOfPages > 0) {\n    <div class=\"row_block pad_10 center\">\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>\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\n        <div class=\"col\">\n          <input class=\"access fullwidth_input sm\" style=\"width:50px;\" maxlength=\"4\" id=\"pageJump\" (keydown.enter)=\"jumpPage();op.close();config.close();\"\n            type=\"text\" [attr.aria-label]=\"text().page\" name=\"pagejump\" [placeholder]=\"text().page\" [(ngModel)]=\"pageJumpInput\" />\n          </div>\n          <div class=\"col\">\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().jumpToPage\"\n              (click)=\"jumpPage();op.close();config.close();\">\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\n            </button>\n          </div>\n        </div>\n      </div>\n    }\n  </ng-template>\n\n  <ng-template #pageSizeTemplate>\n    <div class=\"row_block pad_10 center\">\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageSize\">{{text().itemsPerPage}}:</label></div>\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\n        <div class=\"col\">\n          <select class=\"access fullwidth_input content_color text sm\" style=\"width:50px;\"\n            [(ngModel)]=\"pageSize\" (ngModelChange)=\"pageSizeChange();config.close();\" [title]=\"text().choosePageSize\" id=\"pageSize\">\n            @for (option of pageSizeOptions(); track option) {\n              <option [value]=\"option\" [attr.aria-label]=\"option\">\n                {{option}}\n              </option>\n            }\n          </select>\n        </div>\n      </div>\n    </div>\n  </ng-template>\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: { pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], pageSize: [{
                 type: Input
             }], totalLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalLength", required: false }] }], showPages: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPages", required: false }] }], showFirstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLast", required: false }] }], showButtonLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonLabels", required: false }] }], showResultsPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResultsPanel", required: false }] }], startingPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "startingPage", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], paginate: [{ type: i0.Output, args: ["paginate"] }] } });
@@ -3691,28 +3732,28 @@ class ProfilePicComponent {
     }
     url = null;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfilePicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: ProfilePicComponent, isStandalone: true, selector: "particle-profile-pic", inputs: { size: "size", margin: "margin", toolTip: "toolTip", tooltipDisabled: "tooltipDisabled", gravatarEmail: "gravatarEmail", imageUrl: "imageUrl" }, ngImport: i0, template: `
-    <div class="ptl_profile_pic"
-         [style.height]="size"
-         [style.width]="size"
-         [style.margin]="margin"
-         [style.background-image]="url"
-         [particleTooltip]="toolTip"
-         [tooltipDisabled]="tooltipDisabled"
-         tooltipPosition="top">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: ProfilePicComponent, isStandalone: true, selector: "particle-profile-pic", inputs: { size: "size", margin: "margin", toolTip: "toolTip", tooltipDisabled: "tooltipDisabled", gravatarEmail: "gravatarEmail", imageUrl: "imageUrl" }, ngImport: i0, template: `
+    <div class="ptl_profile_pic"
+         [style.height]="size"
+         [style.width]="size"
+         [style.margin]="margin"
+         [style.background-image]="url"
+         [particleTooltip]="toolTip"
+         [tooltipDisabled]="tooltipDisabled"
+         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: "21.1.5", ngImport: i0, type: ProfilePicComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'particle-profile-pic', template: `
-    <div class="ptl_profile_pic"
-         [style.height]="size"
-         [style.width]="size"
-         [style.margin]="margin"
-         [style.background-image]="url"
-         [particleTooltip]="toolTip"
-         [tooltipDisabled]="tooltipDisabled"
-         tooltipPosition="top">
+            args: [{ selector: 'particle-profile-pic', template: `
+    <div class="ptl_profile_pic"
+         [style.height]="size"
+         [style.width]="size"
+         [style.margin]="margin"
+         [style.background-image]="url"
+         [particleTooltip]="toolTip"
+         [tooltipDisabled]="tooltipDisabled"
+         tooltipPosition="top">
     </div>`, standalone: true, imports: [TooltipDirective], 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"] }]
         }], propDecorators: { size: [{
                 type: Input
@@ -3917,11 +3958,11 @@ class RichTextComponent {
         this.editor.commands.focus(position);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: RichTextComponent, isStandalone: true, selector: "particle-rich-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideControls: { classPropertyName: "hideControls", publicName: "hideControls", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, editorClass: { classPropertyName: "editorClass", publicName: "editorClass", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, capabilities: { classPropertyName: "capabilities", publicName: "capabilities", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { textChanged: "textChanged" }, providers: [RICH_TEXT_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n  @if (!this.hideControls() && this.editor.isEditable) {\r\n    <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n      @if (capabilities().heading) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"heading1\"\r\n            [attr.aria-label]=\"text().heading1\"\r\n            class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n            [ngClass]=\"this.editor.isActive('heading', { level: 1 }) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-header fa-fw\"></i>1\r\n          </button>\r\n          <button\r\n            id=\"heading2\"\r\n            [attr.aria-label]=\"text().heading2\"\r\n            class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n            [ngClass]=\"this.editor.isActive('heading', { level: 2 }) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-header fa-fw\"></i>2\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().textDecoration) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bold\"\r\n            [attr.aria-label]=\"text().bold\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBold().run()\"\r\n            [ngClass]=\"this.editor.isActive('bold') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-bold fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"italic\"\r\n            [attr.aria-label]=\"text().italic\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n            [ngClass]=\"this.editor.isActive('italic') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-italic fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"strike\"\r\n            [attr.aria-label]=\"text().strike\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n            [ngClass]=\"this.editor.isActive('strike') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().list) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bullet-list\"\r\n            [attr.aria-label]=\"text().bulletedList\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n            [ngClass]=\"this.editor.isActive('bullet-list') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-list fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"ordered-list\"\r\n            [attr.aria-label]=\"text().orderedList\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n            [ngClass]=\"this.editor.isActive('ordered-list') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-list-ol fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().alignment) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"left-align\"\r\n            [attr.aria-label]=\"text().leftAlign\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n            [ngClass]=\"this.editor.isActive({textAlign: 'left'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-align-left fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"center-align\"\r\n            [attr.aria-label]=\"text().centerAlign\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n            [ngClass]=\"this.editor.isActive({textAlign: 'center'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-align-center fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"right-align\"\r\n            [attr.aria-label]=\"text().rightAlign\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n            [ngClass]=\"this.editor.isActive({textAlign: 'right'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-align-right fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"justify-align\"\r\n            [attr.aria-label]=\"text().justifyAlign\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n            [ngClass]=\"this.editor.isActive({textAlign: 'justify'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-align-justify fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().divider) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"link\"\r\n            [attr.aria-label]=\"text().divider\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setHorizontalRule().run()\"\r\n            [ngClass]=\"this.editor.isActive('horizontalRule') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-divide fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().link) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"link\"\r\n            [attr.aria-label]=\"text().setLink\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n            (click)=\"openLinkDialog()\"\r\n            [ngClass]=\"this.editor.isActive('link') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-link fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"unlink\"\r\n            [attr.aria-label]=\"text().removeLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n            (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n            [disabled]=\"!this.editor.isActive('link')\"\r\n          >\r\n            <i class=\"fas fa-unlink fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().images) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"image\"\r\n            [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            (click)=\"openImageDialog()\"\r\n            [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            tooltipPosition=\"top\"\r\n            [ngClass]=\"this.editor.isActive('image') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"far fa-image fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      <div class=\"col v_center pad_5\">\r\n        <button\r\n          id=\"clear-format\"\r\n          [attr.aria-label]=\"text().clearFormat\"\r\n          class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n          [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n          (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n        >\r\n          <i class=\"fas fa-text-slash fa-fw\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\r\n    <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n  </div>\r\n</div>\r\n\r\n<particle-dialog\r\n  [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n  titleClass=\"header_color min_h40\"\r\n  [object]=\"showDialog\"\r\n  [allowClose]=\"false\"\r\n  width=\"400px\"\r\n  height=\"150px\"\r\n  >\r\n  <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n    <input class=\"access input md\"\r\n      [(ngModel)]=\"dialogLink\"\r\n      [attr.aria-label]=\"text().url\"\r\n      placeholder=\"eg. https://www.google.com\"\r\n      (keyup.enter)=\"changeEditorLink('save')\"\r\n      />\r\n    </div>\r\n    <div class=\"col min_h40 footer_color\">\r\n      <div class=\"row center_right pad_right15 pad_left15\">\r\n        <div class=\"col\">\r\n          <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n            <div class=\" pad_5\">{{text().cancel}}</div>\r\n          </button>\r\n          <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n            [attr.aria-label]=\"text().update\"\r\n            (click)=\"changeEditorLink('save')\"\r\n            >\r\n            <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n            <div>{{text().update}}</div>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TiptapEditorDirective, selector: "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", inputs: ["editor", "outputFormat"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: RichTextComponent, isStandalone: true, selector: "particle-rich-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideControls: { classPropertyName: "hideControls", publicName: "hideControls", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, editorClass: { classPropertyName: "editorClass", publicName: "editorClass", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, capabilities: { classPropertyName: "capabilities", publicName: "capabilities", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { textChanged: "textChanged" }, providers: [RICH_TEXT_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\n  @if (!this.hideControls() && this.editor.isEditable) {\n    <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\n      @if (capabilities().heading) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"heading1\"\n            [attr.aria-label]=\"text().heading1\"\n            class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\n            [ngClass]=\"this.editor.isActive('heading', { level: 1 }) ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-header fa-fw\"></i>1\n          </button>\n          <button\n            id=\"heading2\"\n            [attr.aria-label]=\"text().heading2\"\n            class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\n            [ngClass]=\"this.editor.isActive('heading', { level: 2 }) ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-header fa-fw\"></i>2\n          </button>\n        </div>\n      }\n      @if (capabilities().textDecoration) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"bold\"\n            [attr.aria-label]=\"text().bold\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleBold().run()\"\n            [ngClass]=\"this.editor.isActive('bold') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-bold fa-fw\"></i>\n          </button>\n          <button\n            id=\"italic\"\n            [attr.aria-label]=\"text().italic\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleItalic().run()\"\n            [ngClass]=\"this.editor.isActive('italic') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-italic fa-fw\"></i>\n          </button>\n          <button\n            id=\"strike\"\n            [attr.aria-label]=\"text().strike\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleStrike().run()\"\n            [ngClass]=\"this.editor.isActive('strike') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-strikethrough fa-fw\"></i>\n          </button>\n        </div>\n      }\n      @if (capabilities().list) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"bullet-list\"\n            [attr.aria-label]=\"text().bulletedList\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleBulletList().run()\"\n            [ngClass]=\"this.editor.isActive('bullet-list') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-list fa-fw\"></i>\n          </button>\n          <button\n            id=\"ordered-list\"\n            [attr.aria-label]=\"text().orderedList\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleOrderedList().run()\"\n            [ngClass]=\"this.editor.isActive('ordered-list') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-list-ol fa-fw\"></i>\n          </button>\n        </div>\n      }\n      @if (capabilities().alignment) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"left-align\"\n            [attr.aria-label]=\"text().leftAlign\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n            [ngClass]=\"this.editor.isActive({textAlign: 'left'}) ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-align-left fa-fw\"></i>\n          </button>\n          <button\n            id=\"center-align\"\n            [attr.aria-label]=\"text().centerAlign\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n            [ngClass]=\"this.editor.isActive({textAlign: 'center'}) ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-align-center fa-fw\"></i>\n          </button>\n          <button\n            id=\"right-align\"\n            [attr.aria-label]=\"text().rightAlign\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n            [ngClass]=\"this.editor.isActive({textAlign: 'right'}) ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-align-right fa-fw\"></i>\n          </button>\n          <button\n            id=\"justify-align\"\n            [attr.aria-label]=\"text().justifyAlign\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n            [ngClass]=\"this.editor.isActive({textAlign: 'justify'}) ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-align-justify fa-fw\"></i>\n          </button>\n        </div>\n      }\n      @if (capabilities().divider) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"link\"\n            [attr.aria-label]=\"text().divider\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().setHorizontalRule().run()\"\n            [ngClass]=\"this.editor.isActive('horizontalRule') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-divide fa-fw\"></i>\n          </button>\n        </div>\n      }\n      @if (capabilities().link) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"link\"\n            [attr.aria-label]=\"text().setLink\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\n            (click)=\"openLinkDialog()\"\n            [ngClass]=\"this.editor.isActive('link') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-link fa-fw\"></i>\n          </button>\n          <button\n            id=\"unlink\"\n            [attr.aria-label]=\"text().removeLink\"\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\n            (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\n            [disabled]=\"!this.editor.isActive('link')\"\n          >\n            <i class=\"fas fa-unlink fa-fw\"></i>\n          </button>\n        </div>\n      }\n      @if (capabilities().images) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"image\"\n            [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            (click)=\"openImageDialog()\"\n            [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\n            tooltipPosition=\"top\"\n            [ngClass]=\"this.editor.isActive('image') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"far fa-image fa-fw\"></i>\n          </button>\n        </div>\n      }\n      <div class=\"col v_center pad_5\">\n        <button\n          id=\"clear-format\"\n          [attr.aria-label]=\"text().clearFormat\"\n          class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n          [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\n          (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\n        >\n          <i class=\"fas fa-text-slash fa-fw\"></i>\n        </button>\n      </div>\n    </div>\n  }\n  <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\n    <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\n  </div>\n</div>\n\n<particle-dialog\n  [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\n  titleClass=\"header_color min_h40\"\n  [object]=\"showDialog\"\n  [allowClose]=\"false\"\n  width=\"400px\"\n  height=\"150px\"\n  >\n  <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\n    <input class=\"access input md\"\n      [(ngModel)]=\"dialogLink\"\n      [attr.aria-label]=\"text().url\"\n      placeholder=\"eg. https://www.google.com\"\n      (keyup.enter)=\"changeEditorLink('save')\"\n      />\n    </div>\n    <div class=\"col min_h40 footer_color\">\n      <div class=\"row center_right pad_right15 pad_left15\">\n        <div class=\"col\">\n          <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\n            <div class=\" pad_5\">{{text().cancel}}</div>\n          </button>\n          <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\n          </div>\n          <button\n            type=\"button\"\n            class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\n            [attr.aria-label]=\"text().update\"\n            (click)=\"changeEditorLink('save')\"\n            >\n            <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\n            <div>{{text().update}}</div>\n          </button>\n        </div>\n      </div>\n    </div>\n  </particle-dialog>\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", "closeAttempt", "opened"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", 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 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n            [ngClass]=\"this.editor.isActive('heading', { level: 1 }) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-header fa-fw\"></i>1\r\n          </button>\r\n          <button\r\n            id=\"heading2\"\r\n            [attr.aria-label]=\"text().heading2\"\r\n            class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n            [ngClass]=\"this.editor.isActive('heading', { level: 2 }) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-header fa-fw\"></i>2\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().textDecoration) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bold\"\r\n            [attr.aria-label]=\"text().bold\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBold().run()\"\r\n            [ngClass]=\"this.editor.isActive('bold') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-bold fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"italic\"\r\n            [attr.aria-label]=\"text().italic\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n            [ngClass]=\"this.editor.isActive('italic') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-italic fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"strike\"\r\n            [attr.aria-label]=\"text().strike\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n            [ngClass]=\"this.editor.isActive('strike') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().list) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bullet-list\"\r\n            [attr.aria-label]=\"text().bulletedList\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n            [ngClass]=\"this.editor.isActive('bullet-list') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-list fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"ordered-list\"\r\n            [attr.aria-label]=\"text().orderedList\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n            [ngClass]=\"this.editor.isActive('ordered-list') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-list-ol fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().alignment) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"left-align\"\r\n            [attr.aria-label]=\"text().leftAlign\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n            [ngClass]=\"this.editor.isActive({textAlign: 'left'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-align-left fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"center-align\"\r\n            [attr.aria-label]=\"text().centerAlign\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n            [ngClass]=\"this.editor.isActive({textAlign: 'center'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-align-center fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"right-align\"\r\n            [attr.aria-label]=\"text().rightAlign\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n            [ngClass]=\"this.editor.isActive({textAlign: 'right'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-align-right fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"justify-align\"\r\n            [attr.aria-label]=\"text().justifyAlign\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n            [ngClass]=\"this.editor.isActive({textAlign: 'justify'}) ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-align-justify fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().divider) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"link\"\r\n            [attr.aria-label]=\"text().divider\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setHorizontalRule().run()\"\r\n            [ngClass]=\"this.editor.isActive('horizontalRule') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-divide fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().link) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"link\"\r\n            [attr.aria-label]=\"text().setLink\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n            (click)=\"openLinkDialog()\"\r\n            [ngClass]=\"this.editor.isActive('link') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"fas fa-link fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"unlink\"\r\n            [attr.aria-label]=\"text().removeLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n            (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n            [disabled]=\"!this.editor.isActive('link')\"\r\n          >\r\n            <i class=\"fas fa-unlink fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().images) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"image\"\r\n            [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            (click)=\"openImageDialog()\"\r\n            [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            tooltipPosition=\"top\"\r\n            [ngClass]=\"this.editor.isActive('image') ? 'ok_button_color' : 'content_color_dark_1'\"\r\n          >\r\n            <i class=\"far fa-image fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      <div class=\"col v_center pad_5\">\r\n        <button\r\n          id=\"clear-format\"\r\n          [attr.aria-label]=\"text().clearFormat\"\r\n          class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n          [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n          (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n        >\r\n          <i class=\"fas fa-text-slash fa-fw\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\r\n    <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n  </div>\r\n</div>\r\n\r\n<particle-dialog\r\n  [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n  titleClass=\"header_color min_h40\"\r\n  [object]=\"showDialog\"\r\n  [allowClose]=\"false\"\r\n  width=\"400px\"\r\n  height=\"150px\"\r\n  >\r\n  <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n    <input class=\"access input md\"\r\n      [(ngModel)]=\"dialogLink\"\r\n      [attr.aria-label]=\"text().url\"\r\n      placeholder=\"eg. https://www.google.com\"\r\n      (keyup.enter)=\"changeEditorLink('save')\"\r\n      />\r\n    </div>\r\n    <div class=\"col min_h40 footer_color\">\r\n      <div class=\"row center_right pad_right15 pad_left15\">\r\n        <div class=\"col\">\r\n          <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n            <div class=\" pad_5\">{{text().cancel}}</div>\r\n          </button>\r\n          <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n            [attr.aria-label]=\"text().update\"\r\n            (click)=\"changeEditorLink('save')\"\r\n            >\r\n            <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n            <div>{{text().update}}</div>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"] }]
+            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\">\n  @if (!this.hideControls() && this.editor.isEditable) {\n    <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\n      @if (capabilities().heading) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"heading1\"\n            [attr.aria-label]=\"text().heading1\"\n            class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\n            [ngClass]=\"this.editor.isActive('heading', { level: 1 }) ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-header fa-fw\"></i>1\n          </button>\n          <button\n            id=\"heading2\"\n            [attr.aria-label]=\"text().heading2\"\n            class=\"access btnset chip_size mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\n            [ngClass]=\"this.editor.isActive('heading', { level: 2 }) ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-header fa-fw\"></i>2\n          </button>\n        </div>\n      }\n      @if (capabilities().textDecoration) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"bold\"\n            [attr.aria-label]=\"text().bold\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleBold().run()\"\n            [ngClass]=\"this.editor.isActive('bold') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-bold fa-fw\"></i>\n          </button>\n          <button\n            id=\"italic\"\n            [attr.aria-label]=\"text().italic\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleItalic().run()\"\n            [ngClass]=\"this.editor.isActive('italic') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-italic fa-fw\"></i>\n          </button>\n          <button\n            id=\"strike\"\n            [attr.aria-label]=\"text().strike\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleStrike().run()\"\n            [ngClass]=\"this.editor.isActive('strike') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-strikethrough fa-fw\"></i>\n          </button>\n        </div>\n      }\n      @if (capabilities().list) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"bullet-list\"\n            [attr.aria-label]=\"text().bulletedList\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleBulletList().run()\"\n            [ngClass]=\"this.editor.isActive('bullet-list') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-list fa-fw\"></i>\n          </button>\n          <button\n            id=\"ordered-list\"\n            [attr.aria-label]=\"text().orderedList\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleOrderedList().run()\"\n            [ngClass]=\"this.editor.isActive('ordered-list') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-list-ol fa-fw\"></i>\n          </button>\n        </div>\n      }\n      @if (capabilities().alignment) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"left-align\"\n            [attr.aria-label]=\"text().leftAlign\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().setTextAlign('left').run()\"\n            [ngClass]=\"this.editor.isActive({textAlign: 'left'}) ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-align-left fa-fw\"></i>\n          </button>\n          <button\n            id=\"center-align\"\n            [attr.aria-label]=\"text().centerAlign\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().setTextAlign('center').run()\"\n            [ngClass]=\"this.editor.isActive({textAlign: 'center'}) ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-align-center fa-fw\"></i>\n          </button>\n          <button\n            id=\"right-align\"\n            [attr.aria-label]=\"text().rightAlign\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().setTextAlign('right').run()\"\n            [ngClass]=\"this.editor.isActive({textAlign: 'right'}) ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-align-right fa-fw\"></i>\n          </button>\n          <button\n            id=\"justify-align\"\n            [attr.aria-label]=\"text().justifyAlign\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\n            [ngClass]=\"this.editor.isActive({textAlign: 'justify'}) ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-align-justify fa-fw\"></i>\n          </button>\n        </div>\n      }\n      @if (capabilities().divider) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"link\"\n            [attr.aria-label]=\"text().divider\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().divider\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().setHorizontalRule().run()\"\n            [ngClass]=\"this.editor.isActive('horizontalRule') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-divide fa-fw\"></i>\n          </button>\n        </div>\n      }\n      @if (capabilities().link) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"link\"\n            [attr.aria-label]=\"text().setLink\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\n            (click)=\"openLinkDialog()\"\n            [ngClass]=\"this.editor.isActive('link') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"fas fa-link fa-fw\"></i>\n          </button>\n          <button\n            id=\"unlink\"\n            [attr.aria-label]=\"text().removeLink\"\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\n            (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\n            [disabled]=\"!this.editor.isActive('link')\"\n          >\n            <i class=\"fas fa-unlink fa-fw\"></i>\n          </button>\n        </div>\n      }\n      @if (capabilities().images) {\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\n          <button\n            id=\"image\"\n            [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\n            class=\"access btnset chip_size mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            (click)=\"openImageDialog()\"\n            [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\n            tooltipPosition=\"top\"\n            [ngClass]=\"this.editor.isActive('image') ? 'ok_button_color' : 'content_color_dark_1'\"\n          >\n            <i class=\"far fa-image fa-fw\"></i>\n          </button>\n        </div>\n      }\n      <div class=\"col v_center pad_5\">\n        <button\n          id=\"clear-format\"\n          [attr.aria-label]=\"text().clearFormat\"\n          class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n          [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\n          (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\n        >\n          <i class=\"fas fa-text-slash fa-fw\"></i>\n        </button>\n      </div>\n    </div>\n  }\n  <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [ngClass]=\"editorClass()\" [style.height]=\"this.height()\">\n    <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\n  </div>\n</div>\n\n<particle-dialog\n  [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\n  titleClass=\"header_color min_h40\"\n  [object]=\"showDialog\"\n  [allowClose]=\"false\"\n  width=\"400px\"\n  height=\"150px\"\n  >\n  <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\n    <input class=\"access input md\"\n      [(ngModel)]=\"dialogLink\"\n      [attr.aria-label]=\"text().url\"\n      placeholder=\"eg. https://www.google.com\"\n      (keyup.enter)=\"changeEditorLink('save')\"\n      />\n    </div>\n    <div class=\"col min_h40 footer_color\">\n      <div class=\"row center_right pad_right15 pad_left15\">\n        <div class=\"col\">\n          <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\n            <div class=\" pad_5\">{{text().cancel}}</div>\n          </button>\n          <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\n          </div>\n          <button\n            type=\"button\"\n            class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\n            [attr.aria-label]=\"text().update\"\n            (click)=\"changeEditorLink('save')\"\n            >\n            <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\n            <div>{{text().update}}</div>\n          </button>\n        </div>\n      </div>\n    </div>\n  </particle-dialog>\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"] }]
         }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hideControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideControls", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], editorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorClass", required: false }] }], readonly: [{
                 type: Input
             }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], capabilities: [{ type: i0.Input, args: [{ isSignal: true, alias: "capabilities", required: false }] }], textChanged: [{ type: i0.Output, args: ["textChanged"] }] } });
@@ -4417,11 +4458,11 @@ class CalendarComponent {
         this.selectedDate = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CalendarComponent, isStandalone: true, selector: "particle-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", closed: "closed" }, host: { listeners: { "window:keyup": "onKeyUp($event)", "window:click": "handleClick($event)" } }, viewQueries: [{ propertyName: "calendarWidgetDiv", first: true, predicate: ["calendarWidgetDiv"], descendants: true }, { propertyName: "yearSelect", first: true, predicate: ["yearSelect"], descendants: true }, { propertyName: "doneButton", first: true, predicate: ["doneButton"], descendants: true }, { propertyName: "calendarDates", predicate: ["calendarDate"], descendants: true }], ngImport: i0, template: "<div #calendarWidgetDiv\r\n  cdkTrapFocus\r\n  cdkTrapFocusAutoCapture\r\n  class=\"particle_datepicker_options\"\r\n  role=\"application\">\r\n  <!-- month / year select -->\r\n  <div class=\"content_color pad_5 pad_bot0\">\r\n    <div class=\"row space_between\">\r\n      <div class=\"col size_1 mar_5\">\r\n        <select #yearSelect\r\n          [ngModel]=\"_selectedYear | async\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAYear\">\r\n          @for (year of validYearRange$ | async; track $index) {\r\n            <option\r\n              [value]=\"year\">\r\n              {{year}}\r\n            </option>\r\n          }\r\n        </select>\r\n      </div>\r\n      <div class=\"col size_2 mar_5\">\r\n        <select #monthSelect\r\n          [ngModel]=\"_selectedMonth | async\"\r\n          (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAMonth\">\r\n          <option value=\"0\">{{text.january}}</option>\r\n          <option value=\"1\">{{text.february}}</option>\r\n          <option value=\"2\">{{text.march}}</option>\r\n          <option value=\"3\">{{text.april}}</option>\r\n          <option value=\"4\">{{text.may}}</option>\r\n          <option value=\"5\">{{text.june}}</option>\r\n          <option value=\"6\">{{text.july}}</option>\r\n          <option value=\"7\">{{text.august}}</option>\r\n          <option value=\"8\">{{text.september}}</option>\r\n          <option value=\"9\">{{text.october}}</option>\r\n          <option value=\"10\">{{text.november}}</option>\r\n          <option value=\"11\">{{text.december}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"content_color pad_5\">\r\n    <!-- weekdays -->\r\n    <div class=\"mar_5 mar_bot10 ent_l2r_dir\">\r\n      <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n        <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\r\n      </div>\r\n      <!-- days -->\r\n      <div class=\"row wrap space_between\">\r\n        @for (dayInMonth of fullMonth$ | async; track $index) {\r\n          <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\r\n            class=\"particle_datepicker_day\">\r\n            @if (dayInMonth.selectable) {\r\n              <button #calendarDate\r\n                (click)=\"handleDateSelection(dayInMonth)\"\r\n                (keyup.escape)=\"closed.emit()\"\r\n                [attr.data-date]=\"dayInMonth.date\"\r\n                [attr.data-dialog-close-override]=\"true\"\r\n                [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\r\n                      [ngClass]=\"{\r\n                        'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\r\n                        'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\r\n                      }\"\r\n                class=\"access day_button\">\r\n                {{dayInMonth.date}}\r\n              </button>\r\n            } @else {\r\n              <div class=\"day_disabled\">\r\n                {{dayInMonth.date}}\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (showControls()) {\r\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n      <div class=\"row space_between\">\r\n        @if (currentDate.selectable) {\r\n          @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\r\n            <button\r\n              disabled\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          } @else {\r\n            <button (keyup.escape)=\"closed.emit()\"\r\n              (click)=\"selectToday()\"\r\n              [attr.data-dialog-close-override]=\"true\"\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          }\r\n        }\r\n        <button #doneButton\r\n          (keyup.escape)=\"closed.emit()\"\r\n          (click)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n          [attr.aria-label]=\"text.saveDate\">\r\n          <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".particle_datepicker_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);width:300px}.particle_datepicker_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.particle_datepicker_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent}.particle_datepicker_day.today{background-color:#8080801a}.particle_datepicker_day .day_button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;display:flex;flex:1;width:100%;align-items:center;justify-content:center;padding:0;border-radius:3px}.particle_datepicker_day .day_disabled{opacity:.3;display:flex;flex:1;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: OrdinalNumberPipe, name: "ordinalNumber" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: CalendarComponent, isStandalone: true, selector: "particle-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", closed: "closed" }, host: { listeners: { "window:keyup": "onKeyUp($event)", "window:click": "handleClick($event)" } }, viewQueries: [{ propertyName: "calendarWidgetDiv", first: true, predicate: ["calendarWidgetDiv"], descendants: true }, { propertyName: "yearSelect", first: true, predicate: ["yearSelect"], descendants: true }, { propertyName: "doneButton", first: true, predicate: ["doneButton"], descendants: true }, { propertyName: "calendarDates", predicate: ["calendarDate"], descendants: true }], ngImport: i0, template: "<div #calendarWidgetDiv\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  class=\"particle_datepicker_options\"\n  role=\"application\">\n  <!-- month / year select -->\n  <div class=\"content_color pad_5 pad_bot0\">\n    <div class=\"row space_between\">\n      <div class=\"col size_1 mar_5\">\n        <select #yearSelect\n          [ngModel]=\"_selectedYear | async\"\n          [attr.data-dialog-close-override]=\"true\"\n          (change)=\"_selectedYear.next(+yearSelect.value)\"\n          (keyup.escape)=\"closed.emit()\"\n          class=\"access input sm content_color\"\n          [attr.aria-label]=\"text.selectAYear\">\n          @for (year of validYearRange$ | async; track $index) {\n            <option\n              [value]=\"year\">\n              {{year}}\n            </option>\n          }\n        </select>\n      </div>\n      <div class=\"col size_2 mar_5\">\n        <select #monthSelect\n          [ngModel]=\"_selectedMonth | async\"\n          (change)=\"_selectedMonth.next(+monthSelect.value)\"\n          (keyup.escape)=\"closed.emit()\"\n          [attr.data-dialog-close-override]=\"true\"\n          class=\"access input sm content_color\"\n          [attr.aria-label]=\"text.selectAMonth\">\n          <option value=\"0\">{{text.january}}</option>\n          <option value=\"1\">{{text.february}}</option>\n          <option value=\"2\">{{text.march}}</option>\n          <option value=\"3\">{{text.april}}</option>\n          <option value=\"4\">{{text.may}}</option>\n          <option value=\"5\">{{text.june}}</option>\n          <option value=\"6\">{{text.july}}</option>\n          <option value=\"7\">{{text.august}}</option>\n          <option value=\"8\">{{text.september}}</option>\n          <option value=\"9\">{{text.october}}</option>\n          <option value=\"10\">{{text.november}}</option>\n          <option value=\"11\">{{text.december}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n  <div class=\"content_color pad_5\">\n    <!-- weekdays -->\n    <div class=\"mar_5 mar_bot10 ent_l2r_dir\">\n      <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\n        <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\n        <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\n        <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\n        <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\n        <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\n        <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\n        <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\n      </div>\n      <!-- days -->\n      <div class=\"row wrap space_between\">\n        @for (dayInMonth of fullMonth$ | async; track $index) {\n          <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\n            class=\"particle_datepicker_day\">\n            @if (dayInMonth.selectable) {\n              <button #calendarDate\n                (click)=\"handleDateSelection(dayInMonth)\"\n                (keyup.escape)=\"closed.emit()\"\n                [attr.data-date]=\"dayInMonth.date\"\n                [attr.data-dialog-close-override]=\"true\"\n                [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\n                      [ngClass]=\"{\n                        'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\n                        'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\n                      }\"\n                class=\"access day_button\">\n                {{dayInMonth.date}}\n              </button>\n            } @else {\n              <div class=\"day_disabled\">\n                {{dayInMonth.date}}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n    @if (showControls()) {\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\n      <div class=\"row space_between\">\n        @if (currentDate.selectable) {\n          @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\n            <button\n              disabled\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\n              [attr.aria-label]=\"text.resetDateToToday\">\n              <span class=\"text bold\">{{text.selectToday}}</span>\n            </button>\n          } @else {\n            <button (keyup.escape)=\"closed.emit()\"\n              (click)=\"selectToday()\"\n              [attr.data-dialog-close-override]=\"true\"\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\n              [attr.aria-label]=\"text.resetDateToToday\">\n              <span class=\"text bold\">{{text.selectToday}}</span>\n            </button>\n          }\n        }\n        <button #doneButton\n          (keyup.escape)=\"closed.emit()\"\n          (click)=\"closed.emit()\"\n          [attr.data-dialog-close-override]=\"true\"\n          class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\n          [attr.aria-label]=\"text.saveDate\">\n          <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\n        </button>\n      </div>\n    }\n  </div>\n</div>\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: "21.1.5", 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 ent_l2r_dir\">\r\n      <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n        <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\r\n      </div>\r\n      <!-- days -->\r\n      <div class=\"row wrap space_between\">\r\n        @for (dayInMonth of fullMonth$ | async; track $index) {\r\n          <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\r\n            class=\"particle_datepicker_day\">\r\n            @if (dayInMonth.selectable) {\r\n              <button #calendarDate\r\n                (click)=\"handleDateSelection(dayInMonth)\"\r\n                (keyup.escape)=\"closed.emit()\"\r\n                [attr.data-date]=\"dayInMonth.date\"\r\n                [attr.data-dialog-close-override]=\"true\"\r\n                [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\r\n                      [ngClass]=\"{\r\n                        'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\r\n                        'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\r\n                      }\"\r\n                class=\"access day_button\">\r\n                {{dayInMonth.date}}\r\n              </button>\r\n            } @else {\r\n              <div class=\"day_disabled\">\r\n                {{dayInMonth.date}}\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (showControls()) {\r\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n      <div class=\"row space_between\">\r\n        @if (currentDate.selectable) {\r\n          @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\r\n            <button\r\n              disabled\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          } @else {\r\n            <button (keyup.escape)=\"closed.emit()\"\r\n              (click)=\"selectToday()\"\r\n              [attr.data-dialog-close-override]=\"true\"\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          }\r\n        }\r\n        <button #doneButton\r\n          (keyup.escape)=\"closed.emit()\"\r\n          (click)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n          [attr.aria-label]=\"text.saveDate\">\r\n          <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".particle_datepicker_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);width:300px}.particle_datepicker_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.particle_datepicker_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent}.particle_datepicker_day.today{background-color:#8080801a}.particle_datepicker_day .day_button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;display:flex;flex:1;width:100%;align-items:center;justify-content:center;padding:0;border-radius:3px}.particle_datepicker_day .day_disabled{opacity:.3;display:flex;flex:1;align-items:center;justify-content:center}\n"] }]
+            args: [{ selector: 'particle-calendar', imports: [CdkTrapFocus, FormsModule, NgClass, AsyncPipe, OrdinalNumberPipe], template: "<div #calendarWidgetDiv\n  cdkTrapFocus\n  cdkTrapFocusAutoCapture\n  class=\"particle_datepicker_options\"\n  role=\"application\">\n  <!-- month / year select -->\n  <div class=\"content_color pad_5 pad_bot0\">\n    <div class=\"row space_between\">\n      <div class=\"col size_1 mar_5\">\n        <select #yearSelect\n          [ngModel]=\"_selectedYear | async\"\n          [attr.data-dialog-close-override]=\"true\"\n          (change)=\"_selectedYear.next(+yearSelect.value)\"\n          (keyup.escape)=\"closed.emit()\"\n          class=\"access input sm content_color\"\n          [attr.aria-label]=\"text.selectAYear\">\n          @for (year of validYearRange$ | async; track $index) {\n            <option\n              [value]=\"year\">\n              {{year}}\n            </option>\n          }\n        </select>\n      </div>\n      <div class=\"col size_2 mar_5\">\n        <select #monthSelect\n          [ngModel]=\"_selectedMonth | async\"\n          (change)=\"_selectedMonth.next(+monthSelect.value)\"\n          (keyup.escape)=\"closed.emit()\"\n          [attr.data-dialog-close-override]=\"true\"\n          class=\"access input sm content_color\"\n          [attr.aria-label]=\"text.selectAMonth\">\n          <option value=\"0\">{{text.january}}</option>\n          <option value=\"1\">{{text.february}}</option>\n          <option value=\"2\">{{text.march}}</option>\n          <option value=\"3\">{{text.april}}</option>\n          <option value=\"4\">{{text.may}}</option>\n          <option value=\"5\">{{text.june}}</option>\n          <option value=\"6\">{{text.july}}</option>\n          <option value=\"7\">{{text.august}}</option>\n          <option value=\"8\">{{text.september}}</option>\n          <option value=\"9\">{{text.october}}</option>\n          <option value=\"10\">{{text.november}}</option>\n          <option value=\"11\">{{text.december}}</option>\n        </select>\n      </div>\n    </div>\n  </div>\n  <div class=\"content_color pad_5\">\n    <!-- weekdays -->\n    <div class=\"mar_5 mar_bot10 ent_l2r_dir\">\n      <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\n        <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\n        <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\n        <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\n        <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\n        <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\n        <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\n        <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\n      </div>\n      <!-- days -->\n      <div class=\"row wrap space_between\">\n        @for (dayInMonth of fullMonth$ | async; track $index) {\n          <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\n            class=\"particle_datepicker_day\">\n            @if (dayInMonth.selectable) {\n              <button #calendarDate\n                (click)=\"handleDateSelection(dayInMonth)\"\n                (keyup.escape)=\"closed.emit()\"\n                [attr.data-date]=\"dayInMonth.date\"\n                [attr.data-dialog-close-override]=\"true\"\n                [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\n                      [ngClass]=\"{\n                        'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\n                        'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\n                      }\"\n                class=\"access day_button\">\n                {{dayInMonth.date}}\n              </button>\n            } @else {\n              <div class=\"day_disabled\">\n                {{dayInMonth.date}}\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n    @if (showControls()) {\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\n      <div class=\"row space_between\">\n        @if (currentDate.selectable) {\n          @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\n            <button\n              disabled\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\n              [attr.aria-label]=\"text.resetDateToToday\">\n              <span class=\"text bold\">{{text.selectToday}}</span>\n            </button>\n          } @else {\n            <button (keyup.escape)=\"closed.emit()\"\n              (click)=\"selectToday()\"\n              [attr.data-dialog-close-override]=\"true\"\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\n              [attr.aria-label]=\"text.resetDateToToday\">\n              <span class=\"text bold\">{{text.selectToday}}</span>\n            </button>\n          }\n        }\n        <button #doneButton\n          (keyup.escape)=\"closed.emit()\"\n          (click)=\"closed.emit()\"\n          [attr.data-dialog-close-override]=\"true\"\n          class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\n          [attr.aria-label]=\"text.saveDate\">\n          <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\n        </button>\n      </div>\n    }\n  </div>\n</div>\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: [{
                 type: ViewChild,
                 args: ['calendarWidgetDiv']
@@ -4902,7 +4943,7 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "datePickerDiv", first: true, predicate: ["datePickerDiv"], descendants: true }, { propertyName: "calendarDiv", first: true, predicate: ["calendarDiv"], descendants: true }, { propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true }], ngImport: i0, template: "@if (!isMobile) {\r\n  <div #datePickerDiv\r\n    style=\"overflow: hidden;\"\r\n    [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n    [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n    >\r\n    <div class=\"col size_1 height100 width100\">\r\n      <input #dateInput\r\n        [(ngModel)]=\"dateString\"\r\n        [id]=\"inputId()\"\r\n        (keydown)=\"filterInput($event)\"\r\n        (input)=\"handleInput()\"\r\n        (blur)=\"onTouched(); handleBlur()\"\r\n        type=\"text\"\r\n        [placeholder]=\"placeholder()\"\r\n        maxlength=\"10\"\r\n        [attr.aria-label]=\"ariaLabel() + ', ' + text.enterInFormat + ' mm/dd/yyyy'\"\r\n        [disabled]=\"disabled\"\r\n        [ngClass]=\"inputClassList() ? inputClassList() : 'ptl_input_text_size ptl_input_padding border_none'\"\r\n        style=\"outline-offset: -2px;\"\r\n        class=\"access height100 width100\"/>\r\n      </div>\r\n      @if (!inputOnly()) {\r\n        <div class=\"col center_center min_w50 height100\">\r\n          <button type=\"button\"\r\n            (click)=\"openCalendar($event)\"\r\n            [disabled]=\"disabled\"\r\n            [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\"\r\n            class=\"access btnset center_center height100 width100\"\r\n            style=\"outline-offset: -2px;\"\r\n            [attr.aria-label]=\"text.openCalendar\" aria-haspopup=\"dialog\">\r\n            <i class=\"fas fa-calendar-day\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n    <!-- calendar widget -->\r\n    <particle-popover [targetOverride]=\"dateInput\" #calendarPopover>\r\n      <particle-calendar [value]=\"showCalendar ? showCalendar.currentValue : $any(null)\"\r\n        [text]=\"$any(text.calendarText)\"\r\n        [dateRange]=\"{ minDate: validSelectionInterval.start!, maxDate: validSelectionInterval.end! }\"\r\n        (selected)=\"updateModel($event)\"\r\n        (closed)=\"handleCalendarClose()\">\r\n      </particle-calendar>\r\n    </particle-popover>\r\n  } @else {\r\n    <div style=\"overflow: hidden;\"\r\n      [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n      [ngClass]=\"inputClassList() ? '' : 'ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius'\"\r\n      >\r\n      <div class=\"col size_1 height100 width100\">\r\n        <input [(ngModel)]=\"mobileDateString\"\r\n          [id]=\"inputId()\"\r\n          (input)=\"handleMobileInput()\"\r\n          (blur)=\"onTouched()\"\r\n          type=\"date\"\r\n          [placeholder]=\"placeholder()\"\r\n          [attr.aria-label]=\"ariaLabel()\"\r\n          [disabled]=\"disabled\"\r\n          [ngClass]=\"inputClassList() ? inputClassList() : 'ptl_input_text_size ptl_input_padding border_none'\"\r\n          style=\"outline-offset: -2px;\"\r\n          class=\"access height100 width100\"/>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n", styles: [":host{width:100%}.particle_datepicker_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_datepicker{width:100%;min-width:150px;position:relative}.particle_datepicker:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_datepicker_input{position:absolute;inset:0;padding:inherit;width:calc(100% - 2.25em);-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;background-color:transparent;color:inherit}.particle_datepicker_input::-ms-expand{display:none}.particle_datepicker_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "component", type: CalendarComponent, selector: "particle-calendar", inputs: ["value", "dateRange", "text", "showControls"], outputs: ["selected", "closed"] }] });
+        ], viewQueries: [{ propertyName: "datePickerDiv", first: true, predicate: ["datePickerDiv"], descendants: true }, { propertyName: "calendarDiv", first: true, predicate: ["calendarDiv"], descendants: true }, { propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true }], ngImport: i0, template: "@if (!isMobile) {\n  <div #datePickerDiv\n    style=\"overflow: hidden;\"\n    [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\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'\"\n    >\n    <div class=\"col size_1 height100 width100\">\n      <input #dateInput\n        [(ngModel)]=\"dateString\"\n        [id]=\"inputId()\"\n        (keydown)=\"filterInput($event)\"\n        (input)=\"handleInput()\"\n        (blur)=\"onTouched(); handleBlur()\"\n        type=\"text\"\n        [placeholder]=\"placeholder()\"\n        maxlength=\"10\"\n        [attr.aria-label]=\"ariaLabel() + ', ' + text.enterInFormat + ' mm/dd/yyyy'\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"inputClassList() ? inputClassList() : 'ptl_input_text_size ptl_input_padding border_none'\"\n        style=\"outline-offset: -2px;\"\n        class=\"access height100 width100\"/>\n      </div>\n      @if (!inputOnly()) {\n        <div class=\"col center_center min_w50 height100\">\n          <button type=\"button\"\n            (click)=\"openCalendar($event)\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\"\n            class=\"access btnset center_center height100 width100\"\n            style=\"outline-offset: -2px;\"\n            [attr.aria-label]=\"text.openCalendar\" aria-haspopup=\"dialog\">\n            <i class=\"fas fa-calendar-day\"></i>\n          </button>\n        </div>\n      }\n    </div>\n    <!-- calendar widget -->\n    <particle-popover [targetOverride]=\"dateInput\" #calendarPopover>\n      <particle-calendar [value]=\"showCalendar ? showCalendar.currentValue : $any(null)\"\n        [text]=\"$any(text.calendarText)\"\n        [dateRange]=\"{ minDate: validSelectionInterval.start!, maxDate: validSelectionInterval.end! }\"\n        (selected)=\"updateModel($event)\"\n        (closed)=\"handleCalendarClose()\">\n      </particle-calendar>\n    </particle-popover>\n  } @else {\n    <div style=\"overflow: hidden;\"\n      [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\n      [ngClass]=\"inputClassList() ? '' : 'ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius'\"\n      >\n      <div class=\"col size_1 height100 width100\">\n        <input [(ngModel)]=\"mobileDateString\"\n          [id]=\"inputId()\"\n          (input)=\"handleMobileInput()\"\n          (blur)=\"onTouched()\"\n          type=\"date\"\n          [placeholder]=\"placeholder()\"\n          [attr.aria-label]=\"ariaLabel()\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"inputClassList() ? inputClassList() : 'ptl_input_text_size ptl_input_padding border_none'\"\n          style=\"outline-offset: -2px;\"\n          class=\"access height100 width100\"/>\n        </div>\n      </div>\n    }\n\n", styles: [":host{width:100%}.particle_datepicker_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_datepicker{width:100%;min-width:150px;position:relative}.particle_datepicker:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_datepicker_input{position:absolute;inset:0;padding:inherit;width:calc(100% - 2.25em);-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;background-color:transparent;color:inherit}.particle_datepicker_input::-ms-expand{display:none}.particle_datepicker_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed", "arrowDown", "arrowUp"] }, { kind: "component", type: CalendarComponent, selector: "particle-calendar", inputs: ["value", "dateRange", "text", "showControls"], outputs: ["selected", "closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -4912,7 +4953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true
                         }
-                    ], imports: [NgClass, FormsModule, PopoverComponent, CalendarComponent], template: "@if (!isMobile) {\r\n  <div #datePickerDiv\r\n    style=\"overflow: hidden;\"\r\n    [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n    [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n    >\r\n    <div class=\"col size_1 height100 width100\">\r\n      <input #dateInput\r\n        [(ngModel)]=\"dateString\"\r\n        [id]=\"inputId()\"\r\n        (keydown)=\"filterInput($event)\"\r\n        (input)=\"handleInput()\"\r\n        (blur)=\"onTouched(); handleBlur()\"\r\n        type=\"text\"\r\n        [placeholder]=\"placeholder()\"\r\n        maxlength=\"10\"\r\n        [attr.aria-label]=\"ariaLabel() + ', ' + text.enterInFormat + ' mm/dd/yyyy'\"\r\n        [disabled]=\"disabled\"\r\n        [ngClass]=\"inputClassList() ? inputClassList() : 'ptl_input_text_size ptl_input_padding border_none'\"\r\n        style=\"outline-offset: -2px;\"\r\n        class=\"access height100 width100\"/>\r\n      </div>\r\n      @if (!inputOnly()) {\r\n        <div class=\"col center_center min_w50 height100\">\r\n          <button type=\"button\"\r\n            (click)=\"openCalendar($event)\"\r\n            [disabled]=\"disabled\"\r\n            [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\"\r\n            class=\"access btnset center_center height100 width100\"\r\n            style=\"outline-offset: -2px;\"\r\n            [attr.aria-label]=\"text.openCalendar\" aria-haspopup=\"dialog\">\r\n            <i class=\"fas fa-calendar-day\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n    <!-- calendar widget -->\r\n    <particle-popover [targetOverride]=\"dateInput\" #calendarPopover>\r\n      <particle-calendar [value]=\"showCalendar ? showCalendar.currentValue : $any(null)\"\r\n        [text]=\"$any(text.calendarText)\"\r\n        [dateRange]=\"{ minDate: validSelectionInterval.start!, maxDate: validSelectionInterval.end! }\"\r\n        (selected)=\"updateModel($event)\"\r\n        (closed)=\"handleCalendarClose()\">\r\n      </particle-calendar>\r\n    </particle-popover>\r\n  } @else {\r\n    <div style=\"overflow: hidden;\"\r\n      [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\r\n      [ngClass]=\"inputClassList() ? '' : 'ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius'\"\r\n      >\r\n      <div class=\"col size_1 height100 width100\">\r\n        <input [(ngModel)]=\"mobileDateString\"\r\n          [id]=\"inputId()\"\r\n          (input)=\"handleMobileInput()\"\r\n          (blur)=\"onTouched()\"\r\n          type=\"date\"\r\n          [placeholder]=\"placeholder()\"\r\n          [attr.aria-label]=\"ariaLabel()\"\r\n          [disabled]=\"disabled\"\r\n          [ngClass]=\"inputClassList() ? inputClassList() : 'ptl_input_text_size ptl_input_padding border_none'\"\r\n          style=\"outline-offset: -2px;\"\r\n          class=\"access height100 width100\"/>\r\n        </div>\r\n      </div>\r\n    }\r\n\r\n", styles: [":host{width:100%}.particle_datepicker_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_datepicker{width:100%;min-width:150px;position:relative}.particle_datepicker:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_datepicker_input{position:absolute;inset:0;padding:inherit;width:calc(100% - 2.25em);-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;background-color:transparent;color:inherit}.particle_datepicker_input::-ms-expand{display:none}.particle_datepicker_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px}\n"] }]
+                    ], imports: [NgClass, FormsModule, PopoverComponent, CalendarComponent], template: "@if (!isMobile) {\n  <div #datePickerDiv\n    style=\"overflow: hidden;\"\n    [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\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'\"\n    >\n    <div class=\"col size_1 height100 width100\">\n      <input #dateInput\n        [(ngModel)]=\"dateString\"\n        [id]=\"inputId()\"\n        (keydown)=\"filterInput($event)\"\n        (input)=\"handleInput()\"\n        (blur)=\"onTouched(); handleBlur()\"\n        type=\"text\"\n        [placeholder]=\"placeholder()\"\n        maxlength=\"10\"\n        [attr.aria-label]=\"ariaLabel() + ', ' + text.enterInFormat + ' mm/dd/yyyy'\"\n        [disabled]=\"disabled\"\n        [ngClass]=\"inputClassList() ? inputClassList() : 'ptl_input_text_size ptl_input_padding border_none'\"\n        style=\"outline-offset: -2px;\"\n        class=\"access height100 width100\"/>\n      </div>\n      @if (!inputOnly()) {\n        <div class=\"col center_center min_w50 height100\">\n          <button type=\"button\"\n            (click)=\"openCalendar($event)\"\n            [disabled]=\"disabled\"\n            [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\"\n            class=\"access btnset center_center height100 width100\"\n            style=\"outline-offset: -2px;\"\n            [attr.aria-label]=\"text.openCalendar\" aria-haspopup=\"dialog\">\n            <i class=\"fas fa-calendar-day\"></i>\n          </button>\n        </div>\n      }\n    </div>\n    <!-- calendar widget -->\n    <particle-popover [targetOverride]=\"dateInput\" #calendarPopover>\n      <particle-calendar [value]=\"showCalendar ? showCalendar.currentValue : $any(null)\"\n        [text]=\"$any(text.calendarText)\"\n        [dateRange]=\"{ minDate: validSelectionInterval.start!, maxDate: validSelectionInterval.end! }\"\n        (selected)=\"updateModel($event)\"\n        (closed)=\"handleCalendarClose()\">\n      </particle-calendar>\n    </particle-popover>\n  } @else {\n    <div style=\"overflow: hidden;\"\n      [style.filter]=\"disabled ? 'brightness(.95)' : ''\"\n      [ngClass]=\"inputClassList() ? '' : 'ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius'\"\n      >\n      <div class=\"col size_1 height100 width100\">\n        <input [(ngModel)]=\"mobileDateString\"\n          [id]=\"inputId()\"\n          (input)=\"handleMobileInput()\"\n          (blur)=\"onTouched()\"\n          type=\"date\"\n          [placeholder]=\"placeholder()\"\n          [attr.aria-label]=\"ariaLabel()\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"inputClassList() ? inputClassList() : 'ptl_input_text_size ptl_input_padding border_none'\"\n          style=\"outline-offset: -2px;\"\n          class=\"access height100 width100\"/>\n        </div>\n      </div>\n    }\n\n", styles: [":host{width:100%}.particle_datepicker_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_datepicker{width:100%;min-width:150px;position:relative}.particle_datepicker:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_datepicker_input{position:absolute;inset:0;padding:inherit;width:calc(100% - 2.25em);-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;background-color:transparent;color:inherit}.particle_datepicker_input::-ms-expand{display:none}.particle_datepicker_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -5137,7 +5178,7 @@ class DateRangePickerComponent {
                 useExisting: forwardRef(() => DateRangePickerComponent),
                 multi: true
             }
-        ], 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" }] });
+        ], 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;\"\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'\"\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\n  <button (click)=\"openCalendar($event)\"\n    type=\"button\"\n    aria-haspopup=\"dialog\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"(ariaLabel() ? ariaLabel() + ', ' : '') + text().openCalendar\"\n    [attr.aria-expanded]=\"calendarPopover.visible\"\n    [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\n    class=\"access btnset width100 height100 center_center\"\n    style=\"outline-offset: -2px;\"\n    >\n    <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\n      @if (valueObs$ | async; as value) {\n        @if (value.start && value.end) {\n          {{value.start | date: dateFormat()}} - {{value.end | date: dateFormat()}}\n        } @else {\n          <div class=\"ent_r2l_txt\">{{text().selectRange}}...</div>\n        }\n      }\n    </div>\n    <div class=\"col min_w50 height100 center_center\"\n      [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\n      <div class=\"width100 height100 center_center\">\n        <i class=\"fas fa-calendar-days ptl_input_text_size\"></i>\n      </div>\n    </div>\n  </button>\n</div>\n\n<particle-popover (closed)=\"checkState()\" #calendarPopover>\n  <div class=\"width100 space_between\">\n    <div>\n      <div class=\"pad_10 pad_bot0\">\n        <div>{{text().begin}}:</div>\n        <div>\n          <particle-date-picker\n            inputClassList=\"access input sm content_color\"\n            [inputOnly]=\"true\"\n            [(ngModel)]=\"beginDate\"\n            [dateRange]=\"dateRange\">\n          </particle-date-picker>\n        </div>\n      </div>\n      <particle-calendar [value]=\"beginDate\"\n        [text]=\"$any(text().calendarText)\"\n        [dateRange]=\"dateRange\"\n        [showControls]=\"false\"\n        class=\"hide_element\"\n        (selected)=\"updateModel(true, $event)\"\n        #beginCalendar>\n      </particle-calendar>\n    </div>\n    <div>\n      <div class=\"pad_10 pad_bot0\">\n        <div>{{text().end}}:</div>\n        <div>\n          <particle-date-picker\n            inputClassList=\"access input sm content_color\"\n            [inputOnly]=\"true\"\n            [dateRange]=\"endDateRange\"\n            [(ngModel)]=\"endDate\">\n          </particle-date-picker>\n        </div>\n      </div>\n      <particle-calendar [value]=\"endDate\"\n        [text]=\"$any(text().calendarText)\"\n        [dateRange]=\"endDateRange\"\n        [showControls]=\"false\"\n        class=\"hide_element\"\n        (selected)=\"updateModel(false, $event)\"\n        #endCalendar>\n      </particle-calendar>\n      <div class=\"mobile_only pad_bot10\"></div>\n    </div>\n  </div>\n  <div class=\"bg_overlay brdr hr mar_5 mar_top0\"></div>\n  <div class=\"row space_between\">\n    <button (click)=\"clear()\"\n      class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\n      [attr.aria-label]=\"text().clear\">\n      <i class=\"fas fa-x mar_right5\"></i><span class=\"text bold\">{{text().clear}}</span>\n    </button>\n\n    <button (keyup.escape)=\"calendarPopover.close()\"\n      (click)=\"calendarPopover.close()\"\n      [attr.data-dialog-close-override]=\"true\"\n      class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\n      [attr.aria-label]=\"text().done\">\n      <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text().done}}</span>\n    </button>\n  </div>\n</particle-popover>\n\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", "arrowDown", "arrowUp"] }, { 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: "21.1.5", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -5147,7 +5188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true
                         }
-                    ], imports: [NgClass, PopoverComponent, DatePickerComponent, FormsModule, CalendarComponent, AsyncPipe, DatePipe], template: "<div style=\"cursor:default;overflow: hidden;\"\r\n  [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n  <button (click)=\"openCalendar($event)\"\r\n    type=\"button\"\r\n    aria-haspopup=\"dialog\"\r\n    [disabled]=\"disabled\"\r\n    [attr.aria-label]=\"(ariaLabel() ? ariaLabel() + ', ' : '') + text().openCalendar\"\r\n    [attr.aria-expanded]=\"calendarPopover.visible\"\r\n    [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\r\n    class=\"access btnset width100 height100 center_center\"\r\n    style=\"outline-offset: -2px;\"\r\n    >\r\n    <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\r\n      @if (valueObs$ | async; as value) {\r\n        @if (value.start && value.end) {\r\n          {{value.start | date: dateFormat()}} - {{value.end | date: dateFormat()}}\r\n        } @else {\r\n          <div class=\"ent_r2l_txt\">{{text().selectRange}}...</div>\r\n        }\r\n      }\r\n    </div>\r\n    <div class=\"col min_w50 height100 center_center\"\r\n      [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\r\n      <div class=\"width100 height100 center_center\">\r\n        <i class=\"fas fa-calendar-days ptl_input_text_size\"></i>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<particle-popover (closed)=\"checkState()\" #calendarPopover>\r\n  <div class=\"width100 space_between\">\r\n    <div>\r\n      <div class=\"pad_10 pad_bot0\">\r\n        <div>{{text().begin}}:</div>\r\n        <div>\r\n          <particle-date-picker\r\n            inputClassList=\"access input sm content_color\"\r\n            [inputOnly]=\"true\"\r\n            [(ngModel)]=\"beginDate\"\r\n            [dateRange]=\"dateRange\">\r\n          </particle-date-picker>\r\n        </div>\r\n      </div>\r\n      <particle-calendar [value]=\"beginDate\"\r\n        [text]=\"$any(text().calendarText)\"\r\n        [dateRange]=\"dateRange\"\r\n        [showControls]=\"false\"\r\n        class=\"hide_element\"\r\n        (selected)=\"updateModel(true, $event)\"\r\n        #beginCalendar>\r\n      </particle-calendar>\r\n    </div>\r\n    <div>\r\n      <div class=\"pad_10 pad_bot0\">\r\n        <div>{{text().end}}:</div>\r\n        <div>\r\n          <particle-date-picker\r\n            inputClassList=\"access input sm content_color\"\r\n            [inputOnly]=\"true\"\r\n            [dateRange]=\"endDateRange\"\r\n            [(ngModel)]=\"endDate\">\r\n          </particle-date-picker>\r\n        </div>\r\n      </div>\r\n      <particle-calendar [value]=\"endDate\"\r\n        [text]=\"$any(text().calendarText)\"\r\n        [dateRange]=\"endDateRange\"\r\n        [showControls]=\"false\"\r\n        class=\"hide_element\"\r\n        (selected)=\"updateModel(false, $event)\"\r\n        #endCalendar>\r\n      </particle-calendar>\r\n      <div class=\"mobile_only pad_bot10\"></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"bg_overlay brdr hr mar_5 mar_top0\"></div>\r\n  <div class=\"row space_between\">\r\n    <button (click)=\"clear()\"\r\n      class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n      [attr.aria-label]=\"text().clear\">\r\n      <i class=\"fas fa-x mar_right5\"></i><span class=\"text bold\">{{text().clear}}</span>\r\n    </button>\r\n\r\n    <button (keyup.escape)=\"calendarPopover.close()\"\r\n      (click)=\"calendarPopover.close()\"\r\n      [attr.data-dialog-close-override]=\"true\"\r\n      class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n      [attr.aria-label]=\"text().done\">\r\n      <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text().done}}</span>\r\n    </button>\r\n  </div>\r\n</particle-popover>\r\n\r\n", styles: [":host{width:100%}\n"] }]
+                    ], imports: [NgClass, PopoverComponent, DatePickerComponent, FormsModule, CalendarComponent, AsyncPipe, DatePipe], template: "<div style=\"cursor:default;overflow: hidden;\"\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'\"\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\n  <button (click)=\"openCalendar($event)\"\n    type=\"button\"\n    aria-haspopup=\"dialog\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"(ariaLabel() ? ariaLabel() + ', ' : '') + text().openCalendar\"\n    [attr.aria-expanded]=\"calendarPopover.visible\"\n    [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\n    class=\"access btnset width100 height100 center_center\"\n    style=\"outline-offset: -2px;\"\n    >\n    <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\n      @if (valueObs$ | async; as value) {\n        @if (value.start && value.end) {\n          {{value.start | date: dateFormat()}} - {{value.end | date: dateFormat()}}\n        } @else {\n          <div class=\"ent_r2l_txt\">{{text().selectRange}}...</div>\n        }\n      }\n    </div>\n    <div class=\"col min_w50 height100 center_center\"\n      [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\n      <div class=\"width100 height100 center_center\">\n        <i class=\"fas fa-calendar-days ptl_input_text_size\"></i>\n      </div>\n    </div>\n  </button>\n</div>\n\n<particle-popover (closed)=\"checkState()\" #calendarPopover>\n  <div class=\"width100 space_between\">\n    <div>\n      <div class=\"pad_10 pad_bot0\">\n        <div>{{text().begin}}:</div>\n        <div>\n          <particle-date-picker\n            inputClassList=\"access input sm content_color\"\n            [inputOnly]=\"true\"\n            [(ngModel)]=\"beginDate\"\n            [dateRange]=\"dateRange\">\n          </particle-date-picker>\n        </div>\n      </div>\n      <particle-calendar [value]=\"beginDate\"\n        [text]=\"$any(text().calendarText)\"\n        [dateRange]=\"dateRange\"\n        [showControls]=\"false\"\n        class=\"hide_element\"\n        (selected)=\"updateModel(true, $event)\"\n        #beginCalendar>\n      </particle-calendar>\n    </div>\n    <div>\n      <div class=\"pad_10 pad_bot0\">\n        <div>{{text().end}}:</div>\n        <div>\n          <particle-date-picker\n            inputClassList=\"access input sm content_color\"\n            [inputOnly]=\"true\"\n            [dateRange]=\"endDateRange\"\n            [(ngModel)]=\"endDate\">\n          </particle-date-picker>\n        </div>\n      </div>\n      <particle-calendar [value]=\"endDate\"\n        [text]=\"$any(text().calendarText)\"\n        [dateRange]=\"endDateRange\"\n        [showControls]=\"false\"\n        class=\"hide_element\"\n        (selected)=\"updateModel(false, $event)\"\n        #endCalendar>\n      </particle-calendar>\n      <div class=\"mobile_only pad_bot10\"></div>\n    </div>\n  </div>\n  <div class=\"bg_overlay brdr hr mar_5 mar_top0\"></div>\n  <div class=\"row space_between\">\n    <button (click)=\"clear()\"\n      class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\n      [attr.aria-label]=\"text().clear\">\n      <i class=\"fas fa-x mar_right5\"></i><span class=\"text bold\">{{text().clear}}</span>\n    </button>\n\n    <button (keyup.escape)=\"calendarPopover.close()\"\n      (click)=\"calendarPopover.close()\"\n      [attr.data-dialog-close-override]=\"true\"\n      class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\n      [attr.aria-label]=\"text().done\">\n      <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text().done}}</span>\n    </button>\n  </div>\n</particle-popover>\n\n", styles: [":host{width:100%}\n"] }]
         }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], inputClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClassList", required: false }] }], calendarButtonClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarButtonClassList", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], dateRange: [{
                 type: Input
             }], value: [{
@@ -5789,7 +5830,7 @@ class DropdownComponent {
                 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: "@if (!isMobile) {\r\n  <div #dropdown\r\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n       style=\"cursor:default;overflow:hidden;\"\r\n       [ngClass]=\"classList() ? classList() : ''\"\r\n  >\r\n    @if (tooltipData$ | async; as tooltipData) {\r\n      <button #dropdownButton\r\n              role=\"combobox\"\r\n              [attr.aria-controls]=\"(inputId() ?? dropdownId) + '_listbox'\"\r\n              aria-haspopup=\"listbox\"\r\n              type=\"button\"\r\n              (click)=\"openDropdown($event)\"\r\n              (focus)=\"setSelectionIndex()\"\r\n              (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n              [id]=\"inputId() ?? dropdownId\"\r\n              [disabled]=\"disabled()\"\r\n              [attr.aria-label]=\"text().placeholder\"\r\n              [attr.aria-expanded]=\"isOpen()\"\r\n              [attr.data-dialog-close-override]=\"true\"\r\n              class=\"access btnset clear center_center height100 width100\"\r\n              style=\"outline-offset: -2px;\"\r\n              [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n              [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n      >\r\n        @if (collapsedButtonTemplate()) {\r\n          <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n        }\r\n\r\n        @if (!collapsedButtonTemplate()) {\r\n          <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n            @if (selectedDataContext$ | async; as dataContext) {\r\n                @if (!!template) {\r\n                  <div class=\"row v_center text_ellipsis min_w0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n                }\r\n            } @else {\r\n                <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n            }\r\n          </div>\r\n          <div class=\"col min_w50 height100 center_center\"\r\n               [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n            <div class=\"center_center height100 width100\">\r\n              <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n            </div>\r\n          </div>\r\n        }\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div [style.display]=\"render ? '' : 'none'\"\r\n       [attr.aria-hidden]=\"!render\"\r\n       class=\"particle_dropdown_overlay\"\r\n  >\r\n    <div class=\"particle_dropdown_container\"\r\n         [class.open]=\"isOpen()\"\r\n         #dropdownList\r\n    >\r\n      <div class=\"particle_dropdown_options content_color ent_r2l_dir\" [id]=\"(inputId() ?? dropdownId) + '_listbox'\">\r\n        @if (_options | async; as options) {\r\n          <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n            <!-- CUSTOM TEMPLATE -->\r\n            @if (!!template) {\r\n              @for (option of options; track $index; let i = $index;) {\r\n                <!-- OPTION GROUP -->\r\n                @if (option.type === 'group') {\r\n                  <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                  @for (groupOption of option.options; track $index; let j = $index;) {\r\n                    <button #dropdownOption\r\n                            (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                            (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                            (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                            [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n                            [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                            [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                            [attr.data-value]=\"groupOption.value\"\r\n                            [attr.data-dialog-close-override]=\"true\"\r\n                            [disabled]=\"groupOption.disabled\"\r\n                            type=\"button\"\r\n                            class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                            role=\"option\"\r\n                            tabindex=\"0\"\r\n                    >\r\n                      <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                    </button>\r\n                  }\r\n                } @else if (option.type === 'option') {\r\n                  <!-- SINGULAR OPTION -->\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                }\r\n              }\r\n            } @else {\r\n              <!-- NO CUSTOM TEMPLATE -->\r\n              @for (option of options; track $index; let i = $index;) {\r\n                <!-- OPTION GROUP -->\r\n                @if (option.type === 'group') {\r\n                  <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                  @for (groupOption of option.options; track $index; let j = $index;) {\r\n                    <button #dropdownOption\r\n                            (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                            (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                            (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                            [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n                            [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                            [attr.aria-label]=\"groupOption.label\"\r\n                            [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                            [attr.data-value]=\"groupOption.value\"\r\n                            [attr.data-dialog-close-override]=\"true\"\r\n                            [disabled]=\"groupOption.disabled\"\r\n                            class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                            type=\"button\"\r\n                            role=\"option\"\r\n                            tabindex=\"0\"\r\n                    >\r\n                      {{groupOption.label}}\r\n                    </button>\r\n                  }\r\n                } @else if (option.type === 'option') {\r\n                  <!-- SINGULAR OPTION -->\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\"\r\n                          tabindex=\"0\"\r\n                  >\r\n                    {{option.label}}\r\n                  </button>\r\n                }\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-content select=\"template\"></ng-content>\r\n}\r\n\r\n@if (isMobile) {\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"inputId() ?? dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\"\r\n  >\r\n    @if (_options | async; as options) {\r\n      @for (option of options; track $index) {\r\n        @if (option.type === 'group') {\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            @for (groupOption of option.options; track $index) {\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            }\r\n          </optgroup>\r\n        } @else if (option.type === 'option') {\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        }\r\n      }\r\n    }\r\n  </select>\r\n}\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}.particle_dropdown_container{position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity}.particle_dropdown_container.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true }, { propertyName: "dropdownList", first: true, predicate: ["dropdownList"], descendants: true }, { propertyName: "dropdownOptions", predicate: ["dropdownOption"], descendants: true }], ngImport: i0, template: "@if (!isMobile) {\n  <div #dropdown\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\n       style=\"cursor:default;overflow:hidden;\"\n       [ngClass]=\"classList() ? classList() : ''\"\n  >\n    @if (tooltipData$ | async; as tooltipData) {\n      <button #dropdownButton\n              role=\"combobox\"\n              [attr.aria-controls]=\"(inputId() ?? dropdownId) + '_listbox'\"\n              aria-haspopup=\"listbox\"\n              type=\"button\"\n              (click)=\"openDropdown($event)\"\n              (focus)=\"setSelectionIndex()\"\n              (keyup.escape)=\"onEscapeKeyUp($event)\"\n              [id]=\"inputId() ?? dropdownId\"\n              [disabled]=\"disabled()\"\n              [attr.aria-label]=\"text().placeholder\"\n              [attr.aria-expanded]=\"isOpen()\"\n              [attr.data-dialog-close-override]=\"true\"\n              class=\"access btnset clear center_center height100 width100\"\n              style=\"outline-offset: -2px;\"\n              [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\n              [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\n      >\n        @if (collapsedButtonTemplate()) {\n          <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\n        }\n\n        @if (!collapsedButtonTemplate()) {\n          <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\n            @if (selectedDataContext$ | async; as dataContext) {\n                @if (!!template) {\n                  <div class=\"row v_center text_ellipsis min_w0\">\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\n                  </div>\n                } @else {\n                  <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\n                }\n            } @else {\n                <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\n            }\n          </div>\n          <div class=\"col min_w50 height100 center_center\"\n               [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\n            <div class=\"center_center height100 width100\">\n              <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\n            </div>\n          </div>\n        }\n      </button>\n    }\n  </div>\n\n  <div [style.display]=\"render ? '' : 'none'\"\n       [attr.aria-hidden]=\"!render\"\n       class=\"particle_dropdown_overlay\"\n  >\n    <div class=\"particle_dropdown_container\"\n         [class.open]=\"isOpen()\"\n         #dropdownList\n    >\n      <div class=\"particle_dropdown_options content_color ent_r2l_dir\" [id]=\"(inputId() ?? dropdownId) + '_listbox'\">\n        @if (_options | async; as options) {\n          <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\n            <!-- CUSTOM TEMPLATE -->\n            @if (!!template) {\n              @for (option of options; track $index; let i = $index;) {\n                <!-- OPTION GROUP -->\n                @if (option.type === 'group') {\n                  <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\n                  @for (groupOption of option.options; track $index; let j = $index;) {\n                    <button #dropdownOption\n                            (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\n                            (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\n                            (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\n                            (keyup.escape)=\"onEscapeKeyUp($event)\"\n                            [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\n                            [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\n                            [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\n                            [attr.data-value]=\"groupOption.value\"\n                            [attr.data-dialog-close-override]=\"true\"\n                            [disabled]=\"groupOption.disabled\"\n                            type=\"button\"\n                            class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\n                            role=\"option\"\n                            tabindex=\"0\"\n                    >\n                      <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\n                    </button>\n                  }\n                } @else if (option.type === 'option') {\n                  <!-- SINGULAR OPTION -->\n                  <button #dropdownOption\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\n                          [attr.data-value]=\"option.value\"\n                          [attr.data-dialog-close-override]=\"true\"\n                          [disabled]=\"option.disabled\"\n                          type=\"button\"\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\n                  </button>\n                }\n              }\n            } @else {\n              <!-- NO CUSTOM TEMPLATE -->\n              @for (option of options; track $index; let i = $index;) {\n                <!-- OPTION GROUP -->\n                @if (option.type === 'group') {\n                  <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\n                  @for (groupOption of option.options; track $index; let j = $index;) {\n                    <button #dropdownOption\n                            (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\n                            (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\n                            (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\n                            (keyup.escape)=\"onEscapeKeyUp($event)\"\n                            [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\n                            [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\n                            [attr.aria-label]=\"groupOption.label\"\n                            [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\n                            [attr.data-value]=\"groupOption.value\"\n                            [attr.data-dialog-close-override]=\"true\"\n                            [disabled]=\"groupOption.disabled\"\n                            class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\n                            type=\"button\"\n                            role=\"option\"\n                            tabindex=\"0\"\n                    >\n                      {{groupOption.label}}\n                    </button>\n                  }\n                } @else if (option.type === 'option') {\n                  <!-- SINGULAR OPTION -->\n                  <button #dropdownOption\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\n                          [attr.data-value]=\"option.value\"\n                          [attr.data-dialog-close-override]=\"true\"\n                          [disabled]=\"option.disabled\"\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\n                          type=\"button\"\n                          role=\"option\"\n                          tabindex=\"0\"\n                  >\n                    {{option.label}}\n                  </button>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"template\"></ng-content>\n}\n\n@if (isMobile) {\n  <select\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\"\n    [id]=\"inputId() ?? dropdownId\"\n    [disabled]=\"disabled()\"\n    (ngModelChange)=\"onModelChangeMobile($event)\"\n    [(ngModel)]=\"value\"\n  >\n    @if (_options | async; as options) {\n      @for (option of options; track $index) {\n        @if (option.type === 'group') {\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\n            @for (groupOption of option.options; track $index) {\n              <option\n                [disabled]=\"groupOption.disabled\"\n                class=\"input_bg_color min_h50 pad_10\"\n                [value]=\"groupOption.value\"\n              >\n                {{groupOption.label}}\n              </option>\n            }\n          </optgroup>\n        } @else if (option.type === 'option') {\n          <option\n            [disabled]=\"option.disabled\"\n            class=\"input_bg_color min_h50 pad_10\"\n            [value]=\"option.value\"\n          >\n            {{option.label}}\n          </option>\n        }\n      }\n    }\n  </select>\n}\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}.particle_dropdown_container{position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity}.particle_dropdown_container.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
@@ -5799,7 +5840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                             useExisting: forwardRef(() => DropdownComponent),
                             multi: true
                         }
-                    ], imports: [NgClass, NgTemplateOutlet, FormsModule, AsyncPipe, TooltipDirective], template: "@if (!isMobile) {\r\n  <div #dropdown\r\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n       style=\"cursor:default;overflow:hidden;\"\r\n       [ngClass]=\"classList() ? classList() : ''\"\r\n  >\r\n    @if (tooltipData$ | async; as tooltipData) {\r\n      <button #dropdownButton\r\n              role=\"combobox\"\r\n              [attr.aria-controls]=\"(inputId() ?? dropdownId) + '_listbox'\"\r\n              aria-haspopup=\"listbox\"\r\n              type=\"button\"\r\n              (click)=\"openDropdown($event)\"\r\n              (focus)=\"setSelectionIndex()\"\r\n              (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n              [id]=\"inputId() ?? dropdownId\"\r\n              [disabled]=\"disabled()\"\r\n              [attr.aria-label]=\"text().placeholder\"\r\n              [attr.aria-expanded]=\"isOpen()\"\r\n              [attr.data-dialog-close-override]=\"true\"\r\n              class=\"access btnset clear center_center height100 width100\"\r\n              style=\"outline-offset: -2px;\"\r\n              [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\r\n              [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\r\n      >\r\n        @if (collapsedButtonTemplate()) {\r\n          <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n        }\r\n\r\n        @if (!collapsedButtonTemplate()) {\r\n          <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n            @if (selectedDataContext$ | async; as dataContext) {\r\n                @if (!!template) {\r\n                  <div class=\"row v_center text_ellipsis min_w0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\r\n                  </div>\r\n                } @else {\r\n                  <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\r\n                }\r\n            } @else {\r\n                <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\r\n            }\r\n          </div>\r\n          <div class=\"col min_w50 height100 center_center\"\r\n               [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\r\n            <div class=\"center_center height100 width100\">\r\n              <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n            </div>\r\n          </div>\r\n        }\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div [style.display]=\"render ? '' : 'none'\"\r\n       [attr.aria-hidden]=\"!render\"\r\n       class=\"particle_dropdown_overlay\"\r\n  >\r\n    <div class=\"particle_dropdown_container\"\r\n         [class.open]=\"isOpen()\"\r\n         #dropdownList\r\n    >\r\n      <div class=\"particle_dropdown_options content_color ent_r2l_dir\" [id]=\"(inputId() ?? dropdownId) + '_listbox'\">\r\n        @if (_options | async; as options) {\r\n          <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\r\n            <!-- CUSTOM TEMPLATE -->\r\n            @if (!!template) {\r\n              @for (option of options; track $index; let i = $index;) {\r\n                <!-- OPTION GROUP -->\r\n                @if (option.type === 'group') {\r\n                  <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                  @for (groupOption of option.options; track $index; let j = $index;) {\r\n                    <button #dropdownOption\r\n                            (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                            (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                            (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                            [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n                            [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                            [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                            [attr.data-value]=\"groupOption.value\"\r\n                            [attr.data-dialog-close-override]=\"true\"\r\n                            [disabled]=\"groupOption.disabled\"\r\n                            type=\"button\"\r\n                            class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                            role=\"option\"\r\n                            tabindex=\"0\"\r\n                    >\r\n                      <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                    </button>\r\n                  }\r\n                } @else if (option.type === 'option') {\r\n                  <!-- SINGULAR OPTION -->\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          type=\"button\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\r\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n                  </button>\r\n                }\r\n              }\r\n            } @else {\r\n              <!-- NO CUSTOM TEMPLATE -->\r\n              @for (option of options; track $index; let i = $index;) {\r\n                <!-- OPTION GROUP -->\r\n                @if (option.type === 'group') {\r\n                  <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n                  @for (groupOption of option.options; track $index; let j = $index;) {\r\n                    <button #dropdownOption\r\n                            (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                            (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\r\n                            (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\r\n                            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                            [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\r\n                            [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\r\n                            [attr.aria-label]=\"groupOption.label\"\r\n                            [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\r\n                            [attr.data-value]=\"groupOption.value\"\r\n                            [attr.data-dialog-close-override]=\"true\"\r\n                            [disabled]=\"groupOption.disabled\"\r\n                            class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                            type=\"button\"\r\n                            role=\"option\"\r\n                            tabindex=\"0\"\r\n                    >\r\n                      {{groupOption.label}}\r\n                    </button>\r\n                  }\r\n                } @else if (option.type === 'option') {\r\n                  <!-- SINGULAR OPTION -->\r\n                  <button #dropdownOption\r\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\r\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\r\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\r\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\r\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\r\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\r\n                          [attr.data-value]=\"option.value\"\r\n                          [attr.data-dialog-close-override]=\"true\"\r\n                          [disabled]=\"option.disabled\"\r\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\r\n                          type=\"button\"\r\n                          role=\"option\"\r\n                          tabindex=\"0\"\r\n                  >\r\n                    {{option.label}}\r\n                  </button>\r\n                }\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-content select=\"template\"></ng-content>\r\n}\r\n\r\n@if (isMobile) {\r\n  <select\r\n    class=\"access ptl_input ptl_input_height ptl_input_text_size ptl_input_padding ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n    [id]=\"inputId() ?? dropdownId\"\r\n    [disabled]=\"disabled()\"\r\n    (ngModelChange)=\"onModelChangeMobile($event)\"\r\n    [(ngModel)]=\"value\"\r\n  >\r\n    @if (_options | async; as options) {\r\n      @for (option of options; track $index) {\r\n        @if (option.type === 'group') {\r\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\r\n            @for (groupOption of option.options; track $index) {\r\n              <option\r\n                [disabled]=\"groupOption.disabled\"\r\n                class=\"input_bg_color min_h50 pad_10\"\r\n                [value]=\"groupOption.value\"\r\n              >\r\n                {{groupOption.label}}\r\n              </option>\r\n            }\r\n          </optgroup>\r\n        } @else if (option.type === 'option') {\r\n          <option\r\n            [disabled]=\"option.disabled\"\r\n            class=\"input_bg_color min_h50 pad_10\"\r\n            [value]=\"option.value\"\r\n          >\r\n            {{option.label}}\r\n          </option>\r\n        }\r\n      }\r\n    }\r\n  </select>\r\n}\r\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}.particle_dropdown_container{position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity}.particle_dropdown_container.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity}\n/*!* option hover/focus state *!*/\n"] }]
+                    ], imports: [NgClass, NgTemplateOutlet, FormsModule, AsyncPipe, TooltipDirective], template: "@if (!isMobile) {\n  <div #dropdown\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\n       style=\"cursor:default;overflow:hidden;\"\n       [ngClass]=\"classList() ? classList() : ''\"\n  >\n    @if (tooltipData$ | async; as tooltipData) {\n      <button #dropdownButton\n              role=\"combobox\"\n              [attr.aria-controls]=\"(inputId() ?? dropdownId) + '_listbox'\"\n              aria-haspopup=\"listbox\"\n              type=\"button\"\n              (click)=\"openDropdown($event)\"\n              (focus)=\"setSelectionIndex()\"\n              (keyup.escape)=\"onEscapeKeyUp($event)\"\n              [id]=\"inputId() ?? dropdownId\"\n              [disabled]=\"disabled()\"\n              [attr.aria-label]=\"text().placeholder\"\n              [attr.aria-expanded]=\"isOpen()\"\n              [attr.data-dialog-close-override]=\"true\"\n              class=\"access btnset clear center_center height100 width100\"\n              style=\"outline-offset: -2px;\"\n              [particleTooltip]=\"collapsedButtonTemplate() ? $any(tooltipData) : ''\"\n              [tooltipDisabled]=\"!collapsedButtonTemplate() || !collapsedButtonTooltipEnabled()\"\n      >\n        @if (collapsedButtonTemplate()) {\n          <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\n        }\n\n        @if (!collapsedButtonTemplate()) {\n          <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\n            @if (selectedDataContext$ | async; as dataContext) {\n                @if (!!template) {\n                  <div class=\"row v_center text_ellipsis min_w0\">\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(dataContext)\"></ng-container>\n                  </div>\n                } @else {\n                  <div class=\"ent_r2l_txt\">{{dataContext['$implicit'] || dataContext.label}}</div>\n                }\n            } @else {\n                <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder}}</div>\n            }\n          </div>\n          <div class=\"col min_w50 height100 center_center\"\n               [ngClass]=\"buttonClassList() ? buttonClassList() : ''\">\n            <div class=\"center_center height100 width100\">\n              <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\n            </div>\n          </div>\n        }\n      </button>\n    }\n  </div>\n\n  <div [style.display]=\"render ? '' : 'none'\"\n       [attr.aria-hidden]=\"!render\"\n       class=\"particle_dropdown_overlay\"\n  >\n    <div class=\"particle_dropdown_container\"\n         [class.open]=\"isOpen()\"\n         #dropdownList\n    >\n      <div class=\"particle_dropdown_options content_color ent_r2l_dir\" [id]=\"(inputId() ?? dropdownId) + '_listbox'\">\n        @if (_options | async; as options) {\n          <div class=\"particle_dropdown_list\" role=\"listbox\" tabindex=\"-1\" [attr.aria-label]=\"text().placeholder\">\n            <!-- CUSTOM TEMPLATE -->\n            @if (!!template) {\n              @for (option of options; track $index; let i = $index;) {\n                <!-- OPTION GROUP -->\n                @if (option.type === 'group') {\n                  <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\n                  @for (groupOption of option.options; track $index; let j = $index;) {\n                    <button #dropdownOption\n                            (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\n                            (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\n                            (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\n                            (keyup.escape)=\"onEscapeKeyUp($event)\"\n                            [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\n                            [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\n                            [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\n                            [attr.data-value]=\"groupOption.value\"\n                            [attr.data-dialog-close-override]=\"true\"\n                            [disabled]=\"groupOption.disabled\"\n                            type=\"button\"\n                            class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\n                            role=\"option\"\n                            tabindex=\"0\"\n                    >\n                      <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\n                    </button>\n                  }\n                } @else if (option.type === 'option') {\n                  <!-- SINGULAR OPTION -->\n                  <button #dropdownOption\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\n                          [attr.data-value]=\"option.value\"\n                          [attr.data-dialog-close-override]=\"true\"\n                          [disabled]=\"option.disabled\"\n                          type=\"button\"\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\" role=\"option\" tabindex=\"0\">\n                    <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\n                  </button>\n                }\n              }\n            } @else {\n              <!-- NO CUSTOM TEMPLATE -->\n              @for (option of options; track $index; let i = $index;) {\n                <!-- OPTION GROUP -->\n                @if (option.type === 'group') {\n                  <div class=\"particle_dropdown_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\n                  @for (groupOption of option.options; track $index; let j = $index;) {\n                    <button #dropdownOption\n                            (click)=\"onDropdownOptionSelect(groupOption.value, groupOption.disabled!)\"\n                            (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i + j)\"\n                            (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i + j)\"\n                            (keyup.escape)=\"onEscapeKeyUp($event)\"\n                            [id]=\"(inputId() ?? dropdownId) + '-' + groupOption.value\"\n                            [ngClass]=\"{ 'unselected' : (_internalValue | async) !== groupOption.value }\"\n                            [attr.aria-label]=\"groupOption.label\"\n                            [attr.aria-selected]=\"(_internalValue | async) === groupOption.value\"\n                            [attr.data-value]=\"groupOption.value\"\n                            [attr.data-dialog-close-override]=\"true\"\n                            [disabled]=\"groupOption.disabled\"\n                            class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\n                            type=\"button\"\n                            role=\"option\"\n                            tabindex=\"0\"\n                    >\n                      {{groupOption.label}}\n                    </button>\n                  }\n                } @else if (option.type === 'option') {\n                  <!-- SINGULAR OPTION -->\n                  <button #dropdownOption\n                          (click)=\"onDropdownOptionSelect(option.value, option.disabled!)\"\n                          (mouseenter)=\"onDropdownOptionMouseEnter(dropdownOption, i)\"\n                          (mousemove)=\"onDropdownOptionMouseMove(dropdownOption, i)\"\n                          (keyup.escape)=\"onEscapeKeyUp($event)\"\n                          [id]=\"(inputId() ?? dropdownId) + '-' + option.value\"\n                          [ngClass]=\"{ 'unselected' : (_internalValue | async) !== option.value }\"\n                          [attr.aria-selected]=\"(_internalValue | async) === option.value\"\n                          [attr.data-value]=\"option.value\"\n                          [attr.data-dialog-close-override]=\"true\"\n                          [disabled]=\"option.disabled\"\n                          class=\"particle_dropdown_option ptl_input_text_size ent_r2l_txt\"\n                          type=\"button\"\n                          role=\"option\"\n                          tabindex=\"0\"\n                  >\n                    {{option.label}}\n                  </button>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n\n  <ng-content select=\"template\"></ng-content>\n}\n\n@if (isMobile) {\n  <select\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\"\n    [id]=\"inputId() ?? dropdownId\"\n    [disabled]=\"disabled()\"\n    (ngModelChange)=\"onModelChangeMobile($event)\"\n    [(ngModel)]=\"value\"\n  >\n    @if (_options | async; as options) {\n      @for (option of options; track $index) {\n        @if (option.type === 'group') {\n          <optgroup class=\"input_bg_color min_h50 pad_10\" [label]=\"option.groupLabel\">\n            @for (groupOption of option.options; track $index) {\n              <option\n                [disabled]=\"groupOption.disabled\"\n                class=\"input_bg_color min_h50 pad_10\"\n                [value]=\"groupOption.value\"\n              >\n                {{groupOption.label}}\n              </option>\n            }\n          </optgroup>\n        } @else if (option.type === 'option') {\n          <option\n            [disabled]=\"option.disabled\"\n            class=\"input_bg_color min_h50 pad_10\"\n            [value]=\"option.value\"\n          >\n            {{option.label}}\n          </option>\n        }\n      }\n    }\n  </select>\n}\n", styles: [":host{width:100%}.particle_dropdown{width:100%;min-width:150px;position:relative}.particle_dropdown:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_dropdown_input{position:absolute;display:flex;align-items:center;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_dropdown_input:not([disabled]){cursor:pointer}.particle_dropdown_input::-ms-expand{display:none}.particle_dropdown_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_dropdown_placeholder{opacity:.5;display:inline}.particle_dropdown_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_dropdown_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_dropdown_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_dropdown_list{padding:0;margin:0;outline:none}.particle_dropdown_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_dropdown_option.unselected:focus{background-color:#8080801a}.particle_dropdown_option:not(.unselected){background-color:#80808026}.particle_dropdown_option:not(.unselected):focus{background-color:#8080803d}.particle_dropdown_option[disabled]{cursor:default}.particle_dropdown_container{position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity}.particle_dropdown_container.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity}\n/*!* option hover/focus state *!*/\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], options: [{
@@ -6406,7 +6447,7 @@ class MultiSelectComponent {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "@if (type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries())) {\r\n  <div #multiSelect\r\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n       style=\"cursor:default;overflow:hidden;\"\r\n       [ngClass]=\"classList() ? classList() : ''\">\r\n    <button #multiSelectButton\r\n            role=\"combobox\"\r\n            [attr.aria-controls]=\"(inputId() ?? multiSelectId) + '_listbox'\"\r\n            aria-haspopup=\"listbox\"\r\n            type=\"button\"\r\n            (click)=\"openMultiSelect($event)\"\r\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n            [id]=\"inputId() ?? multiSelectId\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.aria-label]=\"text().placeholder\"\r\n            [attr.aria-expanded]=\"opened\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            class=\"access btnset clear center_center height100 width100\"\r\n            style=\"outline-offset: -2px;\"\r\n    >\r\n      @if (collapsedButtonTemplate()) {\r\n        <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n      }\r\n\r\n      @if (!collapsedButtonTemplate()) {\r\n        <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n          @if (selectionCount$ | async; as selectionCount) {\r\n            @if (selectionCount > 1) {\r\n              <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n              </div>\r\n            } @else {\r\n              @if (dataContextMap$ | async; as dataContextMap) {\r\n                @if (_internalValue | async; as internalValues) {\r\n                  <div class=\"col overflow_hide\">\r\n                    @if (!!template) {\r\n                      @for (value of internalValues; track $index) {\r\n                        <div class=\"mar_tb5 pad_tb2\">\r\n                          <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                            <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n                          </div>\r\n                        </div>\r\n                      }\r\n                    } @else {\r\n                      @for (value of internalValues; track $index) {\r\n                        <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\">\r\n                          {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n                        </div>\r\n                      }\r\n                    }\r\n                  </div>\r\n                }\r\n              }\r\n            }\r\n          } @else {\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n          }\r\n        </div>\r\n        <div class=\"col min_w50 height100 center_center\"\r\n             [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n          <div class=\"center_center height100 width100\">\r\n            <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n          </div>\r\n        </div>\r\n      }\r\n    </button>\r\n  </div>\r\n} @else {\r\n  <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n}\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_multiselect_overlay\">\r\n  <div class=\"particle_multiselect_container\"\r\n       [class.open]=\"isOpen()\"\r\n       #multiSelectList\r\n  >\r\n    <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n      <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n  @if (_options | async; as options) {\r\n    <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n         role=\"listbox\"\r\n         tabindex=\"-1\"\r\n         [attr.aria-label]=\"text().placeholder\"\r\n         [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n         [id]=\"(inputId() ?? multiSelectId) + (type() === 'input' ? '_listbox' : '')\"\r\n    >\r\n      <!-- CUSTOM TEMPLATE -->\r\n      @if (selectionValueMap$ | async; as selectionValueMap) {\r\n        @if (!!template) {\r\n          @for (option of options; track $index; let i = $index;) {\r\n            <!-- OPTION GROUP -->\r\n            @if (option.type === 'group') {\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              @for (groupOption of option.options; track $index; let j = $index;) {\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\"\r\n                        role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    @if (selectionValueMap['' + groupOption.value]) {\r\n                      <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                    }\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                </button>\r\n              }\r\n            } @else if (option.type === 'option') {\r\n              <!-- SINGULAR OPTION -->\r\n              <button #multiSelectOption\r\n                      (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                      (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                      (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                      (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                      [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n                      [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                      [attr.data-value]=\"option.value\"\r\n                      [attr.data-dialog-close-override]=\"true\"\r\n                      [disabled]=\"option.disabled || disabled()\"\r\n                      [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                      class=\"ptl_input_text_size\"\r\n                      role=\"option\" type=\"button\" tabindex=\"0\"\r\n              >\r\n                <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                     [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                     aria-hidden=\"true\"\r\n                >\r\n                  @if (selectionValueMap['' + option.value]) {\r\n                    <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                  }\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n              </button>\r\n            }\r\n          }\r\n        } @else {\r\n          @for (option of options; track $index; let i = $index;) {\r\n            <!-- OPTION GROUP -->\r\n            @if (option.type === 'group') {\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              @for (groupOption of option.options; track $index; let j = $index;) {\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n                        [attr.aria-label]=\"groupOption.label\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\"\r\n                >\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\"\r\n                  >\r\n                    @if (selectionValueMap['' + groupOption.value]) {\r\n                      <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n                </button>\r\n              }\r\n            } @else if (option.type === 'option') {\r\n              <!-- SINGULAR OPTION -->\r\n              <button #multiSelectOption\r\n                      (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                      (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                      (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                      (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                      [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n                      [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                      [attr.data-value]=\"option.value\"\r\n                      [attr.data-dialog-close-override]=\"true\"\r\n                      [disabled]=\"option.disabled || disabled()\"\r\n                      [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                      class=\"ptl_input_text_size\"\r\n                      type=\"button\"\r\n                      role=\"option\"\r\n                      tabindex=\"0\"\r\n              >\r\n                <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                     [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                     aria-hidden=\"true\"\r\n                >\r\n                  @if (selectionValueMap['' + option.value]) {\r\n                    <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                  }\r\n                </div>\r\n                <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n              </button>\r\n            }\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}.particle_multiselect_container{position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity}.particle_multiselect_container.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+        ], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "multiSelect", first: true, predicate: ["multiSelect"], descendants: true }, { propertyName: "multiSelectButton", first: true, predicate: ["multiSelectButton"], descendants: true }, { propertyName: "multiSelectList", first: true, predicate: ["multiSelectList"], descendants: true }, { propertyName: "multiSelectOptions", predicate: ["multiSelectOption"], descendants: true }], ngImport: i0, template: "@if (type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries())) {\n  <div #multiSelect\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\n       style=\"cursor:default;overflow:hidden;\"\n       [ngClass]=\"classList() ? classList() : ''\">\n    <button #multiSelectButton\n            role=\"combobox\"\n            [attr.aria-controls]=\"(inputId() ?? multiSelectId) + '_listbox'\"\n            aria-haspopup=\"listbox\"\n            type=\"button\"\n            (click)=\"openMultiSelect($event)\"\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\n            [id]=\"inputId() ?? multiSelectId\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"text().placeholder\"\n            [attr.aria-expanded]=\"opened\"\n            [attr.data-dialog-close-override]=\"true\"\n            class=\"access btnset clear center_center height100 width100\"\n            style=\"outline-offset: -2px;\"\n    >\n      @if (collapsedButtonTemplate()) {\n        <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\n      }\n\n      @if (!collapsedButtonTemplate()) {\n        <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\n\n          @if (selectionCount$ | async; as selectionCount) {\n            @if (selectionCount > 1) {\n              <div class=\"ptl_input_text_size ent_r2l_txt\">\n                <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\n              </div>\n            } @else {\n              @if (dataContextMap$ | async; as dataContextMap) {\n                @if (_internalValue | async; as internalValues) {\n                  <div class=\"col overflow_hide\">\n                    @if (!!template) {\n                      @for (value of internalValues; track $index) {\n                        <div class=\"mar_tb5 pad_tb2\">\n                          <div class=\"ptl_input_text_size ent_r2l_txt\">\n                            <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\n                          </div>\n                        </div>\n                      }\n                    } @else {\n                      @for (value of internalValues; track $index) {\n                        <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\">\n                          {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\n                        </div>\n                      }\n                    }\n                  </div>\n                }\n              }\n            }\n          } @else {\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\n          }\n        </div>\n        <div class=\"col min_w50 height100 center_center\"\n             [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\n          <div class=\"center_center height100 width100\">\n            <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\n          </div>\n        </div>\n      }\n    </button>\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\n}\n\n<div [style.display]=\"render ? '' : 'none'\"\n     [attr.aria-hidden]=\"!render\"\n     class=\"particle_multiselect_overlay\">\n  <div class=\"particle_multiselect_container\"\n       [class.open]=\"isOpen()\"\n       #multiSelectList\n  >\n    <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\n      <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #multiSelectOptions>\n  @if (_options | async; as options) {\n    <div class=\"particle_multiselect_list ent_r2l_dir\"\n         role=\"listbox\"\n         tabindex=\"-1\"\n         [attr.aria-label]=\"text().placeholder\"\n         [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\n         [id]=\"(inputId() ?? multiSelectId) + (type() === 'input' ? '_listbox' : '')\"\n    >\n      <!-- CUSTOM TEMPLATE -->\n      @if (selectionValueMap$ | async; as selectionValueMap) {\n        @if (!!template) {\n          @for (option of options; track $index; let i = $index;) {\n            <!-- OPTION GROUP -->\n            @if (option.type === 'group') {\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\n              @for (groupOption of option.options; track $index; let j = $index;) {\n                <button #multiSelectOption\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\n                        [attr.data-value]=\"groupOption.value\"\n                        [attr.data-dialog-close-override]=\"true\"\n                        [disabled]=\"groupOption.disabled || disabled()\"\n                        class=\"ptl_input_text_size\"\n                        type=\"button\"\n                        role=\"option\" tabindex=\"0\">\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\n                       aria-hidden=\"true\">\n                    @if (selectionValueMap['' + groupOption.value]) {\n                      <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\n                    }\n                  </div>\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\n                </button>\n              }\n            } @else if (option.type === 'option') {\n              <!-- SINGULAR OPTION -->\n              <button #multiSelectOption\n                      (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\n                      (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\n                      (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\n                      (keyup.escape)=\"onEscapeKeyUp($event)\"\n                      [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\n                      [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\n                      [attr.data-value]=\"option.value\"\n                      [attr.data-dialog-close-override]=\"true\"\n                      [disabled]=\"option.disabled || disabled()\"\n                      [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\n                      class=\"ptl_input_text_size\"\n                      role=\"option\" type=\"button\" tabindex=\"0\"\n              >\n                <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\n                     [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\n                     aria-hidden=\"true\"\n                >\n                  @if (selectionValueMap['' + option.value]) {\n                    <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\n                  }\n                </div>\n                <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\n              </button>\n            }\n          }\n        } @else {\n          @for (option of options; track $index; let i = $index;) {\n            <!-- OPTION GROUP -->\n            @if (option.type === 'group') {\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\n              @for (groupOption of option.options; track $index; let j = $index;) {\n                <button #multiSelectOption\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\n                        [attr.aria-label]=\"groupOption.label\"\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\n                        [attr.data-value]=\"groupOption.value\"\n                        [attr.data-dialog-close-override]=\"true\"\n                        [disabled]=\"groupOption.disabled || disabled()\"\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\n                        class=\"ptl_input_text_size\"\n                        type=\"button\" role=\"option\" tabindex=\"0\"\n                >\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\n                       aria-hidden=\"true\"\n                  >\n                    @if (selectionValueMap['' + groupOption.value]) {\n                      <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\n                    }\n                  </div>\n                  <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\n                </button>\n              }\n            } @else if (option.type === 'option') {\n              <!-- SINGULAR OPTION -->\n              <button #multiSelectOption\n                      (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\n                      (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\n                      (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\n                      (keyup.escape)=\"onEscapeKeyUp($event)\"\n                      [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\n                      [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\n                      [attr.data-value]=\"option.value\"\n                      [attr.data-dialog-close-override]=\"true\"\n                      [disabled]=\"option.disabled || disabled()\"\n                      [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\n                      class=\"ptl_input_text_size\"\n                      type=\"button\"\n                      role=\"option\"\n                      tabindex=\"0\"\n              >\n                <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\n                     [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\n                     aria-hidden=\"true\"\n                >\n                  @if (selectionValueMap['' + option.value]) {\n                    <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\n                  }\n                </div>\n                <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\n              </button>\n            }\n          }\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-content select=\"template\"></ng-content>\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}.particle_multiselect_container{position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity}.particle_multiselect_container.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity}\n/*!* option hover/focus state *!*/\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -6416,7 +6457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: true
                         }
-                    ], imports: [NgClass, NgTemplateOutlet, AsyncPipe], template: "@if (type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries())) {\r\n  <div #multiSelect\r\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\r\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\r\n       style=\"cursor:default;overflow:hidden;\"\r\n       [ngClass]=\"classList() ? classList() : ''\">\r\n    <button #multiSelectButton\r\n            role=\"combobox\"\r\n            [attr.aria-controls]=\"(inputId() ?? multiSelectId) + '_listbox'\"\r\n            aria-haspopup=\"listbox\"\r\n            type=\"button\"\r\n            (click)=\"openMultiSelect($event)\"\r\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n            [id]=\"inputId() ?? multiSelectId\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.aria-label]=\"text().placeholder\"\r\n            [attr.aria-expanded]=\"opened\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            class=\"access btnset clear center_center height100 width100\"\r\n            style=\"outline-offset: -2px;\"\r\n    >\r\n      @if (collapsedButtonTemplate()) {\r\n        <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\r\n      }\r\n\r\n      @if (!collapsedButtonTemplate()) {\r\n        <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\r\n\r\n          @if (selectionCount$ | async; as selectionCount) {\r\n            @if (selectionCount > 1) {\r\n              <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\r\n              </div>\r\n            } @else {\r\n              @if (dataContextMap$ | async; as dataContextMap) {\r\n                @if (_internalValue | async; as internalValues) {\r\n                  <div class=\"col overflow_hide\">\r\n                    @if (!!template) {\r\n                      @for (value of internalValues; track $index) {\r\n                        <div class=\"mar_tb5 pad_tb2\">\r\n                          <div class=\"ptl_input_text_size ent_r2l_txt\">\r\n                            <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\r\n                          </div>\r\n                        </div>\r\n                      }\r\n                    } @else {\r\n                      @for (value of internalValues; track $index) {\r\n                        <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\">\r\n                          {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\r\n                        </div>\r\n                      }\r\n                    }\r\n                  </div>\r\n                }\r\n              }\r\n            }\r\n          } @else {\r\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\r\n          }\r\n        </div>\r\n        <div class=\"col min_w50 height100 center_center\"\r\n             [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\r\n          <div class=\"center_center height100 width100\">\r\n            <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\r\n          </div>\r\n        </div>\r\n      }\r\n    </button>\r\n  </div>\r\n} @else {\r\n  <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n}\r\n\r\n<div [style.display]=\"render ? '' : 'none'\"\r\n     [attr.aria-hidden]=\"!render\"\r\n     class=\"particle_multiselect_overlay\">\r\n  <div class=\"particle_multiselect_container\"\r\n       [class.open]=\"isOpen()\"\r\n       #multiSelectList\r\n  >\r\n    <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\r\n      <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #multiSelectOptions>\r\n  @if (_options | async; as options) {\r\n    <div class=\"particle_multiselect_list ent_r2l_dir\"\r\n         role=\"listbox\"\r\n         tabindex=\"-1\"\r\n         [attr.aria-label]=\"text().placeholder\"\r\n         [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\r\n         [id]=\"(inputId() ?? multiSelectId) + (type() === 'input' ? '_listbox' : '')\"\r\n    >\r\n      <!-- CUSTOM TEMPLATE -->\r\n      @if (selectionValueMap$ | async; as selectionValueMap) {\r\n        @if (!!template) {\r\n          @for (option of options; track $index; let i = $index;) {\r\n            <!-- OPTION GROUP -->\r\n            @if (option.type === 'group') {\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              @for (groupOption of option.options; track $index; let j = $index;) {\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\"\r\n                        role=\"option\" tabindex=\"0\">\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\">\r\n                    @if (selectionValueMap['' + groupOption.value]) {\r\n                      <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                    }\r\n                  </div>\r\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\r\n                </button>\r\n              }\r\n            } @else if (option.type === 'option') {\r\n              <!-- SINGULAR OPTION -->\r\n              <button #multiSelectOption\r\n                      (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                      (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                      (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                      (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                      [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n                      [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                      [attr.data-value]=\"option.value\"\r\n                      [attr.data-dialog-close-override]=\"true\"\r\n                      [disabled]=\"option.disabled || disabled()\"\r\n                      [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                      class=\"ptl_input_text_size\"\r\n                      role=\"option\" type=\"button\" tabindex=\"0\"\r\n              >\r\n                <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                     [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                     aria-hidden=\"true\"\r\n                >\r\n                  @if (selectionValueMap['' + option.value]) {\r\n                    <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                  }\r\n                </div>\r\n                <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\r\n              </button>\r\n            }\r\n          }\r\n        } @else {\r\n          @for (option of options; track $index; let i = $index;) {\r\n            <!-- OPTION GROUP -->\r\n            @if (option.type === 'group') {\r\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\r\n              @for (groupOption of option.options; track $index; let j = $index;) {\r\n                <button #multiSelectOption\r\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\r\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\r\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\r\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\r\n                        [attr.aria-label]=\"groupOption.label\"\r\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\r\n                        [attr.data-value]=\"groupOption.value\"\r\n                        [attr.data-dialog-close-override]=\"true\"\r\n                        [disabled]=\"groupOption.disabled || disabled()\"\r\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                        class=\"ptl_input_text_size\"\r\n                        type=\"button\" role=\"option\" tabindex=\"0\"\r\n                >\r\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\r\n                       aria-hidden=\"true\"\r\n                  >\r\n                    @if (selectionValueMap['' + groupOption.value]) {\r\n                      <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\r\n                </button>\r\n              }\r\n            } @else if (option.type === 'option') {\r\n              <!-- SINGULAR OPTION -->\r\n              <button #multiSelectOption\r\n                      (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\r\n                      (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\r\n                      (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\r\n                      (keyup.escape)=\"onEscapeKeyUp($event)\"\r\n                      [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\r\n                      [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\r\n                      [attr.data-value]=\"option.value\"\r\n                      [attr.data-dialog-close-override]=\"true\"\r\n                      [disabled]=\"option.disabled || disabled()\"\r\n                      [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\r\n                      class=\"ptl_input_text_size\"\r\n                      type=\"button\"\r\n                      role=\"option\"\r\n                      tabindex=\"0\"\r\n              >\r\n                <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\r\n                     [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\r\n                     aria-hidden=\"true\"\r\n                >\r\n                  @if (selectionValueMap['' + option.value]) {\r\n                    <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\r\n                  }\r\n                </div>\r\n                <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\r\n              </button>\r\n            }\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-content select=\"template\"></ng-content>\r\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}.particle_multiselect_container{position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity}.particle_multiselect_container.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity}\n/*!* option hover/focus state *!*/\n"] }]
+                    ], imports: [NgClass, NgTemplateOutlet, AsyncPipe], template: "@if (type() === 'input' || (type() === 'expanded' && maxExpandedEntries() > 0 && optionCount > maxExpandedEntries())) {\n  <div #multiSelect\n       class=\"row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir\"\n       [style.filter]=\"disabled() ? 'brightness(.95)' : ''\"\n       style=\"cursor:default;overflow:hidden;\"\n       [ngClass]=\"classList() ? classList() : ''\">\n    <button #multiSelectButton\n            role=\"combobox\"\n            [attr.aria-controls]=\"(inputId() ?? multiSelectId) + '_listbox'\"\n            aria-haspopup=\"listbox\"\n            type=\"button\"\n            (click)=\"openMultiSelect($event)\"\n            (keyup.escape)=\"onEscapeKeyUp($event)\"\n            [id]=\"inputId() ?? multiSelectId\"\n            [disabled]=\"disabled()\"\n            [attr.aria-label]=\"text().placeholder\"\n            [attr.aria-expanded]=\"opened\"\n            [attr.data-dialog-close-override]=\"true\"\n            class=\"access btnset clear center_center height100 width100\"\n            style=\"outline-offset: -2px;\"\n    >\n      @if (collapsedButtonTemplate()) {\n        <ng-container *ngTemplateOutlet=\"collapsedButtonTemplate()\"></ng-container>\n      }\n\n      @if (!collapsedButtonTemplate()) {\n        <div class=\"col size_1 height100 width100 v_center ptl_input_text_size ptl_input_padding border_none width100 overflow_hide\">\n\n          @if (selectionCount$ | async; as selectionCount) {\n            @if (selectionCount > 1) {\n              <div class=\"ptl_input_text_size ent_r2l_txt\">\n                <span class=\"text bold\">{{selectionCount}}</span> {{text().of}} {{optionCount}} {{text().optionsSelected}}\n              </div>\n            } @else {\n              @if (dataContextMap$ | async; as dataContextMap) {\n                @if (_internalValue | async; as internalValues) {\n                  <div class=\"col overflow_hide\">\n                    @if (!!template) {\n                      @for (value of internalValues; track $index) {\n                        <div class=\"mar_tb5 pad_tb2\">\n                          <div class=\"ptl_input_text_size ent_r2l_txt\">\n                            <ng-container *ngTemplateOutlet=\"template; context: $any(dataContextMap['' + value])\"></ng-container>\n                          </div>\n                        </div>\n                      }\n                    } @else {\n                      @for (value of internalValues; track $index) {\n                        <div class=\"ptl_input_text_size mar_tb5 pad_tb2 ent_r2l_txt\">\n                          {{dataContextMap['' + value]['$implicit'] || dataContextMap['' + value]['label']}}\n                        </div>\n                      }\n                    }\n                  </div>\n                }\n              }\n            }\n          } @else {\n            <div class=\"ptl_placeholder ent_r2l_txt\">{{text().placeholder + '...'}}</div>\n          }\n        </div>\n        <div class=\"col min_w50 height100 center_center\"\n             [ngClass]=\"buttonClassList() ? buttonClassList() : 'bg_overlay'\">\n          <div class=\"center_center height100 width100\">\n            <i class=\"fas fa-caret-down ptl_input_text_size\"></i>\n          </div>\n        </div>\n      }\n    </button>\n  </div>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\n}\n\n<div [style.display]=\"render ? '' : 'none'\"\n     [attr.aria-hidden]=\"!render\"\n     class=\"particle_multiselect_overlay\">\n  <div class=\"particle_multiselect_container\"\n       [class.open]=\"isOpen()\"\n       #multiSelectList\n  >\n    <div class=\"particle_multiselect_options content_color ent_r2l_dir\">\n      <ng-container [ngTemplateOutlet]=\"multiSelectOptions\"></ng-container>\n    </div>\n  </div>\n</div>\n\n<ng-template #multiSelectOptions>\n  @if (_options | async; as options) {\n    <div class=\"particle_multiselect_list ent_r2l_dir\"\n         role=\"listbox\"\n         tabindex=\"-1\"\n         [attr.aria-label]=\"text().placeholder\"\n         [ngClass]=\"type() === 'expanded' && expandedAsGrid() ? 'particle_multi_select_grid' : ''\"\n         [id]=\"(inputId() ?? multiSelectId) + (type() === 'input' ? '_listbox' : '')\"\n    >\n      <!-- CUSTOM TEMPLATE -->\n      @if (selectionValueMap$ | async; as selectionValueMap) {\n        @if (!!template) {\n          @for (option of options; track $index; let i = $index;) {\n            <!-- OPTION GROUP -->\n            @if (option.type === 'group') {\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\n              @for (groupOption of option.options; track $index; let j = $index;) {\n                <button #multiSelectOption\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\n                        [attr.data-value]=\"groupOption.value\"\n                        [attr.data-dialog-close-override]=\"true\"\n                        [disabled]=\"groupOption.disabled || disabled()\"\n                        class=\"ptl_input_text_size\"\n                        type=\"button\"\n                        role=\"option\" tabindex=\"0\">\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\n                       aria-hidden=\"true\">\n                    @if (selectionValueMap['' + groupOption.value]) {\n                      <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\n                    }\n                  </div>\n                  <ng-container *ngTemplateOutlet=\"template; context: $any(groupOption.dataContext!)\"></ng-container>\n                </button>\n              }\n            } @else if (option.type === 'option') {\n              <!-- SINGULAR OPTION -->\n              <button #multiSelectOption\n                      (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\n                      (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\n                      (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\n                      (keyup.escape)=\"onEscapeKeyUp($event)\"\n                      [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\n                      [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\n                      [attr.data-value]=\"option.value\"\n                      [attr.data-dialog-close-override]=\"true\"\n                      [disabled]=\"option.disabled || disabled()\"\n                      [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\n                      class=\"ptl_input_text_size\"\n                      role=\"option\" type=\"button\" tabindex=\"0\"\n              >\n                <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\n                     [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\n                     aria-hidden=\"true\"\n                >\n                  @if (selectionValueMap['' + option.value]) {\n                    <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\n                  }\n                </div>\n                <ng-container *ngTemplateOutlet=\"template; context: $any(option.dataContext!)\"></ng-container>\n              </button>\n            }\n          }\n        } @else {\n          @for (option of options; track $index; let i = $index;) {\n            <!-- OPTION GROUP -->\n            @if (option.type === 'group') {\n              <div class=\"particle_multiselect_heading ptl_input_text_size ent_r2l_txt\" aria-hidden=\"true\">{{option.groupLabel}}</div>\n              @for (groupOption of option.options; track $index; let j = $index;) {\n                <button #multiSelectOption\n                        (click)=\"onMultiSelectOptionSelect(groupOption.value, groupOption.disabled!)\"\n                        (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i + j)\"\n                        (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i + j)\"\n                        (keyup.escape)=\"onEscapeKeyUp($event)\"\n                        [id]=\"(inputId() ?? multiSelectId) + '-' + groupOption.value\"\n                        [attr.aria-label]=\"groupOption.label\"\n                        [attr.aria-selected]=\"(_internalValue | async)?.includes(groupOption.value)\"\n                        [attr.data-value]=\"groupOption.value\"\n                        [attr.data-dialog-close-override]=\"true\"\n                        [disabled]=\"groupOption.disabled || disabled()\"\n                        [ngClass]=\"(!selectionValueMap['' + groupOption.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\n                        class=\"ptl_input_text_size\"\n                        type=\"button\" role=\"option\" tabindex=\"0\"\n                >\n                  <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\n                       [ngClass]=\"selectionValueMap['' + groupOption.value] ? 'ok_button_color' : 'unselected'\"\n                       aria-hidden=\"true\"\n                  >\n                    @if (selectionValueMap['' + groupOption.value]) {\n                      <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\n                    }\n                  </div>\n                  <div class=\"ent_r2l_txt mar_lr5\">{{groupOption.label}}</div>\n                </button>\n              }\n            } @else if (option.type === 'option') {\n              <!-- SINGULAR OPTION -->\n              <button #multiSelectOption\n                      (click)=\"onMultiSelectOptionSelect(option.value, option.disabled!)\"\n                      (mouseenter)=\"onMultiSelectOptionMouseEnter(multiSelectOption, i)\"\n                      (mousemove)=\"onMultiSelectOptionMouseMove(multiSelectOption, i)\"\n                      (keyup.escape)=\"onEscapeKeyUp($event)\"\n                      [id]=\"(inputId() ?? multiSelectId) + '-' + option.value\"\n                      [attr.aria-selected]=\"(_internalValue | async)?.includes(option.value)\"\n                      [attr.data-value]=\"option.value\"\n                      [attr.data-dialog-close-override]=\"true\"\n                      [disabled]=\"option.disabled || disabled()\"\n                      [ngClass]=\"(!selectionValueMap['' + option.value] ? 'unselected' : '') + (entryClassList() ? ' ' + entryClassList() : ' particle_multiselect_option')\"\n                      class=\"ptl_input_text_size\"\n                      type=\"button\"\n                      role=\"option\"\n                      tabindex=\"0\"\n              >\n                <div class=\"particle_multiselect_checkbox ptl_brdr_radius bg_overlay brdr\"\n                     [ngClass]=\"selectionValueMap['' + option.value] ? 'ok_button_color' : 'unselected'\"\n                     aria-hidden=\"true\"\n                >\n                  @if (selectionValueMap['' + option.value]) {\n                    <div><i class=\"fas fa-check ent_r2l_ico\"></i></div>\n                  }\n                </div>\n                <div class=\"ent_r2l_txt mar_lr5\">{{option.label}}</div>\n              </button>\n            }\n          }\n        }\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-content select=\"template\"></ng-content>\n", styles: [":host{width:100%}.particle_multiselect{width:100%;min-width:150px;position:relative}.particle_multiselect:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.particle_multiselect_input{display:flex;align-items:center;position:absolute;inset:0;padding:inherit;padding-top:.25em;padding-bottom:.25em;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.particle_multiselect_input:not([disabled]){cursor:pointer}.particle_multiselect_input::-ms-expand{display:none}.particle_multiselect_caret{position:absolute;top:.5em;right:1em;z-index:var(--z-frame);background:transparent;pointer-events:none}.particle_multiselect_selection{font-size:.75em;margin-right:5px;border-radius:3px;padding:.3em .5em;background-color:#6464801a;display:inline-block}.particle_multiselect_placeholder{opacity:.5;display:inline}.particle_multiselect_overlay{position:fixed;inset:0;z-index:var(--z-overlay)}.particle_multiselect_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);max-height:250px;width:100%;overflow-y:auto;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.particle_multiselect_heading{font-weight:600;opacity:.8;padding:10px 12px 4px}.particle_multiselect_list{padding:0;margin:0;outline:none}.particle_multiselect_option{padding:7px 12px;cursor:pointer;border:none;width:100%;text-align:left;display:flex;align-items:center;transition:.2s background-color ease;background-color:transparent;color:inherit}.particle_multiselect_option.unselected:focus{background-color:#8080801a}.particle_multiselect_option:not(.unselected):focus{background-color:#8080803d}.particle_multiselect_option[disabled]{cursor:default}.particle_multiselect_checkbox{width:20px;min-width:20px;height:20px;min-height:20px;margin-right:10px;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background-color .2s ease}.particle_multiselect_checkbox.unselected{background-color:#8080801a}.particle_multiselect_checkbox.unselected:hover{background-color:#80808033}.particle_multiselect_container{position:absolute;transform:scaleY(.5);opacity:0;pointer-events:none;transition-duration:.2s;transition-property:transform,opacity}.particle_multiselect_container.open{transform:scaleY(1);opacity:1;pointer-events:auto;transition-duration:.2s;transition-property:transform,opacity}\n/*!* option hover/focus state *!*/\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], options: [{
@@ -6565,11 +6606,11 @@ class NotificationComponent {
         this.notificationService.deleteNotification(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NotificationComponent, isStandalone: true, selector: "particle-notification", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- toast -->\r\n<div class=\"particle_notification_overlay ent_r2l_row\">\r\n  <!-- spacer -->\r\n  <!-- container -->\r\n  <div class=\"row min_w280 pad_right5\" style=\"max-width:400px;\">\r\n    <div class=\"row_block width100 notification_list\">\r\n      <!-- item -->\r\n      @for (notification of notifications$ | async; track notification.id; let i = $index;) {\r\n        <div class=\"row ent_r2l_row v_center content_color pad_10 mar_10 shadow ptl_brdr_radius item\"\r\n             animate.leave=\"notification_leave\" style=\"--index: {{i}}\"\r\n        >\r\n          <div class=\"col pad_5\">\r\n            <div class=\"circle_36px\" [ngClass]=\"severityColorMap[notification.severity]\">\r\n              <i class=\"fas {{severityIconMap[notification.severity]}} fa-lg ent_r2l_ico\"></i>\r\n            </div>\r\n          </div>\r\n          <div class=\"col size_1 pad_5 ent_r2l_dir rc_gap\">\r\n            <div class=\"col ptl_brdr_color border_right\"></div>\r\n            <div class=\"col\">\r\n              <div class=\"row_block width100\">\r\n                <div class=\"text lg text_left text_wrap bold ent_r2l_txt\">{{notification.summary}}</div>\r\n                <div class=\"text md text_left text_wrap ent_r2l_txt\">{{notification.detail}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col\" style=\"pointer-events: all;\">\r\n            <button class=\"access btnset clear\"\r\n              [attr.aria-label]=\"text().dismiss\"\r\n              (click)=\"deleteNotification($any(notification.id))\"\r\n            >\r\n              <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </div>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".particle_notification_overlay{display:flex;position:fixed;justify-content:flex-end;inset:0;z-index:var(--z-notification);pointer-events:none}.notification_list{list-style:none;padding:0;margin:0}.notification_list .item{transform:scale(1);opacity:1;transition-property:opacity,transform;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5);transition-duration:.65s;transition-delay:calc(.3s * var(--index))}@starting-style{.notification_list .item{opacity:0;transform:scale(.5)}}.notification_leave{animation:slideOut .65s ease-in forwards}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: NotificationComponent, isStandalone: true, selector: "particle-notification", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- toast -->\n<div class=\"particle_notification_overlay ent_r2l_row\">\n  <!-- spacer -->\n  <!-- container -->\n  <div class=\"row min_w280 pad_right5\" style=\"max-width:400px;\">\n    <div class=\"row_block width100 notification_list\">\n      <!-- item -->\n      @for (notification of notifications$ | async; track notification.id; let i = $index;) {\n        <div class=\"row ent_r2l_row v_center content_color pad_10 mar_10 shadow ptl_brdr_radius item\"\n             animate.leave=\"notification_leave\" style=\"--index: {{i}}\"\n        >\n          <div class=\"col pad_5\">\n            <div class=\"circle_36px\" [ngClass]=\"severityColorMap[notification.severity]\">\n              <i class=\"fas {{severityIconMap[notification.severity]}} fa-lg ent_r2l_ico\"></i>\n            </div>\n          </div>\n          <div class=\"col size_1 pad_5 ent_r2l_dir rc_gap\">\n            <div class=\"col ptl_brdr_color border_right\"></div>\n            <div class=\"col\">\n              <div class=\"row_block width100\">\n                <div class=\"text lg text_left text_wrap bold ent_r2l_txt\">{{notification.summary}}</div>\n                <div class=\"text md text_left text_wrap ent_r2l_txt\">{{notification.detail}}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col\" style=\"pointer-events: all;\">\n            <button class=\"access btnset clear\"\n              [attr.aria-label]=\"text().dismiss\"\n              (click)=\"deleteNotification($any(notification.id))\"\n            >\n              <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\n                <i class=\"fas fa-times\"></i>\n              </div>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".particle_notification_overlay{display:flex;position:fixed;justify-content:flex-end;inset:0;z-index:var(--z-notification);pointer-events:none}.notification_list{list-style:none;padding:0;margin:0}.notification_list .item{transform:scale(1);opacity:1;transition-property:opacity,transform;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5);transition-duration:.65s;transition-delay:calc(.3s * var(--index))}@starting-style{.notification_list .item{opacity:0;transform:scale(.5)}}.notification_leave{animation:slideOut .65s ease-in forwards}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'particle-notification', imports: [NgClass, AsyncPipe], template: "<!-- toast -->\r\n<div class=\"particle_notification_overlay ent_r2l_row\">\r\n  <!-- spacer -->\r\n  <!-- container -->\r\n  <div class=\"row min_w280 pad_right5\" style=\"max-width:400px;\">\r\n    <div class=\"row_block width100 notification_list\">\r\n      <!-- item -->\r\n      @for (notification of notifications$ | async; track notification.id; let i = $index;) {\r\n        <div class=\"row ent_r2l_row v_center content_color pad_10 mar_10 shadow ptl_brdr_radius item\"\r\n             animate.leave=\"notification_leave\" style=\"--index: {{i}}\"\r\n        >\r\n          <div class=\"col pad_5\">\r\n            <div class=\"circle_36px\" [ngClass]=\"severityColorMap[notification.severity]\">\r\n              <i class=\"fas {{severityIconMap[notification.severity]}} fa-lg ent_r2l_ico\"></i>\r\n            </div>\r\n          </div>\r\n          <div class=\"col size_1 pad_5 ent_r2l_dir rc_gap\">\r\n            <div class=\"col ptl_brdr_color border_right\"></div>\r\n            <div class=\"col\">\r\n              <div class=\"row_block width100\">\r\n                <div class=\"text lg text_left text_wrap bold ent_r2l_txt\">{{notification.summary}}</div>\r\n                <div class=\"text md text_left text_wrap ent_r2l_txt\">{{notification.detail}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col\" style=\"pointer-events: all;\">\r\n            <button class=\"access btnset clear\"\r\n              [attr.aria-label]=\"text().dismiss\"\r\n              (click)=\"deleteNotification($any(notification.id))\"\r\n            >\r\n              <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </div>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".particle_notification_overlay{display:flex;position:fixed;justify-content:flex-end;inset:0;z-index:var(--z-notification);pointer-events:none}.notification_list{list-style:none;padding:0;margin:0}.notification_list .item{transform:scale(1);opacity:1;transition-property:opacity,transform;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5);transition-duration:.65s;transition-delay:calc(.3s * var(--index))}@starting-style{.notification_list .item{opacity:0;transform:scale(.5)}}.notification_leave{animation:slideOut .65s ease-in forwards}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}\n"] }]
+            args: [{ selector: 'particle-notification', imports: [NgClass, AsyncPipe], template: "<!-- toast -->\n<div class=\"particle_notification_overlay ent_r2l_row\">\n  <!-- spacer -->\n  <!-- container -->\n  <div class=\"row min_w280 pad_right5\" style=\"max-width:400px;\">\n    <div class=\"row_block width100 notification_list\">\n      <!-- item -->\n      @for (notification of notifications$ | async; track notification.id; let i = $index;) {\n        <div class=\"row ent_r2l_row v_center content_color pad_10 mar_10 shadow ptl_brdr_radius item\"\n             animate.leave=\"notification_leave\" style=\"--index: {{i}}\"\n        >\n          <div class=\"col pad_5\">\n            <div class=\"circle_36px\" [ngClass]=\"severityColorMap[notification.severity]\">\n              <i class=\"fas {{severityIconMap[notification.severity]}} fa-lg ent_r2l_ico\"></i>\n            </div>\n          </div>\n          <div class=\"col size_1 pad_5 ent_r2l_dir rc_gap\">\n            <div class=\"col ptl_brdr_color border_right\"></div>\n            <div class=\"col\">\n              <div class=\"row_block width100\">\n                <div class=\"text lg text_left text_wrap bold ent_r2l_txt\">{{notification.summary}}</div>\n                <div class=\"text md text_left text_wrap ent_r2l_txt\">{{notification.detail}}</div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col\" style=\"pointer-events: all;\">\n            <button class=\"access btnset clear\"\n              [attr.aria-label]=\"text().dismiss\"\n              (click)=\"deleteNotification($any(notification.id))\"\n            >\n              <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\n                <i class=\"fas fa-times\"></i>\n              </div>\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n</div>\n", styles: [".particle_notification_overlay{display:flex;position:fixed;justify-content:flex-end;inset:0;z-index:var(--z-notification);pointer-events:none}.notification_list{list-style:none;padding:0;margin:0}.notification_list .item{transform:scale(1);opacity:1;transition-property:opacity,transform;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5);transition-duration:.65s;transition-delay:calc(.3s * var(--index))}@starting-style{.notification_list .item{opacity:0;transform:scale(.5)}}.notification_leave{animation:slideOut .65s ease-in forwards}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 
 /**
@@ -7039,7 +7080,7 @@ class WeekPickerComponent {
                 useExisting: forwardRef(() => WeekPickerComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true }], ngImport: i0, template: "<div style=\"cursor:default;overflow: hidden;\"\r\n  [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n  <button (click)=\"openCalendar($event)\"\r\n    aria-haspopup=\"dialog\"\r\n    [disabled]=\"disabled\"\r\n    [attr.aria-label]=\"ariaLabel() + ', ' + text().openCalendar\"\r\n    [attr.aria-expanded]=\"calendarPopover.visible\"\r\n    [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\r\n    type=\"button\"\r\n    class=\"access btnset width100 height100 center_center\"\r\n    style=\"outline-offset: -2px;\"\r\n    >\r\n    <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\r\n      @if (_internalValue | async; as internalValue) {\r\n        {{internalValue.start | date: dateFormat()}} - {{internalValue.end | date: dateFormat()}}\r\n      } @else {\r\n        <div class=\"ent_r2l_txt\">{{text().selectWeek}}...</div>\r\n      }\r\n    </div>\r\n    <div class=\"col min_w50 height100 center_center\"\r\n      [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\r\n      <div class=\"width100 height100 center_center\">\r\n        <i class=\"fas fa-calendar-week ptl_input_text_size\"></i>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<!-- TODO: instead of offset 1, attach to wwp_container -->\r\n<!-- calendar widget -->\r\n<particle-popover [offset]=\"1\" #calendarPopover>\r\n  <!-- month / year select -->\r\n  <div class=\"wwp_options\">\r\n    <div class=\"content_color pad_5 pad_bot0\">\r\n      <div class=\"row space_between\">\r\n        <div class=\"col size_1 mar_5\">\r\n          <select #yearSelect\r\n            [ngModel]=\"_selectedYear | async\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n            class=\"access input sm content_color\"\r\n            [attr.aria-label]=\"text().selectYear\">\r\n            @for (year of validYearRange$ | async; track $index) {\r\n              <option\r\n                [value]=\"year\">\r\n                {{year}}\r\n              </option>\r\n            }\r\n          </select>\r\n        </div>\r\n        <div class=\"col size_2 mar_5\">\r\n          <select #monthSelect\r\n            [ngModel]=\"_selectedMonth | async\"\r\n            (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n            class=\"access input sm content_color\"\r\n            [attr.aria-label]=\"text().selectMonth\">\r\n            <option value=\"0\">{{text().january}}</option>\r\n            <option value=\"1\">{{text().february}}</option>\r\n            <option value=\"2\">{{text().march}}</option>\r\n            <option value=\"3\">{{text().april}}</option>\r\n            <option value=\"4\">{{text().may}}</option>\r\n            <option value=\"5\">{{text().june}}</option>\r\n            <option value=\"6\">{{text().july}}</option>\r\n            <option value=\"7\">{{text().august}}</option>\r\n            <option value=\"8\">{{text().september}}</option>\r\n            <option value=\"9\">{{text().october}}</option>\r\n            <option value=\"10\">{{text().november}}</option>\r\n            <option value=\"11\">{{text().december}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"content_color pad_5\">\r\n      <!-- weekdays -->\r\n      <div class=\"mar_5 mar_bot10\">\r\n        <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n          <div class=\"wwp_weekday\">{{text().sundayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().mondayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().tuesdayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().wednesdayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().thursdayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().fridayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().saturdayAbbr}}</div>\r\n        </div>\r\n        <!-- days -->\r\n        @if (fullMonth$ | async; as fullMonth) {\r\n          @for (week of fullMonth; track $index) {\r\n            <div class=\"wwp_week\"\r\n              [ngClass]=\"{ 'currentWeek': week.week === currentDate.week && week.year === currentDate.year }\">\r\n              <button (click)=\"onWeekSelect(week.week, week.selectable)\"\r\n                [disabled]=\"!week.selectable\"\r\n                      [ngClass]=\"((selectedWeek$ | async) === week.week) && ((selectedYear$ | async) === week.year)\r\n                                    ? 'ok_button_color'\r\n                                    : 'bg_overlay_rev brdr hov_bg'\"\r\n                class=\"access wwp_week_btn\">\r\n                @for (date of week.dates; track $index) {\r\n                  <div class=\"wwp_day\">\r\n                    {{date}}\r\n                  </div>\r\n                }\r\n              </button>\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n      <div class=\"row space_between\">\r\n        @if (canSelectLastWeek$ | async) {\r\n          <button\r\n            (click)=\"selectLastWeek()\"\r\n            class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n            [attr.aria-label]=\"text().selectLastWeek\">\r\n            <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n          </button>\r\n        } @else {\r\n          <button disabled\r\n            class=\"access btn sm mar_5\"\r\n            [attr.aria-label]=\"text().selectLastWeek\">\r\n            <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n          </button>\r\n        }\r\n        @if (currentDate.selectable) {\r\n          @if (((selectedWeek$ | async) === currentDate.week) && ((selectedYear$ | async) === currentDate.year)) {\r\n            <button\r\n              disabled\r\n              class=\"access btn sm mar_5\"\r\n              [attr.aria-label]=\"text().resetWeekSelection\">\r\n              <i class=\"fas fa-undo-alt\"></i>\r\n            </button>\r\n          } @else {\r\n            <button (click)=\"selectCurrentWeek()\"\r\n              particleTooltip=\"Reset to Current Week\"\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text().resetWeekSelection\">\r\n              <i class=\"fas fa-undo-alt\"></i>\r\n            </button>\r\n          }\r\n        }\r\n        @if (canSelectNextWeek$ | async) {\r\n          <button\r\n            (click)=\"selectNextWeek()\"\r\n            class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n            [attr.aria-label]=\"text().selectNextWeek\">\r\n            <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n          </button>\r\n        } @else {\r\n          <button disabled\r\n            class=\"access btn sm mar_5\"\r\n            [attr.aria-label]=\"text().selectNextWeek\">\r\n            <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</particle-popover>\r\n", styles: [":host{width:100%}.wwp_container{width:100%;min-width:150px;position:relative}.wwp_container:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.wwp_input{position:absolute;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wwp_input:not([disabled]){cursor:pointer}.wwp_input::-ms-expand{display:none}.wwp_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px;-webkit-user-select:none;user-select:none;pointer-events:none;display:flex;align-items:center;justify-content:center}.wwp_button>svg{transition:all .2s ease}.wwp_container:hover .wwp_button>svg{transform:scale(1.2)}.wwp_placeholder{opacity:.5;display:inline}.wwp_options{border-radius:3px;line-height:1.5;overflow:hidden;font-weight:400;z-index:var(--z-overlay);width:300px;background:#fff0;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.wwp_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.wwp_week.currentWeek{border-radius:3px;background-color:#8080801a}.wwp_week_btn{display:flex;align-items:center;width:100%;border:none;padding:0;cursor:pointer}.wwp_week_btn:disabled{cursor:default}.wwp_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }] });
+        ], viewQueries: [{ propertyName: "calendarPopover", first: true, predicate: ["calendarPopover"], descendants: true }], ngImport: i0, template: "<div style=\"cursor:default;overflow: hidden;\"\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'\"\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\n  <button (click)=\"openCalendar($event)\"\n    aria-haspopup=\"dialog\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"ariaLabel() + ', ' + text().openCalendar\"\n    [attr.aria-expanded]=\"calendarPopover.visible\"\n    [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\n    type=\"button\"\n    class=\"access btnset width100 height100 center_center\"\n    style=\"outline-offset: -2px;\"\n    >\n    <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\n      @if (_internalValue | async; as internalValue) {\n        {{internalValue.start | date: dateFormat()}} - {{internalValue.end | date: dateFormat()}}\n      } @else {\n        <div class=\"ent_r2l_txt\">{{text().selectWeek}}...</div>\n      }\n    </div>\n    <div class=\"col min_w50 height100 center_center\"\n      [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\n      <div class=\"width100 height100 center_center\">\n        <i class=\"fas fa-calendar-week ptl_input_text_size\"></i>\n      </div>\n    </div>\n  </button>\n</div>\n\n<!-- TODO: instead of offset 1, attach to wwp_container -->\n<!-- calendar widget -->\n<particle-popover [offset]=\"1\" #calendarPopover>\n  <!-- month / year select -->\n  <div class=\"wwp_options\">\n    <div class=\"content_color pad_5 pad_bot0\">\n      <div class=\"row space_between\">\n        <div class=\"col size_1 mar_5\">\n          <select #yearSelect\n            [ngModel]=\"_selectedYear | async\"\n            [attr.data-dialog-close-override]=\"true\"\n            (change)=\"_selectedYear.next(+yearSelect.value)\"\n            class=\"access input sm content_color\"\n            [attr.aria-label]=\"text().selectYear\">\n            @for (year of validYearRange$ | async; track $index) {\n              <option\n                [value]=\"year\">\n                {{year}}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"col size_2 mar_5\">\n          <select #monthSelect\n            [ngModel]=\"_selectedMonth | async\"\n            (change)=\"_selectedMonth.next(+monthSelect.value)\"\n            class=\"access input sm content_color\"\n            [attr.aria-label]=\"text().selectMonth\">\n            <option value=\"0\">{{text().january}}</option>\n            <option value=\"1\">{{text().february}}</option>\n            <option value=\"2\">{{text().march}}</option>\n            <option value=\"3\">{{text().april}}</option>\n            <option value=\"4\">{{text().may}}</option>\n            <option value=\"5\">{{text().june}}</option>\n            <option value=\"6\">{{text().july}}</option>\n            <option value=\"7\">{{text().august}}</option>\n            <option value=\"8\">{{text().september}}</option>\n            <option value=\"9\">{{text().october}}</option>\n            <option value=\"10\">{{text().november}}</option>\n            <option value=\"11\">{{text().december}}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div class=\"content_color pad_5\">\n      <!-- weekdays -->\n      <div class=\"mar_5 mar_bot10\">\n        <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\n          <div class=\"wwp_weekday\">{{text().sundayAbbr}}</div>\n          <div class=\"wwp_weekday\">{{text().mondayAbbr}}</div>\n          <div class=\"wwp_weekday\">{{text().tuesdayAbbr}}</div>\n          <div class=\"wwp_weekday\">{{text().wednesdayAbbr}}</div>\n          <div class=\"wwp_weekday\">{{text().thursdayAbbr}}</div>\n          <div class=\"wwp_weekday\">{{text().fridayAbbr}}</div>\n          <div class=\"wwp_weekday\">{{text().saturdayAbbr}}</div>\n        </div>\n        <!-- days -->\n        @if (fullMonth$ | async; as fullMonth) {\n          @for (week of fullMonth; track $index) {\n            <div class=\"wwp_week\"\n              [ngClass]=\"{ 'currentWeek': week.week === currentDate.week && week.year === currentDate.year }\">\n              <button (click)=\"onWeekSelect(week.week, week.selectable)\"\n                [disabled]=\"!week.selectable\"\n                      [ngClass]=\"((selectedWeek$ | async) === week.week) && ((selectedYear$ | async) === week.year)\n                                    ? 'ok_button_color'\n                                    : 'bg_overlay_rev brdr hov_bg'\"\n                class=\"access wwp_week_btn\">\n                @for (date of week.dates; track $index) {\n                  <div class=\"wwp_day\">\n                    {{date}}\n                  </div>\n                }\n              </button>\n            </div>\n          }\n        }\n      </div>\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\n      <div class=\"row space_between\">\n        @if (canSelectLastWeek$ | async) {\n          <button\n            (click)=\"selectLastWeek()\"\n            class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\n            [attr.aria-label]=\"text().selectLastWeek\">\n            <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\n          </button>\n        } @else {\n          <button disabled\n            class=\"access btn sm mar_5\"\n            [attr.aria-label]=\"text().selectLastWeek\">\n            <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\n          </button>\n        }\n        @if (currentDate.selectable) {\n          @if (((selectedWeek$ | async) === currentDate.week) && ((selectedYear$ | async) === currentDate.year)) {\n            <button\n              disabled\n              class=\"access btn sm mar_5\"\n              [attr.aria-label]=\"text().resetWeekSelection\">\n              <i class=\"fas fa-undo-alt\"></i>\n            </button>\n          } @else {\n            <button (click)=\"selectCurrentWeek()\"\n              particleTooltip=\"Reset to Current Week\"\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\n              [attr.aria-label]=\"text().resetWeekSelection\">\n              <i class=\"fas fa-undo-alt\"></i>\n            </button>\n          }\n        }\n        @if (canSelectNextWeek$ | async) {\n          <button\n            (click)=\"selectNextWeek()\"\n            class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\n            [attr.aria-label]=\"text().selectNextWeek\">\n            <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\n          </button>\n        } @else {\n          <button disabled\n            class=\"access btn sm mar_5\"\n            [attr.aria-label]=\"text().selectNextWeek\">\n            <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n</particle-popover>\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", "arrowDown", "arrowUp"] }, { 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: "21.1.5", ngImport: i0, type: WeekPickerComponent, decorators: [{
             type: Component,
@@ -7049,7 +7090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                             useExisting: forwardRef(() => WeekPickerComponent),
                             multi: true
                         }
-                    ], imports: [NgClass, PopoverComponent, FormsModule, TooltipDirective, AsyncPipe, DatePipe], template: "<div style=\"cursor:default;overflow: hidden;\"\r\n  [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n  <button (click)=\"openCalendar($event)\"\r\n    aria-haspopup=\"dialog\"\r\n    [disabled]=\"disabled\"\r\n    [attr.aria-label]=\"ariaLabel() + ', ' + text().openCalendar\"\r\n    [attr.aria-expanded]=\"calendarPopover.visible\"\r\n    [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\r\n    type=\"button\"\r\n    class=\"access btnset width100 height100 center_center\"\r\n    style=\"outline-offset: -2px;\"\r\n    >\r\n    <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\r\n      @if (_internalValue | async; as internalValue) {\r\n        {{internalValue.start | date: dateFormat()}} - {{internalValue.end | date: dateFormat()}}\r\n      } @else {\r\n        <div class=\"ent_r2l_txt\">{{text().selectWeek}}...</div>\r\n      }\r\n    </div>\r\n    <div class=\"col min_w50 height100 center_center\"\r\n      [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\r\n      <div class=\"width100 height100 center_center\">\r\n        <i class=\"fas fa-calendar-week ptl_input_text_size\"></i>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<!-- TODO: instead of offset 1, attach to wwp_container -->\r\n<!-- calendar widget -->\r\n<particle-popover [offset]=\"1\" #calendarPopover>\r\n  <!-- month / year select -->\r\n  <div class=\"wwp_options\">\r\n    <div class=\"content_color pad_5 pad_bot0\">\r\n      <div class=\"row space_between\">\r\n        <div class=\"col size_1 mar_5\">\r\n          <select #yearSelect\r\n            [ngModel]=\"_selectedYear | async\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n            class=\"access input sm content_color\"\r\n            [attr.aria-label]=\"text().selectYear\">\r\n            @for (year of validYearRange$ | async; track $index) {\r\n              <option\r\n                [value]=\"year\">\r\n                {{year}}\r\n              </option>\r\n            }\r\n          </select>\r\n        </div>\r\n        <div class=\"col size_2 mar_5\">\r\n          <select #monthSelect\r\n            [ngModel]=\"_selectedMonth | async\"\r\n            (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n            class=\"access input sm content_color\"\r\n            [attr.aria-label]=\"text().selectMonth\">\r\n            <option value=\"0\">{{text().january}}</option>\r\n            <option value=\"1\">{{text().february}}</option>\r\n            <option value=\"2\">{{text().march}}</option>\r\n            <option value=\"3\">{{text().april}}</option>\r\n            <option value=\"4\">{{text().may}}</option>\r\n            <option value=\"5\">{{text().june}}</option>\r\n            <option value=\"6\">{{text().july}}</option>\r\n            <option value=\"7\">{{text().august}}</option>\r\n            <option value=\"8\">{{text().september}}</option>\r\n            <option value=\"9\">{{text().october}}</option>\r\n            <option value=\"10\">{{text().november}}</option>\r\n            <option value=\"11\">{{text().december}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"content_color pad_5\">\r\n      <!-- weekdays -->\r\n      <div class=\"mar_5 mar_bot10\">\r\n        <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n          <div class=\"wwp_weekday\">{{text().sundayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().mondayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().tuesdayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().wednesdayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().thursdayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().fridayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().saturdayAbbr}}</div>\r\n        </div>\r\n        <!-- days -->\r\n        @if (fullMonth$ | async; as fullMonth) {\r\n          @for (week of fullMonth; track $index) {\r\n            <div class=\"wwp_week\"\r\n              [ngClass]=\"{ 'currentWeek': week.week === currentDate.week && week.year === currentDate.year }\">\r\n              <button (click)=\"onWeekSelect(week.week, week.selectable)\"\r\n                [disabled]=\"!week.selectable\"\r\n                      [ngClass]=\"((selectedWeek$ | async) === week.week) && ((selectedYear$ | async) === week.year)\r\n                                    ? 'ok_button_color'\r\n                                    : 'bg_overlay_rev brdr hov_bg'\"\r\n                class=\"access wwp_week_btn\">\r\n                @for (date of week.dates; track $index) {\r\n                  <div class=\"wwp_day\">\r\n                    {{date}}\r\n                  </div>\r\n                }\r\n              </button>\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n      <div class=\"row space_between\">\r\n        @if (canSelectLastWeek$ | async) {\r\n          <button\r\n            (click)=\"selectLastWeek()\"\r\n            class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n            [attr.aria-label]=\"text().selectLastWeek\">\r\n            <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n          </button>\r\n        } @else {\r\n          <button disabled\r\n            class=\"access btn sm mar_5\"\r\n            [attr.aria-label]=\"text().selectLastWeek\">\r\n            <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n          </button>\r\n        }\r\n        @if (currentDate.selectable) {\r\n          @if (((selectedWeek$ | async) === currentDate.week) && ((selectedYear$ | async) === currentDate.year)) {\r\n            <button\r\n              disabled\r\n              class=\"access btn sm mar_5\"\r\n              [attr.aria-label]=\"text().resetWeekSelection\">\r\n              <i class=\"fas fa-undo-alt\"></i>\r\n            </button>\r\n          } @else {\r\n            <button (click)=\"selectCurrentWeek()\"\r\n              particleTooltip=\"Reset to Current Week\"\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text().resetWeekSelection\">\r\n              <i class=\"fas fa-undo-alt\"></i>\r\n            </button>\r\n          }\r\n        }\r\n        @if (canSelectNextWeek$ | async) {\r\n          <button\r\n            (click)=\"selectNextWeek()\"\r\n            class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n            [attr.aria-label]=\"text().selectNextWeek\">\r\n            <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n          </button>\r\n        } @else {\r\n          <button disabled\r\n            class=\"access btn sm mar_5\"\r\n            [attr.aria-label]=\"text().selectNextWeek\">\r\n            <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</particle-popover>\r\n", styles: [":host{width:100%}.wwp_container{width:100%;min-width:150px;position:relative}.wwp_container:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.wwp_input{position:absolute;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wwp_input:not([disabled]){cursor:pointer}.wwp_input::-ms-expand{display:none}.wwp_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px;-webkit-user-select:none;user-select:none;pointer-events:none;display:flex;align-items:center;justify-content:center}.wwp_button>svg{transition:all .2s ease}.wwp_container:hover .wwp_button>svg{transform:scale(1.2)}.wwp_placeholder{opacity:.5;display:inline}.wwp_options{border-radius:3px;line-height:1.5;overflow:hidden;font-weight:400;z-index:var(--z-overlay);width:300px;background:#fff0;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.wwp_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.wwp_week.currentWeek{border-radius:3px;background-color:#8080801a}.wwp_week_btn{display:flex;align-items:center;width:100%;border:none;padding:0;cursor:pointer}.wwp_week_btn:disabled{cursor:default}.wwp_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent;align-items:center;justify-content:center}\n"] }]
+                    ], imports: [NgClass, PopoverComponent, FormsModule, TooltipDirective, AsyncPipe, DatePipe], template: "<div style=\"cursor:default;overflow: hidden;\"\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'\"\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\n  <button (click)=\"openCalendar($event)\"\n    aria-haspopup=\"dialog\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"ariaLabel() + ', ' + text().openCalendar\"\n    [attr.aria-expanded]=\"calendarPopover.visible\"\n    [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\n    type=\"button\"\n    class=\"access btnset width100 height100 center_center\"\n    style=\"outline-offset: -2px;\"\n    >\n    <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\n      @if (_internalValue | async; as internalValue) {\n        {{internalValue.start | date: dateFormat()}} - {{internalValue.end | date: dateFormat()}}\n      } @else {\n        <div class=\"ent_r2l_txt\">{{text().selectWeek}}...</div>\n      }\n    </div>\n    <div class=\"col min_w50 height100 center_center\"\n      [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\n      <div class=\"width100 height100 center_center\">\n        <i class=\"fas fa-calendar-week ptl_input_text_size\"></i>\n      </div>\n    </div>\n  </button>\n</div>\n\n<!-- TODO: instead of offset 1, attach to wwp_container -->\n<!-- calendar widget -->\n<particle-popover [offset]=\"1\" #calendarPopover>\n  <!-- month / year select -->\n  <div class=\"wwp_options\">\n    <div class=\"content_color pad_5 pad_bot0\">\n      <div class=\"row space_between\">\n        <div class=\"col size_1 mar_5\">\n          <select #yearSelect\n            [ngModel]=\"_selectedYear | async\"\n            [attr.data-dialog-close-override]=\"true\"\n            (change)=\"_selectedYear.next(+yearSelect.value)\"\n            class=\"access input sm content_color\"\n            [attr.aria-label]=\"text().selectYear\">\n            @for (year of validYearRange$ | async; track $index) {\n              <option\n                [value]=\"year\">\n                {{year}}\n              </option>\n            }\n          </select>\n        </div>\n        <div class=\"col size_2 mar_5\">\n          <select #monthSelect\n            [ngModel]=\"_selectedMonth | async\"\n            (change)=\"_selectedMonth.next(+monthSelect.value)\"\n            class=\"access input sm content_color\"\n            [attr.aria-label]=\"text().selectMonth\">\n            <option value=\"0\">{{text().january}}</option>\n            <option value=\"1\">{{text().february}}</option>\n            <option value=\"2\">{{text().march}}</option>\n            <option value=\"3\">{{text().april}}</option>\n            <option value=\"4\">{{text().may}}</option>\n            <option value=\"5\">{{text().june}}</option>\n            <option value=\"6\">{{text().july}}</option>\n            <option value=\"7\">{{text().august}}</option>\n            <option value=\"8\">{{text().september}}</option>\n            <option value=\"9\">{{text().october}}</option>\n            <option value=\"10\">{{text().november}}</option>\n            <option value=\"11\">{{text().december}}</option>\n          </select>\n        </div>\n      </div>\n    </div>\n    <div class=\"content_color pad_5\">\n      <!-- weekdays -->\n      <div class=\"mar_5 mar_bot10\">\n        <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\n          <div class=\"wwp_weekday\">{{text().sundayAbbr}}</div>\n          <div class=\"wwp_weekday\">{{text().mondayAbbr}}</div>\n          <div class=\"wwp_weekday\">{{text().tuesdayAbbr}}</div>\n          <div class=\"wwp_weekday\">{{text().wednesdayAbbr}}</div>\n          <div class=\"wwp_weekday\">{{text().thursdayAbbr}}</div>\n          <div class=\"wwp_weekday\">{{text().fridayAbbr}}</div>\n          <div class=\"wwp_weekday\">{{text().saturdayAbbr}}</div>\n        </div>\n        <!-- days -->\n        @if (fullMonth$ | async; as fullMonth) {\n          @for (week of fullMonth; track $index) {\n            <div class=\"wwp_week\"\n              [ngClass]=\"{ 'currentWeek': week.week === currentDate.week && week.year === currentDate.year }\">\n              <button (click)=\"onWeekSelect(week.week, week.selectable)\"\n                [disabled]=\"!week.selectable\"\n                      [ngClass]=\"((selectedWeek$ | async) === week.week) && ((selectedYear$ | async) === week.year)\n                                    ? 'ok_button_color'\n                                    : 'bg_overlay_rev brdr hov_bg'\"\n                class=\"access wwp_week_btn\">\n                @for (date of week.dates; track $index) {\n                  <div class=\"wwp_day\">\n                    {{date}}\n                  </div>\n                }\n              </button>\n            </div>\n          }\n        }\n      </div>\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\n      <div class=\"row space_between\">\n        @if (canSelectLastWeek$ | async) {\n          <button\n            (click)=\"selectLastWeek()\"\n            class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\n            [attr.aria-label]=\"text().selectLastWeek\">\n            <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\n          </button>\n        } @else {\n          <button disabled\n            class=\"access btn sm mar_5\"\n            [attr.aria-label]=\"text().selectLastWeek\">\n            <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\n          </button>\n        }\n        @if (currentDate.selectable) {\n          @if (((selectedWeek$ | async) === currentDate.week) && ((selectedYear$ | async) === currentDate.year)) {\n            <button\n              disabled\n              class=\"access btn sm mar_5\"\n              [attr.aria-label]=\"text().resetWeekSelection\">\n              <i class=\"fas fa-undo-alt\"></i>\n            </button>\n          } @else {\n            <button (click)=\"selectCurrentWeek()\"\n              particleTooltip=\"Reset to Current Week\"\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\n              [attr.aria-label]=\"text().resetWeekSelection\">\n              <i class=\"fas fa-undo-alt\"></i>\n            </button>\n          }\n        }\n        @if (canSelectNextWeek$ | async) {\n          <button\n            (click)=\"selectNextWeek()\"\n            class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\n            [attr.aria-label]=\"text().selectNextWeek\">\n            <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\n          </button>\n        } @else {\n          <button disabled\n            class=\"access btn sm mar_5\"\n            [attr.aria-label]=\"text().selectNextWeek\">\n            <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\n          </button>\n        }\n      </div>\n    </div>\n  </div>\n</particle-popover>\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"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -7329,7 +7370,7 @@ class ColorPickerComponent {
                 useExisting: forwardRef(() => ColorPickerComponent),
                 multi: true
             }
-        ], 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"] }] });
+        ], viewQueries: [{ propertyName: "colorInput", first: true, predicate: ["colorInput"], descendants: true }], ngImport: i0, template: "@if (render) {\n  <div [style.filter]=\"_disabled ? 'brightness(.95)' : ''\"\n    class=\"cp_container\"\n    [ngClass]=\"classList ? classList : 'input md bg_overlay brdr content_color'\"\n    >\n    @if (colorPickerSupported) {\n      <input #colorPicker\n        type=\"color\"\n        class=\"access cp_color\"\n        [value]=\"'#' + _value\"\n        [disabled]=\"_disabled\"\n        [attr.aria-label]=\"text.chooseColor\"\n        (input)=\"updateModel(colorPicker.value)\"\n        (change)=\"updateModel(colorPicker.value); colorSelected.emit(colorPicker.value)\"/>\n        <i class=\"fas fa-caret-down cp_caret\"></i>\n      } @else {\n        <div class=\"cp_swatch\">\n          <div class=\"width100 height100 bg_overlay brdr\" style=\"border-radius:inherit;\"\n          [style.background-color]=\"'#' + (_value || '000000')\"></div>\n        </div>\n      }\n      <div class=\"bg_overlay brdr vr cp_divider\"></div>\n      <div class=\"cp_hashtag\">#</div>\n      <input #colorInput\n        type=\"text\"\n        class=\"access cp_input\"\n        placeholder=\"000000\"\n        maxlength=\"6\"\n        [attr.aria-label]=\"text.enterHexCode\"\n        [ngModel]=\"_value\"\n        [disabled]=\"_disabled\"\n        (input)=\"input.emit(colorInput.value)\"\n        (paste)=\"handlePaste($event)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (ngModelChange)=\"updateModel($event, true)\"\n        (blur)=\"handleBlur(colorInput.value)\"/>\n      </div>\n    }\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: "21.1.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -7339,7 +7380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                             useExisting: forwardRef(() => ColorPickerComponent),
                             multi: true
                         }
-                    ], standalone: true, imports: [NgClass, FormsModule], 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"] }]
+                    ], standalone: true, imports: [NgClass, FormsModule], template: "@if (render) {\n  <div [style.filter]=\"_disabled ? 'brightness(.95)' : ''\"\n    class=\"cp_container\"\n    [ngClass]=\"classList ? classList : 'input md bg_overlay brdr content_color'\"\n    >\n    @if (colorPickerSupported) {\n      <input #colorPicker\n        type=\"color\"\n        class=\"access cp_color\"\n        [value]=\"'#' + _value\"\n        [disabled]=\"_disabled\"\n        [attr.aria-label]=\"text.chooseColor\"\n        (input)=\"updateModel(colorPicker.value)\"\n        (change)=\"updateModel(colorPicker.value); colorSelected.emit(colorPicker.value)\"/>\n        <i class=\"fas fa-caret-down cp_caret\"></i>\n      } @else {\n        <div class=\"cp_swatch\">\n          <div class=\"width100 height100 bg_overlay brdr\" style=\"border-radius:inherit;\"\n          [style.background-color]=\"'#' + (_value || '000000')\"></div>\n        </div>\n      }\n      <div class=\"bg_overlay brdr vr cp_divider\"></div>\n      <div class=\"cp_hashtag\">#</div>\n      <input #colorInput\n        type=\"text\"\n        class=\"access cp_input\"\n        placeholder=\"000000\"\n        maxlength=\"6\"\n        [attr.aria-label]=\"text.enterHexCode\"\n        [ngModel]=\"_value\"\n        [disabled]=\"_disabled\"\n        (input)=\"input.emit(colorInput.value)\"\n        (paste)=\"handlePaste($event)\"\n        (keydown)=\"handleKeyDown($event)\"\n        (ngModelChange)=\"updateModel($event, true)\"\n        (blur)=\"handleBlur(colorInput.value)\"/>\n      </div>\n    }\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"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -7545,7 +7586,7 @@ class SliderComponent {
                 useExisting: forwardRef(() => SliderComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "sliderInput", first: true, predicate: ["sliderInput"], descendants: true }], ngImport: i0, template: "<div class=\"row wrap v_center\">\r\n  <!-- range slider -->\r\n  <div class=\"col size_1 min_w100 v_center position_relative\" style=\"margin:0 12px 0 -3px;\">\r\n    <div class=\"ws_track_container v_center position_absolute\">\r\n      <div class=\"ws_track bg_overlay_rev brdr width100 position_absolute\"></div>\r\n      <div class=\"ws_track_fill ent_r2l_slider ok_button_color position_absolute\"\r\n           [style.width]=\"sliderWidth + '%'\">\r\n      </div>\r\n    </div>\r\n    <input #slider\r\n           type=\"range\"\r\n           [ngModel]=\"_value\"\r\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n           [disabled]=\"_disabled\"\r\n           [attr.aria-label]=\"text().selectAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n           (input)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n           (change)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n           class=\"access\" style=\"width:100%; z-index: var(--z-frame); margin:10px 0;\" />\r\n  </div>\r\n  <div class=\"col v_center\">\r\n    <!-- slider value input -->\r\n    <input #sliderInput\r\n           type=\"number\"\r\n           [ngModel]=\"_value\"\r\n           [ngClass]=\"_inputClassList\"\r\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n           [size]=\"(_max + '').length\"\r\n           [disabled]=\"_disabled\"\r\n           [attr.aria-label]=\"text().enterAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n           (input)=\"handleInput(+sliderInput.value); input.emit(+sliderInput.value)\"\r\n           (blur)=\"handleInput(+sliderInput.value)\"\r\n           (paste)=\"preventPaste($event)\"\r\n           class=\"access\"\r\n           style=\"width:auto;\" />\r\n    <div class=\"text ptl_input_text_size mar_lr10\">{{unit()}}</div>\r\n  </div>\r\n</div>\r\n", styles: [":host{width:100%}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;border:none;padding:0;margin:0}input[type=range]:focus{outline:none}input[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border:none;color:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;margin-top:-8px;box-shadow:0 1px 4px #00000026}input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}input[type=range]::-moz-range-thumb{border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-moz-range-thumb:active{cursor:grabbing}input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}input[type=range]::-ms-thumb{border:1px solid rgba(0,0,0,.2);height:8px;width:30px;border-radius:5px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-ms-thumb:active{cursor:grabbing}input[type=range]:disabled::-ms-thumb{cursor:not-allowed}input[type=range]::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-webkit-slider-runnable-track{cursor:default}input[type=range]::-moz-range-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-moz-range-track{cursor:default}input[type=range]::-ms-track{width:100%;height:10px;cursor:pointer;border-radius:50px;background:transparent;border:none;color:transparent}input[type=range]:disabled::-ms-track{cursor:default}input[type=range]::-ms-fill-lower{background:transparent;border:none}.ws_track_container{z-index:var(--z-base);margin:10px 0 10px 3px;width:calc(100% - 6px);top:0;border-radius:25px;height:10px;overflow:hidden}.ws_track{height:10px;z-index:var(--z-base);border-radius:25px;inset:0}.ws_track_fill{height:10px;z-index:var(--z-frame);border-radius:25px 0 0 25px;top:0;left:0;bottom:0}@-moz-document url-prefix(){.ws_track_container{top:4px!important}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], viewQueries: [{ propertyName: "sliderInput", first: true, predicate: ["sliderInput"], descendants: true }], ngImport: i0, template: "<div class=\"row wrap v_center\">\n  <!-- range slider -->\n  <div class=\"col size_1 min_w100 v_center position_relative\" style=\"margin:0 12px 0 -3px;\">\n    <div class=\"ws_track_container v_center position_absolute\">\n      <div class=\"ws_track bg_overlay_rev brdr width100 position_absolute\"></div>\n      <div class=\"ws_track_fill ent_r2l_slider ok_button_color position_absolute\"\n           [style.width]=\"sliderWidth + '%'\">\n      </div>\n    </div>\n    <input #slider\n           type=\"range\"\n           [ngModel]=\"_value\"\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\n           [disabled]=\"_disabled\"\n           [attr.aria-label]=\"text().selectAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\n           (input)=\"handleInput(+slider.value); input.emit(+slider.value)\"\n           (change)=\"handleInput(+slider.value); input.emit(+slider.value)\"\n           class=\"access\" style=\"width:100%; z-index: var(--z-frame); margin:10px 0;\" />\n  </div>\n  <div class=\"col v_center\">\n    <!-- slider value input -->\n    <input #sliderInput\n           type=\"number\"\n           [ngModel]=\"_value\"\n           [ngClass]=\"_inputClassList\"\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\n           [size]=\"(_max + '').length\"\n           [disabled]=\"_disabled\"\n           [attr.aria-label]=\"text().enterAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\n           (input)=\"handleInput(+sliderInput.value); input.emit(+sliderInput.value)\"\n           (blur)=\"handleInput(+sliderInput.value)\"\n           (paste)=\"preventPaste($event)\"\n           class=\"access\"\n           style=\"width:auto;\" />\n    <div class=\"text ptl_input_text_size mar_lr10\">{{unit()}}</div>\n  </div>\n</div>\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: "21.1.5", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -7555,7 +7596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                             useExisting: forwardRef(() => SliderComponent),
                             multi: true
                         }
-                    ], imports: [FormsModule, NgClass], template: "<div class=\"row wrap v_center\">\r\n  <!-- range slider -->\r\n  <div class=\"col size_1 min_w100 v_center position_relative\" style=\"margin:0 12px 0 -3px;\">\r\n    <div class=\"ws_track_container v_center position_absolute\">\r\n      <div class=\"ws_track bg_overlay_rev brdr width100 position_absolute\"></div>\r\n      <div class=\"ws_track_fill ent_r2l_slider ok_button_color position_absolute\"\r\n           [style.width]=\"sliderWidth + '%'\">\r\n      </div>\r\n    </div>\r\n    <input #slider\r\n           type=\"range\"\r\n           [ngModel]=\"_value\"\r\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n           [disabled]=\"_disabled\"\r\n           [attr.aria-label]=\"text().selectAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n           (input)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n           (change)=\"handleInput(+slider.value); input.emit(+slider.value)\"\r\n           class=\"access\" style=\"width:100%; z-index: var(--z-frame); margin:10px 0;\" />\r\n  </div>\r\n  <div class=\"col v_center\">\r\n    <!-- slider value input -->\r\n    <input #sliderInput\r\n           type=\"number\"\r\n           [ngModel]=\"_value\"\r\n           [ngClass]=\"_inputClassList\"\r\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\r\n           [size]=\"(_max + '').length\"\r\n           [disabled]=\"_disabled\"\r\n           [attr.aria-label]=\"text().enterAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\r\n           (input)=\"handleInput(+sliderInput.value); input.emit(+sliderInput.value)\"\r\n           (blur)=\"handleInput(+sliderInput.value)\"\r\n           (paste)=\"preventPaste($event)\"\r\n           class=\"access\"\r\n           style=\"width:auto;\" />\r\n    <div class=\"text ptl_input_text_size mar_lr10\">{{unit()}}</div>\r\n  </div>\r\n</div>\r\n", styles: [":host{width:100%}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;border:none;padding:0;margin:0}input[type=range]:focus{outline:none}input[type=range]::-ms-track{width:100%;cursor:pointer;background:transparent;border:none;color:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;margin-top:-8px;box-shadow:0 1px 4px #00000026}input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}input[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}input[type=range]::-moz-range-thumb{border:1px solid rgba(0,0,0,.2);height:24px;width:24px;border-radius:50px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-moz-range-thumb:active{cursor:grabbing}input[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}input[type=range]::-ms-thumb{border:1px solid rgba(0,0,0,.2);height:8px;width:30px;border-radius:5px;background:#fff;cursor:grab;box-shadow:0 1px 4px #00000026}input[type=range]::-ms-thumb:active{cursor:grabbing}input[type=range]:disabled::-ms-thumb{cursor:not-allowed}input[type=range]::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-webkit-slider-runnable-track{cursor:default}input[type=range]::-moz-range-track{width:100%;height:10px;cursor:pointer;border-radius:50px}input[type=range]:disabled::-moz-range-track{cursor:default}input[type=range]::-ms-track{width:100%;height:10px;cursor:pointer;border-radius:50px;background:transparent;border:none;color:transparent}input[type=range]:disabled::-ms-track{cursor:default}input[type=range]::-ms-fill-lower{background:transparent;border:none}.ws_track_container{z-index:var(--z-base);margin:10px 0 10px 3px;width:calc(100% - 6px);top:0;border-radius:25px;height:10px;overflow:hidden}.ws_track{height:10px;z-index:var(--z-base);border-radius:25px;inset:0}.ws_track_fill{height:10px;z-index:var(--z-frame);border-radius:25px 0 0 25px;top:0;left:0;bottom:0}@-moz-document url-prefix(){.ws_track_container{top:4px!important}}\n"] }]
+                    ], imports: [FormsModule, NgClass], template: "<div class=\"row wrap v_center\">\n  <!-- range slider -->\n  <div class=\"col size_1 min_w100 v_center position_relative\" style=\"margin:0 12px 0 -3px;\">\n    <div class=\"ws_track_container v_center position_absolute\">\n      <div class=\"ws_track bg_overlay_rev brdr width100 position_absolute\"></div>\n      <div class=\"ws_track_fill ent_r2l_slider ok_button_color position_absolute\"\n           [style.width]=\"sliderWidth + '%'\">\n      </div>\n    </div>\n    <input #slider\n           type=\"range\"\n           [ngModel]=\"_value\"\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\n           [disabled]=\"_disabled\"\n           [attr.aria-label]=\"text().selectAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\n           (input)=\"handleInput(+slider.value); input.emit(+slider.value)\"\n           (change)=\"handleInput(+slider.value); input.emit(+slider.value)\"\n           class=\"access\" style=\"width:100%; z-index: var(--z-frame); margin:10px 0;\" />\n  </div>\n  <div class=\"col v_center\">\n    <!-- slider value input -->\n    <input #sliderInput\n           type=\"number\"\n           [ngModel]=\"_value\"\n           [ngClass]=\"_inputClassList\"\n           [min]=\"_min\" [max]=\"_max\" [step]=\"_step\"\n           [size]=\"(_max + '').length\"\n           [disabled]=\"_disabled\"\n           [attr.aria-label]=\"text().enterAValue + (ariaLabel() ? ' - ' + ariaLabel() : '')\"\n           (input)=\"handleInput(+sliderInput.value); input.emit(+sliderInput.value)\"\n           (blur)=\"handleInput(+sliderInput.value)\"\n           (paste)=\"preventPaste($event)\"\n           class=\"access\"\n           style=\"width:auto;\" />\n    <div class=\"text ptl_input_text_size mar_lr10\">{{unit()}}</div>\n  </div>\n</div>\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"] }]
         }], propDecorators: { sliderInput: [{
                 type: ViewChild,
                 args: ['sliderInput']
@@ -7641,11 +7682,11 @@ class AccordionComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AccordionComponent, isStandalone: true, selector: "particle-accordion", inputs: { multiple: "multiple", height: "height", headerClass: "headerClass", textClass: "textClass", iconCollapsed: "iconCollapsed", iconExpanded: "iconExpanded", showIcon: "showIcon", text: "text" }, queries: [{ propertyName: "items", predicate: AccordionItemDirective }], viewQueries: [{ propertyName: "contentDivs", predicate: ["ref"], descendants: true }], ngImport: i0, template: "@for (item of items; track $index; let i = $index) {\r\n  <div class=\"particle_accordion_item\" [class.disabled]=\"item.disabled\" [class.active]=\"expanded.has(i)\">\r\n    <button type=\"button\" class=\"particle_accordion_header width100\"\r\n      [ngClass]=\"(item.headerClass ? item.headerClass : headerClass) + (!item.disabled ? ' access' : '')\"\r\n      [style.height]=\"height\"\r\n      (click)=\"!item.disabled ? toggleState(i) : {}\"\r\n      [attr.aria-label]=\"!expanded.has(i) ? text.expand : text.collapse\"\r\n      >\r\n      @if (item.headerTemplate) {\r\n        <ng-container *ngTemplateOutlet=\"item.headerTemplate.templateRef\"></ng-container>\r\n      }\r\n      @if (!item.headerTemplate) {\r\n        @if (showIcon) {\r\n          <div class=\"text\" [ngClass]=\"textClass\">\r\n            @if (!expanded.has(i)) {\r\n              <span><i [ngClass]=\"iconCollapsed + ' fa-fw'\"></i></span>\r\n            }\r\n            @if (expanded.has(i)) {\r\n              <span><i [ngClass]=\"iconExpanded + ' fa-fw'\"></i></span>\r\n            }\r\n            {{item?.header}}\r\n          </div>\r\n        }\r\n        @if (!showIcon) {\r\n          <div class=\"text\" [ngClass]=\"textClass\">\r\n            <span>{{item?.header}}</span>\r\n          </div>\r\n        }\r\n      }\r\n    </button>\r\n    <div class=\"particle_accordion_content\" #ref>\r\n      <ng-container *ngTemplateOutlet=\"$any(item?.content?.templateRef)\"></ng-container>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{--accordion-disabled: rgb(159, 159, 161)}.particle_accordion_header{display:flex;justify-content:flex-start;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.particle_accordion_toggle_button{border:none;transition:transform .2s ease-in;background:none}.particle_accordion_item.disabled .particle_accordion_header{color:var(--accordion-disabled);cursor:auto}.particle_accordion_toggle_button:disabled{cursor:auto}.particle_accordion_toggle_button:disabled svg path:nth-child(2){fill:var(--accordion-disabled)}.particle_accordion_toggle_button:focus{outline:none}.particle_accordion_content{-webkit-user-select:text;user-select:text;overflow:hidden;transition:max-height .2s ease-out}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AccordionComponent, isStandalone: true, selector: "particle-accordion", inputs: { multiple: "multiple", height: "height", headerClass: "headerClass", textClass: "textClass", iconCollapsed: "iconCollapsed", iconExpanded: "iconExpanded", showIcon: "showIcon", text: "text" }, queries: [{ propertyName: "items", predicate: AccordionItemDirective }], viewQueries: [{ propertyName: "contentDivs", predicate: ["ref"], descendants: true }], ngImport: i0, template: "@for (item of items; track $index; let i = $index) {\n  <div class=\"particle_accordion_item\" [class.disabled]=\"item.disabled\" [class.active]=\"expanded.has(i)\">\n    <button type=\"button\" class=\"particle_accordion_header width100\"\n      [ngClass]=\"(item.headerClass ? item.headerClass : headerClass) + (!item.disabled ? ' access' : '')\"\n      [style.height]=\"height\"\n      (click)=\"!item.disabled ? toggleState(i) : {}\"\n      [attr.aria-label]=\"!expanded.has(i) ? text.expand : text.collapse\"\n      >\n      @if (item.headerTemplate) {\n        <ng-container *ngTemplateOutlet=\"item.headerTemplate.templateRef\"></ng-container>\n      }\n      @if (!item.headerTemplate) {\n        @if (showIcon) {\n          <div class=\"text\" [ngClass]=\"textClass\">\n            @if (!expanded.has(i)) {\n              <span><i [ngClass]=\"iconCollapsed + ' fa-fw'\"></i></span>\n            }\n            @if (expanded.has(i)) {\n              <span><i [ngClass]=\"iconExpanded + ' fa-fw'\"></i></span>\n            }\n            {{item?.header}}\n          </div>\n        }\n        @if (!showIcon) {\n          <div class=\"text\" [ngClass]=\"textClass\">\n            <span>{{item?.header}}</span>\n          </div>\n        }\n      }\n    </button>\n    <div class=\"particle_accordion_content\" #ref>\n      <ng-container *ngTemplateOutlet=\"$any(item?.content?.templateRef)\"></ng-container>\n    </div>\n  </div>\n}\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: "21.1.5", 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 $index; let i = $index) {\r\n  <div class=\"particle_accordion_item\" [class.disabled]=\"item.disabled\" [class.active]=\"expanded.has(i)\">\r\n    <button type=\"button\" class=\"particle_accordion_header width100\"\r\n      [ngClass]=\"(item.headerClass ? item.headerClass : headerClass) + (!item.disabled ? ' access' : '')\"\r\n      [style.height]=\"height\"\r\n      (click)=\"!item.disabled ? toggleState(i) : {}\"\r\n      [attr.aria-label]=\"!expanded.has(i) ? text.expand : text.collapse\"\r\n      >\r\n      @if (item.headerTemplate) {\r\n        <ng-container *ngTemplateOutlet=\"item.headerTemplate.templateRef\"></ng-container>\r\n      }\r\n      @if (!item.headerTemplate) {\r\n        @if (showIcon) {\r\n          <div class=\"text\" [ngClass]=\"textClass\">\r\n            @if (!expanded.has(i)) {\r\n              <span><i [ngClass]=\"iconCollapsed + ' fa-fw'\"></i></span>\r\n            }\r\n            @if (expanded.has(i)) {\r\n              <span><i [ngClass]=\"iconExpanded + ' fa-fw'\"></i></span>\r\n            }\r\n            {{item?.header}}\r\n          </div>\r\n        }\r\n        @if (!showIcon) {\r\n          <div class=\"text\" [ngClass]=\"textClass\">\r\n            <span>{{item?.header}}</span>\r\n          </div>\r\n        }\r\n      }\r\n    </button>\r\n    <div class=\"particle_accordion_content\" #ref>\r\n      <ng-container *ngTemplateOutlet=\"$any(item?.content?.templateRef)\"></ng-container>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{--accordion-disabled: rgb(159, 159, 161)}.particle_accordion_header{display:flex;justify-content:flex-start;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.particle_accordion_toggle_button{border:none;transition:transform .2s ease-in;background:none}.particle_accordion_item.disabled .particle_accordion_header{color:var(--accordion-disabled);cursor:auto}.particle_accordion_toggle_button:disabled{cursor:auto}.particle_accordion_toggle_button:disabled svg path:nth-child(2){fill:var(--accordion-disabled)}.particle_accordion_toggle_button:focus{outline:none}.particle_accordion_content{-webkit-user-select:text;user-select:text;overflow:hidden;transition:max-height .2s ease-out}\n"] }]
+            args: [{ selector: 'particle-accordion', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, NgTemplateOutlet, AccordionItemDirective], template: "@for (item of items; track $index; let i = $index) {\n  <div class=\"particle_accordion_item\" [class.disabled]=\"item.disabled\" [class.active]=\"expanded.has(i)\">\n    <button type=\"button\" class=\"particle_accordion_header width100\"\n      [ngClass]=\"(item.headerClass ? item.headerClass : headerClass) + (!item.disabled ? ' access' : '')\"\n      [style.height]=\"height\"\n      (click)=\"!item.disabled ? toggleState(i) : {}\"\n      [attr.aria-label]=\"!expanded.has(i) ? text.expand : text.collapse\"\n      >\n      @if (item.headerTemplate) {\n        <ng-container *ngTemplateOutlet=\"item.headerTemplate.templateRef\"></ng-container>\n      }\n      @if (!item.headerTemplate) {\n        @if (showIcon) {\n          <div class=\"text\" [ngClass]=\"textClass\">\n            @if (!expanded.has(i)) {\n              <span><i [ngClass]=\"iconCollapsed + ' fa-fw'\"></i></span>\n            }\n            @if (expanded.has(i)) {\n              <span><i [ngClass]=\"iconExpanded + ' fa-fw'\"></i></span>\n            }\n            {{item?.header}}\n          </div>\n        }\n        @if (!showIcon) {\n          <div class=\"text\" [ngClass]=\"textClass\">\n            <span>{{item?.header}}</span>\n          </div>\n        }\n      }\n    </button>\n    <div class=\"particle_accordion_content\" #ref>\n      <ng-container *ngTemplateOutlet=\"$any(item?.content?.templateRef)\"></ng-container>\n    </div>\n  </div>\n}\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: [{
                 type: Input
             }], height: [{
@@ -7717,6 +7758,7 @@ class SlideoverComponent {
         this.opened.emit(null);
     }
     close() {
+        document.activeElement?.blur();
         this.removeModalMask();
         this.slideoverOpen = false;
         this.closed.emit(null);
@@ -7751,11 +7793,11 @@ class SlideoverComponent {
         }, 100);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: SlideoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SlideoverComponent, isStandalone: true, selector: "particle-slideover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, bgClass: { classPropertyName: "bgClass", publicName: "bgClass", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, hideCloseButton: { classPropertyName: "hideCloseButton", publicName: "hideCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: "<div #overlay (click)=\"close()\"></div>\r\n<div\r\n  [ngClass]=\"bgClass() + ' ' + (slideoverOpen ? 'slideover_active_' + position : 'slideover_inactive_' + position) + ' slideover-panel ' + position\"\r\n  [style.width]=\"position === 'right' || position === 'left' ? (breakpointExceeded ? '100%' : width()) : null\"\r\n  [style.height]=\"position === 'top' || position === 'bottom' ? (breakpointExceeded ? '100%' : height()) : null\"\r\n  [style.left]=\"position === 'left' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\r\n  [style.right]=\"position === 'right' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\r\n  [style.bottom]=\"position === 'bottom' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\r\n  [style.top]=\"position === 'top' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\r\n  [style.visibility]=\"!visible ? 'hidden': 'visible'\"\r\n  [attr.aria-hidden]=\"!slideoverOpen\"\r\n  >\r\n  @if (!hideCloseButton()) {\r\n    <div class=\"push_close_bar\">\r\n      <button class=\"access btnset clear\"\r\n        [attr.aria-label]=\"text().close\"\r\n        (click)=\"close()\">\r\n        <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n          <i class=\"fas fa-times\"></i>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".slideover-panel{position:fixed;transition:transform .3s;display:flex;flex-direction:column;z-index:var(--z-dialog)}.slideover-panel.left{top:0;left:0;height:100%}.slideover-panel.right{top:0;right:0;height:100%}.slideover-panel.top{top:0;left:0;width:100%}.slideover-panel.bottom{bottom:0;left:0;width:100%}.slideover_inactive_left,.slideover_active_left{transition:left .2s ease-in-out}.slideover_inactive_right,.slideover_active_right{transition:right .2s ease-in-out}.slideover_inactive_top,.slideover_active_top{transition:top .2s ease-in-out}.slideover_inactive_bottom,.slideover_active_bottom{transition:bottom .2s ease-in-out}.push_close_bar{position:absolute;right:0;top:0;width:45px;height:45px;z-index:var(--z-dialog);display:flex;justify-content:center;align-items:center}.data_hide_button{float:right;display:flex;align-items:center;justify-content:center;font-size:9pt;min-height:20px;height:20px;min-width:20px;width:20px;border-radius:50%;cursor:pointer;padding:0;transition:all .2s ease-in-out;background-color:#ffffffe6;color:#0006;border:1px solid rgba(0,0,0,.1)}.data_hide_button:hover{background-color:#0000004d;color:#fffc;border:1px solid rgba(0,0,0,.1)}.particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: SlideoverComponent, isStandalone: true, selector: "particle-slideover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, bgClass: { classPropertyName: "bgClass", publicName: "bgClass", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, hideCloseButton: { classPropertyName: "hideCloseButton", publicName: "hideCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: "<div #overlay (click)=\"close()\"></div>\n<div\n  [ngClass]=\"bgClass() + ' ' + (slideoverOpen ? 'slideover_active_' + position : 'slideover_inactive_' + position) + ' slideover-panel ' + position\"\n  [style.width]=\"position === 'right' || position === 'left' ? (breakpointExceeded ? '100%' : width()) : null\"\n  [style.height]=\"position === 'top' || position === 'bottom' ? (breakpointExceeded ? '100%' : height()) : null\"\n  [style.left]=\"position === 'left' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\n  [style.right]=\"position === 'right' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\n  [style.bottom]=\"position === 'bottom' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\n  [style.top]=\"position === 'top' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\n  [style.visibility]=\"!visible ? 'hidden': 'visible'\"\n  [attr.aria-hidden]=\"!slideoverOpen\"\n  >\n  @if (!hideCloseButton()) {\n    <div class=\"push_close_bar\">\n      <button class=\"access btnset clear\"\n        [attr.aria-label]=\"text().close\"\n        (click)=\"close()\">\n        <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\n          <i class=\"fas fa-times\"></i>\n        </div>\n      </button>\n    </div>\n  }\n  <ng-content></ng-content>\n</div>\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: "21.1.5", 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"] }]
+            args: [{ selector: 'particle-slideover', imports: [NgClass], template: "<div #overlay (click)=\"close()\"></div>\n<div\n  [ngClass]=\"bgClass() + ' ' + (slideoverOpen ? 'slideover_active_' + position : 'slideover_inactive_' + position) + ' slideover-panel ' + position\"\n  [style.width]=\"position === 'right' || position === 'left' ? (breakpointExceeded ? '100%' : width()) : null\"\n  [style.height]=\"position === 'top' || position === 'bottom' ? (breakpointExceeded ? '100%' : height()) : null\"\n  [style.left]=\"position === 'left' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\n  [style.right]=\"position === 'right' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\n  [style.bottom]=\"position === 'bottom' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\n  [style.top]=\"position === 'top' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\n  [style.visibility]=\"!visible ? 'hidden': 'visible'\"\n  [attr.aria-hidden]=\"!slideoverOpen\"\n  >\n  @if (!hideCloseButton()) {\n    <div class=\"push_close_bar\">\n      <button class=\"access btnset clear\"\n        [attr.aria-label]=\"text().close\"\n        (click)=\"close()\">\n        <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\n          <i class=\"fas fa-times\"></i>\n        </div>\n      </button>\n    </div>\n  }\n  <ng-content></ng-content>\n</div>\n", styles: [".slideover-panel{position:fixed;transition:transform .3s;display:flex;flex-direction:column;z-index:var(--z-dialog)}.slideover-panel.left{top:0;left:0;height:100%}.slideover-panel.right{top:0;right:0;height:100%}.slideover-panel.top{top:0;left:0;width:100%}.slideover-panel.bottom{bottom:0;left:0;width:100%}.slideover_inactive_left,.slideover_active_left{transition:left .2s ease-in-out}.slideover_inactive_right,.slideover_active_right{transition:right .2s ease-in-out}.slideover_inactive_top,.slideover_active_top{transition:top .2s ease-in-out}.slideover_inactive_bottom,.slideover_active_bottom{transition:bottom .2s ease-in-out}.push_close_bar{position:absolute;right:0;top:0;width:45px;height:45px;z-index:var(--z-dialog);display:flex;justify-content:center;align-items:center}.data_hide_button{float:right;display:flex;align-items:center;justify-content:center;font-size:9pt;min-height:20px;height:20px;min-width:20px;width:20px;border-radius:50%;cursor:pointer;padding:0;transition:all .2s ease-in-out;background-color:#ffffffe6;color:#0006;border:1px solid rgba(0,0,0,.1)}.data_hide_button:hover{background-color:#0000004d;color:#fffc;border:1px solid rgba(0,0,0,.1)}.particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}\n"] }]
         }], propDecorators: { position: [{
                 type: Input
             }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], bgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgClass", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], hideCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCloseButton", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], overlay: [{
@@ -7892,11 +7934,11 @@ class IdleTimeoutComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IdleTimeoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: IdleTimeoutComponent, isStandalone: true, selector: "particle-idle-timeout", inputs: { borderRadius: "borderRadius", timeoutInSeconds: "timeoutInSeconds", text: "text" }, outputs: { timerEnd: "timerEnd" }, viewQueries: [{ propertyName: "timeoutDialog", first: true, predicate: ["timeoutDialog"], descendants: true }], ngImport: i0, template: "<!-- timeout dialog -->\r\n<particle-dialog\r\n  [title]=\"text.sessionExpiring\"\r\n  [object]=\"showDialog\"\r\n  (closed)=\"resetTimer()\"\r\n  width=\"350px\" height=\"150px\"\r\n  #timeoutDialog\r\n>\r\n  <div class=\"row column center_center height100\">\r\n    <div class=\"header sm bold center mar_bot10\">{{ count }} {{ count !== 1 ? text.seconds : text.second }}</div>\r\n    <button class=\"access btn md bg_overlay brdr ok_button_color\" [attr.aria-label]=\"text.stayLoggedIn\"\r\n            (click)=\"resetTimer()\">\r\n      <span class=\"text\">{{ text.stayLoggedIn }}</span>\r\n    </button>\r\n  </div>\r\n</particle-dialog>\r\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: IdleTimeoutComponent, isStandalone: true, selector: "particle-idle-timeout", inputs: { borderRadius: "borderRadius", timeoutInSeconds: "timeoutInSeconds", text: "text" }, outputs: { timerEnd: "timerEnd" }, viewQueries: [{ propertyName: "timeoutDialog", first: true, predicate: ["timeoutDialog"], descendants: true }], ngImport: i0, template: "<!-- timeout dialog -->\n<particle-dialog\n  [title]=\"text.sessionExpiring\"\n  [object]=\"showDialog\"\n  (closed)=\"resetTimer()\"\n  width=\"350px\" height=\"150px\"\n  #timeoutDialog\n>\n  <div class=\"row column center_center height100\">\n    <div class=\"header sm bold center mar_bot10\">{{ count }} {{ count !== 1 ? text.seconds : text.second }}</div>\n    <button class=\"access btn md bg_overlay brdr ok_button_color\" [attr.aria-label]=\"text.stayLoggedIn\"\n            (click)=\"resetTimer()\">\n      <span class=\"text\">{{ text.stayLoggedIn }}</span>\n    </button>\n  </div>\n</particle-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "closeAttempt", "opened"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", 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  (closed)=\"resetTimer()\"\r\n  width=\"350px\" height=\"150px\"\r\n  #timeoutDialog\r\n>\r\n  <div class=\"row column center_center height100\">\r\n    <div class=\"header sm bold center mar_bot10\">{{ count }} {{ count !== 1 ? text.seconds : text.second }}</div>\r\n    <button class=\"access btn md bg_overlay brdr ok_button_color\" [attr.aria-label]=\"text.stayLoggedIn\"\r\n            (click)=\"resetTimer()\">\r\n      <span class=\"text\">{{ text.stayLoggedIn }}</span>\r\n    </button>\r\n  </div>\r\n</particle-dialog>\r\n" }]
+            args: [{ selector: 'particle-idle-timeout', standalone: true, imports: [DialogComponent], template: "<!-- timeout dialog -->\n<particle-dialog\n  [title]=\"text.sessionExpiring\"\n  [object]=\"showDialog\"\n  (closed)=\"resetTimer()\"\n  width=\"350px\" height=\"150px\"\n  #timeoutDialog\n>\n  <div class=\"row column center_center height100\">\n    <div class=\"header sm bold center mar_bot10\">{{ count }} {{ count !== 1 ? text.seconds : text.second }}</div>\n    <button class=\"access btn md bg_overlay brdr ok_button_color\" [attr.aria-label]=\"text.stayLoggedIn\"\n            (click)=\"resetTimer()\">\n      <span class=\"text\">{{ text.stayLoggedIn }}</span>\n    </button>\n  </div>\n</particle-dialog>\n" }]
         }], propDecorators: { borderRadius: [{
                 type: Input
             }], timeoutInSeconds: [{
@@ -7938,11 +7980,11 @@ class ScrollToTopComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ScrollToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ScrollToTopComponent, isStandalone: true, selector: "particle-scroll-to-top", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, scrollDistance: { classPropertyName: "scrollDistance", publicName: "scrollDistance", isSignal: true, isRequired: false, transformFunction: null }, bottomOffset: { classPropertyName: "bottomOffset", publicName: "bottomOffset", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ($scrollTop | async; as scrollTop) {\r\n  <div [style.visibility]=\"scrollTop > scrollDistance() ? 'visible' : 'hidden'\"\r\n    [style.opacity]=\"scrollTop > scrollDistance() ? '1' : '0'\"\r\n    [style.bottom]=\"bottomOffset() + 'px'\"\r\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n    <button (click)=\"scrollToTop()\"\r\n      class=\"access btn pad_10 brad_3 brdr content_color\"\r\n      type=\"button\"\r\n      [attr.aria-label]=\"text().scrollToTop\">\r\n      <span class=\"icon slide_up\"><i class=\"fas fa-chevron-up\"></i></span>\r\n    </button>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ScrollToTopComponent, isStandalone: true, selector: "particle-scroll-to-top", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, scrollDistance: { classPropertyName: "scrollDistance", publicName: "scrollDistance", isSignal: true, isRequired: false, transformFunction: null }, bottomOffset: { classPropertyName: "bottomOffset", publicName: "bottomOffset", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ($scrollTop | async; as scrollTop) {\n  <div [style.visibility]=\"scrollTop > scrollDistance() ? 'visible' : 'hidden'\"\n    [style.opacity]=\"scrollTop > scrollDistance() ? '1' : '0'\"\n    [style.bottom]=\"bottomOffset() + 'px'\"\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\n    <button (click)=\"scrollToTop()\"\n      class=\"access btn pad_10 brad_3 brdr content_color\"\n      type=\"button\"\n      [attr.aria-label]=\"text().scrollToTop\">\n      <span class=\"icon slide_up\"><i class=\"fas fa-chevron-up\"></i></span>\n    </button>\n  </div>\n}\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", 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" }]
+            args: [{ selector: 'particle-scroll-to-top', imports: [AsyncPipe], template: "@if ($scrollTop | async; as scrollTop) {\n  <div [style.visibility]=\"scrollTop > scrollDistance() ? 'visible' : 'hidden'\"\n    [style.opacity]=\"scrollTop > scrollDistance() ? '1' : '0'\"\n    [style.bottom]=\"bottomOffset() + 'px'\"\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\n    <button (click)=\"scrollToTop()\"\n      class=\"access btn pad_10 brad_3 brdr content_color\"\n      type=\"button\"\n      [attr.aria-label]=\"text().scrollToTop\">\n      <span class=\"icon slide_up\"><i class=\"fas fa-chevron-up\"></i></span>\n    </button>\n  </div>\n}\n" }]
         }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], scrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollDistance", required: false }] }], bottomOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottomOffset", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 
 class LayoutFullwidthSidebarComponent {
@@ -7971,11 +8013,11 @@ class LayoutFullwidthSidebarComponent {
         return `calc(100vh - ${offset}px)`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutFullwidthSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LayoutFullwidthSidebarComponent, isStandalone: true, selector: "particle-layout-fullwidth-sidebar", inputs: { mainContent: { classPropertyName: "mainContent", publicName: "mainContent", isSignal: true, isRequired: false, transformFunction: null }, rightSidebar: { classPropertyName: "rightSidebar", publicName: "rightSidebar", isSignal: true, isRequired: false, transformFunction: null }, mainContentContainerClassList: { classPropertyName: "mainContentContainerClassList", publicName: "mainContentContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarContainerClassList: { classPropertyName: "rightSidebarContainerClassList", publicName: "rightSidebarContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarSticky: { classPropertyName: "rightSidebarSticky", publicName: "rightSidebarSticky", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarWidth: { classPropertyName: "rightSidebarWidth", publicName: "rightSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarCollapsedTabOffset: { classPropertyName: "rightSidebarCollapsedTabOffset", publicName: "rightSidebarCollapsedTabOffset", isSignal: true, isRequired: false, transformFunction: null }, collapsedClassList: { classPropertyName: "collapsedClassList", publicName: "collapsedClassList", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarEnabled: { classPropertyName: "mobileSidebarEnabled", publicName: "mobileSidebarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "slideover", first: true, predicate: ["slideover"], descendants: true }], ngImport: i0, template: "<!-- setup for a side column -->\r\n<div class=\"row height100 ent_r2l_row\">\r\n  <div class=\"row column space_between height100\"\r\n    [ngClass]=\"mainContentContainerClassList()\">\r\n    <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\r\n  </div>\r\n\r\n  @if (!rightSidebarSticky()) {\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [ngClass]=\"rightSidebarContainerClassList()\"\r\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n      [style.width]=\"rightSidebarWidth()\">\r\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n    </div>\r\n  }\r\n\r\n  @if (rightSidebarSticky()) {\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n      [style.width]=\"rightSidebarWidth()\">\r\n      <div class=\"row column sticky_sidebar\"\r\n        [ngClass]=\"rightSidebarContainerClassList()\"\r\n        [style.height]=\"stickySidebarHeight\">\r\n        <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\r\n  <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\r\n    [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\r\n    [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\r\n    style=\"z-index: var(--z-frame);\"\r\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n    <button\r\n      (click)=\"slideover.open()\"\r\n      class=\"access btn pad_10 brad_3 brdr content_color\"\r\n      type=\"button\">\r\n      <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\r\n    </button>\r\n  </div>\r\n  <particle-slideover\r\n    position=\"right\"\r\n    [width]=\"rightSidebarWidth()\"\r\n    [breakpoint]=\"1\"\r\n    #slideover\r\n    >\r\n    <div class=\"min_h40 header_color\">\r\n    </div>\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\r\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n    </div>\r\n  </particle-slideover>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlideoverComponent, selector: "particle-slideover", inputs: ["position", "modal", "width", "height", "bgClass", "text", "breakpoint", "hideCloseButton"], outputs: ["opened", "closed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LayoutFullwidthSidebarComponent, isStandalone: true, selector: "particle-layout-fullwidth-sidebar", inputs: { mainContent: { classPropertyName: "mainContent", publicName: "mainContent", isSignal: true, isRequired: false, transformFunction: null }, rightSidebar: { classPropertyName: "rightSidebar", publicName: "rightSidebar", isSignal: true, isRequired: false, transformFunction: null }, mainContentContainerClassList: { classPropertyName: "mainContentContainerClassList", publicName: "mainContentContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarContainerClassList: { classPropertyName: "rightSidebarContainerClassList", publicName: "rightSidebarContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarSticky: { classPropertyName: "rightSidebarSticky", publicName: "rightSidebarSticky", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarWidth: { classPropertyName: "rightSidebarWidth", publicName: "rightSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarCollapsedTabOffset: { classPropertyName: "rightSidebarCollapsedTabOffset", publicName: "rightSidebarCollapsedTabOffset", isSignal: true, isRequired: false, transformFunction: null }, collapsedClassList: { classPropertyName: "collapsedClassList", publicName: "collapsedClassList", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarEnabled: { classPropertyName: "mobileSidebarEnabled", publicName: "mobileSidebarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "slideover", first: true, predicate: ["slideover"], descendants: true }], ngImport: i0, template: "<!-- setup for a side column -->\n<div class=\"row height100 ent_r2l_row\">\n  <div class=\"row column space_between height100\"\n    [ngClass]=\"mainContentContainerClassList()\">\n    <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\n  </div>\n\n  @if (!rightSidebarSticky()) {\n    <div class=\"particle_layout_sidebar height100\"\n      [ngClass]=\"rightSidebarContainerClassList()\"\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\n      [style.width]=\"rightSidebarWidth()\">\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\n    </div>\n  }\n\n  @if (rightSidebarSticky()) {\n    <div class=\"particle_layout_sidebar height100\"\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\n      [style.width]=\"rightSidebarWidth()\">\n      <div class=\"row column sticky_sidebar\"\n        [ngClass]=\"rightSidebarContainerClassList()\"\n        [style.height]=\"stickySidebarHeight\">\n        <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\n      </div>\n    </div>\n  }\n</div>\n\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\n  <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\n    [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\n    [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\n    style=\"z-index: var(--z-frame);\"\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\n    <button\n      (click)=\"slideover.open()\"\n      class=\"access btn pad_10 brad_3 brdr content_color\"\n      type=\"button\">\n      <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\n    </button>\n  </div>\n  <particle-slideover\n    position=\"right\"\n    [width]=\"rightSidebarWidth()\"\n    [breakpoint]=\"1\"\n    #slideover\n    >\n    <div class=\"min_h40 header_color\">\n    </div>\n    <div class=\"particle_layout_sidebar height100\"\n      [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\n    </div>\n  </particle-slideover>\n}\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: "21.1.5", 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" }]
+            args: [{ selector: 'particle-layout-fullwidth-sidebar', imports: [NgClass, NgTemplateOutlet, SlideoverComponent], template: "<!-- setup for a side column -->\n<div class=\"row height100 ent_r2l_row\">\n  <div class=\"row column space_between height100\"\n    [ngClass]=\"mainContentContainerClassList()\">\n    <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\n  </div>\n\n  @if (!rightSidebarSticky()) {\n    <div class=\"particle_layout_sidebar height100\"\n      [ngClass]=\"rightSidebarContainerClassList()\"\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\n      [style.width]=\"rightSidebarWidth()\">\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\n    </div>\n  }\n\n  @if (rightSidebarSticky()) {\n    <div class=\"particle_layout_sidebar height100\"\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\n      [style.width]=\"rightSidebarWidth()\">\n      <div class=\"row column sticky_sidebar\"\n        [ngClass]=\"rightSidebarContainerClassList()\"\n        [style.height]=\"stickySidebarHeight\">\n        <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\n      </div>\n    </div>\n  }\n</div>\n\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\n  <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\n    [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\n    [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\n    style=\"z-index: var(--z-frame);\"\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\n    <button\n      (click)=\"slideover.open()\"\n      class=\"access btn pad_10 brad_3 brdr content_color\"\n      type=\"button\">\n      <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\n    </button>\n  </div>\n  <particle-slideover\n    position=\"right\"\n    [width]=\"rightSidebarWidth()\"\n    [breakpoint]=\"1\"\n    #slideover\n    >\n    <div class=\"min_h40 header_color\">\n    </div>\n    <div class=\"particle_layout_sidebar height100\"\n      [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\n    </div>\n  </particle-slideover>\n}\n" }]
         }], propDecorators: { mainContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainContent", required: false }] }], rightSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebar", required: false }] }], mainContentContainerClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainContentContainerClassList", required: false }] }], rightSidebarContainerClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarContainerClassList", required: false }] }], rightSidebarSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarSticky", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], footerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerHeight", required: false }] }], rightSidebarWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarWidth", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], rightSidebarCollapsedTabOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarCollapsedTabOffset", required: false }] }], collapsedClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedClassList", required: false }] }], mobileSidebarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSidebarEnabled", required: false }] }], slideover: [{
                 type: ViewChild,
                 args: ['slideover']
@@ -8018,11 +8060,11 @@ class LayoutFullFramingComponent {
         return `calc(100% - ${offset}px)`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LayoutFullFramingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LayoutFullFramingComponent, isStandalone: true, selector: "particle-layout-full-framing", inputs: { mainContent: { classPropertyName: "mainContent", publicName: "mainContent", isSignal: true, isRequired: false, transformFunction: null }, rightSidebar: { classPropertyName: "rightSidebar", publicName: "rightSidebar", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, mainContentContainerClassList: { classPropertyName: "mainContentContainerClassList", publicName: "mainContentContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarContainerClassList: { classPropertyName: "rightSidebarContainerClassList", publicName: "rightSidebarContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, headerClassList: { classPropertyName: "headerClassList", publicName: "headerClassList", isSignal: true, isRequired: false, transformFunction: null }, footerClassList: { classPropertyName: "footerClassList", publicName: "footerClassList", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarWidth: { classPropertyName: "rightSidebarWidth", publicName: "rightSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarCollapsedTabOffset: { classPropertyName: "rightSidebarCollapsedTabOffset", publicName: "rightSidebarCollapsedTabOffset", isSignal: true, isRequired: false, transformFunction: null }, collapsedClassList: { classPropertyName: "collapsedClassList", publicName: "collapsedClassList", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarEnabled: { classPropertyName: "mobileSidebarEnabled", publicName: "mobileSidebarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "slideover", first: true, predicate: ["slideover"], descendants: true }], ngImport: i0, template: "<div class=\"width100 height100\">\r\n  <div class=\"width100 header_sticky\" [ngClass]=\"headerClassList()\" [style.height]=\"headerHeight()\">\r\n    <ng-template [ngTemplateOutlet]=\"header()\"></ng-template>\r\n  </div>\r\n\r\n  <div class=\"row ent_r2l_row\" [style.height]=\"contentSidebarHeight\">\r\n    <div class=\"row column space_between height100\"\r\n      [ngClass]=\"mainContentContainerClassList()\">\r\n      <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\r\n    </div>\r\n\r\n    <div class=\"col particle_layout_sidebar height100\"\r\n      [style.width]=\"rightSidebarWidth()\"\r\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n      >\r\n      <div class=\"row column sticky_sidebar height100\"\r\n        [ngClass]=\"rightSidebarContainerClassList()\"\r\n        [style.height]=\"stickySidebarHeight\"\r\n        [style.top]=\"headerHeight()\">\r\n        <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"width100 footer_sticky\" [ngClass]=\"footerClassList()\" [style.height]=\"footerHeight()\">\r\n    <ng-template [ngTemplateOutlet]=\"footer()\"></ng-template>\r\n  </div>\r\n</div>\r\n\r\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\r\n  <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\r\n    [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\r\n    [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\r\n    style=\"z-index: var(--z-frame);\"\r\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n    <button\r\n      (click)=\"slideover.open()\"\r\n      class=\"access btn pad_10 brad_3 brdr content_color\"\r\n      type=\"button\">\r\n      <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\r\n    </button>\r\n  </div>\r\n  <particle-slideover\r\n    position=\"right\"\r\n    [width]=\"rightSidebarWidth()\"\r\n    [breakpoint]=\"1\"\r\n    #slideover\r\n    >\r\n    <div class=\"min_h40 header_color\">\r\n    </div>\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\r\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n    </div>\r\n  </particle-slideover>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlideoverComponent, selector: "particle-slideover", inputs: ["position", "modal", "width", "height", "bgClass", "text", "breakpoint", "hideCloseButton"], outputs: ["opened", "closed"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LayoutFullFramingComponent, isStandalone: true, selector: "particle-layout-full-framing", inputs: { mainContent: { classPropertyName: "mainContent", publicName: "mainContent", isSignal: true, isRequired: false, transformFunction: null }, rightSidebar: { classPropertyName: "rightSidebar", publicName: "rightSidebar", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, mainContentContainerClassList: { classPropertyName: "mainContentContainerClassList", publicName: "mainContentContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarContainerClassList: { classPropertyName: "rightSidebarContainerClassList", publicName: "rightSidebarContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, headerClassList: { classPropertyName: "headerClassList", publicName: "headerClassList", isSignal: true, isRequired: false, transformFunction: null }, footerClassList: { classPropertyName: "footerClassList", publicName: "footerClassList", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarWidth: { classPropertyName: "rightSidebarWidth", publicName: "rightSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarCollapsedTabOffset: { classPropertyName: "rightSidebarCollapsedTabOffset", publicName: "rightSidebarCollapsedTabOffset", isSignal: true, isRequired: false, transformFunction: null }, collapsedClassList: { classPropertyName: "collapsedClassList", publicName: "collapsedClassList", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarEnabled: { classPropertyName: "mobileSidebarEnabled", publicName: "mobileSidebarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "slideover", first: true, predicate: ["slideover"], descendants: true }], ngImport: i0, template: "<div class=\"width100 height100\">\n  <div class=\"width100 header_sticky\" [ngClass]=\"headerClassList()\" [style.height]=\"headerHeight()\">\n    <ng-template [ngTemplateOutlet]=\"header()\"></ng-template>\n  </div>\n\n  <div class=\"row ent_r2l_row\" [style.height]=\"contentSidebarHeight\">\n    <div class=\"row column space_between height100\"\n      [ngClass]=\"mainContentContainerClassList()\">\n      <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\n    </div>\n\n    <div class=\"col particle_layout_sidebar height100\"\n      [style.width]=\"rightSidebarWidth()\"\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\n      >\n      <div class=\"row column sticky_sidebar height100\"\n        [ngClass]=\"rightSidebarContainerClassList()\"\n        [style.height]=\"stickySidebarHeight\"\n        [style.top]=\"headerHeight()\">\n        <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"width100 footer_sticky\" [ngClass]=\"footerClassList()\" [style.height]=\"footerHeight()\">\n    <ng-template [ngTemplateOutlet]=\"footer()\"></ng-template>\n  </div>\n</div>\n\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\n  <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\n    [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\n    [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\n    style=\"z-index: var(--z-frame);\"\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\n    <button\n      (click)=\"slideover.open()\"\n      class=\"access btn pad_10 brad_3 brdr content_color\"\n      type=\"button\">\n      <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\n    </button>\n  </div>\n  <particle-slideover\n    position=\"right\"\n    [width]=\"rightSidebarWidth()\"\n    [breakpoint]=\"1\"\n    #slideover\n    >\n    <div class=\"min_h40 header_color\">\n    </div>\n    <div class=\"particle_layout_sidebar height100\"\n      [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\n    </div>\n  </particle-slideover>\n}\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: "21.1.5", 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" }]
+            args: [{ selector: 'particle-layout-full-framing', imports: [NgClass, NgTemplateOutlet, SlideoverComponent], template: "<div class=\"width100 height100\">\n  <div class=\"width100 header_sticky\" [ngClass]=\"headerClassList()\" [style.height]=\"headerHeight()\">\n    <ng-template [ngTemplateOutlet]=\"header()\"></ng-template>\n  </div>\n\n  <div class=\"row ent_r2l_row\" [style.height]=\"contentSidebarHeight\">\n    <div class=\"row column space_between height100\"\n      [ngClass]=\"mainContentContainerClassList()\">\n      <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\n    </div>\n\n    <div class=\"col particle_layout_sidebar height100\"\n      [style.width]=\"rightSidebarWidth()\"\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\n      >\n      <div class=\"row column sticky_sidebar height100\"\n        [ngClass]=\"rightSidebarContainerClassList()\"\n        [style.height]=\"stickySidebarHeight\"\n        [style.top]=\"headerHeight()\">\n        <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"width100 footer_sticky\" [ngClass]=\"footerClassList()\" [style.height]=\"footerHeight()\">\n    <ng-template [ngTemplateOutlet]=\"footer()\"></ng-template>\n  </div>\n</div>\n\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\n  <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\n    [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\n    [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\n    style=\"z-index: var(--z-frame);\"\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\n    <button\n      (click)=\"slideover.open()\"\n      class=\"access btn pad_10 brad_3 brdr content_color\"\n      type=\"button\">\n      <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\n    </button>\n  </div>\n  <particle-slideover\n    position=\"right\"\n    [width]=\"rightSidebarWidth()\"\n    [breakpoint]=\"1\"\n    #slideover\n    >\n    <div class=\"min_h40 header_color\">\n    </div>\n    <div class=\"particle_layout_sidebar height100\"\n      [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\n    </div>\n  </particle-slideover>\n}\n" }]
         }], propDecorators: { mainContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainContent", required: false }] }], rightSidebar: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebar", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], mainContentContainerClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "mainContentContainerClassList", required: false }] }], rightSidebarContainerClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarContainerClassList", required: false }] }], headerClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerClassList", required: false }] }], footerClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerClassList", required: false }] }], headerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerHeight", required: false }] }], footerHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerHeight", required: false }] }], rightSidebarWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarWidth", required: false }] }], breakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoint", required: false }] }], rightSidebarCollapsedTabOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSidebarCollapsedTabOffset", required: false }] }], collapsedClassList: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedClassList", required: false }] }], mobileSidebarEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSidebarEnabled", required: false }] }], slideover: [{
                 type: ViewChild,
                 args: ['slideover']
@@ -8110,7 +8152,7 @@ class ToggleSwitchComponent {
                 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" }] });
+            }], ngImport: i0, template: "@if (options$ | async; as options) {\n  <button\n    (click)=\"handleClick()\"\n    [attr.aria-label]=\"options.accessibilityLabel\"\n    [disabled]=\"disabled()\"\n    [ngClass]=\"value ? options.affirmativeColorClass : options.negativeColorClass\"\n    class=\"access btn sm v_center hov_glow p_toggle_button\"\n    >\n    @if (value) {\n      <ng-container [ngTemplateOutlet]=\"affirmativeSelected\"></ng-container>\n    } @else {\n      <div class=\"content_color p_toggle_shadow p_toggle_status\" [style.min-width]=\"options.toggleSwitchWidth + 'px'\">\n        <i [ngClass]=\"options.negativeIcon\" class=\"fa-fw\"></i>\n      </div>\n      <div class=\"opac_50 p_toggle_status\" [style.min-width]=\"(options.toggleTrackWidth - options.toggleSwitchWidth) + 'px'\">\n        {{options.negativeLabel}}\n      </div>\n    }\n  </button>\n  <ng-template #affirmativeSelected>\n    <div class=\"opac_50 p_toggle_status\" [style.min-width]=\"(options.toggleTrackWidth - options.toggleSwitchWidth) + 'px'\">\n      {{options.affirmativeLabel}}\n    </div>\n    <div class=\"content_color p_toggle_shadow p_toggle_status\" [style.min-width]=\"options.toggleSwitchWidth + 'px'\">\n      <i [ngClass]=\"options.affirmativeIcon\" class=\"fa-fw mar_right5\"></i>\n    </div>\n  </ng-template>\n}\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: "21.1.5", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
             type: Component,
@@ -8118,7 +8160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ToggleSwitchComponent),
                             multi: true
-                        }], imports: [NgClass, NgTemplateOutlet, AsyncPipe], template: "@if (options$ | async; as options) {\r\n  <button\r\n    (click)=\"handleClick()\"\r\n    [attr.aria-label]=\"options.accessibilityLabel\"\r\n    [disabled]=\"disabled()\"\r\n    [ngClass]=\"value ? options.affirmativeColorClass : options.negativeColorClass\"\r\n    class=\"access btn sm v_center hov_glow p_toggle_button\"\r\n    >\r\n    @if (value) {\r\n      <ng-container [ngTemplateOutlet]=\"affirmativeSelected\"></ng-container>\r\n    } @else {\r\n      <div class=\"content_color p_toggle_shadow p_toggle_status\" [style.min-width]=\"options.toggleSwitchWidth + 'px'\">\r\n        <i [ngClass]=\"options.negativeIcon\" class=\"fa-fw\"></i>\r\n      </div>\r\n      <div class=\"opac_50 p_toggle_status\" [style.min-width]=\"(options.toggleTrackWidth - options.toggleSwitchWidth) + 'px'\">\r\n        {{options.negativeLabel}}\r\n      </div>\r\n    }\r\n  </button>\r\n  <ng-template #affirmativeSelected>\r\n    <div class=\"opac_50 p_toggle_status\" [style.min-width]=\"(options.toggleTrackWidth - options.toggleSwitchWidth) + 'px'\">\r\n      {{options.affirmativeLabel}}\r\n    </div>\r\n    <div class=\"content_color p_toggle_shadow p_toggle_status\" [style.min-width]=\"options.toggleSwitchWidth + 'px'\">\r\n      <i [ngClass]=\"options.affirmativeIcon\" class=\"fa-fw mar_right5\"></i>\r\n    </div>\r\n  </ng-template>\r\n}\r\n", styles: [".p_toggle_button{padding:2px;border-radius:50px}.p_toggle_status{min-width:65px;border-radius:50px;padding:5px 3px;transition:all .4s ease-in-out}.p_toggle_shadow{box-shadow:0 0 10px #323232bf}\n"] }]
+                        }], imports: [NgClass, NgTemplateOutlet, AsyncPipe], template: "@if (options$ | async; as options) {\n  <button\n    (click)=\"handleClick()\"\n    [attr.aria-label]=\"options.accessibilityLabel\"\n    [disabled]=\"disabled()\"\n    [ngClass]=\"value ? options.affirmativeColorClass : options.negativeColorClass\"\n    class=\"access btn sm v_center hov_glow p_toggle_button\"\n    >\n    @if (value) {\n      <ng-container [ngTemplateOutlet]=\"affirmativeSelected\"></ng-container>\n    } @else {\n      <div class=\"content_color p_toggle_shadow p_toggle_status\" [style.min-width]=\"options.toggleSwitchWidth + 'px'\">\n        <i [ngClass]=\"options.negativeIcon\" class=\"fa-fw\"></i>\n      </div>\n      <div class=\"opac_50 p_toggle_status\" [style.min-width]=\"(options.toggleTrackWidth - options.toggleSwitchWidth) + 'px'\">\n        {{options.negativeLabel}}\n      </div>\n    }\n  </button>\n  <ng-template #affirmativeSelected>\n    <div class=\"opac_50 p_toggle_status\" [style.min-width]=\"(options.toggleTrackWidth - options.toggleSwitchWidth) + 'px'\">\n      {{options.affirmativeLabel}}\n    </div>\n    <div class=\"content_color p_toggle_shadow p_toggle_status\" [style.min-width]=\"options.toggleSwitchWidth + 'px'\">\n      <i [ngClass]=\"options.affirmativeIcon\" class=\"fa-fw mar_right5\"></i>\n    </div>\n  </ng-template>\n}\n", styles: [".p_toggle_button{padding:2px;border-radius:50px}.p_toggle_status{min-width:65px;border-radius:50px;padding:5px 3px;transition:all .4s ease-in-out}.p_toggle_shadow{box-shadow:0 0 10px #323232bf}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
@@ -8202,7 +8244,7 @@ class CheckboxComponent {
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true
             }
-        ], 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: [""] });
+        ], ngImport: i0, template: "<div class=\"access ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\n  [style.height]=\"size() + 'px'\"\n  [style.width]=\"size() + 'px'\"\n  [style.min-width]=\"size() + 'px'\"\n  [style.min-height]=\"size() + 'px'\"\n  >\n  <button class=\"access btn clear width100 height100\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"_value ? text().uncheck : text().check\"\n    [attr.aria-checked]=\"_value\"\n    (click)=\"click()\"\n    >\n    <!-- show if checked state -->\n    @if (_value) {\n      <div><i class=\"fas fa-check fa-fw\" [style.font-size]=\"(size() / 2) + 'px'\"></i></div>\n    }\n  </button>\n\n  <input type=\"hidden\" [id]=\"inputId()\" [value]=\"value\" #hiddenInput/>\n</div>\n\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -8212,7 +8254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true
                         }
-                    ], imports: [], 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" }]
+                    ], imports: [], template: "<div class=\"access ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\n  [style.height]=\"size() + 'px'\"\n  [style.width]=\"size() + 'px'\"\n  [style.min-width]=\"size() + 'px'\"\n  [style.min-height]=\"size() + 'px'\"\n  >\n  <button class=\"access btn clear width100 height100\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"_value ? text().uncheck : text().check\"\n    [attr.aria-checked]=\"_value\"\n    (click)=\"click()\"\n    >\n    <!-- show if checked state -->\n    @if (_value) {\n      <div><i class=\"fas fa-check fa-fw\" [style.font-size]=\"(size() / 2) + 'px'\"></i></div>\n    }\n  </button>\n\n  <input type=\"hidden\" [id]=\"inputId()\" [value]=\"value\" #hiddenInput/>\n</div>\n\n" }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], value: [{
@@ -8738,20 +8780,20 @@ class InputMaskComponent {
         this.inputViewChild.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: InputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: InputMaskComponent, isStandalone: true, selector: "particle-input-mask", inputs: { type: "type", slotChar: "slotChar", autoClear: "autoClear", style: "style", inputId: "inputId", styleClass: "styleClass", placeholder: "placeholder", size: "size", maxlength: "maxlength", tabindex: "tabindex", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", disabled: "disabled", readonly: "readonly", unmask: "unmask", name: "name", required: "required", characterPattern: "characterPattern", autoFocus: "autoFocus", autocomplete: "autocomplete", mask: "mask" }, outputs: { onComplete: "onComplete", onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput" }, host: { properties: { "class.ui-inputwrapper-filled": "filled", "class.ui-inputwrapper-focus": "focus" } }, providers: [INPUTMASK_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<input #input [attr.id]="inputId" [attr.type]="type" [attr.name]="name" [ngStyle]="style" [ngClass]="styleClass" [attr.placeholder]="placeholder"
-                    [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)"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: InputMaskComponent, isStandalone: true, selector: "particle-input-mask", inputs: { type: "type", slotChar: "slotChar", autoClear: "autoClear", style: "style", inputId: "inputId", styleClass: "styleClass", placeholder: "placeholder", size: "size", maxlength: "maxlength", tabindex: "tabindex", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", disabled: "disabled", readonly: "readonly", unmask: "unmask", name: "name", required: "required", characterPattern: "characterPattern", autoFocus: "autoFocus", autocomplete: "autocomplete", mask: "mask" }, outputs: { onComplete: "onComplete", onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput" }, host: { properties: { "class.ui-inputwrapper-filled": "filled", "class.ui-inputwrapper-focus": "focus" } }, providers: [INPUTMASK_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<input #input [attr.id]="inputId" [attr.type]="type" [attr.name]="name" [ngStyle]="style" [ngClass]="styleClass" [attr.placeholder]="placeholder"
+                    [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: "21.1.5", ngImport: i0, type: InputMaskComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'particle-input-mask',
-                    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)"
+                    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()">`,
                     host: {
                         '[class.ui-inputwrapper-filled]': 'filled',
@@ -8832,11 +8874,11 @@ class ProgressBarComponent {
     showBorder = input(true, ...(ngDevMode ? [{ debugName: "showBorder" }] : []));
     showMovement = input(false, ...(ngDevMode ? [{ debugName: "showMovement" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ProgressBarComponent, isStandalone: true, selector: "particle-progress-bar", inputs: { percentComplete: { classPropertyName: "percentComplete", publicName: "percentComplete", isSignal: false, isRequired: false, transformFunction: null }, backgroundColorClass: { classPropertyName: "backgroundColorClass", publicName: "backgroundColorClass", isSignal: true, isRequired: false, transformFunction: null }, progressColorClass: { classPropertyName: "progressColorClass", publicName: "progressColorClass", isSignal: true, isRequired: false, transformFunction: null }, showPercentComplete: { classPropertyName: "showPercentComplete", publicName: "showPercentComplete", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, showMovement: { classPropertyName: "showMovement", publicName: "showMovement", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [ngClass]=\"showBorder() ? backgroundColorClass() + ' brdr' : backgroundColorClass()\"\r\n  [style.border-radius]=\"borderRadius() + 'px'\"\r\n  [style.height]=\"height() ? height() + 'px' : ''\"\r\n  >\r\n  <div class=\"container_progress\"\r\n    [ngClass]=\"progressColorClass() + (showMovement() ? ' progress_movement' : '')\"\r\n    [style.width]=\"percentComplete + '%'\"\r\n    [style.border-radius]=\"borderRadius() + 'px'\"\r\n    [style.height]=\"height() ? (showBorder() ? (height() - 2) : height()) + 'px' : ''\"\r\n    [style.font-size]=\"height() < 20 ? '65%' : ''\"\r\n    >\r\n    @if ((showPercentComplete() && height() >= 10)) {\r\n      {{percentComplete}}%\r\n    } @else {\r\n      &nbsp;\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".container_progress{align-items:center;display:flex;justify-content:center}.progress_movement{animation:progress 10s linear infinite;background-image:url(data:image/png;base64,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)}@keyframes progress{0%{background-position:0% 0%}to{background-position:0% -100%}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: ProgressBarComponent, isStandalone: true, selector: "particle-progress-bar", inputs: { percentComplete: { classPropertyName: "percentComplete", publicName: "percentComplete", isSignal: false, isRequired: false, transformFunction: null }, backgroundColorClass: { classPropertyName: "backgroundColorClass", publicName: "backgroundColorClass", isSignal: true, isRequired: false, transformFunction: null }, progressColorClass: { classPropertyName: "progressColorClass", publicName: "progressColorClass", isSignal: true, isRequired: false, transformFunction: null }, showPercentComplete: { classPropertyName: "showPercentComplete", publicName: "showPercentComplete", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, showMovement: { classPropertyName: "showMovement", publicName: "showMovement", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [ngClass]=\"showBorder() ? backgroundColorClass() + ' brdr' : backgroundColorClass()\"\n  [style.border-radius]=\"borderRadius() + 'px'\"\n  [style.height]=\"height() ? height() + 'px' : ''\"\n  >\n  <div class=\"container_progress\"\n    [ngClass]=\"progressColorClass() + (showMovement() ? ' progress_movement' : '')\"\n    [style.width]=\"percentComplete + '%'\"\n    [style.border-radius]=\"borderRadius() + 'px'\"\n    [style.height]=\"height() ? (showBorder() ? (height() - 2) : height()) + 'px' : ''\"\n    [style.font-size]=\"height() < 20 ? '65%' : ''\"\n    >\n    @if ((showPercentComplete() && height() >= 10)) {\n      {{percentComplete}}%\n    } @else {\n      &nbsp;\n    }\n  </div>\n</div>\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: "21.1.5", 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"] }]
+            args: [{ selector: 'particle-progress-bar', imports: [NgClass], template: "<div [ngClass]=\"showBorder() ? backgroundColorClass() + ' brdr' : backgroundColorClass()\"\n  [style.border-radius]=\"borderRadius() + 'px'\"\n  [style.height]=\"height() ? height() + 'px' : ''\"\n  >\n  <div class=\"container_progress\"\n    [ngClass]=\"progressColorClass() + (showMovement() ? ' progress_movement' : '')\"\n    [style.width]=\"percentComplete + '%'\"\n    [style.border-radius]=\"borderRadius() + 'px'\"\n    [style.height]=\"height() ? (showBorder() ? (height() - 2) : height()) + 'px' : ''\"\n    [style.font-size]=\"height() < 20 ? '65%' : ''\"\n    >\n    @if ((showPercentComplete() && height() >= 10)) {\n      {{percentComplete}}%\n    } @else {\n      &nbsp;\n    }\n  </div>\n</div>\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,iVBORw0KGgoAAAANSUhEUgAAAlYAAAHCCAYAAAAtuofXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAFTVJREFUeNrs2zGqa9kVRVFpIQcGNUSp+yGoLjl1cwzqR6VqiMDh8Q2c+Ual9eudbY8HNykoBpoHFjv517XW3y///feP4/vX5Y///XZ8f/sD/x+Xy+VyuVzuWDcn/+39Qz+Sy+VyuVwud7SbE+z1Qz+Sy+VyuVwud7SbE+zzQz+Sy+VyuVwud7QbcblcLpfL5XI7bsTlcrlcLpfL7bjXtdbli78/+iN/P75/crlcLpfL5f4vuRGXy+VyuVwut+NGXC6Xy+VyudyOG3G5XC6Xy+VyO27E5XK5XC6Xy+24EZfL5XK5XC6340ZcLpfL5XK53I4bcblcLpfL5XI7bsTlcrlcLpfL7bgRl8vlcrlcLrfjRlwul8vlcrncjhtxuVwul8vlcjtuxOVyuVwul8vtuBGXy+VyuVwut+NGXC6Xy+VyudyOG3G5XC6Xy+VyO27E5XK5XC6Xy+24EZfL5XK5XC63497E5XK5G7v343se30NnLpc7Ya8iLpfLdVR5Xy6X29mriMvlch1V3pfL5Xb2KuJyuVxHlfflcrmdvYq4XC53M9dRxeVyx+5VxOVyuZu5jioulzt2ryIul8vlcrlcbsc9O6ze4nK53CGuveJyuVu5ORmpl7hcLnfIUWWvuFzuVm5ORuojLpfLHXJU2Ssul7uVGyPF5XIdVTpzudyOGyPF5XIdVTpzudyOe11rXcTlcrlcLpfL/d6NuFwul8vlcrkdN+JyuVwul8vldtyIy+VyuVwul9txIy6Xy+VyuVxux424XC6Xy+VyuR034nK5XC6Xy+V23IjL5XK5XC6X23EjLpfL5XK5XG7HjbhcLpfL5XK5HTficrlcLpfL5XbciMvlcrlcLpfbcSMul8vlcrlcbseNuFwul8vlcrkdN+JyuVwul8vldtyIy+VyuVwul9txIy6Xy+VyuVxux424XC6Xy+VyuR33Ji6Xy93YvR/f8/geOnO53Al7FXG5XK6jyvtyudzOXkVcLpfrqPK+XC63s1cRl8vlOqq8L5fL7exVxOVyuZu5jioulzt2ryIul8vdzHVUcbncsXsVcblcLpfL5XI77tlh9RaXy+UOce0Vl8vdys3JSL3E5XK5Q44qe8XlcrdyczJSH3G5XO6Qo8pecbncrdwYKS6X66jSmcvldtwYKS6X66jSmcvldtzrWusiLpfL5XK5XO73bsTlcrlcLpfL7bgRl8vlcrlcLrfjRlwul8vlcrncjhtxuVwul8vlcjtuxOVyuVwul8vtuBGXy+VyuVwut+NGXC6Xy+VyudyOG3G5XC6Xy+VyO27E5XK5XC6Xy+24EZfL5XK5XC6340ZcLpfL5XK53I4bcblcLpfL5XI7bsTlcrlcLpfL7bgRl8vlcrlcLrfjRlwul8vlcrncjhtxuVwul8vlcjtuxOVyuVwul8vtuDdxuVzuxu79+J7H99CZy+VO2KuIy+VyHVXel8vldvYq4nK5XEeV9+VyuZ29irhcLtdR5X25XG5nryIul8vdzHVUcbncsXsVcblc7mauo4rL5Y7dq4jL5XK5XC6X23HPDqu3uFwud4hrr7hc7lZuTkbqJS6Xyx1yVNkrLpe7lZuTkfqIy+VyhxxV9orL5W7lxkhxuVxHlc5cLrfjxkhxuVxHlc5cLrfjXtdaF3G5XC6Xy+Vyv3cjLpfL5XK5XG7HjbhcLpfL5XK5HTficrlcLpfL5XbciMvlcrlcLpfbcSMul8vlcrlcbseNuFwul8vlcrkdN+JyuVwul8vldtyIy+VyuVwul9txIy6Xy+VyuVxux424XC6Xy+VyuR034nK5XC6Xy+V23IjL5XK5XC6X23EjLpfL5XK5XG7HjbhcLpfL5XK5HTficrlcLpfL5XbciMvlcrlcLpfbcSMul8vlcrlcbse9icvlcjd278f3PL6Hzlwud8JeRVwul+uo8r5cLrezVxGXy+U6qrwvl8vt7FXE5XK5jirvy+VyO3sVcblc7mauo4rL5Y7dq4jL5XI3cx1VXC537F5FXC6Xy+VyudyOe3ZYvcXlcrlDXHvF5XK3cnMyUi9xuVzukKPKXnG53K3cnIzUR1wulzvkqLJXXC53KzdGisvlOqp05nK5HTdGisvlOqp05nK5Hfe61rqIy+VyuVwul/u9G3G5XC6Xy+VyO27E5XK5XC6Xy+24EZfL5XK5XC6340ZcLpfL5XK53I4bcblcLpfL5XI7bsTlcrlcLpfL7bgRl8vlcrlcLrfjRlwul8vlcrncjhtxuVwul8vlcjtuxOVyuVwul8vtuBGXy+VyuVwut+NGXC6Xy+VyudyOG3G5XC6Xy+VyO27E5XK5XC6Xy+24EZfL5XK5XC6340ZcLpfL5XK53I4bcblcLpfL5XI77k1cLpe7sXs/vufxPXTmcrkT9iricrlcR5X35XK5nb2KuFwu11HlfblcbmevIi6Xy3VUeV8ul9vZq4jL5XI3cx1VXC537F5FXC6Xu5nrqOJyuWP3KuJyuVwul8vldtyzw+otLpfLHeLaKy6Xu5Wbk5F6icvlcoccVfaKy+Vu5eZkpD7icrncIUeVveJyuVu5MVJcLtdRpTOXy+24MVJcLtdRpTOXy+2417XWRVwul8vlcrnc792Iy+VyuVwul9txIy6Xy+VyuVxux424XC6Xy+VyuR034nK5XC6Xy+V23IjL5XK5XC6X23EjLpfL5XK5XG7HjbhcLpfL5XK5HTficrlcLpfL5XbciMvlcrlcLpfbcSMul8vlcrlcbseNuFwul8vlcrkdN+JyuVwul8vldtyIy+VyuVwul9txIy6Xy+VyuVxux424XC6Xy+VyuR034nK5XC6Xy+V23IjL5XK5XC6X23Fv4nK53I3d+/E9j++hM5fLnbBXEZfL5TqqvC+Xy+3sVcTlcrmOKu/L5XI7exVxuVyuo8r7crnczl5FXC6Xu5nrqOJyuWP3KuJyudzNXEcVl8sdu1cRl8vlcrlcLrfjnh1Wb3G5XO4Q115xudyt3JyM1EtcLpc75KiyV1wudys3JyP1EZfL5Q45quwVl8vdyo2R4nK5jiqduVxux42R4nK5jiqduVxux72utS7icrlcLpfL5X7vRlwul8vlcrncjhtxuVwul8vlcjtuxOVyuVwul8vtuBGXy+VyuVwut+NGXC6Xy+VyudyOG3G5XC6Xy+VyO27E5XK5XC6Xy+24EZfL5XK5XC6340ZcLpfL5XK53I4bcblcLpfL5XI7bsTlcrlcLpfL7bgRl8vlcrlcLrfjRlwul8vlcrncjhtxuVwul8vlcjtuxOVyuVwul8vtuBGXy+VyuVwut+NGXC6Xy+VyudyOexOXy+Vu7N6P73l8D525XO6EvYq4XC7XUeV9uVxuZ68iLpfLdVR5Xy6X29mriMvlch1V3pfL5Xb2KuJyudzNXEcVl8sdu1cRl8vlbuY6qrhc7ti9irhcLpfL5XK5HffssHqLy+Vyh7j2isvlbuXmZKRe4nK53CFHlb3icrlbuTkZqY+4XC53yFFlr7hc7lZujBSXy3VU6czlcjtujBSXy3VU6czlcjvuda11EZfL5XK5XC73ezficrlcLpfL5XbciMvlcrlcLpfbcSMul8vlcrlcbseNuFwul8vlcrkdN+JyuVwul8vldtyIy+VyuVwul9txIy6Xy+VyuVxux424XC6Xy+VyuR034nK5XC6Xy+V23IjL5XK5XC6X23EjLpfL5XK5XG7HjbhcLpfL5XK5HTficrlcLpfL5XbciMvlcrlcLpfbcSMul8vlcrlcbseNuFwul8vlcrkdN+JyuVwul8vldtybuFwud2P3fnzP43vozOVyJ+xVxOVyuY4q78vlcjt7FXG5XK6jyvtyudzOXkVcLpfrqPK+XC63s1cRl8vlbuY6qrhc7ti9irhcLncz11HF5XLH7lXE5XK5XC6Xy+24Z4fVW1wulzvEtVdcLncrNycj9RKXy+UOOarsFZfL3crNyUh9xOVyuUOOKnvF5XK3cmOkuFyuo0pnLpfbcWOkuFyuo0pnLpfbca9rrYu4XC6Xy+Vyud+7EZfL5XK5XC6340ZcLpfL5XK53I4bcblcLpfL5XI7bsTlcrlcLpfL7bgRl8vlcrlcLrfjRlwul8vlcrncjhtxuVwul8vlcjtuxOVyuVwul8vtuBGXy+VyuVwut+NGXC6Xy+VyudyOG3G5XC6Xy+VyO27E5XK5XC6Xy+24EZfL5XK5XC6340ZcLpfL5XK53I4bcblcLpfL5XI7bsTlcrlcLpfL7bgRl8vlcrlcLrfj3sTlcrkbu/fjex7fQ2culzthryIul8t1VHlfLpfb2auIy+VyHVXel8vldvYq4nK5XEeV9+VyuZ29irhcLncz11HF5XLH7lXE5XK5m7mOKi6XO3avIi6Xy+VyuVxuxz07rN7icrncIa694nK5W7k5GamXuFwud8hRZa+4XO5Wbk5G6iMul8sdclTZKy6Xu5UbI8Xlch1VOnO53I4bI8Xlch1VOnO53I57XWtdxOVyuVwul8v93o24XC6Xy+VyuR034nK5XC6Xy+V23IjL5XK5XC6X23EjLpfL5XK5XG7HjbhcLpfL5XK5HTficrlcLpfL5XbciMvlcrlcLpfbcSMul8vlcrlcbseNuFwul8vlcrkdN+JyuVwul8vldtyIy+VyuVwul9txIy6Xy+VyuVxux424XC6Xy+VyuR034nK5XC6Xy+V23IjL5XK5XC6X23EjLpfL5XK5XG7HjbhcLpfL5XK5Hff2J2L343se3+NP/pFcLpfL5XK5f4obcblcLpfL5XI7bsTlcrlcLpfL7bgRl8vlcrlcLrfj5hdilx/6kVwul8vlcrk/4uYXYr/90I/kcrlcLpfL/RE3vxDzTzq5XC6Xy+X+X7lnh9X7h34kl8vlcrlc7mg3J9jrh34kl8vlcrlc7mg3J9jnh34kl8vlcrlc7mg34nK5XC6Xy+V23IjL5XK5XC6X23Gva63LF3/+FQCXy+VyuVzuf/4iLpfL5XK5XG7HjbhcLpfL5XK5HTficrlcLpfL5XbciMvlcrlcLpfbcSMul8vlcrlcbseNuFwul8vlcrkdN+JyuVwul8vldtyIy+VyuVwul9txIy6Xy+VyuVxux424XC6Xy+VyuR034nK5XC6Xy+V23IjL5XK5XC6X23EjLpfL5XK5XG7HjbhcLpfL5XK5HTficrlcLpfL5XbciMvlcrlcLpfbcSMul8vlcrlcbse9icvlcjd278f3PL6Hzlwud8JeRVwul+uo8r5cLrezVxGXy+U6qrwvl8vt7FXE5XK5jirvy+VyO3sVcblc7mauo4rL5Y7dq4jL5XI3cx1VXC537F5FXC6Xy+VyudyOe3ZYvcXlcrlDXHvF5XK3cnMyUi9xuVzukKPKXnG53K3cnIzUR1wulzvkqLJXXC53KzdGisvlOqp05nK5HTdGisvlOqp05nK5Hfe61rqIy+VyuVwul/u9G3G5XC6Xy+VyO27E5XK5XC6Xy+24EZfL5XK5XC6340ZcLpfL5XK53I4bcblcLpfL5XI7bsTlcrlcLpfL7bgRl8vlcrlcLrfjRlwul8vlcrncjhtxuVwul8vlcjtuxOVyuVwul8vtuBGXy+VyuVwut+NGXC6Xy+VyudyOG3G5XC6Xy+VyO27E5XK5XC6Xy+24EZfL5XK5XC6340ZcLpfL5XK53I4bcblcLpfL5XI77k1cLpe7sXs/vufxPXTmcrkT9iricrlcR5X35XK5nb2KuFwu11HlfblcbmevIi6Xy3VUeV8ul9vZq4jL5XI3cx1VXC537F5FXC6Xu5nrqOJyuWP3KuJyuVwul8vldtyzw+otLpfLHeLaKy6Xu5Wbk5F6icvlcoccVfaKy+Vu5eZkpD7icrncIUeVveJyuVu5MVJcLtdRpTOXy+24MVJcLtdRpTOXy+2417XWRVwul8vlcrnc792Iy+VyuVwul9txIy6Xy+VyuVxux424XC6Xy+VyuR034nK5XC6Xy+V23IjL5XK5XC6X23EjLpfL5XK5XG7HjbhcLpfL5XK5HTficrlcLpfL5XbciMvlcrlcLpfbcSMul8vlcrlcbseNuFwul8vlcrkdN+JyuVwul8vldtyIy+VyuVwul9txIy6Xy+VyuVxux424XC6Xy+VyuR034nK5XC6Xy+V23IjL5XK5XC6X23Fv4nK53I3d+/E9j++hM5fLnbBXEZfL5TqqvC+Xy+3sVcTlcrmOKu/L5XI7exVxuVyuo8r7crnczl5FXC6Xu5nrqOJyuWP3KuJyudzNXEcVl8sdu1cRl8vlcrlcLrfjnh1Wb3G5XO4Q115xudyt3JyM1EtcLpc75KiyV1wudys3JyP1EZfL5Q45quwVl8vdyo2R4nK5jiqduVxux42R4nK5jiqduVxux72utS7icrlcLpfL5X7vRlwul8vlcrncjhtxuVwul8vlcjtuxOVyuVwul8vtuBGXy+VyuVwut+NGXC6Xy+VyudyOG3G5XC6Xy+VyO27E5XK5XC6Xy+24EZfL5XK5XC6340ZcLpfL5XK53I4bcblcLpfL5XI7bsTlcrlcLpfL7bgRl8vlcrlcLrfjRlwul8vlcrncjhtxuVwul8vlcjtuxOVyuVwul8vtuBGXy+VyuVwut+NGXC6Xy+VyudyOexOXy+Vu7N6P73l8D525XO6EvYq4XC7XUeV9uVxuZ68iLpfLdVR5Xy6X29mriMvlch1V3pfL5Xb2KuJyudzNXEcVl8sdu1cRl8vlbuY6qrhc7ti9irhcLpfL5XK5HffssHqLy+Vyh7j2isvlbuXmZKRe4nK53CFHlb3icrlbuTkZqY+4XC53yFFlr7hc7lZujBSXy3VU6czlcjtujBSXy3VU6czlcjvuda11EZfL5XK5XC73ezficrlcLpfL5XbciMvlcrlcLpfbcSMul8vlcrlcbseNuFwul8vlcrkdN+JyuVwul8vldtyIy+VyuVwul9txIy6Xy+VyuVxux424XC6Xy+VyuR034nK5XC6Xy+V23IjL5XK5XC6X23EjLpfL5XK5XG7HjbhcLpfL5XK5HTficrlcLpfL5XbciMvlcrlcLpfbcSMul8vlcrlcbseNuFwul8vlcrkdN+JyuVwul8vldtybuFwud2P3fnzP43vozOVyJ+xVxOVyuY4q78vlcjt7FXG5XK6jyvtyudzOXkVcLpfrqPK+XC63s1cRl8vlbuY6qrhc7ti9yi/E/vJDP5LL5c51//pDR5X35XK5lb36twADAKubCWaL6eMyAAAAAElFTkSuQmCC)}@keyframes progress{0%{background-position:0% 0%}to{background-position:0% -100%}}\n"] }]
         }], propDecorators: { percentComplete: [{
                 type: Input
             }], backgroundColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backgroundColorClass", required: false }] }], progressColorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressColorClass", required: false }] }], showPercentComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPercentComplete", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorder", required: false }] }], showMovement: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMovement", required: false }] }] } });
@@ -8855,11 +8897,11 @@ class LoaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LoaderComponent, isStandalone: true, selector: "particle-loader", inputs: { text: "text", disableText: "disableText", colors: "colors" }, ngImport: i0, template: "<div class=\"row column center_center height100\" style=\"max-width: 250px;\">\r\n  <div class=\"ptl_loader\">\r\n    <div class=\"ptl_loader__progress\" [style.background]=\"backgroundStyle ?? ''\"></div>\r\n  </div>\r\n  @if (!disableText) {\r\n    @if (text.loadingText) {\r\n      <div class=\"text md bold text_center mar_top15 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\r\n        {{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span>\r\n      </div>\r\n    }\r\n    @if (text.loadingSubtext) {\r\n      <div class=\"text sm text_center mar_top5 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\r\n        {{text.loadingSubtext}}\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".ptl_loader{height:2px;position:relative;overflow:hidden;width:100%}.ptl_loader__progress{background:linear-gradient(to right,rgba(0,0,0,0) 0%,var(--bg-purple-color) 33%,var(--bg-blue-color) 50%,var(--bg-green-color) 66%,rgba(0,0,0,0) 100%);position:absolute;bottom:0;top:0;width:100%;animation-duration:2s;animation-iteration-count:infinite;animation-name:ptl_loader}@keyframes ptl_loader{0%{left:-100%}to{left:100%}}.endpoint_fadein{animation:fadeInAnimation ease 1s;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}.endpoint_shape{height:7px;width:7px;min-width:7px;min-height:7px;border-radius:7px}.endpoint_spin{animation:spin 3s linear infinite;opacity:1;z-index:var(--z-frame)}@keyframes spin{to{transform:rotate(360deg)}}.endpoint_spin_rev{animation:spin_rev 3s linear infinite;opacity:1;z-index:var(--z-frame)}@keyframes spin_rev{to{transform:rotate(-360deg)}}.bars_vertical{height:60px;width:60px;display:flex;align-items:center;justify-content:center}.bars_vertical .bar1,.bars_vertical .bar2,.bars_vertical .bar3,.bars_vertical .bar4,.bars_vertical .bar5{animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:alternate;transform-origin:center center;margin:0 5px}.bars_vertical .bar1{animation-name:bars_vertical_grow;animation-delay:.2s}.bars_vertical .bar2{animation-name:bars_vertical_grow;animation-delay:.4s}.bars_vertical .bar3{animation-name:bars_vertical_grow;animation-delay:.6s}.bars_vertical .bar4{animation-name:bars_vertical_grow;animation-delay:.8s}.bars_vertical .bar5{animation-name:bars_vertical_grow;animation-delay:1s}@keyframes bars_vertical_grow{0%{transform:scale(.2);opacity:0}to{transform:scale(2);opacity:1}}@keyframes fadein{0%{opacity:0}to{opacity:.5}}.one{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:0s;animation:dot 1.3s infinite;animation-delay:0s}.two{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:.2s;animation:dot 1.3s infinite;animation-delay:.2s}.three{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:.3s;animation:dot 1.3s infinite;animation-delay:.3s}@-webkit-keyframes dot{0%{opacity:0}50%{opacity:0}to{opacity:1}}@keyframes dot{0%{opacity:0}50%{opacity:0}to{opacity:1}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LoaderComponent, isStandalone: true, selector: "particle-loader", inputs: { text: "text", disableText: "disableText", colors: "colors" }, ngImport: i0, template: "<div class=\"row column center_center height100\" style=\"max-width: 250px;\">\n  <div class=\"ptl_loader\">\n    <div class=\"ptl_loader__progress\" [style.background]=\"backgroundStyle ?? ''\"></div>\n  </div>\n  @if (!disableText) {\n    @if (text.loadingText) {\n      <div class=\"text md bold text_center mar_top15 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\n        {{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span>\n      </div>\n    }\n    @if (text.loadingSubtext) {\n      <div class=\"text sm text_center mar_top5 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\n        {{text.loadingSubtext}}\n      </div>\n    }\n  }\n</div>\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: "21.1.5", 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"] }]
+            args: [{ selector: 'particle-loader', standalone: true, imports: [], template: "<div class=\"row column center_center height100\" style=\"max-width: 250px;\">\n  <div class=\"ptl_loader\">\n    <div class=\"ptl_loader__progress\" [style.background]=\"backgroundStyle ?? ''\"></div>\n  </div>\n  @if (!disableText) {\n    @if (text.loadingText) {\n      <div class=\"text md bold text_center mar_top15 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\n        {{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span>\n      </div>\n    }\n    @if (text.loadingSubtext) {\n      <div class=\"text sm text_center mar_top5 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\n        {{text.loadingSubtext}}\n      </div>\n    }\n  }\n</div>\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: [{
                 type: Input
             }], disableText: [{
@@ -8923,7 +8965,7 @@ class RadioButtonsComponent {
                 useExisting: forwardRef(() => RadioButtonsComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\r\n  @for (option of options(); track $index) {\r\n    <div class=\"col\">\r\n      <button class=\"access btnset clear\"\r\n              style=\"cursor:default;\"\r\n              (click)=\"handleInput(option.value)\"\r\n              [disabled]=\"disabled() || option.disabled\"\r\n              [attr.aria-label]=\"option.label\"\r\n              [id]=\"$index === 0 && inputId() ? inputId() : ''\"\r\n      >\r\n        <div class=\"row rc_gap v_center ent_r2l_dir\">\r\n          <div class=\"col\">\r\n            <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\r\n              <div class=\"circle_20px\"\r\n                   [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\r\n            {{option.label}}\r\n          </div>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        ], ngImport: i0, template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\n  @for (option of options(); track $index) {\n    <div class=\"col\">\n      <button class=\"access btnset clear\"\n              style=\"cursor:default;\"\n              (click)=\"handleInput(option.value)\"\n              [disabled]=\"disabled() || option.disabled\"\n              [attr.aria-label]=\"option.label\"\n              [id]=\"$index === 0 && inputId() ? inputId() : ''\"\n      >\n        <div class=\"row rc_gap v_center ent_r2l_dir\">\n          <div class=\"col\">\n            <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\n              <div class=\"circle_20px\"\n                   [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\n              ></div>\n            </div>\n          </div>\n          <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\n            {{option.label}}\n          </div>\n        </div>\n      </button>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RadioButtonsComponent, decorators: [{
             type: Component,
@@ -8935,9 +8977,184 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                             useExisting: forwardRef(() => RadioButtonsComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\r\n  @for (option of options(); track $index) {\r\n    <div class=\"col\">\r\n      <button class=\"access btnset clear\"\r\n              style=\"cursor:default;\"\r\n              (click)=\"handleInput(option.value)\"\r\n              [disabled]=\"disabled() || option.disabled\"\r\n              [attr.aria-label]=\"option.label\"\r\n              [id]=\"$index === 0 && inputId() ? inputId() : ''\"\r\n      >\r\n        <div class=\"row rc_gap v_center ent_r2l_dir\">\r\n          <div class=\"col\">\r\n            <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\r\n              <div class=\"circle_20px\"\r\n                   [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\r\n              ></div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\r\n            {{option.label}}\r\n          </div>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n</div>\r\n" }]
+                    ], template: "<div class=\"row rc_gap wrap\" [ngClass]=\"isDisplayColumn() ? 'column' : ''\">\n  @for (option of options(); track $index) {\n    <div class=\"col\">\n      <button class=\"access btnset clear\"\n              style=\"cursor:default;\"\n              (click)=\"handleInput(option.value)\"\n              [disabled]=\"disabled() || option.disabled\"\n              [attr.aria-label]=\"option.label\"\n              [id]=\"$index === 0 && inputId() ? inputId() : ''\"\n      >\n        <div class=\"row rc_gap v_center ent_r2l_dir\">\n          <div class=\"col\">\n            <div class=\"circle_30px ptl_input_bg_color ptl_brdr_color ptl_brdr_size\">\n              <div class=\"circle_20px\"\n                   [ngClass]=\"option.value === value() ? colorClass() : 'ptl_input_bg_color'\"\n              ></div>\n            </div>\n          </div>\n          <div class=\"col ptl_input_text_size ent_r2l_txt text text_wrap\">\n            {{option.label}}\n          </div>\n        </div>\n      </button>\n    </div>\n  }\n</div>\n" }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], colorClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorClass", required: false }] }], isDisplayColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisplayColumn", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }] } });
 
+class AutoCompleteInput {
+    placeholder = input('Begin typing to find...', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    classList = input('access ptl_input_height ptl_input ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ptl_input_text_size ptl_input_padding', ...(ngDevMode ? [{ debugName: "classList" }] : []));
+    searchString = output();
+    popover = null;
+    inputField = null;
+    _search$ = new BehaviorSubject(null);
+    search$ = this._search$.asObservable().pipe(debounceTime(350), tap$1(val => this.searchString.emit(val)));
+    searchText = '';
+    preventFocus = false;
+    doSearch() {
+        this._search$.next(this.searchText);
+    }
+    openPopover() {
+        if (!this.popover.isOpen()) {
+            this.popover.toggle();
+        }
+    }
+    closePopover(preventFocus) {
+        this.preventFocus = !!preventFocus;
+        if (this.popover.isOpen()) {
+            this.popover.toggle();
+        }
+    }
+    resetSearchText() {
+        this.searchText = '';
+        this._search$.next('');
+    }
+    onEscapeKeyUp(event) {
+        if (this.popover.isOpen()) {
+            event.stopImmediatePropagation();
+            this.inputField.nativeElement.focus();
+            setTimeout(() => this.popover.close(), 0);
+        }
+    }
+    handlePopoverClose() {
+        if (!this.preventFocus) {
+            this.inputField.nativeElement.focus();
+        }
+    }
+    onArrowUpDown() {
+        if (this.popover.isOpen()) {
+            this.popover.focusOnFirstElement();
+        }
+    }
+    tabNext() {
+        this.popover.focusOnNextElement();
+    }
+    tabPrevious() {
+        this.popover.focusOnPreviousElement();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AutoCompleteInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: AutoCompleteInput, isStandalone: true, selector: "particle-auto-complete-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchString: "searchString" }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true }, { propertyName: "inputField", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<input type=\"text\"\n       [placeholder]=\"placeholder()\"\n       [ngClass]=\"classList()\"\n       [(ngModel)]=\"searchText\"\n       (ngModelChange)=\"doSearch()\"\n       (keyup.escape)=\"onEscapeKeyUp($event)\"\n       (keyup.arrowUp)=\"onArrowUpDown()\"\n       (keyup.arrowDown)=\"onArrowUpDown()\"\n       #input\n/>\n<particle-popover\n  height=\"150\"\n  width=\"{{input?.getBoundingClientRect()?.width ?? 200}}\"\n  openDirection=\"below\"\n  alignment=\"center\"\n  classList=\"body_color particle_popover_shadow\"\n  [targetOverride]=\"input\"\n  (closed)=\"handlePopoverClose()\"\n  (arrowDown)=\"tabNext()\"\n  (arrowUp)=\"tabPrevious()\"\n  #popover\n>\n  @if (search$ | async) {\n    <div role=\"listbox\" tabindex=\"-1\">\n      <ng-content></ng-content>\n    </div>\n  }\n</particle-popover>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: FormsModule }, { 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: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed", "arrowDown", "arrowUp"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AutoCompleteInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'particle-auto-complete-input', imports: [
+                        ReactiveFormsModule,
+                        FormsModule,
+                        NgClass,
+                        PopoverComponent,
+                        AsyncPipe
+                    ], template: "<input type=\"text\"\n       [placeholder]=\"placeholder()\"\n       [ngClass]=\"classList()\"\n       [(ngModel)]=\"searchText\"\n       (ngModelChange)=\"doSearch()\"\n       (keyup.escape)=\"onEscapeKeyUp($event)\"\n       (keyup.arrowUp)=\"onArrowUpDown()\"\n       (keyup.arrowDown)=\"onArrowUpDown()\"\n       #input\n/>\n<particle-popover\n  height=\"150\"\n  width=\"{{input?.getBoundingClientRect()?.width ?? 200}}\"\n  openDirection=\"below\"\n  alignment=\"center\"\n  classList=\"body_color particle_popover_shadow\"\n  [targetOverride]=\"input\"\n  (closed)=\"handlePopoverClose()\"\n  (arrowDown)=\"tabNext()\"\n  (arrowUp)=\"tabPrevious()\"\n  #popover\n>\n  @if (search$ | async) {\n    <div role=\"listbox\" tabindex=\"-1\">\n      <ng-content></ng-content>\n    </div>\n  }\n</particle-popover>\n" }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], searchString: [{ type: i0.Output, args: ["searchString"] }], popover: [{
+                type: ViewChild,
+                args: ['popover']
+            }], inputField: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });
+
+class ConfirmationDialog {
+    _item;
+    message = '';
+    isOpen;
+    title = null;
+    iconClass = input('fas fa-circle-question', ...(ngDevMode ? [{ debugName: "iconClass" }] : []));
+    width = input('400px', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    height = input('180px', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    text = input({
+        defaultTitle: 'Please Confirm',
+        yes: 'Yes',
+        no: 'No',
+        close: 'Close'
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
+    confirmed = output();
+    closed = output();
+    open(item, message, title) {
+        this._item = item;
+        this.message = message;
+        this.title = title ?? this.text().defaultTitle;
+        this.isOpen = {};
+    }
+    close() {
+        this.message = '';
+        this.title = this.text().defaultTitle;
+        this.isOpen = null;
+        this.closed.emit(false);
+    }
+    handleOk() {
+        this.closed.emit(true);
+        this.confirmed.emit(this._item);
+        this.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ConfirmationDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: ConfirmationDialog, isStandalone: true, selector: "particle-confirmation-dialog", inputs: { iconClass: { classPropertyName: "iconClass", publicName: "iconClass", 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 }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", closed: "closed" }, ngImport: i0, template: "<particle-dialog\n  [object]=\"isOpen\"\n  [showTitle]=\"false\"\n  [allowClose]=\"true\"\n  [width]=\"width()\"\n  [height]=\"height()\"\n  (closed)=\"close()\"\n>\n  <div class=\"row_block width100 height100 body_color\">\n    <div class=\"row column height100\">\n      <div class=\"col\">\n        <div class=\"row header_color ptl_brdr_color border_bottom min_h50 v_center pad_lr10\">\n          <div class=\"col size_1 v_center\">\n            <div class=\"square_40px\" innerHTML=\"<i class='{{iconClass()}}'></i>\">\n            </div>\n            <div class=\"row_block mar_lr5\">\n              <div class=\"min_h10 min_w2 bg_logo_1\"></div>\n              <div class=\"min_h10 min_w2 bg_logo_2\"></div>\n              <div class=\"min_h10 min_w2 bg_logo_3\"></div>\n            </div>\n            <div class=\"text lg text_left\" style=\"white-space: break-spaces;line-height: 1\">\n              {{title}}\n            </div>\n          </div>\n          <div class=\"col min_w30 top_center\">\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().close\" (click)=\"close()\" >\n              <div class=\"circle_26px cancel_button_color ptl_brdr_color ptl_brdr_size hov_glow\"><i class=\"fas fa-xmark\"></i></div>\n            </button>\n          </div>\n        </div>\n      </div>\n      <!-- CONTENT -->\n      <div class=\"col size_1 scroll_yauto\">\n        <div class=\"row column pad_10 body_color\">\n          <div class=\"row column center_center rc_gap width100 pad_10 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\">\n            <div class=\"col\">\n              <div class=\"row center_center\">\n                <div class=\"text md bold text_center text_wrap\">{{message}}</div>\n              </div>\n            </div>\n            <div class=\"col\">\n              <div class=\"row center_center rc_gap\">\n                <button\n                  class=\"access btnset clear\" (click)=\"close()\"\n                  [attr.aria-label]=\"text().no\"\n                >\n                  <div class=\"row v_center rc_meta_gap pad_lr15 pad_tb5 cancel_button_color ptl_brdr_radius hov_glow\">\n                    <div class=\"col\">\n                      <div class=\"text lg\">{{text().no}}</div>\n                    </div>\n                    <div class=\"col\">\n                      <i class=\"fas fa-xmark\"></i>\n                    </div>\n                  </div>\n                </button>\n                <div class=\"min_h20 ptl_brdr_color border_right\"></div>\n                <button\n                  class=\"access btnset clear\"\n                  (click)=\"handleOk()\"\n                  [attr.aria-label]=\"text().yes\"\n                >\n                  <div class=\"row v_center rc_meta_gap pad_lr15 pad_tb5 ok_button_color ptl_brdr_radius hov_glow\">\n                    <div class=\"col\">\n                      <div class=\"text lg\">{{text().yes}}</div>\n                    </div>\n                    <div class=\"col\">\n                      <i class=\"fas fa-check\"></i>\n                    </div>\n                  </div>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</particle-dialog>\n", dependencies: [{ kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "closeAttempt", "opened"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ConfirmationDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'particle-confirmation-dialog', imports: [
+                        DialogComponent,
+                    ], template: "<particle-dialog\n  [object]=\"isOpen\"\n  [showTitle]=\"false\"\n  [allowClose]=\"true\"\n  [width]=\"width()\"\n  [height]=\"height()\"\n  (closed)=\"close()\"\n>\n  <div class=\"row_block width100 height100 body_color\">\n    <div class=\"row column height100\">\n      <div class=\"col\">\n        <div class=\"row header_color ptl_brdr_color border_bottom min_h50 v_center pad_lr10\">\n          <div class=\"col size_1 v_center\">\n            <div class=\"square_40px\" innerHTML=\"<i class='{{iconClass()}}'></i>\">\n            </div>\n            <div class=\"row_block mar_lr5\">\n              <div class=\"min_h10 min_w2 bg_logo_1\"></div>\n              <div class=\"min_h10 min_w2 bg_logo_2\"></div>\n              <div class=\"min_h10 min_w2 bg_logo_3\"></div>\n            </div>\n            <div class=\"text lg text_left\" style=\"white-space: break-spaces;line-height: 1\">\n              {{title}}\n            </div>\n          </div>\n          <div class=\"col min_w30 top_center\">\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().close\" (click)=\"close()\" >\n              <div class=\"circle_26px cancel_button_color ptl_brdr_color ptl_brdr_size hov_glow\"><i class=\"fas fa-xmark\"></i></div>\n            </button>\n          </div>\n        </div>\n      </div>\n      <!-- CONTENT -->\n      <div class=\"col size_1 scroll_yauto\">\n        <div class=\"row column pad_10 body_color\">\n          <div class=\"row column center_center rc_gap width100 pad_10 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\">\n            <div class=\"col\">\n              <div class=\"row center_center\">\n                <div class=\"text md bold text_center text_wrap\">{{message}}</div>\n              </div>\n            </div>\n            <div class=\"col\">\n              <div class=\"row center_center rc_gap\">\n                <button\n                  class=\"access btnset clear\" (click)=\"close()\"\n                  [attr.aria-label]=\"text().no\"\n                >\n                  <div class=\"row v_center rc_meta_gap pad_lr15 pad_tb5 cancel_button_color ptl_brdr_radius hov_glow\">\n                    <div class=\"col\">\n                      <div class=\"text lg\">{{text().no}}</div>\n                    </div>\n                    <div class=\"col\">\n                      <i class=\"fas fa-xmark\"></i>\n                    </div>\n                  </div>\n                </button>\n                <div class=\"min_h20 ptl_brdr_color border_right\"></div>\n                <button\n                  class=\"access btnset clear\"\n                  (click)=\"handleOk()\"\n                  [attr.aria-label]=\"text().yes\"\n                >\n                  <div class=\"row v_center rc_meta_gap pad_lr15 pad_tb5 ok_button_color ptl_brdr_radius hov_glow\">\n                    <div class=\"col\">\n                      <div class=\"text lg\">{{text().yes}}</div>\n                    </div>\n                    <div class=\"col\">\n                      <i class=\"fas fa-check\"></i>\n                    </div>\n                  </div>\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</particle-dialog>\n" }]
+        }], propDecorators: { iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+class TemplatedDialog {
+    _data = null;
+    _originalData = null;
+    dialogOpen;
+    set data(t) {
+        this._data = t;
+        this._originalData = _.cloneDeep(this._data);
+    }
+    get data() {
+        return this._data;
+    }
+    text = input({
+        unsavedChanges: 'You have unsaved changes, are you sure you want to continue?',
+        continue: 'Continue?',
+        close: 'Close',
+        maximize: 'Toggle Maximize',
+    }, ...(ngDevMode ? [{ debugName: "text" }] : []));
+    height = input('480px', ...(ngDevMode ? [{ debugName: "height" }] : []));
+    width = input('854px', ...(ngDevMode ? [{ debugName: "width" }] : []));
+    icon = input('fas fa-cog', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : []));
+    description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : []));
+    checkUnsavedChanges = input(false, ...(ngDevMode ? [{ debugName: "checkUnsavedChanges" }] : []));
+    showMaximize = input(true, ...(ngDevMode ? [{ debugName: "showMaximize" }] : []));
+    subheaderTemplate = input(null, ...(ngDevMode ? [{ debugName: "subheaderTemplate" }] : []));
+    contentTemplate = input(null, ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
+    footerTemplate = input(null, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
+    closed = output();
+    confirmationDialog = null;
+    open() {
+        this.dialogOpen = {};
+    }
+    close() {
+        this.closed.emit();
+        this.dialogOpen = null;
+    }
+    checkClose() {
+        if (this.checkUnsavedChanges() && !_.isEqual(JSON.stringify(this._data), JSON.stringify(this._originalData))) {
+            this.confirmationDialog.open(null, this.text().unsavedChanges);
+        }
+        else {
+            this.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TemplatedDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: TemplatedDialog, isStandalone: true, selector: "particle-templated-dialog", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", 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 }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, checkUnsavedChanges: { classPropertyName: "checkUnsavedChanges", publicName: "checkUnsavedChanges", isSignal: true, isRequired: false, transformFunction: null }, showMaximize: { classPropertyName: "showMaximize", publicName: "showMaximize", isSignal: true, isRequired: false, transformFunction: null }, subheaderTemplate: { classPropertyName: "subheaderTemplate", publicName: "subheaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "confirmationDialog", first: true, predicate: ["confirmationDialog"], descendants: true }], ngImport: i0, template: "<particle-dialog\n  [object]=\"dialogOpen\"\n  [showTitle]=\"false\"\n  [allowClose]=\"false\"\n  [width]=\"width()\"\n  [height]=\"height()\"\n  (closed)=\"checkClose()\"\n  (closeAttempt)=\"checkClose()\"\n  #dialog\n>\n  <div class=\"row_block width100 height100 body_color\">\n    <div class=\"row column height100\">\n      <div class=\"col\">\n        <div class=\"row header_color ptl_brdr_color border_bottom min_h50 v_center pad_right10 pad_left5 hide_element\">\n          <div class=\"col size_1 v_center pad_lr5\">\n            <div class=\"square_40px\" innerHTML=\"<i class='{{icon()}}'></i>\"></div>\n            <div class=\"row_block mar_lr5\">\n              <div class=\"min_h10 min_w2 bg_logo_1\"></div>\n              <div class=\"min_h10 min_w2 bg_logo_2\"></div>\n              <div class=\"min_h10 min_w2 bg_logo_3\"></div>\n            </div>\n            <div class=\"text lg text_left text_wrap bold pad_lr5\">\n              {{title()}}\n            </div>\n          </div>\n          <div class=\"col row rc_gap min_w30 top_center\">\n            @if (showMaximize()) {\n              <button class=\"access btn clear\"\n                      [attr.aria-label]=\"text().maximize\"\n                      (click)=\"dialog.toggleMaximize()\"\n              >\n                <div class=\"circle_26px cancel_button_color ptl_brdr_color ptl_brdr_size\"><i class=\"fas fa-expand\"></i></div>\n              </button>\n            }\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().close\" (click)=\"checkClose()\" >\n              <div class=\"circle_26px cancel_button_color ptl_brdr_color ptl_brdr_size\"><i class=\"fas fa-xmark\"></i></div>\n            </button>\n          </div>\n        </div>\n        <div class=\"row header_color min_h50 v_center pad_right10 pad_tb5 pad_left5 mobile_only_flex\">\n          <div class=\"col size_1 v_center pad_lr5\">\n            <div class=\"square_30px\" innerHTML=\"<i class='{{icon()}}'></i>\"></div>\n            <div class=\"row_block mar_lr5\">\n              <div class=\"min_h5 min_w2 bg_logo_1\"></div>\n              <div class=\"min_h5 min_w2 bg_logo_2\"></div>\n              <div class=\"min_h5 min_w2 bg_logo_3\"></div>\n            </div>\n            <div class=\"text md text_left text_wrap bold pad_lr5\">\n              {{title()}}\n            </div>\n          </div>\n          <div class=\"col row rc_gap min_w30 top_center\">\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().close\" (click)=\"checkClose()\" >\n              <div class=\"circle_30px cancel_button_color ptl_brdr_color ptl_brdr_size\"><i class=\"fas fa-xmark\"></i></div>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- CONTENT -->\n      <div class=\"col size_1 body_color\" style=\"height: calc(100% - 50px);\">\n        <div class=\"row_block width100 height100\">\n          <div class=\"row_block width100 body_color height100\">\n            <div class=\"row column content_color height100\">\n              <div class=\"col ptl_brdr_color border_bottom pad_10 body_color_dark_2 min_h25 v_center\">\n                @if (subheaderTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"subheaderTemplate()\"></ng-container>\n                } @else {\n                  <div class=\"text md text_left text_wrap\">\n                    {{description()}}\n                  </div>\n                }\n              </div>\n              <div class=\"col size_1 column scroll_yauto body_color pad_10\">\n                <div class=\"col size_1 column rc_gap ptl_brdr_color ptl_brdr_radius ptl_brdr_size pad_10 content_color\">\n                  <ng-container *ngTemplateOutlet=\"contentTemplate()\"></ng-container>\n                </div>\n              </div>\n              <div class=\"col min_h50 ptl_brdr_color border_top pad_tb5 pad_lr10 footer_color\">\n                <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</particle-dialog>\n\n<particle-confirmation-dialog (confirmed)=\"close()\" #confirmationDialog></particle-confirmation-dialog>\n", dependencies: [{ kind: "component", type: ConfirmationDialog, selector: "particle-confirmation-dialog", inputs: ["iconClass", "width", "height", "text"], outputs: ["confirmed", "closed"] }, { kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "closeAttempt", "opened"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TemplatedDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'particle-templated-dialog', imports: [
+                        ConfirmationDialog,
+                        DialogComponent,
+                        NgTemplateOutlet
+                    ], template: "<particle-dialog\n  [object]=\"dialogOpen\"\n  [showTitle]=\"false\"\n  [allowClose]=\"false\"\n  [width]=\"width()\"\n  [height]=\"height()\"\n  (closed)=\"checkClose()\"\n  (closeAttempt)=\"checkClose()\"\n  #dialog\n>\n  <div class=\"row_block width100 height100 body_color\">\n    <div class=\"row column height100\">\n      <div class=\"col\">\n        <div class=\"row header_color ptl_brdr_color border_bottom min_h50 v_center pad_right10 pad_left5 hide_element\">\n          <div class=\"col size_1 v_center pad_lr5\">\n            <div class=\"square_40px\" innerHTML=\"<i class='{{icon()}}'></i>\"></div>\n            <div class=\"row_block mar_lr5\">\n              <div class=\"min_h10 min_w2 bg_logo_1\"></div>\n              <div class=\"min_h10 min_w2 bg_logo_2\"></div>\n              <div class=\"min_h10 min_w2 bg_logo_3\"></div>\n            </div>\n            <div class=\"text lg text_left text_wrap bold pad_lr5\">\n              {{title()}}\n            </div>\n          </div>\n          <div class=\"col row rc_gap min_w30 top_center\">\n            @if (showMaximize()) {\n              <button class=\"access btn clear\"\n                      [attr.aria-label]=\"text().maximize\"\n                      (click)=\"dialog.toggleMaximize()\"\n              >\n                <div class=\"circle_26px cancel_button_color ptl_brdr_color ptl_brdr_size\"><i class=\"fas fa-expand\"></i></div>\n              </button>\n            }\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().close\" (click)=\"checkClose()\" >\n              <div class=\"circle_26px cancel_button_color ptl_brdr_color ptl_brdr_size\"><i class=\"fas fa-xmark\"></i></div>\n            </button>\n          </div>\n        </div>\n        <div class=\"row header_color min_h50 v_center pad_right10 pad_tb5 pad_left5 mobile_only_flex\">\n          <div class=\"col size_1 v_center pad_lr5\">\n            <div class=\"square_30px\" innerHTML=\"<i class='{{icon()}}'></i>\"></div>\n            <div class=\"row_block mar_lr5\">\n              <div class=\"min_h5 min_w2 bg_logo_1\"></div>\n              <div class=\"min_h5 min_w2 bg_logo_2\"></div>\n              <div class=\"min_h5 min_w2 bg_logo_3\"></div>\n            </div>\n            <div class=\"text md text_left text_wrap bold pad_lr5\">\n              {{title()}}\n            </div>\n          </div>\n          <div class=\"col row rc_gap min_w30 top_center\">\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().close\" (click)=\"checkClose()\" >\n              <div class=\"circle_30px cancel_button_color ptl_brdr_color ptl_brdr_size\"><i class=\"fas fa-xmark\"></i></div>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- CONTENT -->\n      <div class=\"col size_1 body_color\" style=\"height: calc(100% - 50px);\">\n        <div class=\"row_block width100 height100\">\n          <div class=\"row_block width100 body_color height100\">\n            <div class=\"row column content_color height100\">\n              <div class=\"col ptl_brdr_color border_bottom pad_10 body_color_dark_2 min_h25 v_center\">\n                @if (subheaderTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"subheaderTemplate()\"></ng-container>\n                } @else {\n                  <div class=\"text md text_left text_wrap\">\n                    {{description()}}\n                  </div>\n                }\n              </div>\n              <div class=\"col size_1 column scroll_yauto body_color pad_10\">\n                <div class=\"col size_1 column rc_gap ptl_brdr_color ptl_brdr_radius ptl_brdr_size pad_10 content_color\">\n                  <ng-container *ngTemplateOutlet=\"contentTemplate()\"></ng-container>\n                </div>\n              </div>\n              <div class=\"col min_h50 ptl_brdr_color border_top pad_tb5 pad_lr10 footer_color\">\n                <ng-container *ngTemplateOutlet=\"footerTemplate()\"></ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</particle-dialog>\n\n<particle-confirmation-dialog (confirmed)=\"close()\" #confirmationDialog></particle-confirmation-dialog>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], checkUnsavedChanges: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkUnsavedChanges", required: false }] }], showMaximize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMaximize", required: false }] }], subheaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "subheaderTemplate", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], confirmationDialog: [{
+                type: ViewChild,
+                args: ['confirmationDialog']
+            }] } });
+
 /**
  * This interceptor will force the Content-Type header to application/json so that each http call doesn't have to.
  */
@@ -9738,5 +9955,5 @@ class ObservableContainer {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionContentDirective, AccordionHeaderDirective, AccordionItemDirective, BackgroundCarouselDirective, BaseDataService, CalendarComponent, CheckboxComponent, ColorPickerComponent, DatePickerComponent, DateRangePickerComponent, DialogComponent, DialogService, DropdownComponent, INPUTMASK_VALUE_ACCESSOR, IconSelectComponent, IdleTimeoutComponent, InputMaskComponent, JsonInterceptor, KeyfilterDirective, LayoutFullFramingComponent, LayoutFullwidthSidebarComponent, LoaderComponent, LocalStorageService, MultiSelectComponent, NotificationComponent, NotificationService, ObservableContainer, OrdinalNumberPipe, PaginatorComponent, ParticleIconsModule, PopoverComponent, ProfilePicComponent, ProgressBarComponent, RICH_TEXT_VALUE_ACCESSOR, RadioButtonsComponent, RichTextComponent, ScrollToTopComponent, SlideoverComponent, SliderComponent, ThemeChangeDetectionService, ThemingService, ToggleSwitchComponent, TooltipDirective, WeekPickerComponent, Z_INDEX_LAYERS };
+export { AccordionComponent, AccordionContentDirective, AccordionHeaderDirective, AccordionItemDirective, AutoCompleteInput, BackgroundCarouselDirective, BaseDataService, CalendarComponent, CheckboxComponent, ColorPickerComponent, ConfirmationDialog, DatePickerComponent, DateRangePickerComponent, DialogComponent, DialogService, DropdownComponent, INPUTMASK_VALUE_ACCESSOR, IconSelectComponent, IdleTimeoutComponent, InputMaskComponent, JsonInterceptor, KeyfilterDirective, LayoutFullFramingComponent, LayoutFullwidthSidebarComponent, LoaderComponent, LocalStorageService, MultiSelectComponent, NotificationComponent, NotificationService, ObservableContainer, OrdinalNumberPipe, PaginatorComponent, ParticleIconsModule, PopoverComponent, ProfilePicComponent, ProgressBarComponent, RICH_TEXT_VALUE_ACCESSOR, RadioButtonsComponent, RichTextComponent, ScrollToTopComponent, SlideoverComponent, SliderComponent, TemplatedDialog, ThemeChangeDetectionService, ThemingService, ToggleSwitchComponent, TooltipDirective, WeekPickerComponent, Z_INDEX_LAYERS };
 //# sourceMappingURL=entake-particle.mjs.map