@entake/particle 19.0.0 → 19.0.1

package/fesm2022/entake-particle.mjs

@@ -97,7 +97,7 @@ class ParticleIconsRegular {
  */
 class ParticleIconsSolid {
     /**
-     * pts fa-divider
+     * fas fa-divider
      */
     static ptsDivider = {
         prefix: 'fas',
@@ -109,7 +109,7 @@ class ParticleIconsSolid {
         ]
     };
     /**
-     * pts fa-multi-select
+     * fas fa-multi-select
      */
     static ptsMultiSelect = {
         prefix: 'fas',
@@ -121,7 +121,7 @@ class ParticleIconsSolid {
         ]
     };
     /**
-     * pts fa-phone
+     * fas fa-phone
      */
     static ptsPhone = {
         prefix: 'fas',
@@ -133,7 +133,7 @@ class ParticleIconsSolid {
         ]
     };
     /**
-     * pts fa-physical-address
+     * fas fa-physical-address
      */
     static ptsPhysicalAddress = {
         prefix: 'fas',
@@ -145,7 +145,7 @@ class ParticleIconsSolid {
         ]
     };
     /**
-     * pts fa-radio-buttons
+     * fas fa-radio-buttons
      */
     static ptsRadioButtons = {
         prefix: 'fas',
@@ -157,7 +157,7 @@ class ParticleIconsSolid {
         ]
     };
     /**
-     * pts fa-routing-number
+     * fas fa-routing-number
      */
     static ptsRoutingNumber = {
         prefix: 'fas',
@@ -939,6 +939,7 @@ class DialogComponent {
      * Element reference to the dialog close button
      */
     closeButton = null;
+    isMaximized = false;
     /**
      * Observable to update the effective width of the dialog on screen resize
      */
@@ -1003,7 +1004,9 @@ class DialogComponent {
     width = input('900px');
     borderRadius = input('0px');
     text = input({
-        close: 'Close Dialog'
+        close: 'Close Dialog',
+        maximize: 'Maximize',
+        minimize: 'Minimize'
     });
     /**
      * Event Emitter for when the dialog is closed
@@ -1013,11 +1016,15 @@ class DialogComponent {
      * Event emitted when dialog has finished opening
      */
     opened = output();
+    toggleMaximize() {
+        this.isMaximized = !this.isMaximized;
+    }
     /**
      * Null the object to close the dialog, emit the close event.
      */
     close() {
         this._object = null;
+        this.isMaximized = false;
         this.dialogService.unregisterDialog(this);
     }
     /**
@@ -1033,7 +1040,7 @@ class DialogComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DialogComponent, isStandalone: true, selector: "particle-dialog", inputs: { object: { classPropertyName: "object", publicName: "object", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, allowClose: { classPropertyName: "allowClose", publicName: "allowClose", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", opened: "opened" }, viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{'particle_dialog_overlay' : object}\">\n  @if (object) {\n    <div\n      [@dialog] class=\"particle_dialog_container\"\n      (@dialog.done)=\"onAnimationDone($event)\"\n      [cdkTrapFocus]=\"true\"\n      [cdkTrapFocusAutoCapture]=\"true\">\n      @if (effectiveWidth$ | async; as effectiveWidth) {\n        <div class=\"col shadow particle_dialog_box\" [style.border-radius]=\"borderRadius()\"\n          [ngStyle]=\"{'width': effectiveWidth, 'height': 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>\n                  @if (allowClose()) {\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}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DialogComponent, isStandalone: true, selector: "particle-dialog", inputs: { object: { classPropertyName: "object", publicName: "object", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleClass: { classPropertyName: "titleClass", publicName: "titleClass", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null }, allowClose: { classPropertyName: "allowClose", publicName: "allowClose", isSignal: true, isRequired: false, transformFunction: null }, bodyClass: { classPropertyName: "bodyClass", publicName: "bodyClass", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", opened: "opened" }, viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{'particle_dialog_overlay' : object}\">\r\n  @if (object) {\r\n    <div\r\n      [@dialog] class=\"particle_dialog_container\"\r\n      (@dialog.done)=\"onAnimationDone($event)\"\r\n      [cdkTrapFocus]=\"true\"\r\n      [cdkTrapFocusAutoCapture]=\"true\">\r\n      @if (effectiveWidth$ | async; as effectiveWidth) {\r\n        <div class=\"col shadow particle_dialog_box\" [style.border-radius]=\"borderRadius()\"\r\n          [ngStyle]=\"{'width': isMaximized ? '90vw' : effectiveWidth, 'height': isMaximized ? '90vh' : height()}\">\r\n          <!-- dialog header -->\r\n          @if (showTitle()) {\r\n            <div class=\"col\" [ngClass]=\"titleClass()\">\r\n              <div class=\"row v_center pad_5 space_between\">\r\n                <div class=\"text lg bold paragraph\">\r\n                  {{title()}}\r\n                </div>\r\n                <div class=\"row col rc_gap\">\r\n                  @if (allowClose()) {\r\n                    <button class=\"access btnset clear\"\r\n                            [attr.aria-label]=\"isMaximized ? text().minimize : text().maximize\"\r\n                            (click)=\"isMaximized = !isMaximized\">\r\n                      <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                        <i class=\"fas fa-maximize\"></i>\r\n                      </div>\r\n                    </button>\r\n                    <button class=\"access btnset clear\"\r\n                      [attr.aria-label]=\"text().close\"\r\n                      (click)=\"close()\">\r\n                      <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                        <i class=\"fas fa-times\"></i>\r\n                      </div>\r\n                    </button>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n          <!-- dialog container -->\r\n          <div class=\"row scroll_yauto center_center\" [ngClass]=\"bodyClass()\">\r\n            <div class=\"row_block width100 height100\">\r\n              <!-- content -->\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n", styles: [".particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}.particle_dialog_container{position:fixed;width:100%;height:100%;inset:0;flex-direction:column;display:flex;align-items:center;justify-content:center;z-index:var(--z-notification)}.particle_dialog_box{box-sizing:border-box;width:100%;display:flex;flex-direction:column;overflow:hidden}@media screen and (max-width:768px){.particle_dialog_box{border-radius:0;width:100%!important;height:100%!important;max-height:unset!important;max-width:unset!important}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
             trigger('dialog', [
                 state('void', style({ transform: 'scale(0.5)', opacity: '0' })),
                 transition('void => *', [
@@ -1059,7 +1066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                                 animate('.15s 0ms ease-in-out', style({ transform: 'scale(0.5)', opacity: '0' }))
                             ]),
                         ])
-                    ], imports: [NgClass, CdkTrapFocus, NgStyle, AsyncPipe], template: "<div [ngClass]=\"{'particle_dialog_overlay' : object}\">\n  @if (object) {\n    <div\n      [@dialog] class=\"particle_dialog_container\"\n      (@dialog.done)=\"onAnimationDone($event)\"\n      [cdkTrapFocus]=\"true\"\n      [cdkTrapFocusAutoCapture]=\"true\">\n      @if (effectiveWidth$ | async; as effectiveWidth) {\n        <div class=\"col shadow particle_dialog_box\" [style.border-radius]=\"borderRadius()\"\n          [ngStyle]=\"{'width': effectiveWidth, 'height': 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>\n                  @if (allowClose()) {\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}}\n"] }]
+                    ], imports: [NgClass, CdkTrapFocus, NgStyle, AsyncPipe], template: "<div [ngClass]=\"{'particle_dialog_overlay' : object}\">\r\n  @if (object) {\r\n    <div\r\n      [@dialog] class=\"particle_dialog_container\"\r\n      (@dialog.done)=\"onAnimationDone($event)\"\r\n      [cdkTrapFocus]=\"true\"\r\n      [cdkTrapFocusAutoCapture]=\"true\">\r\n      @if (effectiveWidth$ | async; as effectiveWidth) {\r\n        <div class=\"col shadow particle_dialog_box\" [style.border-radius]=\"borderRadius()\"\r\n          [ngStyle]=\"{'width': isMaximized ? '90vw' : effectiveWidth, 'height': isMaximized ? '90vh' : height()}\">\r\n          <!-- dialog header -->\r\n          @if (showTitle()) {\r\n            <div class=\"col\" [ngClass]=\"titleClass()\">\r\n              <div class=\"row v_center pad_5 space_between\">\r\n                <div class=\"text lg bold paragraph\">\r\n                  {{title()}}\r\n                </div>\r\n                <div class=\"row col rc_gap\">\r\n                  @if (allowClose()) {\r\n                    <button class=\"access btnset clear\"\r\n                            [attr.aria-label]=\"isMaximized ? text().minimize : text().maximize\"\r\n                            (click)=\"isMaximized = !isMaximized\">\r\n                      <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                        <i class=\"fas fa-maximize\"></i>\r\n                      </div>\r\n                    </button>\r\n                    <button class=\"access btnset clear\"\r\n                      [attr.aria-label]=\"text().close\"\r\n                      (click)=\"close()\">\r\n                      <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                        <i class=\"fas fa-times\"></i>\r\n                      </div>\r\n                    </button>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n          <!-- dialog container -->\r\n          <div class=\"row scroll_yauto center_center\" [ngClass]=\"bodyClass()\">\r\n            <div class=\"row_block width100 height100\">\r\n              <!-- content -->\r\n              <ng-content></ng-content>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n", styles: [".particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}.particle_dialog_container{position:fixed;width:100%;height:100%;inset:0;flex-direction:column;display:flex;align-items:center;justify-content:center;z-index:var(--z-notification)}.particle_dialog_box{box-sizing:border-box;width:100%;display:flex;flex-direction:column;overflow:hidden}@media screen and (max-width:768px){.particle_dialog_box{border-radius:0;width:100%!important;height:100%!important;max-height:unset!important;max-width:unset!important}}\n"] }]
         }], propDecorators: { closeButton: [{
                 type: ViewChild,
                 args: ['closeButton']
@@ -3132,7 +3139,7 @@ class IconSelectComponent {
                 useExisting: forwardRef(() => IconSelectComponent),
                 multi: true
             }
-        ], 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        [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 icon) {\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", "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 -->\r\n<button [ngClass]=\"buttonColorClass() ? buttonColorClass() : 'content_color'\"\r\n        [ngStyle]=\"{\r\n                     'width': buttonSizing(),\r\n                     'min-width': buttonSizing(),\r\n                     'height': buttonSizing(),\r\n                     'min-height': buttonSizing()\r\n                   }\"\r\n        (click)=\"openDialog()\"\r\n        [particleTooltip]=\"(_internalValue | async)?.prefix + ' ' + (_internalValue | async)?.name\"\r\n        [tooltipDisabled]=\"(_internalValue | async) === null\"\r\n        [disabled]=\"disabled\"\r\n        class=\"btnset access wis_button bg_overlay brdr brad_3\"\r\n        [attr.aria-label]=\"text().selectAnIcon\">\r\n  @if (!showDialog) {\r\n    @if (_internalValue | async; as selectedIcon) {\r\n      <div>\r\n        <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} wis_icon\"></i>\r\n      </div>\r\n    } @else {\r\n      <div><i class=\"fas fa-icons opacity_20\"></i></div>\r\n    }\r\n  } @else {\r\n    <div><i class=\"fas fa-spinner fa-spin\"></i></div>\r\n  }\r\n</button>\r\n\r\n<!-- TODO: at some point, maybe implement infinite scroll to icons -->\r\n\r\n<!-- picker dialog -->\r\n<particle-dialog [title]=\"text().selectAnIcon\"\r\n                 [object]=\"showDialog\"\r\n                 [width]=\"'850px'\"\r\n                 [height]=\"'500px'\"\r\n                 (closed)=\"closeDialog()\">\r\n  <div class=\"row height100\">\r\n\r\n    <!-- FILTERS -->\r\n    <div class=\"col min_w250 bg_overlay brdr border_right mobile_hide\">\r\n      <div class=\"row_block width100\">\r\n        @if (_filter | async; as filter) {\r\n          <!-- all icons -->\r\n          <div class=\"mar_5 pad_5\">\r\n            <button (click)=\"handleFilterSelect({ style: 'all', type: 'all' })\"\r\n                    [ngClass]=\"{ 'selected': filter.type === 'all' && filter.style === 'all' }\"\r\n                    class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                    [attr.aria-label]=\"text().seeAllIcons\">\r\n              <div class=\"v_center\">\r\n                <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                  @if (filter.type === 'all' && filter.style === 'all') {\r\n                    <div class=\"circle_8px ok_button_color\"></div>\r\n                  }\r\n                </div>\r\n                <div class=\"text md\">{{ text().seeAllIcons }}</div>\r\n              </div>\r\n              <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n            </button>\r\n          </div>\r\n          <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n          <!-- fontawesome icons -->\r\n          <div class=\"mar_5\">\r\n            <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().fontAwesomeIcons }}</div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'all', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'all' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'all') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().all }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'solid', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'solid' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'solid') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().solid }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'regular', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'regular' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'regular') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().regular }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'brands', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'brands' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'brands') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().brands }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n          <!-- custom icons -->\r\n          <div class=\"mar_5\">\r\n            <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().customIcons }}</div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'all', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'all' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'all') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">All</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'solid', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'solid' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'solid') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().solid }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'regular', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'regular' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'regular') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().regular }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'brands', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'brands' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'brands') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().brands }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ICONS -->\r\n    <div class=\"col size_2 column\">\r\n      <div class=\"col content_color_dark_1 pad_x5\">\r\n        <!-- paginator -->\r\n        @if (totalPages$ | async; as totalPages) {\r\n          <div\r\n            class=\"col v_center mar_10\">\r\n            @if (canPaginatePrevious$ | async) {\r\n              <button\r\n                (click)=\"paginatePrevious()\"\r\n                class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                [attr.aria-label]=\"text().previousPage\">\r\n                <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n              </button>\r\n            } @else {\r\n              <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                      [attr.aria-label]=\"text().previousPage\">\r\n                <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n              </button>\r\n            }\r\n            <div\r\n              class=\"text sm bolder center\"\r\n              style=\"min-width:65px;\">\r\n              {{ (_activePage | async)! + 1 }} / {{ totalPages }}\r\n            </div>\r\n            @if (canPaginateNext$ | async) {\r\n              <button\r\n                (click)=\"paginateNext()\"\r\n                class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                [attr.aria-label]=\"text().nextPage\">\r\n                <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n              </button>\r\n            } @else {\r\n              <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                      [attr.aria-label]=\"text().nextPage\">\r\n                <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n        <!-- search -->\r\n        <div class=\"col size_1 wis_search mar_10\">\r\n          <input #iconSearchInput\r\n                 [ngModel]=\"_searchText | async\"\r\n                 (input)=\"_searchText.next(iconSearchInput.value)\"\r\n                 (keyup.enter)=\"_searchInputEnterKeyup.next($any(null))\"\r\n                 class=\"access input md bg_overlay brdr content_color\"\r\n                 [attr.aria-label]=\"text().searchIcons\" [placeholder]=\"text().searchIcons + '...'\"\r\n          />\r\n          @if ((canSearch$ | async) && (_searchClick | async)) {\r\n            <button\r\n              (click)=\"clearSearch()\" aria-label=\"Clear search\"\r\n              class=\"access btn circle_18px overlay wis_clear_btn\">\r\n              <span class=\"icon grow\"><i class=\"fas fa-times fa-sm\"></i></span>\r\n            </button>\r\n          }\r\n          @if (canSearch$ | async) {\r\n            <button\r\n              (click)=\"_searchClick.next(iconSearchInput.value); _activePage.next(0)\"\r\n              class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n              [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n              <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n            </button>\r\n          } @else {\r\n            <button disabled\r\n                    class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n                    [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n              <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n      <!-- icons -->\r\n      <div #iconScrollContainer class=\"col size_1 top_left scroll_y pad_5\" style=\"scroll-behavior: smooth\">\r\n        @if (paginatedIcons$ | async; as icons) {\r\n          <div class=\"row wrap top_left\" style=\"align-items:stretch;\">\r\n            @for (icon of paginatedIcons$ | async; track icon) {\r\n              <div class=\"col size_1 min_w75 mar_5\">\r\n                <button class=\"access wis_icon_btn\" (click)=\"handleIconSelect(icon)\"\r\n                        [attr.aria-label]=\"text().select + ' ' + icon.name\">\r\n                  <div\r\n                    [ngClass]=\"((_internalValue | async)?.prefix === icon.prefix) && ((_internalValue | async)?.name === icon.name) ? 'ok_button_color' : 'content_color'\"\r\n                    class=\"wis_icon_btn_preview square_50px brad_3 bg_overlay brdr mar_bot5\">\r\n                    <i class=\"{{icon.prefix}} {{icon.name}}\"></i>\r\n                  </div>\r\n                  <div class=\"text sm center faded\">{{ icon.name }}</div>\r\n                </button>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <div class=\"row column min_h300 center_center\">\r\n            <div class=\"text md\">{{ text().couldntFindAnything }}</div>\r\n            <div class=\"text sm\">{{ text().modifySearchCriteria }}</div>\r\n            <button class=\"access btnset clear mar_10\"\r\n                    [attr.aria-label]=\"text().close\"\r\n                    (click)=\"clearSearch()\">\r\n              <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </div>\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n      @if (_internalValue | async; as selectedIcon) {\r\n        <div\r\n          class=\"col space_between bg_overlay brdr border_top pad_x5 wis_selection_bar\">\r\n          <div class=\"col v_center mar_10\">\r\n            <div class=\"text md faded mar_right10 mobile_hide\">{{ text().selection }}:</div>\r\n            @if (showIconSelectionPreview) {\r\n              <div class=\"v_center\">\r\n                <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} fa-fw mar_right5\" style=\"font-size:16px;\"></i>\r\n                <div class=\"text md bold\">{{ selectedIcon.prefix }} {{ selectedIcon.name }}</div>\r\n              </div>\r\n            }\r\n          </div>\r\n          <div class=\"col v_center mar_10\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"access btnset spaced md hov_glow save_button_color ptl_brdr_radius\"\r\n              [attr.aria-label]=\"text().confirm\"\r\n              (click)=\"handleIconSelectConfirm()\"\r\n            >\r\n              <div>{{ text().confirm }}</div>\r\n              <div class=\"brdr border_left mar_left10 pad_left10\"><i class=\"fas fa-check\"></i></div>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</particle-dialog>\r\n", styles: [".wis_button{width:40px;min-width:40px;height:40px;min-height:40px;cursor:pointer;transition:all .1s ease}.wis_button:disabled{cursor:default;opacity:1!important}.wis_button:hover:not(:disabled){filter:brightness(1.05)}.wis_button svg{transition:transform .1s ease}.wis_button:hover:not(:disabled) .wis_icon{transform:scale(1.15)}@supports not (-ms-high-contrast:none){.wis_button svg{width:75%;height:75%}}.wis_search{position:relative}.wis_search input{padding-right:40px!important}.wis_search .wis_search_btn{position:absolute;right:0;top:0;z-index:var(--z-frame);border-top-left-radius:0;border-bottom-left-radius:0;height:100%;width:32px}.wis_search .wis_clear_btn{position:absolute;right:40px;top:7px;z-index:var(--z-frame)}.wis_filter_btn{width:100%;padding:5px 10px;border-radius:3px}.wis_filter_btn:not(:hover):not(.selected){background-color:inherit;color:inherit}.wis_icon_btn{cursor:pointer;transition:all .1s ease;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;border:none;border-radius:3px;padding:5px 2px;background-color:inherit;color:inherit}.wis_icon_btn:hover{background-color:#7878781a}.wis_icon_btn_preview{transition:all .1s ease}.wis_selection_bar{z-index:var(--z-frame);box-shadow:0 -6px 10px -8px #00000040;animation-name:slideUpSelectionBar;animation-duration:.2s;transform-origin:bottom center}@keyframes slideUpSelectionBar{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: IconSelectComponent, decorators: [{
             type: Component,
@@ -3142,7 +3149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             useExisting: forwardRef(() => IconSelectComponent),
                             multi: true
                         }
-                    ], 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        [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 icon) {\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"] }]
+                    ], imports: [NgClass, NgStyle, TooltipDirective, DialogComponent, FormsModule, AsyncPipe], template: "<!-- choose button -->\r\n<button [ngClass]=\"buttonColorClass() ? buttonColorClass() : 'content_color'\"\r\n        [ngStyle]=\"{\r\n                     'width': buttonSizing(),\r\n                     'min-width': buttonSizing(),\r\n                     'height': buttonSizing(),\r\n                     'min-height': buttonSizing()\r\n                   }\"\r\n        (click)=\"openDialog()\"\r\n        [particleTooltip]=\"(_internalValue | async)?.prefix + ' ' + (_internalValue | async)?.name\"\r\n        [tooltipDisabled]=\"(_internalValue | async) === null\"\r\n        [disabled]=\"disabled\"\r\n        class=\"btnset access wis_button bg_overlay brdr brad_3\"\r\n        [attr.aria-label]=\"text().selectAnIcon\">\r\n  @if (!showDialog) {\r\n    @if (_internalValue | async; as selectedIcon) {\r\n      <div>\r\n        <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} wis_icon\"></i>\r\n      </div>\r\n    } @else {\r\n      <div><i class=\"fas fa-icons opacity_20\"></i></div>\r\n    }\r\n  } @else {\r\n    <div><i class=\"fas fa-spinner fa-spin\"></i></div>\r\n  }\r\n</button>\r\n\r\n<!-- TODO: at some point, maybe implement infinite scroll to icons -->\r\n\r\n<!-- picker dialog -->\r\n<particle-dialog [title]=\"text().selectAnIcon\"\r\n                 [object]=\"showDialog\"\r\n                 [width]=\"'850px'\"\r\n                 [height]=\"'500px'\"\r\n                 (closed)=\"closeDialog()\">\r\n  <div class=\"row height100\">\r\n\r\n    <!-- FILTERS -->\r\n    <div class=\"col min_w250 bg_overlay brdr border_right mobile_hide\">\r\n      <div class=\"row_block width100\">\r\n        @if (_filter | async; as filter) {\r\n          <!-- all icons -->\r\n          <div class=\"mar_5 pad_5\">\r\n            <button (click)=\"handleFilterSelect({ style: 'all', type: 'all' })\"\r\n                    [ngClass]=\"{ 'selected': filter.type === 'all' && filter.style === 'all' }\"\r\n                    class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                    [attr.aria-label]=\"text().seeAllIcons\">\r\n              <div class=\"v_center\">\r\n                <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                  @if (filter.type === 'all' && filter.style === 'all') {\r\n                    <div class=\"circle_8px ok_button_color\"></div>\r\n                  }\r\n                </div>\r\n                <div class=\"text md\">{{ text().seeAllIcons }}</div>\r\n              </div>\r\n              <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n            </button>\r\n          </div>\r\n          <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n          <!-- fontawesome icons -->\r\n          <div class=\"mar_5\">\r\n            <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().fontAwesomeIcons }}</div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'all', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' && filter.style === 'all' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'all') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().all }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'solid', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'solid' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'solid') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().solid }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'regular', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'regular' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'regular') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().regular }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'brands', type: 'fontawesome' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'fontawesome' &&  filter.style === 'brands' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().fontAwesomeIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'fontawesome' && filter.style === 'brands') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().brands }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n          </div>\r\n          <div class=\"bg_overlay brdr hr mar_10\"></div>\r\n          <!-- custom icons -->\r\n          <div class=\"mar_5\">\r\n            <div class=\"text md bolder\" style=\"padding:10px 10px 5px 15px;\">{{ text().customIcons }}</div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'all', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'all' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'all') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">All</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'solid', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'solid' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().solid + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'solid') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().solid }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'regular', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'regular' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().regular + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'regular') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().regular }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n            <div class=\"mar_5\">\r\n              <button (click)=\"handleFilterSelect({ style: 'brands', type: 'particle' })\"\r\n                      [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'brands' }\"\r\n                      class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                      [attr.aria-label]=\"text().filterBy + ' ' + text().brands + ' ' + text().customIcons\">\r\n                <div class=\"v_center\">\r\n                  <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                    @if (filter.type === 'particle' && filter.style === 'brands') {\r\n                      <div class=\"circle_8px ok_button_color\"></div>\r\n                    }\r\n                  </div>\r\n                  <div class=\"text md\">{{ text().brands }}</div>\r\n                </div>\r\n                <div class=\"go_icon\"><i class=\"fas fa-chevron-right fa-fw fa-sm opacity_60\"></i></div>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- ICONS -->\r\n    <div class=\"col size_2 column\">\r\n      <div class=\"col content_color_dark_1 pad_x5\">\r\n        <!-- paginator -->\r\n        @if (totalPages$ | async; as totalPages) {\r\n          <div\r\n            class=\"col v_center mar_10\">\r\n            @if (canPaginatePrevious$ | async) {\r\n              <button\r\n                (click)=\"paginatePrevious()\"\r\n                class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                [attr.aria-label]=\"text().previousPage\">\r\n                <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n              </button>\r\n            } @else {\r\n              <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                      [attr.aria-label]=\"text().previousPage\">\r\n                <span class=\"icon slide_left\"><i class=\"fas fa-arrow-left\"></i></span>\r\n              </button>\r\n            }\r\n            <div\r\n              class=\"text sm bolder center\"\r\n              style=\"min-width:65px;\">\r\n              {{ (_activePage | async)! + 1 }} / {{ totalPages }}\r\n            </div>\r\n            @if (canPaginateNext$ | async) {\r\n              <button\r\n                (click)=\"paginateNext()\"\r\n                class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                [attr.aria-label]=\"text().nextPage\">\r\n                <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n              </button>\r\n            } @else {\r\n              <button disabled class=\"access btn square_24px bg_overlay brdr ok_button_color\"\r\n                      [attr.aria-label]=\"text().nextPage\">\r\n                <span class=\"icon slide_right\"><i class=\"fas fa-arrow-right\"></i></span>\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n        <!-- search -->\r\n        <div class=\"col size_1 wis_search mar_10\">\r\n          <input #iconSearchInput\r\n                 [ngModel]=\"_searchText | async\"\r\n                 (input)=\"_searchText.next(iconSearchInput.value)\"\r\n                 (keyup.enter)=\"_searchInputEnterKeyup.next($any(null))\"\r\n                 class=\"access input md bg_overlay brdr content_color\"\r\n                 [attr.aria-label]=\"text().searchIcons\" [placeholder]=\"text().searchIcons + '...'\"\r\n          />\r\n          @if ((canSearch$ | async) && (_searchClick | async)) {\r\n            <button\r\n              (click)=\"clearSearch()\" aria-label=\"Clear search\"\r\n              class=\"access btn circle_18px overlay wis_clear_btn\">\r\n              <span class=\"icon grow\"><i class=\"fas fa-times fa-sm\"></i></span>\r\n            </button>\r\n          }\r\n          @if (canSearch$ | async) {\r\n            <button\r\n              (click)=\"_searchClick.next(iconSearchInput.value); _activePage.next(0)\"\r\n              class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n              [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n              <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n            </button>\r\n          } @else {\r\n            <button disabled\r\n                    class=\"access btn square_28px bg_overlay brdr ok_button_color brad_3 wis_search_btn\"\r\n                    [attr.aria-label]=\"text().submitSearch\" type=\"submit\">\r\n              <span class=\"icon grow\"><i class=\"fas fa-search fa-sm\"></i></span>\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n      <!-- icons -->\r\n      <div #iconScrollContainer class=\"col size_1 top_left scroll_y pad_5\" style=\"scroll-behavior: smooth\">\r\n        @if (paginatedIcons$ | async; as icons) {\r\n          <div class=\"row wrap top_left\" style=\"align-items:stretch;\">\r\n            @for (icon of paginatedIcons$ | async; track icon) {\r\n              <div class=\"col size_1 min_w75 mar_5\">\r\n                <button class=\"access wis_icon_btn\" (click)=\"handleIconSelect(icon)\"\r\n                        [attr.aria-label]=\"text().select + ' ' + icon.name\">\r\n                  <div\r\n                    [ngClass]=\"((_internalValue | async)?.prefix === icon.prefix) && ((_internalValue | async)?.name === icon.name) ? 'ok_button_color' : 'content_color'\"\r\n                    class=\"wis_icon_btn_preview square_50px brad_3 bg_overlay brdr mar_bot5\">\r\n                    <i class=\"{{icon.prefix}} {{icon.name}}\"></i>\r\n                  </div>\r\n                  <div class=\"text sm center faded\">{{ icon.name }}</div>\r\n                </button>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <div class=\"row column min_h300 center_center\">\r\n            <div class=\"text md\">{{ text().couldntFindAnything }}</div>\r\n            <div class=\"text sm\">{{ text().modifySearchCriteria }}</div>\r\n            <button class=\"access btnset clear mar_10\"\r\n                    [attr.aria-label]=\"text().close\"\r\n                    (click)=\"clearSearch()\">\r\n              <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </div>\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n      @if (_internalValue | async; as selectedIcon) {\r\n        <div\r\n          class=\"col space_between bg_overlay brdr border_top pad_x5 wis_selection_bar\">\r\n          <div class=\"col v_center mar_10\">\r\n            <div class=\"text md faded mar_right10 mobile_hide\">{{ text().selection }}:</div>\r\n            @if (showIconSelectionPreview) {\r\n              <div class=\"v_center\">\r\n                <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} fa-fw mar_right5\" style=\"font-size:16px;\"></i>\r\n                <div class=\"text md bold\">{{ selectedIcon.prefix }} {{ selectedIcon.name }}</div>\r\n              </div>\r\n            }\r\n          </div>\r\n          <div class=\"col v_center mar_10\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"access btnset spaced md hov_glow save_button_color ptl_brdr_radius\"\r\n              [attr.aria-label]=\"text().confirm\"\r\n              (click)=\"handleIconSelectConfirm()\"\r\n            >\r\n              <div>{{ text().confirm }}</div>\r\n              <div class=\"brdr border_left mar_left10 pad_left10\"><i class=\"fas fa-check\"></i></div>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</particle-dialog>\r\n", styles: [".wis_button{width:40px;min-width:40px;height:40px;min-height:40px;cursor:pointer;transition:all .1s ease}.wis_button:disabled{cursor:default;opacity:1!important}.wis_button:hover:not(:disabled){filter:brightness(1.05)}.wis_button svg{transition:transform .1s ease}.wis_button:hover:not(:disabled) .wis_icon{transform:scale(1.15)}@supports not (-ms-high-contrast:none){.wis_button svg{width:75%;height:75%}}.wis_search{position:relative}.wis_search input{padding-right:40px!important}.wis_search .wis_search_btn{position:absolute;right:0;top:0;z-index:var(--z-frame);border-top-left-radius:0;border-bottom-left-radius:0;height:100%;width:32px}.wis_search .wis_clear_btn{position:absolute;right:40px;top:7px;z-index:var(--z-frame)}.wis_filter_btn{width:100%;padding:5px 10px;border-radius:3px}.wis_filter_btn:not(:hover):not(.selected){background-color:inherit;color:inherit}.wis_icon_btn{cursor:pointer;transition:all .1s ease;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;border:none;border-radius:3px;padding:5px 2px;background-color:inherit;color:inherit}.wis_icon_btn:hover{background-color:#7878781a}.wis_icon_btn_preview{transition:all .1s ease}.wis_selection_bar{z-index:var(--z-frame);box-shadow:0 -6px 10px -8px #00000040;animation-name:slideUpSelectionBar;animation-duration:.2s;transform-origin:bottom center}@keyframes slideUpSelectionBar{0%{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -3439,7 +3446,7 @@ class PopoverComponent {
         this.escapeKeyUpUnlisteners = [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PopoverComponent, isStandalone: true, selector: "particle-popover", inputs: { offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, targetOverride: { classPropertyName: "targetOverride", publicName: "targetOverride", isSignal: true, isRequired: false, transformFunction: null }, openDirection: { classPropertyName: "openDirection", publicName: "openDirection", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, scaleForMobile: { classPropertyName: "scaleForMobile", publicName: "scaleForMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "window:click": "onClick($event)", "window:resize": "onWindowResize()" } }, ngImport: i0, template: "@if (render) {\n  <div class=\"particle_popover_overlay\" [style.scale]=\"window.innerWidth > 768 ? 1 : scaleForMobile()\">\n    <div [cdkTrapFocus]=\"render && visible\"\n      [cdkTrapFocusAutoCapture]=\"true\"\n      [@openClose]=\"visible ? 'open' : 'close'\"\n      [ngStyle]=\"{ 'width': width, 'height': height }\"\n      [ngClass]=\"classList()\"\n      (@openClose.start)=\"onAnimationStart($event)\"\n      (@openClose.done)=\"onAnimationDone($event)\"\n      class=\"position_absolute particle_popover\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: [".particle_popover_overlay{position:fixed;inset:0;z-index:var(--z-notification)}.particle_popover{border-radius:3px;overflow-x:hidden;overflow-y:auto;font-size:12px;font-weight:400;z-index:var(--z-notification);width:auto;min-width:10px;height:auto;min-height:10px}.particle_popover_shadow{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PopoverComponent, isStandalone: true, selector: "particle-popover", inputs: { offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null }, targetOverride: { classPropertyName: "targetOverride", publicName: "targetOverride", isSignal: true, isRequired: false, transformFunction: null }, openDirection: { classPropertyName: "openDirection", publicName: "openDirection", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, scaleForMobile: { classPropertyName: "scaleForMobile", publicName: "scaleForMobile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "window:click": "onClick($event)", "window:resize": "onWindowResize()" } }, ngImport: i0, template: "@if (render) {\r\n  <div class=\"particle_popover_overlay\" [style.scale]=\"window.innerWidth > 768 ? 1 : scaleForMobile()\">\r\n    <div [cdkTrapFocus]=\"render && visible\"\r\n      [cdkTrapFocusAutoCapture]=\"true\"\r\n      [@openClose]=\"visible ? 'open' : 'close'\"\r\n      [ngStyle]=\"{ 'width': width, 'height': height }\"\r\n      [ngClass]=\"classList()\"\r\n      (@openClose.start)=\"onAnimationStart($event)\"\r\n      (@openClose.done)=\"onAnimationDone($event)\"\r\n      class=\"position_absolute particle_popover\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".particle_popover_overlay{position:fixed;inset:0;z-index:var(--z-notification)}.particle_popover{border-radius:3px;overflow-x:hidden;overflow-y:auto;font-size:12px;font-weight:400;z-index:var(--z-notification);width:auto;min-width:10px;height:auto;min-height:10px}.particle_popover_shadow{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             trigger('openClose', [
                 transition('void => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -3465,7 +3472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                                 animate('200ms ease', style({ transform: 'scaleY(0.5)', opacity: 0 }))
                             ]),
                         ])
-                    ], imports: [CdkTrapFocus, NgStyle, NgClass], template: "@if (render) {\n  <div class=\"particle_popover_overlay\" [style.scale]=\"window.innerWidth > 768 ? 1 : scaleForMobile()\">\n    <div [cdkTrapFocus]=\"render && visible\"\n      [cdkTrapFocusAutoCapture]=\"true\"\n      [@openClose]=\"visible ? 'open' : 'close'\"\n      [ngStyle]=\"{ 'width': width, 'height': height }\"\n      [ngClass]=\"classList()\"\n      (@openClose.start)=\"onAnimationStart($event)\"\n      (@openClose.done)=\"onAnimationDone($event)\"\n      class=\"position_absolute particle_popover\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: [".particle_popover_overlay{position:fixed;inset:0;z-index:var(--z-notification)}.particle_popover{border-radius:3px;overflow-x:hidden;overflow-y:auto;font-size:12px;font-weight:400;z-index:var(--z-notification);width:auto;min-width:10px;height:auto;min-height:10px}.particle_popover_shadow{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}\n"] }]
+                    ], imports: [CdkTrapFocus, NgStyle, NgClass], template: "@if (render) {\r\n  <div class=\"particle_popover_overlay\" [style.scale]=\"window.innerWidth > 768 ? 1 : scaleForMobile()\">\r\n    <div [cdkTrapFocus]=\"render && visible\"\r\n      [cdkTrapFocusAutoCapture]=\"true\"\r\n      [@openClose]=\"visible ? 'open' : 'close'\"\r\n      [ngStyle]=\"{ 'width': width, 'height': height }\"\r\n      [ngClass]=\"classList()\"\r\n      (@openClose.start)=\"onAnimationStart($event)\"\r\n      (@openClose.done)=\"onAnimationDone($event)\"\r\n      class=\"position_absolute particle_popover\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".particle_popover_overlay{position:fixed;inset:0;z-index:var(--z-notification)}.particle_popover{border-radius:3px;overflow-x:hidden;overflow-y:auto;font-size:12px;font-weight:400;z-index:var(--z-notification);width:auto;min-width:10px;height:auto;min-height:10px}.particle_popover_shadow{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}\n"] }]
         }], propDecorators: { width: [{
                 type: Input
             }], height: [{
@@ -3658,11 +3665,11 @@ class PaginatorComponent {
         this.pageJumpInput = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: PaginatorComponent, isStandalone: true, selector: "particle-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, totalLength: { classPropertyName: "totalLength", publicName: "totalLength", isSignal: true, isRequired: false, transformFunction: null }, showPages: { classPropertyName: "showPages", publicName: "showPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showButtonLabels: { classPropertyName: "showButtonLabels", publicName: "showButtonLabels", isSignal: true, isRequired: false, transformFunction: null }, showResultsPanel: { classPropertyName: "showResultsPanel", publicName: "showResultsPanel", isSignal: true, isRequired: false, transformFunction: null }, 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\"\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"] }, { 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: "19.0.5", type: PaginatorComponent, isStandalone: true, selector: "particle-paginator", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: false, isRequired: false, transformFunction: null }, totalLength: { classPropertyName: "totalLength", publicName: "totalLength", isSignal: true, isRequired: false, transformFunction: null }, showPages: { classPropertyName: "showPages", publicName: "showPages", isSignal: true, isRequired: false, transformFunction: null }, showFirstLast: { classPropertyName: "showFirstLast", publicName: "showFirstLast", isSignal: true, isRequired: false, transformFunction: null }, showButtonLabels: { classPropertyName: "showButtonLabels", publicName: "showButtonLabels", isSignal: true, isRequired: false, transformFunction: null }, showResultsPanel: { classPropertyName: "showResultsPanel", publicName: "showResultsPanel", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paginate: "paginate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row wrap_reverse center_center\">\r\n  @if (!showPages() && showResultsPanel()) {\r\n    <div class=\"col min_w200\">\r\n      <div class=\"row v_center ptl_brdr_size ptl_brdr_radius ptl_brdr_color content_color mar_right5 mar_left5 pad_3 ent_r2l_row\">\r\n        <div class=\"col size_1 center_center pad_left5 pad_right5\">\r\n          @if (totalLength() > 0) {\r\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n              {{pageStartingValue}} - {{pageEndingValue > totalLength() ? totalLength() : pageEndingValue}} {{text().of}} {{totalLength()}} {{text().results}}\r\n            </div>\r\n          } @else {\r\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n              0 - 0 {{text().of}} 0 {{text().results}}\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col center_center pad_lr5\">\r\n          <button class=\"access btn clear circle_20px \" tabindex=\"0\" [attr.aria-label]=\"text().jumpToPage\"\r\n            (click)=\"config.toggle($event)\">\r\n            <i class=\"fas fa-cog\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"col pad_5\">\r\n    <div class=\"row wrap_reverse center_center\">\r\n\r\n      @if (showFirstLast()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- first -->\r\n          <button class=\"access btnset clear\"\r\n            [attr.aria-label]=\"text().firstPage\"\r\n            [disabled]=\"activePage === 0\"\r\n            (click)=\"goToFirst()\">\r\n            <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n                <i class=\"fas fa-angle-double-left ent_r2l_ico\"></i>\r\n              </div>\r\n              @if (showButtonLabels()) {\r\n                <div class=\"text ent_r2l_txt\">{{text().firstPage}}</div>\r\n              }\r\n            </div>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col pad_5\">\r\n        <!-- previous -->\r\n        <button class=\"access btnset clear\"\r\n          [attr.aria-label]=\"text().previousPage\"\r\n          [disabled]=\"activePage === 0\"\r\n          (click)=\"hasPage(activePage - 1) ? goToPage(activePage - 1) : goToPage(activePage)\">\r\n          <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n              <i class=\"fas fa-chevron-left ent_r2l_ico\"></i>\r\n            </div>\r\n            @if (showButtonLabels()) {\r\n              <div class=\"text ent_r2l_txt\">{{text().previousPage}}</div>\r\n            }\r\n          </div>\r\n        </button>\r\n      </div>\r\n\r\n      @if (showPages()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- navigation -->\r\n          <div class=\"row v_center pad_left5 pad_right5 bg_overlay brdr content_color ptl_brdr_radius ent_r2l_dir\"\r\n            style=\"flex:1 1 auto;\">\r\n            <!-- jump button -->\r\n            <div class=\"center_right\" style=\"width:20px;min-width:20px;\">\r\n              @if (activePage > 3) {\r\n                <button class=\"access btn underline_md pag_btn clear\" tabindex=\"0\"\r\n                  [attr.aria-label]=\"text().jumpToPage\"\r\n                (click)=\"op.toggle($event)\">...</button>\r\n              }\r\n            </div>\r\n            <!-- nav buttons -->\r\n            <div class=\"center_center\" style=\"min-width:180px;\">\r\n              <!-- first -->\r\n              @if ((activePage-2 >= 0 && activePage-2 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage - 1)\"\r\n                  (click)=\"goToPage(activePage - 2, true)\">\r\n                  {{activePage - 1}}\r\n                </button>\r\n              }\r\n              <!-- second -->\r\n              @if ((activePage-1 >= 0 && activePage-1 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage)\"\r\n                  (click)=\"goToPage(activePage - 1, true)\">\r\n                  {{activePage}}\r\n                </button>\r\n              }\r\n              <!-- active page -->\r\n              <div class=\"row pag_btn active brad_3 content_color\">\r\n                <button style=\"cursor:default\"\r\n                  class=\"access col size_1 btn center_center brad_3 bg_overlay_rev brdr\" id=\"activePage\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 1)\" >\r\n                  {{activePage + 1}}\r\n                </button>\r\n              </div>\r\n              <!-- fourth -->\r\n              @if ((activePage+1 >= 0 && activePage+1 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 2)\"\r\n                  (click)=\"goToPage(activePage + 1, true)\">\r\n                  {{activePage + 2}}\r\n                </button>\r\n              }\r\n              <!-- fifth -->\r\n              @if ((activePage+2 >= 0 && activePage+2 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 3)\"\r\n                  (click)=\"goToPage(activePage + 2, true)\">\r\n                  {{activePage + 3}}\r\n                </button>\r\n              }\r\n            </div>\r\n            <!-- jump button -->\r\n            <div class=\"center_left\" style=\"width:20px;min-width:20px;\">\r\n              @if (activePage < getNumberOfPages() - 4) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().jumpToPage\"\r\n                (click)=\"op.toggle($event)\" >...</button>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col pad_5\">\r\n        <!-- next -->\r\n        <button class=\"access btnset clear\"\r\n          [attr.aria-label]=\"text().nextPage\"\r\n          [disabled]=\"activePage === numberOfPages - 1 || totalLength() === 0\"\r\n          (click)=\"hasPage(activePage + 1) ? goToPage(activePage + 1) : goToPage(activePage)\">\r\n          <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n            @if (showButtonLabels()) {\r\n              <div class=\"text ent_r2l_txt\">{{text().nextPage}}</div>\r\n            }\r\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n            </div>\r\n          </div>\r\n        </button>\r\n      </div>\r\n\r\n      @if (showFirstLast()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- last -->\r\n          <button class=\"access btnset clear\"\r\n            [attr.aria-label]=\"text().lastPage\"\r\n            [disabled]=\"activePage === numberOfPages - 1\"\r\n            (click)=\"goToLast()\">\r\n            <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n              @if (showButtonLabels()) {\r\n                <div class=\"text ent_r2l_txt\">{{text().lastPage}}</div>\r\n              }\r\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n                <i class=\"fas fa-angle-double-right ent_r2l_ico\"></i>\r\n              </div>\r\n            </div>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Jump to popover -->\r\n<particle-popover #op>\r\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n</particle-popover>\r\n\r\n<particle-popover #config>\r\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n  <ng-container *ngTemplateOutlet=\"pageSizeTemplate\"></ng-container>\r\n</particle-popover>\r\n\r\n<ng-template #jumpTo>\r\n  @if (numberOfPages > 0) {\r\n    <div class=\"row_block pad_10 center\">\r\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageJump\">{{text().jumpToPage}} ({{text().outOf}} {{numberOfPages}}):</label></div>\r\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n        <div class=\"col\">\r\n          <input class=\"access fullwidth_input sm\" style=\"width:50px;\" maxlength=\"4\" id=\"pageJump\"\r\n            type=\"text\" [attr.aria-label]=\"text().page\" name=\"pagejump\" [placeholder]=\"text().page\" [(ngModel)]=\"pageJumpInput\" />\r\n          </div>\r\n          <div class=\"col\">\r\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().jumpToPage\"\r\n              (click)=\"jumpPage();op.close();config.close();\">\r\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #pageSizeTemplate>\r\n    <div class=\"row_block pad_10 center\">\r\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageSize\">{{text().itemsPerPage}}:</label></div>\r\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n        <div class=\"col\">\r\n          <select class=\"access fullwidth_input content_color text sm\" style=\"width:50px;\"\r\n            [(ngModel)]=\"pageSize\" (ngModelChange)=\"pageSizeChange();config.close();\" [title]=\"text().choosePageSize\" id=\"pageSize\">\r\n            @for (option of pageSizeOptions(); track option) {\r\n              <option [value]=\"option\" [attr.aria-label]=\"option\">\r\n                {{option}}\r\n              </option>\r\n            }\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n", styles: [".pag_btn{flex:1;max-width:60px;margin:0 1px;height:24px;font-size:10pt}.pag_btn.active{height:30px;margin-top:-3px;margin-bottom:-3px}.spinspin{opacity:.5}.spinspin:hover{animation:spin 2s linear infinite;opacity:1}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: PaginatorComponent, decorators: [{
             type: Component,
-            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\"\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"] }]
+            args: [{ selector: 'particle-paginator', imports: [NgClass, PopoverComponent, NgTemplateOutlet, FormsModule], template: "<div class=\"row wrap_reverse center_center\">\r\n  @if (!showPages() && showResultsPanel()) {\r\n    <div class=\"col min_w200\">\r\n      <div class=\"row v_center ptl_brdr_size ptl_brdr_radius ptl_brdr_color content_color mar_right5 mar_left5 pad_3 ent_r2l_row\">\r\n        <div class=\"col size_1 center_center pad_left5 pad_right5\">\r\n          @if (totalLength() > 0) {\r\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n              {{pageStartingValue}} - {{pageEndingValue > totalLength() ? totalLength() : pageEndingValue}} {{text().of}} {{totalLength()}} {{text().results}}\r\n            </div>\r\n          } @else {\r\n            <div class=\"text sm ent_r2l_txt\" style=\"user-select: none\">\r\n              0 - 0 {{text().of}} 0 {{text().results}}\r\n            </div>\r\n          }\r\n        </div>\r\n        <div class=\"col center_center pad_lr5\">\r\n          <button class=\"access btn clear circle_20px \" tabindex=\"0\" [attr.aria-label]=\"text().jumpToPage\"\r\n            (click)=\"config.toggle($event)\">\r\n            <i class=\"fas fa-cog\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"col pad_5\">\r\n    <div class=\"row wrap_reverse center_center\">\r\n\r\n      @if (showFirstLast()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- first -->\r\n          <button class=\"access btnset clear\"\r\n            [attr.aria-label]=\"text().firstPage\"\r\n            [disabled]=\"activePage === 0\"\r\n            (click)=\"goToFirst()\">\r\n            <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n                <i class=\"fas fa-angle-double-left ent_r2l_ico\"></i>\r\n              </div>\r\n              @if (showButtonLabels()) {\r\n                <div class=\"text ent_r2l_txt\">{{text().firstPage}}</div>\r\n              }\r\n            </div>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col pad_5\">\r\n        <!-- previous -->\r\n        <button class=\"access btnset clear\"\r\n          [attr.aria-label]=\"text().previousPage\"\r\n          [disabled]=\"activePage === 0\"\r\n          (click)=\"hasPage(activePage - 1) ? goToPage(activePage - 1) : goToPage(activePage)\">\r\n          <div class=\"col pad_tb5 pad_lr10 hov_glow previous_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n              <i class=\"fas fa-chevron-left ent_r2l_ico\"></i>\r\n            </div>\r\n            @if (showButtonLabels()) {\r\n              <div class=\"text ent_r2l_txt\">{{text().previousPage}}</div>\r\n            }\r\n          </div>\r\n        </button>\r\n      </div>\r\n\r\n      @if (showPages()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- navigation -->\r\n          <div class=\"row v_center pad_left5 pad_right5 bg_overlay brdr content_color ptl_brdr_radius ent_r2l_dir\"\r\n            style=\"flex:1 1 auto;\">\r\n            <!-- jump button -->\r\n            <div class=\"center_right\" style=\"width:20px;min-width:20px;\">\r\n              @if (activePage > 3) {\r\n                <button class=\"access btn underline_md pag_btn clear\" tabindex=\"0\"\r\n                  [attr.aria-label]=\"text().jumpToPage\"\r\n                (click)=\"op.toggle($event)\">...</button>\r\n              }\r\n            </div>\r\n            <!-- nav buttons -->\r\n            <div class=\"center_center\" style=\"min-width:180px;\">\r\n              <!-- first -->\r\n              @if ((activePage-2 >= 0 && activePage-2 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage - 1)\"\r\n                  (click)=\"goToPage(activePage - 2, true)\">\r\n                  {{activePage - 1}}\r\n                </button>\r\n              }\r\n              <!-- second -->\r\n              @if ((activePage-1 >= 0 && activePage-1 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage)\"\r\n                  (click)=\"goToPage(activePage - 1, true)\">\r\n                  {{activePage}}\r\n                </button>\r\n              }\r\n              <!-- active page -->\r\n              <div class=\"row pag_btn active brad_3 content_color\">\r\n                <button style=\"cursor:default\"\r\n                  class=\"access col size_1 btn center_center brad_3 bg_overlay_rev brdr\" id=\"activePage\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 1)\" >\r\n                  {{activePage + 1}}\r\n                </button>\r\n              </div>\r\n              <!-- fourth -->\r\n              @if ((activePage+1 >= 0 && activePage+1 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 2)\"\r\n                  (click)=\"goToPage(activePage + 1, true)\">\r\n                  {{activePage + 2}}\r\n                </button>\r\n              }\r\n              <!-- fifth -->\r\n              @if ((activePage+2 >= 0 && activePage+2 < numberOfPages)) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().page + ' ' + (activePage + 3)\"\r\n                  (click)=\"goToPage(activePage + 2, true)\">\r\n                  {{activePage + 3}}\r\n                </button>\r\n              }\r\n            </div>\r\n            <!-- jump button -->\r\n            <div class=\"center_left\" style=\"width:20px;min-width:20px;\">\r\n              @if (activePage < getNumberOfPages() - 4) {\r\n                <button class=\"access btn underline_md pag_btn clear\"\r\n                  [attr.aria-label]=\"text().jumpToPage\"\r\n                (click)=\"op.toggle($event)\" >...</button>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"col pad_5\">\r\n        <!-- next -->\r\n        <button class=\"access btnset clear\"\r\n          [attr.aria-label]=\"text().nextPage\"\r\n          [disabled]=\"activePage === numberOfPages - 1 || totalLength() === 0\"\r\n          (click)=\"hasPage(activePage + 1) ? goToPage(activePage + 1) : goToPage(activePage)\">\r\n          <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n            @if (showButtonLabels()) {\r\n              <div class=\"text ent_r2l_txt\">{{text().nextPage}}</div>\r\n            }\r\n            <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n            </div>\r\n          </div>\r\n        </button>\r\n      </div>\r\n\r\n      @if (showFirstLast()) {\r\n        <div class=\"col pad_5\">\r\n          <!-- last -->\r\n          <button class=\"access btnset clear\"\r\n            [attr.aria-label]=\"text().lastPage\"\r\n            [disabled]=\"activePage === numberOfPages - 1\"\r\n            (click)=\"goToLast()\">\r\n            <div class=\"col pad_tb5 pad_lr10 hov_glow next_button_color ptl_brdr_radius ent_r2l_dir rc_gap\">\r\n              @if (showButtonLabels()) {\r\n                <div class=\"text ent_r2l_txt\">{{text().lastPage}}</div>\r\n              }\r\n              <div [ngClass]=\"showButtonLabels() ? '' : ''\">\r\n                <i class=\"fas fa-angle-double-right ent_r2l_ico\"></i>\r\n              </div>\r\n            </div>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Jump to popover -->\r\n<particle-popover #op>\r\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n</particle-popover>\r\n\r\n<particle-popover #config>\r\n  <ng-container *ngTemplateOutlet=\"jumpTo\"></ng-container>\r\n  <ng-container *ngTemplateOutlet=\"pageSizeTemplate\"></ng-container>\r\n</particle-popover>\r\n\r\n<ng-template #jumpTo>\r\n  @if (numberOfPages > 0) {\r\n    <div class=\"row_block pad_10 center\">\r\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageJump\">{{text().jumpToPage}} ({{text().outOf}} {{numberOfPages}}):</label></div>\r\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n        <div class=\"col\">\r\n          <input class=\"access fullwidth_input sm\" style=\"width:50px;\" maxlength=\"4\" id=\"pageJump\"\r\n            type=\"text\" [attr.aria-label]=\"text().page\" name=\"pagejump\" [placeholder]=\"text().page\" [(ngModel)]=\"pageJumpInput\" />\r\n          </div>\r\n          <div class=\"col\">\r\n            <button class=\"access btn clear\" [attr.aria-label]=\"text().jumpToPage\"\r\n              (click)=\"jumpPage();op.close();config.close();\">\r\n              <i class=\"fas fa-chevron-right ent_r2l_ico\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #pageSizeTemplate>\r\n    <div class=\"row_block pad_10 center\">\r\n      <div class=\"text sm text_center ent_r2l_txt\" style=\"text-align: center !important;\"><label for=\"pageSize\">{{text().itemsPerPage}}:</label></div>\r\n      <div class=\"row rc_gap center_center mar_top10 ent_r2l_dir\">\r\n        <div class=\"col\">\r\n          <select class=\"access fullwidth_input content_color text sm\" style=\"width:50px;\"\r\n            [(ngModel)]=\"pageSize\" (ngModelChange)=\"pageSizeChange();config.close();\" [title]=\"text().choosePageSize\" id=\"pageSize\">\r\n            @for (option of pageSizeOptions(); track option) {\r\n              <option [value]=\"option\" [attr.aria-label]=\"option\">\r\n                {{option}}\r\n              </option>\r\n            }\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n", styles: [".pag_btn{flex:1;max-width:60px;margin:0 1px;height:24px;font-size:10pt}.pag_btn.active{height:30px;margin-top:-3px;margin-bottom:-3px}.spinspin{opacity:.5}.spinspin:hover{animation:spin 2s linear infinite;opacity:1}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
         }], propDecorators: { pageSize: [{
                 type: Input
             }] } });
@@ -3906,11 +3913,11 @@ class RichTextComponent {
         this.editor.commands.focus(position);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RichTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: RichTextComponent, isStandalone: true, selector: "particle-rich-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideControls: { classPropertyName: "hideControls", publicName: "hideControls", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, capabilities: { classPropertyName: "capabilities", publicName: "capabilities", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { textChanged: "textChanged" }, providers: [RICH_TEXT_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 2 }) }\"\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 content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleBold().run()\"\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bold') }\"\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 content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleItalic().run()\"\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('italic') }\"\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 content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleStrike().run()\"\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('strike') }\"\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 content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleBulletList().run()\"\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bullet-list') }\"\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 content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleOrderedList().run()\"\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('ordered-list') }\"\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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'left' }) }\"\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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'center' }) }\"\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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'right' }) }\"\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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'justify' }) }\"\n            >\n            <i class=\"fas fa-align-justify 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 content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\n            (click)=\"openLinkDialog()\"\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('link') }\"\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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive('image') }\"\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\" [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  [borderRadius]=\"borderRadius()\"\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", "opened"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: RichTextComponent, isStandalone: true, selector: "particle-rich-text", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hideControls: { classPropertyName: "hideControls", publicName: "hideControls", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, capabilities: { classPropertyName: "capabilities", publicName: "capabilities", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { textChanged: "textChanged" }, providers: [RICH_TEXT_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n  @if (!this.hideControls() && this.editor.isEditable) {\r\n    <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n      @if (capabilities().heading) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"heading1\"\r\n            [attr.aria-label]=\"text().heading1\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 1 }) }\"\r\n            >\r\n            <i class=\"fas fa-header fa-fw\"></i>1\r\n          </button>\r\n          <button\r\n            id=\"heading2\"\r\n            [attr.aria-label]=\"text().heading2\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 2 }) }\"\r\n            >\r\n            <i class=\"fas fa-header fa-fw\"></i>2\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().textDecoration) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bold\"\r\n            [attr.aria-label]=\"text().bold\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBold().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bold') }\"\r\n            >\r\n            <i class=\"fas fa-bold fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"italic\"\r\n            [attr.aria-label]=\"text().italic\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('italic') }\"\r\n            >\r\n            <i class=\"fas fa-italic fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"strike\"\r\n            [attr.aria-label]=\"text().strike\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('strike') }\"\r\n            >\r\n            <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().list) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bullet-list\"\r\n            [attr.aria-label]=\"text().bulletedList\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bullet-list') }\"\r\n            >\r\n            <i class=\"fas fa-list fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"ordered-list\"\r\n            [attr.aria-label]=\"text().orderedList\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('ordered-list') }\"\r\n            >\r\n            <i class=\"fas fa-list-ol fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().alignment) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"left-align\"\r\n            [attr.aria-label]=\"text().leftAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'left' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-left fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"center-align\"\r\n            [attr.aria-label]=\"text().centerAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'center' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-center fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"right-align\"\r\n            [attr.aria-label]=\"text().rightAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'right' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-right fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"justify-align\"\r\n            [attr.aria-label]=\"text().justifyAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'justify' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-justify fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().link) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"link\"\r\n            [attr.aria-label]=\"text().setLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n            (click)=\"openLinkDialog()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('link') }\"\r\n            >\r\n            <i class=\"fas fa-link fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"unlink\"\r\n            [attr.aria-label]=\"text().removeLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n            (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n            [disabled]=\"!this.editor.isActive('link')\"\r\n            >\r\n            <i class=\"fas fa-unlink fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().images) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"image\"\r\n            [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            (click)=\"openImageDialog()\"\r\n            [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            tooltipPosition=\"top\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('image') }\"\r\n            >\r\n            <i class=\"far fa-image fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      <div class=\"col v_center pad_5\">\r\n        <button\r\n          id=\"clear-format\"\r\n          [attr.aria-label]=\"text().clearFormat\"\r\n          class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n          [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n          (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n          >\r\n          <i class=\"fas fa-text-slash fa-fw\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [style.height]=\"this.height()\">\r\n    <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n  </div>\r\n</div>\r\n\r\n<particle-dialog\r\n  [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n  titleClass=\"header_color min_h40\"\r\n  [object]=\"showDialog\"\r\n  [allowClose]=\"false\"\r\n  [borderRadius]=\"borderRadius()\"\r\n  width=\"400px\"\r\n  height=\"150px\"\r\n  >\r\n  <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n    <input class=\"access input md\"\r\n      [(ngModel)]=\"dialogLink\"\r\n      [attr.aria-label]=\"text().url\"\r\n      placeholder=\"eg. https://www.google.com\"\r\n      (keyup.enter)=\"changeEditorLink('save')\"\r\n      />\r\n    </div>\r\n    <div class=\"col min_h40 footer_color\">\r\n      <div class=\"row center_right pad_right15 pad_left15\">\r\n        <div class=\"col\">\r\n          <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n            <div class=\" pad_5\">{{text().cancel}}</div>\r\n          </button>\r\n          <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n            [attr.aria-label]=\"text().update\"\r\n            (click)=\"changeEditorLink('save')\"\r\n            >\r\n            <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n            <div>{{text().update}}</div>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TiptapEditorDirective, selector: "tiptap[editor], [tiptap][editor], tiptap-editor[editor], [tiptapEditor][editor]", inputs: ["editor", "outputFormat"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.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\">\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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 2 }) }\"\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 content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleBold().run()\"\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bold') }\"\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 content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleItalic().run()\"\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('italic') }\"\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 content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleStrike().run()\"\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('strike') }\"\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 content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleBulletList().run()\"\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bullet-list') }\"\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 content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\n            (click)=\"editor.chain().focus().toggleOrderedList().run()\"\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('ordered-list') }\"\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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'left' }) }\"\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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'center' }) }\"\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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'right' }) }\"\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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'justify' }) }\"\n            >\n            <i class=\"fas fa-align-justify 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 content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\n            (click)=\"openLinkDialog()\"\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('link') }\"\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 content_color_dark_1 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]=\"{ 'ok_button_color': this.editor.isActive('image') }\"\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\" [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  [borderRadius]=\"borderRadius()\"\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"] }]
+            args: [{ selector: 'particle-rich-text', providers: [RICH_TEXT_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, imports: [TooltipDirective, NgClass, TiptapEditorDirective, FormsModule, DialogComponent], template: "<div class=\"row_block width100 content_color ptl_brdr_radius ptl_brdr_color ptl_brdr_size\" style=\"overflow: hidden\">\r\n  @if (!this.hideControls() && this.editor.isEditable) {\r\n    <div class=\"row ptl_input_bg_color ptl_brdr_color ptl_brdr_size border_bottom wrap hide_element\">\r\n      @if (capabilities().heading) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"heading1\"\r\n            [attr.aria-label]=\"text().heading1\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading1\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 1 }) }\"\r\n            >\r\n            <i class=\"fas fa-header fa-fw\"></i>1\r\n          </button>\r\n          <button\r\n            id=\"heading2\"\r\n            [attr.aria-label]=\"text().heading2\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right5 mar_left5 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().heading2\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('heading', { level: 2 }) }\"\r\n            >\r\n            <i class=\"fas fa-header fa-fw\"></i>2\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().textDecoration) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bold\"\r\n            [attr.aria-label]=\"text().bold\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bold\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBold().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bold') }\"\r\n            >\r\n            <i class=\"fas fa-bold fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"italic\"\r\n            [attr.aria-label]=\"text().italic\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().italic\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleItalic().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('italic') }\"\r\n            >\r\n            <i class=\"fas fa-italic fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"strike\"\r\n            [attr.aria-label]=\"text().strike\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().strike\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleStrike().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('strike') }\"\r\n            >\r\n            <i class=\"fas fa-strikethrough fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().list) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"bullet-list\"\r\n            [attr.aria-label]=\"text().bulletedList\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().bulletedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleBulletList().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('bullet-list') }\"\r\n            >\r\n            <i class=\"fas fa-list fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"ordered-list\"\r\n            [attr.aria-label]=\"text().orderedList\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().orderedList\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().toggleOrderedList().run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('ordered-list') }\"\r\n            >\r\n            <i class=\"fas fa-list-ol fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().alignment) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"left-align\"\r\n            [attr.aria-label]=\"text().leftAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().leftAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('left').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'left' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-left fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"center-align\"\r\n            [attr.aria-label]=\"text().centerAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().centerAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('center').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'center' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-center fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"right-align\"\r\n            [attr.aria-label]=\"text().rightAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().rightAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('right').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'right' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-right fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"justify-align\"\r\n            [attr.aria-label]=\"text().justifyAlign\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().justifyAlign\" tooltipPosition=\"top\"\r\n            (click)=\"editor.chain().focus().setTextAlign('justify').run()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive({ textAlign: 'justify' }) }\"\r\n            >\r\n            <i class=\"fas fa-align-justify fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().link) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"link\"\r\n            [attr.aria-label]=\"text().setLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().setLink\" tooltipPosition=\"top\"\r\n            (click)=\"openLinkDialog()\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('link') }\"\r\n            >\r\n            <i class=\"fas fa-link fa-fw\"></i>\r\n          </button>\r\n          <button\r\n            id=\"unlink\"\r\n            [attr.aria-label]=\"text().removeLink\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            [particleTooltip]=\"text().removeLink\" tooltipPosition=\"top\"\r\n            (click)=\"this.editor.isActive('link') ? changeEditorLink('remove') : null\"\r\n            [disabled]=\"!this.editor.isActive('link')\"\r\n            >\r\n            <i class=\"fas fa-unlink fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      @if (capabilities().images) {\r\n        <div class=\"col v_center ptl_brdr_color ptl_brdr_size border_right pad_5\">\r\n          <button\r\n            id=\"image\"\r\n            [attr.aria-label]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n            (click)=\"openImageDialog()\"\r\n            [particleTooltip]=\"this.editor.isActive('image') ? text().modifyImage : text().addImage\"\r\n            tooltipPosition=\"top\"\r\n            [ngClass]=\"{ 'ok_button_color': this.editor.isActive('image') }\"\r\n            >\r\n            <i class=\"far fa-image fa-fw\"></i>\r\n          </button>\r\n        </div>\r\n      }\r\n      <div class=\"col v_center pad_5\">\r\n        <button\r\n          id=\"clear-format\"\r\n          [attr.aria-label]=\"text().clearFormat\"\r\n          class=\"access btnset chip_size content_color_dark_1 mar_right3 mar_left3 ptl_brdr_radius hov_darken\"\r\n          [particleTooltip]=\"text().clearFormat\" tooltipPosition=\"top\"\r\n          (click)=\"editor.chain().focus().clearNodes().unsetAllMarks().run()\"\r\n          >\r\n          <i class=\"fas fa-text-slash fa-fw\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  <div class=\"pad_10 ptl_input_text_size scroll_yauto\" [style.height]=\"this.height()\">\r\n    <tiptap-editor [editor]=\"editor\" [(ngModel)]=\"value\"></tiptap-editor>\r\n  </div>\r\n</div>\r\n\r\n<particle-dialog\r\n  [title]=\"dialogType === 'link' ? text().modifyLink : text().modifyImage\"\r\n  titleClass=\"header_color min_h40\"\r\n  [object]=\"showDialog\"\r\n  [allowClose]=\"false\"\r\n  [borderRadius]=\"borderRadius()\"\r\n  width=\"400px\"\r\n  height=\"150px\"\r\n  >\r\n  <div class=\"pad_15 ptl_input_text_size\" [style.height]=\"window.innerWidth > 768 ? '70px' : 'calc(100% - 40px)'\">\r\n    <input class=\"access input md\"\r\n      [(ngModel)]=\"dialogLink\"\r\n      [attr.aria-label]=\"text().url\"\r\n      placeholder=\"eg. https://www.google.com\"\r\n      (keyup.enter)=\"changeEditorLink('save')\"\r\n      />\r\n    </div>\r\n    <div class=\"col min_h40 footer_color\">\r\n      <div class=\"row center_right pad_right15 pad_left15\">\r\n        <div class=\"col\">\r\n          <button class=\"access btnset clear\" [attr.aria-label]=\"text().cancel\" (click)=\"changeEditorLink('cancel')\">\r\n            <div class=\" pad_5\">{{text().cancel}}</div>\r\n          </button>\r\n          <div class=\"mar_lr5 ptl_brdr_size ptl_brdr_color border_left\">\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            class=\"access btnset spaced md hov_glow ok_button_color ptl_brdr_radius\"\r\n            [attr.aria-label]=\"text().update\"\r\n            (click)=\"changeEditorLink('save')\"\r\n            >\r\n            <div class=\"brdr border_right mar_right5 pad_right5\"><i class=\"fas fa-check\"></i></div>\r\n            <div>{{text().update}}</div>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </particle-dialog>\r\n", styles: [".ProseMirror:focus{outline:none}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;height:0;pointer-events:none}.chip_size{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px}\n"] }]
         }], propDecorators: { readonly: [{
                 type: Input
             }] } });
@@ -4406,11 +4413,11 @@ class CalendarComponent {
         this.selectedDate = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: CalendarComponent, isStandalone: true, selector: "particle-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", closed: "closed" }, host: { listeners: { "window:keyup": "onKeyUp($event)", "window:click": "handleClick($event)" } }, viewQueries: [{ propertyName: "calendarWidgetDiv", first: true, predicate: ["calendarWidgetDiv"], descendants: true }, { propertyName: "yearSelect", first: true, predicate: ["yearSelect"], descendants: true }, { propertyName: "doneButton", first: true, predicate: ["doneButton"], descendants: true }, { propertyName: "calendarDates", predicate: ["calendarDate"], descendants: true }], ngImport: i0, template: "<div #calendarWidgetDiv\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 year) {\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\">\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 dayInMonth) {\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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: CalendarComponent, isStandalone: true, selector: "particle-calendar", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, dateRange: { classPropertyName: "dateRange", publicName: "dateRange", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", closed: "closed" }, host: { listeners: { "window:keyup": "onKeyUp($event)", "window:click": "handleClick($event)" } }, viewQueries: [{ propertyName: "calendarWidgetDiv", first: true, predicate: ["calendarWidgetDiv"], descendants: true }, { propertyName: "yearSelect", first: true, predicate: ["yearSelect"], descendants: true }, { propertyName: "doneButton", first: true, predicate: ["doneButton"], descendants: true }, { propertyName: "calendarDates", predicate: ["calendarDate"], descendants: true }], ngImport: i0, template: "<div #calendarWidgetDiv\r\n  cdkTrapFocus\r\n  cdkTrapFocusAutoCapture\r\n  class=\"particle_datepicker_options\"\r\n  role=\"application\">\r\n  <!-- month / year select -->\r\n  <div class=\"content_color pad_5 pad_bot0\">\r\n    <div class=\"row space_between\">\r\n      <div class=\"col size_1 mar_5\">\r\n        <select #yearSelect\r\n          [ngModel]=\"_selectedYear | async\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAYear\">\r\n          @for (year of validYearRange$ | async; track year) {\r\n            <option\r\n              [value]=\"year\">\r\n              {{year}}\r\n            </option>\r\n          }\r\n        </select>\r\n      </div>\r\n      <div class=\"col size_2 mar_5\">\r\n        <select #monthSelect\r\n          [ngModel]=\"_selectedMonth | async\"\r\n          (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAMonth\">\r\n          <option value=\"0\">{{text.january}}</option>\r\n          <option value=\"1\">{{text.february}}</option>\r\n          <option value=\"2\">{{text.march}}</option>\r\n          <option value=\"3\">{{text.april}}</option>\r\n          <option value=\"4\">{{text.may}}</option>\r\n          <option value=\"5\">{{text.june}}</option>\r\n          <option value=\"6\">{{text.july}}</option>\r\n          <option value=\"7\">{{text.august}}</option>\r\n          <option value=\"8\">{{text.september}}</option>\r\n          <option value=\"9\">{{text.october}}</option>\r\n          <option value=\"10\">{{text.november}}</option>\r\n          <option value=\"11\">{{text.december}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"content_color pad_5\">\r\n    <!-- weekdays -->\r\n    <div class=\"mar_5 mar_bot10\">\r\n      <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n        <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\r\n      </div>\r\n      <!-- days -->\r\n      <div class=\"row wrap space_between\">\r\n        @for (dayInMonth of fullMonth$ | async; track dayInMonth) {\r\n          <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\r\n            class=\"particle_datepicker_day\">\r\n            @if (dayInMonth.selectable) {\r\n              <button #calendarDate\r\n                (click)=\"handleDateSelection(dayInMonth)\"\r\n                (keyup.escape)=\"closed.emit()\"\r\n                [attr.data-date]=\"dayInMonth.date\"\r\n                [attr.data-dialog-close-override]=\"true\"\r\n                [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\r\n                      [ngClass]=\"{\r\n                        'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\r\n                        'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\r\n                      }\"\r\n                class=\"access day_button\">\r\n                {{dayInMonth.date}}\r\n              </button>\r\n            } @else {\r\n              <div class=\"day_disabled\">\r\n                {{dayInMonth.date}}\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (showControls()) {\r\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n      <div class=\"row space_between\">\r\n        @if (currentDate.selectable) {\r\n          @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\r\n            <button\r\n              disabled\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          } @else {\r\n            <button (keyup.escape)=\"closed.emit()\"\r\n              (click)=\"selectToday()\"\r\n              [attr.data-dialog-close-override]=\"true\"\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          }\r\n        }\r\n        <button #doneButton\r\n          (keyup.escape)=\"closed.emit()\"\r\n          (click)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n          [attr.aria-label]=\"text.saveDate\">\r\n          <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".particle_datepicker_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);width:300px}.particle_datepicker_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.particle_datepicker_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent}.particle_datepicker_day.today{background-color:#8080801a}.particle_datepicker_day .day_button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;display:flex;flex:1;width:100%;align-items:center;justify-content:center;padding:0;border-radius:3px}.particle_datepicker_day .day_disabled{opacity:.3;display:flex;flex:1;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: OrdinalNumberPipe, name: "ordinalNumber" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            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 year) {\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\">\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 dayInMonth) {\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"] }]
+            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 year) {\r\n            <option\r\n              [value]=\"year\">\r\n              {{year}}\r\n            </option>\r\n          }\r\n        </select>\r\n      </div>\r\n      <div class=\"col size_2 mar_5\">\r\n        <select #monthSelect\r\n          [ngModel]=\"_selectedMonth | async\"\r\n          (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n          (keyup.escape)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access input sm content_color\"\r\n          [attr.aria-label]=\"text.selectAMonth\">\r\n          <option value=\"0\">{{text.january}}</option>\r\n          <option value=\"1\">{{text.february}}</option>\r\n          <option value=\"2\">{{text.march}}</option>\r\n          <option value=\"3\">{{text.april}}</option>\r\n          <option value=\"4\">{{text.may}}</option>\r\n          <option value=\"5\">{{text.june}}</option>\r\n          <option value=\"6\">{{text.july}}</option>\r\n          <option value=\"7\">{{text.august}}</option>\r\n          <option value=\"8\">{{text.september}}</option>\r\n          <option value=\"9\">{{text.october}}</option>\r\n          <option value=\"10\">{{text.november}}</option>\r\n          <option value=\"11\">{{text.december}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"content_color pad_5\">\r\n    <!-- weekdays -->\r\n    <div class=\"mar_5 mar_bot10\">\r\n      <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n        <div class=\"particle_datepicker_weekday\">{{text.sundayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.mondayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.tuesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.wednesdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.thursdayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.fridayAbbr}}</div>\r\n        <div class=\"particle_datepicker_weekday\">{{text.saturdayAbbr}}</div>\r\n      </div>\r\n      <!-- days -->\r\n      <div class=\"row wrap space_between\">\r\n        @for (dayInMonth of fullMonth$ | async; track dayInMonth) {\r\n          <div [ngClass]=\"{'today': (dayInMonth.date === currentDate.date && dayInMonth.month === currentDate.month && dayInMonth.year === currentDate.year)}\"\r\n            class=\"particle_datepicker_day\">\r\n            @if (dayInMonth.selectable) {\r\n              <button #calendarDate\r\n                (click)=\"handleDateSelection(dayInMonth)\"\r\n                (keyup.escape)=\"closed.emit()\"\r\n                [attr.data-date]=\"dayInMonth.date\"\r\n                [attr.data-dialog-close-override]=\"true\"\r\n                [attr.aria-label]=\"text.select + ' ' + weekDays[dayInMonth.day] + ' ' + text.the + ' ' + (dayInMonth.date | ordinalNumber)\"\r\n                      [ngClass]=\"{\r\n                        'ok_button_color': (dayInMonth.date === selectedDate?.date && dayInMonth.month === selectedDate?.month && dayInMonth.year === selectedDate?.year),\r\n                        'bg_overlay_rev brdr hov_bg': (dayInMonth.date !== selectedDate?.date || dayInMonth.month !== selectedDate?.month || dayInMonth.year !== selectedDate?.year)\r\n                      }\"\r\n                class=\"access day_button\">\r\n                {{dayInMonth.date}}\r\n              </button>\r\n            } @else {\r\n              <div class=\"day_disabled\">\r\n                {{dayInMonth.date}}\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n    @if (showControls()) {\r\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n      <div class=\"row space_between\">\r\n        @if (currentDate.selectable) {\r\n          @if ((currentDate.date === selectedDate?.date && currentDate.month === selectedDate?.month && currentDate.year === selectedDate?.year)) {\r\n            <button\r\n              disabled\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          } @else {\r\n            <button (keyup.escape)=\"closed.emit()\"\r\n              (click)=\"selectToday()\"\r\n              [attr.data-dialog-close-override]=\"true\"\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text.resetDateToToday\">\r\n              <span class=\"text bold\">{{text.selectToday}}</span>\r\n            </button>\r\n          }\r\n        }\r\n        <button #doneButton\r\n          (keyup.escape)=\"closed.emit()\"\r\n          (click)=\"closed.emit()\"\r\n          [attr.data-dialog-close-override]=\"true\"\r\n          class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n          [attr.aria-label]=\"text.saveDate\">\r\n          <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text.done}}</span>\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".particle_datepicker_options{border-radius:3px;line-height:1.5;overflow:hidden;list-style-type:none;font-weight:400;z-index:var(--z-overlay);width:300px}.particle_datepicker_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.particle_datepicker_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent}.particle_datepicker_day.today{background-color:#8080801a}.particle_datepicker_day .day_button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;display:flex;flex:1;width:100%;align-items:center;justify-content:center;padding:0;border-radius:3px}.particle_datepicker_day .day_disabled{opacity:.3;display:flex;flex:1;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { calendarWidgetDiv: [{
                 type: ViewChild,
                 args: ['calendarWidgetDiv']
@@ -4889,7 +4896,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) {\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"] }, { kind: "component", type: CalendarComponent, selector: "particle-calendar", inputs: ["value", "dateRange", "text", "showControls"], outputs: ["selected", "closed"] }], animations: [
+        ], 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"] }], animations: [
             trigger('openClose', [
                 transition('void => open', [
                     style({ transform: 'scaleY(0.5)', opacity: 0 }),
@@ -4921,7 +4928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true
                         }
-                    ], 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"] }]
+                    ], 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"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -5146,7 +5153,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;\"\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: [""], 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;\"\r\n  [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n  <button (click)=\"openCalendar($event)\"\r\n    type=\"button\"\r\n    aria-haspopup=\"dialog\"\r\n    [disabled]=\"disabled\"\r\n    [attr.aria-label]=\"(ariaLabel() ? ariaLabel() + ', ' : '') + text().openCalendar\"\r\n    [attr.aria-expanded]=\"calendarPopover.visible\"\r\n    [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\r\n    class=\"access btnset width100 height100 center_center\"\r\n    style=\"outline-offset: -2px;\"\r\n    >\r\n    <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\r\n      @if (valueObs$ | async; as value) {\r\n        @if (value.start && value.end) {\r\n          {{value.start | date: dateFormat()}} - {{value.end | date: dateFormat()}}\r\n        } @else {\r\n          <div class=\"ent_r2l_txt\">{{text().selectRange}}...</div>\r\n        }\r\n      }\r\n    </div>\r\n    <div class=\"col min_w50 height100 center_center\"\r\n      [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\r\n      <div class=\"width100 height100 center_center\">\r\n        <i class=\"fas fa-calendar-days ptl_input_text_size\"></i>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<particle-popover (closed)=\"checkState()\" #calendarPopover>\r\n  <div class=\"width100 space_between\">\r\n    <div>\r\n      <div class=\"pad_10 pad_bot0\">\r\n        <div>{{text().begin}}:</div>\r\n        <div>\r\n          <particle-date-picker\r\n            inputClassList=\"access input sm content_color\"\r\n            [inputOnly]=\"true\"\r\n            [(ngModel)]=\"beginDate\"\r\n            [dateRange]=\"dateRange\">\r\n          </particle-date-picker>\r\n        </div>\r\n      </div>\r\n      <particle-calendar [value]=\"beginDate\"\r\n        [text]=\"$any(text().calendarText)\"\r\n        [dateRange]=\"dateRange\"\r\n        [showControls]=\"false\"\r\n        class=\"hide_element\"\r\n        (selected)=\"updateModel(true, $event)\"\r\n        #beginCalendar>\r\n      </particle-calendar>\r\n    </div>\r\n    <div>\r\n      <div class=\"pad_10 pad_bot0\">\r\n        <div>{{text().end}}:</div>\r\n        <div>\r\n          <particle-date-picker\r\n            inputClassList=\"access input sm content_color\"\r\n            [inputOnly]=\"true\"\r\n            [dateRange]=\"endDateRange\"\r\n            [(ngModel)]=\"endDate\">\r\n          </particle-date-picker>\r\n        </div>\r\n      </div>\r\n      <particle-calendar [value]=\"endDate\"\r\n        [text]=\"$any(text().calendarText)\"\r\n        [dateRange]=\"endDateRange\"\r\n        [showControls]=\"false\"\r\n        class=\"hide_element\"\r\n        (selected)=\"updateModel(false, $event)\"\r\n        #endCalendar>\r\n      </particle-calendar>\r\n      <div class=\"mobile_only pad_bot10\"></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"bg_overlay brdr hr mar_5 mar_top0\"></div>\r\n  <div class=\"row space_between\">\r\n    <button (click)=\"clear()\"\r\n      class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n      [attr.aria-label]=\"text().clear\">\r\n      <i class=\"fas fa-x mar_right5\"></i><span class=\"text bold\">{{text().clear}}</span>\r\n    </button>\r\n\r\n    <button (keyup.escape)=\"calendarPopover.close()\"\r\n      (click)=\"calendarPopover.close()\"\r\n      [attr.data-dialog-close-override]=\"true\"\r\n      class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n      [attr.aria-label]=\"text().done\">\r\n      <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text().done}}</span>\r\n    </button>\r\n  </div>\r\n</particle-popover>\r\n\r\n", styles: [":host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "component", type: DatePickerComponent, selector: "particle-date-picker", inputs: ["value", "disabled", "dateRange", "inputId", "ariaLabel", "inputClassList", "calendarButtonClassList", "closeOnSelect", "placeholder", "inputOnly", "text"], outputs: ["input", "dateSelected"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CalendarComponent, selector: "particle-calendar", inputs: ["value", "dateRange", "text", "showControls"], outputs: ["selected", "closed"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
@@ -5156,7 +5163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true
                         }
-                    ], 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" }]
+                    ], imports: [NgClass, PopoverComponent, DatePickerComponent, FormsModule, CalendarComponent, AsyncPipe, DatePipe], template: "<div style=\"cursor:default;overflow: hidden;\"\r\n  [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n  <button (click)=\"openCalendar($event)\"\r\n    type=\"button\"\r\n    aria-haspopup=\"dialog\"\r\n    [disabled]=\"disabled\"\r\n    [attr.aria-label]=\"(ariaLabel() ? ariaLabel() + ', ' : '') + text().openCalendar\"\r\n    [attr.aria-expanded]=\"calendarPopover.visible\"\r\n    [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\r\n    class=\"access btnset width100 height100 center_center\"\r\n    style=\"outline-offset: -2px;\"\r\n    >\r\n    <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\r\n      @if (valueObs$ | async; as value) {\r\n        @if (value.start && value.end) {\r\n          {{value.start | date: dateFormat()}} - {{value.end | date: dateFormat()}}\r\n        } @else {\r\n          <div class=\"ent_r2l_txt\">{{text().selectRange}}...</div>\r\n        }\r\n      }\r\n    </div>\r\n    <div class=\"col min_w50 height100 center_center\"\r\n      [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\r\n      <div class=\"width100 height100 center_center\">\r\n        <i class=\"fas fa-calendar-days ptl_input_text_size\"></i>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n<particle-popover (closed)=\"checkState()\" #calendarPopover>\r\n  <div class=\"width100 space_between\">\r\n    <div>\r\n      <div class=\"pad_10 pad_bot0\">\r\n        <div>{{text().begin}}:</div>\r\n        <div>\r\n          <particle-date-picker\r\n            inputClassList=\"access input sm content_color\"\r\n            [inputOnly]=\"true\"\r\n            [(ngModel)]=\"beginDate\"\r\n            [dateRange]=\"dateRange\">\r\n          </particle-date-picker>\r\n        </div>\r\n      </div>\r\n      <particle-calendar [value]=\"beginDate\"\r\n        [text]=\"$any(text().calendarText)\"\r\n        [dateRange]=\"dateRange\"\r\n        [showControls]=\"false\"\r\n        class=\"hide_element\"\r\n        (selected)=\"updateModel(true, $event)\"\r\n        #beginCalendar>\r\n      </particle-calendar>\r\n    </div>\r\n    <div>\r\n      <div class=\"pad_10 pad_bot0\">\r\n        <div>{{text().end}}:</div>\r\n        <div>\r\n          <particle-date-picker\r\n            inputClassList=\"access input sm content_color\"\r\n            [inputOnly]=\"true\"\r\n            [dateRange]=\"endDateRange\"\r\n            [(ngModel)]=\"endDate\">\r\n          </particle-date-picker>\r\n        </div>\r\n      </div>\r\n      <particle-calendar [value]=\"endDate\"\r\n        [text]=\"$any(text().calendarText)\"\r\n        [dateRange]=\"endDateRange\"\r\n        [showControls]=\"false\"\r\n        class=\"hide_element\"\r\n        (selected)=\"updateModel(false, $event)\"\r\n        #endCalendar>\r\n      </particle-calendar>\r\n      <div class=\"mobile_only pad_bot10\"></div>\r\n    </div>\r\n  </div>\r\n  <div class=\"bg_overlay brdr hr mar_5 mar_top0\"></div>\r\n  <div class=\"row space_between\">\r\n    <button (click)=\"clear()\"\r\n      class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n      [attr.aria-label]=\"text().clear\">\r\n      <i class=\"fas fa-x mar_right5\"></i><span class=\"text bold\">{{text().clear}}</span>\r\n    </button>\r\n\r\n    <button (keyup.escape)=\"calendarPopover.close()\"\r\n      (click)=\"calendarPopover.close()\"\r\n      [attr.data-dialog-close-override]=\"true\"\r\n      class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n      [attr.aria-label]=\"text().done\">\r\n      <i class=\"fas fa-check mar_right5\"></i><span class=\"text bold\">{{text().done}}</span>\r\n    </button>\r\n  </div>\r\n</particle-popover>\r\n\r\n", styles: [":host{width:100%}\n"] }]
         }], propDecorators: { dateRange: [{
                 type: Input
             }], value: [{
@@ -6594,7 +6601,7 @@ class NotificationComponent {
         this.notificationService.deleteNotification(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NotificationComponent, isStandalone: true, selector: "particle-notification", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- TODO: figure out why closing toast that is between others causes jumpy animation -->\n\n<!-- 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 @list class=\"row_block width100\">\n      <!-- item -->\n      @for (notification of notifications$ | async; track notification) {\n        <div @items class=\"row ent_r2l_row v_center content_color pad_10 mar_10 shadow ptl_brdr_radius\">\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              <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}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NotificationComponent, isStandalone: true, selector: "particle-notification", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- TODO: figure out why closing toast that is between others causes jumpy animation -->\r\n\r\n<!-- toast -->\r\n<div class=\"particle_notification_overlay ent_r2l_row\">\r\n  <!-- spacer -->\r\n  <!-- container -->\r\n  <div class=\"row min_w280 pad_right5\" style=\"max-width:400px;\">\r\n    <div @list class=\"row_block width100\">\r\n      <!-- item -->\r\n      @for (notification of notifications$ | async; track notification) {\r\n        <div @items class=\"row ent_r2l_row v_center content_color pad_10 mar_10 shadow ptl_brdr_radius\">\r\n          <div class=\"col pad_5\">\r\n            <div class=\"circle_36px\" [ngClass]=\"severityColorMap[notification.severity]\">\r\n              <i class=\"fas {{severityIconMap[notification.severity]}} fa-lg ent_r2l_ico\"></i>\r\n            </div>\r\n          </div>\r\n          <div class=\"col size_1 pad_5 ent_r2l_dir rc_gap\">\r\n            <div class=\"col ptl_brdr_color border_right\"></div>\r\n            <div class=\"col\">\r\n              <div class=\"row_block width100\">\r\n                <div class=\"text lg text_left text_wrap bold ent_r2l_txt\">{{notification.summary}}</div>\r\n                <div class=\"text md text_left text_wrap ent_r2l_txt\">{{notification.detail}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col\" style=\"pointer-events: all;\">\r\n            <button class=\"access btnset clear\"\r\n              [attr.aria-label]=\"text().dismiss\"\r\n              (click)=\"deleteNotification($any(notification.id))\">\r\n              <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </div>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".particle_notification_overlay{display:flex;position:fixed;justify-content:flex-end;inset:0;z-index:var(--z-notification);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
             // nice stagger effect when showing existing elements
             trigger('list', [
                 transition(':enter', [
@@ -6660,7 +6667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                                 }))
                             ]),
                         ])
-                    ], imports: [NgClass, AsyncPipe], template: "<!-- TODO: figure out why closing toast that is between others causes jumpy animation -->\n\n<!-- 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 @list class=\"row_block width100\">\n      <!-- item -->\n      @for (notification of notifications$ | async; track notification) {\n        <div @items class=\"row ent_r2l_row v_center content_color pad_10 mar_10 shadow ptl_brdr_radius\">\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              <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}\n"] }]
+                    ], imports: [NgClass, AsyncPipe], template: "<!-- TODO: figure out why closing toast that is between others causes jumpy animation -->\r\n\r\n<!-- toast -->\r\n<div class=\"particle_notification_overlay ent_r2l_row\">\r\n  <!-- spacer -->\r\n  <!-- container -->\r\n  <div class=\"row min_w280 pad_right5\" style=\"max-width:400px;\">\r\n    <div @list class=\"row_block width100\">\r\n      <!-- item -->\r\n      @for (notification of notifications$ | async; track notification) {\r\n        <div @items class=\"row ent_r2l_row v_center content_color pad_10 mar_10 shadow ptl_brdr_radius\">\r\n          <div class=\"col pad_5\">\r\n            <div class=\"circle_36px\" [ngClass]=\"severityColorMap[notification.severity]\">\r\n              <i class=\"fas {{severityIconMap[notification.severity]}} fa-lg ent_r2l_ico\"></i>\r\n            </div>\r\n          </div>\r\n          <div class=\"col size_1 pad_5 ent_r2l_dir rc_gap\">\r\n            <div class=\"col ptl_brdr_color border_right\"></div>\r\n            <div class=\"col\">\r\n              <div class=\"row_block width100\">\r\n                <div class=\"text lg text_left text_wrap bold ent_r2l_txt\">{{notification.summary}}</div>\r\n                <div class=\"text md text_left text_wrap ent_r2l_txt\">{{notification.detail}}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"col\" style=\"pointer-events: all;\">\r\n            <button class=\"access btnset clear\"\r\n              [attr.aria-label]=\"text().dismiss\"\r\n              (click)=\"deleteNotification($any(notification.id))\">\r\n              <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n                <i class=\"fas fa-times\"></i>\r\n              </div>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".particle_notification_overlay{display:flex;position:fixed;justify-content:flex-end;inset:0;z-index:var(--z-notification);pointer-events:none}\n"] }]
         }] });
 
 /**
@@ -7130,7 +7137,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;\"\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      <ng-template #placeholderTemplate>\n        <div class=\"ent_r2l_txt\">{{text().selectWeek}}...</div>\n      </ng-template>\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\n<!-- week picker input\n<div class=\"wwp_container\" style=\"cursor:default;\"\n  [ngClass]=\"inputClassList\"\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\n\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    class=\"access content_color wwp_input\">\n    <ng-container *ngIf=\"_internalValue | async as internalValue else placeholderTemplate\">\n      {{internalValue.start | date: dateFormat}} - {{internalValue.end | date: dateFormat}}\n    </ng-container>\n    <ng-template #placeholderTemplate>\n      <div class=\"wwp_placeholder\">{{text.selectWeek}}...</div>\n    </ng-template>\n  </button>\n  <div class=\"wwp_button\" [ngClass]=\"calendarButtonClassList\">\n    <i class=\"fas fa-calendar-week\"></i>\n  </div>\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 year) {\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 week) {\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 date) {\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"] }, { 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;\"\r\n  [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n  <button (click)=\"openCalendar($event)\"\r\n    aria-haspopup=\"dialog\"\r\n    [disabled]=\"disabled\"\r\n    [attr.aria-label]=\"ariaLabel() + ', ' + text().openCalendar\"\r\n    [attr.aria-expanded]=\"calendarPopover.visible\"\r\n    [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\r\n    type=\"button\"\r\n    class=\"access btnset width100 height100 center_center\"\r\n    style=\"outline-offset: -2px;\"\r\n    >\r\n    <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\r\n      @if (_internalValue | async; as internalValue) {\r\n        {{internalValue.start | date: dateFormat()}} - {{internalValue.end | date: dateFormat()}}\r\n      } @else {\r\n        <div class=\"ent_r2l_txt\">{{text().selectWeek}}...</div>\r\n      }\r\n    </div>\r\n    <div class=\"col min_w50 height100 center_center\"\r\n      [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\r\n      <div class=\"width100 height100 center_center\">\r\n        <i class=\"fas fa-calendar-week ptl_input_text_size\"></i>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n\r\n<!-- week picker input\r\n<div class=\"wwp_container\" style=\"cursor:default;\"\r\n  [ngClass]=\"inputClassList\"\r\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n\r\n  <button (click)=\"openCalendar($event)\"\r\n    aria-haspopup=\"dialog\"\r\n    [disabled]=\"disabled\"\r\n    [attr.aria-label]=\"ariaLabel + ', ' + text.openCalendar\"\r\n    [attr.aria-expanded]=\"calendarPopover.visible\"\r\n    class=\"access content_color wwp_input\">\r\n    <ng-container *ngIf=\"_internalValue | async as internalValue else placeholderTemplate\">\r\n      {{internalValue.start | date: dateFormat}} - {{internalValue.end | date: dateFormat}}\r\n    </ng-container>\r\n    <ng-template #placeholderTemplate>\r\n      <div class=\"wwp_placeholder\">{{text.selectWeek}}...</div>\r\n    </ng-template>\r\n  </button>\r\n  <div class=\"wwp_button\" [ngClass]=\"calendarButtonClassList\">\r\n    <i class=\"fas fa-calendar-week\"></i>\r\n  </div>\r\n</div>\r\n-->\r\n<!-- TODO: instead of offset 1, attach to wwp_container -->\r\n<!-- calendar widget -->\r\n<particle-popover [offset]=\"1\" #calendarPopover>\r\n  <!-- month / year select -->\r\n  <div class=\"wwp_options\">\r\n    <div class=\"content_color pad_5 pad_bot0\">\r\n      <div class=\"row space_between\">\r\n        <div class=\"col size_1 mar_5\">\r\n          <select #yearSelect\r\n            [ngModel]=\"_selectedYear | async\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n            class=\"access input sm content_color\"\r\n            [attr.aria-label]=\"text().selectYear\">\r\n            @for (year of validYearRange$ | async; track year) {\r\n              <option\r\n                [value]=\"year\">\r\n                {{year}}\r\n              </option>\r\n            }\r\n          </select>\r\n        </div>\r\n        <div class=\"col size_2 mar_5\">\r\n          <select #monthSelect\r\n            [ngModel]=\"_selectedMonth | async\"\r\n            (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n            class=\"access input sm content_color\"\r\n            [attr.aria-label]=\"text().selectMonth\">\r\n            <option value=\"0\">{{text().january}}</option>\r\n            <option value=\"1\">{{text().february}}</option>\r\n            <option value=\"2\">{{text().march}}</option>\r\n            <option value=\"3\">{{text().april}}</option>\r\n            <option value=\"4\">{{text().may}}</option>\r\n            <option value=\"5\">{{text().june}}</option>\r\n            <option value=\"6\">{{text().july}}</option>\r\n            <option value=\"7\">{{text().august}}</option>\r\n            <option value=\"8\">{{text().september}}</option>\r\n            <option value=\"9\">{{text().october}}</option>\r\n            <option value=\"10\">{{text().november}}</option>\r\n            <option value=\"11\">{{text().december}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"content_color pad_5\">\r\n      <!-- weekdays -->\r\n      <div class=\"mar_5 mar_bot10\">\r\n        <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n          <div class=\"wwp_weekday\">{{text().sundayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().mondayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().tuesdayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().wednesdayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().thursdayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().fridayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().saturdayAbbr}}</div>\r\n        </div>\r\n        <!-- days -->\r\n        @if (fullMonth$ | async; as fullMonth) {\r\n          @for (week of fullMonth; track week) {\r\n            <div class=\"wwp_week\"\r\n              [ngClass]=\"{ 'currentWeek': week.week === currentDate.week && week.year === currentDate.year }\">\r\n              <button (click)=\"onWeekSelect(week.week, week.selectable)\"\r\n                [disabled]=\"!week.selectable\"\r\n                      [ngClass]=\"((selectedWeek$ | async) === week.week) && ((selectedYear$ | async) === week.year)\r\n                                    ? 'ok_button_color'\r\n                                    : 'bg_overlay_rev brdr hov_bg'\"\r\n                class=\"access wwp_week_btn\">\r\n                @for (date of week.dates; track date) {\r\n                  <div class=\"wwp_day\">\r\n                    {{date}}\r\n                  </div>\r\n                }\r\n              </button>\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n      <div class=\"row space_between\">\r\n        @if (canSelectLastWeek$ | async) {\r\n          <button\r\n            (click)=\"selectLastWeek()\"\r\n            class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n            [attr.aria-label]=\"text().selectLastWeek\">\r\n            <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n          </button>\r\n        } @else {\r\n          <button disabled\r\n            class=\"access btn sm mar_5\"\r\n            [attr.aria-label]=\"text().selectLastWeek\">\r\n            <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n          </button>\r\n        }\r\n        @if (currentDate.selectable) {\r\n          @if (((selectedWeek$ | async) === currentDate.week) && ((selectedYear$ | async) === currentDate.year)) {\r\n            <button\r\n              disabled\r\n              class=\"access btn sm mar_5\"\r\n              [attr.aria-label]=\"text().resetWeekSelection\">\r\n              <i class=\"fas fa-undo-alt\"></i>\r\n            </button>\r\n          } @else {\r\n            <button (click)=\"selectCurrentWeek()\"\r\n              particleTooltip=\"Reset to Current Week\"\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text().resetWeekSelection\">\r\n              <i class=\"fas fa-undo-alt\"></i>\r\n            </button>\r\n          }\r\n        }\r\n        @if (canSelectNextWeek$ | async) {\r\n          <button\r\n            (click)=\"selectNextWeek()\"\r\n            class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n            [attr.aria-label]=\"text().selectNextWeek\">\r\n            <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n          </button>\r\n        } @else {\r\n          <button disabled\r\n            class=\"access btn sm mar_5\"\r\n            [attr.aria-label]=\"text().selectNextWeek\">\r\n            <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</particle-popover>\r\n", styles: [":host{width:100%}.wwp_container{width:100%;min-width:150px;position:relative}.wwp_container:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.wwp_input{position:absolute;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wwp_input:not([disabled]){cursor:pointer}.wwp_input::-ms-expand{display:none}.wwp_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px;-webkit-user-select:none;user-select:none;pointer-events:none;display:flex;align-items:center;justify-content:center}.wwp_button>svg{transition:all .2s ease}.wwp_container:hover .wwp_button>svg{transform:scale(1.2)}.wwp_placeholder{opacity:.5;display:inline}.wwp_options{border-radius:3px;line-height:1.5;overflow:hidden;font-weight:400;z-index:var(--z-overlay);width:300px;background:#fff0;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.wwp_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.wwp_week.currentWeek{border-radius:3px;background-color:#8080801a}.wwp_week_btn{display:flex;align-items:center;width:100%;border:none;padding:0;cursor:pointer}.wwp_week_btn:disabled{cursor:default}.wwp_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "particle-popover", inputs: ["offset", "width", "height", "classList", "targetOverride", "openDirection", "alignment", "scaleForMobile"], outputs: ["opened", "closed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: WeekPickerComponent, decorators: [{
             type: Component,
@@ -7140,7 +7147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             useExisting: forwardRef(() => WeekPickerComponent),
                             multi: true
                         }
-                    ], 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      <ng-template #placeholderTemplate>\n        <div class=\"ent_r2l_txt\">{{text().selectWeek}}...</div>\n      </ng-template>\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\n<!-- week picker input\n<div class=\"wwp_container\" style=\"cursor:default;\"\n  [ngClass]=\"inputClassList\"\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\n\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    class=\"access content_color wwp_input\">\n    <ng-container *ngIf=\"_internalValue | async as internalValue else placeholderTemplate\">\n      {{internalValue.start | date: dateFormat}} - {{internalValue.end | date: dateFormat}}\n    </ng-container>\n    <ng-template #placeholderTemplate>\n      <div class=\"wwp_placeholder\">{{text.selectWeek}}...</div>\n    </ng-template>\n  </button>\n  <div class=\"wwp_button\" [ngClass]=\"calendarButtonClassList\">\n    <i class=\"fas fa-calendar-week\"></i>\n  </div>\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 year) {\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 week) {\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 date) {\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"] }]
+                    ], imports: [NgClass, PopoverComponent, FormsModule, TooltipDirective, AsyncPipe, DatePipe], template: "<div style=\"cursor:default;overflow: hidden;\"\r\n  [ngClass]=\"inputClassList() ? '' : 'row ptl_input ptl_input_height ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius ent_r2l_dir'\"\r\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n  <button (click)=\"openCalendar($event)\"\r\n    aria-haspopup=\"dialog\"\r\n    [disabled]=\"disabled\"\r\n    [attr.aria-label]=\"ariaLabel() + ', ' + text().openCalendar\"\r\n    [attr.aria-expanded]=\"calendarPopover.visible\"\r\n    [ngClass]=\"inputClassList() ? inputClassList() : 'clear'\"\r\n    type=\"button\"\r\n    class=\"access btnset width100 height100 center_center\"\r\n    style=\"outline-offset: -2px;\"\r\n    >\r\n    <div class=\"col size_1 height100 width100 ptl_input_text_size ptl_input_padding v_center\">\r\n      @if (_internalValue | async; as internalValue) {\r\n        {{internalValue.start | date: dateFormat()}} - {{internalValue.end | date: dateFormat()}}\r\n      } @else {\r\n        <div class=\"ent_r2l_txt\">{{text().selectWeek}}...</div>\r\n      }\r\n    </div>\r\n    <div class=\"col min_w50 height100 center_center\"\r\n      [ngClass]=\"calendarButtonClassList() ? calendarButtonClassList() : 'bg_blue'\">\r\n      <div class=\"width100 height100 center_center\">\r\n        <i class=\"fas fa-calendar-week ptl_input_text_size\"></i>\r\n      </div>\r\n    </div>\r\n  </button>\r\n</div>\r\n\r\n\r\n<!-- week picker input\r\n<div class=\"wwp_container\" style=\"cursor:default;\"\r\n  [ngClass]=\"inputClassList\"\r\n  [style.filter]=\"disabled ? 'brightness(.95)' : ''\">\r\n\r\n  <button (click)=\"openCalendar($event)\"\r\n    aria-haspopup=\"dialog\"\r\n    [disabled]=\"disabled\"\r\n    [attr.aria-label]=\"ariaLabel + ', ' + text.openCalendar\"\r\n    [attr.aria-expanded]=\"calendarPopover.visible\"\r\n    class=\"access content_color wwp_input\">\r\n    <ng-container *ngIf=\"_internalValue | async as internalValue else placeholderTemplate\">\r\n      {{internalValue.start | date: dateFormat}} - {{internalValue.end | date: dateFormat}}\r\n    </ng-container>\r\n    <ng-template #placeholderTemplate>\r\n      <div class=\"wwp_placeholder\">{{text.selectWeek}}...</div>\r\n    </ng-template>\r\n  </button>\r\n  <div class=\"wwp_button\" [ngClass]=\"calendarButtonClassList\">\r\n    <i class=\"fas fa-calendar-week\"></i>\r\n  </div>\r\n</div>\r\n-->\r\n<!-- TODO: instead of offset 1, attach to wwp_container -->\r\n<!-- calendar widget -->\r\n<particle-popover [offset]=\"1\" #calendarPopover>\r\n  <!-- month / year select -->\r\n  <div class=\"wwp_options\">\r\n    <div class=\"content_color pad_5 pad_bot0\">\r\n      <div class=\"row space_between\">\r\n        <div class=\"col size_1 mar_5\">\r\n          <select #yearSelect\r\n            [ngModel]=\"_selectedYear | async\"\r\n            [attr.data-dialog-close-override]=\"true\"\r\n            (change)=\"_selectedYear.next(+yearSelect.value)\"\r\n            class=\"access input sm content_color\"\r\n            [attr.aria-label]=\"text().selectYear\">\r\n            @for (year of validYearRange$ | async; track year) {\r\n              <option\r\n                [value]=\"year\">\r\n                {{year}}\r\n              </option>\r\n            }\r\n          </select>\r\n        </div>\r\n        <div class=\"col size_2 mar_5\">\r\n          <select #monthSelect\r\n            [ngModel]=\"_selectedMonth | async\"\r\n            (change)=\"_selectedMonth.next(+monthSelect.value)\"\r\n            class=\"access input sm content_color\"\r\n            [attr.aria-label]=\"text().selectMonth\">\r\n            <option value=\"0\">{{text().january}}</option>\r\n            <option value=\"1\">{{text().february}}</option>\r\n            <option value=\"2\">{{text().march}}</option>\r\n            <option value=\"3\">{{text().april}}</option>\r\n            <option value=\"4\">{{text().may}}</option>\r\n            <option value=\"5\">{{text().june}}</option>\r\n            <option value=\"6\">{{text().july}}</option>\r\n            <option value=\"7\">{{text().august}}</option>\r\n            <option value=\"8\">{{text().september}}</option>\r\n            <option value=\"9\">{{text().october}}</option>\r\n            <option value=\"10\">{{text().november}}</option>\r\n            <option value=\"11\">{{text().december}}</option>\r\n          </select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"content_color pad_5\">\r\n      <!-- weekdays -->\r\n      <div class=\"mar_5 mar_bot10\">\r\n        <div class=\"row wrap space_between ptl_input_bg_color ptl_brdr_color border_bottom brad_3 mar_bot5\">\r\n          <div class=\"wwp_weekday\">{{text().sundayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().mondayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().tuesdayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().wednesdayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().thursdayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().fridayAbbr}}</div>\r\n          <div class=\"wwp_weekday\">{{text().saturdayAbbr}}</div>\r\n        </div>\r\n        <!-- days -->\r\n        @if (fullMonth$ | async; as fullMonth) {\r\n          @for (week of fullMonth; track week) {\r\n            <div class=\"wwp_week\"\r\n              [ngClass]=\"{ 'currentWeek': week.week === currentDate.week && week.year === currentDate.year }\">\r\n              <button (click)=\"onWeekSelect(week.week, week.selectable)\"\r\n                [disabled]=\"!week.selectable\"\r\n                      [ngClass]=\"((selectedWeek$ | async) === week.week) && ((selectedYear$ | async) === week.year)\r\n                                    ? 'ok_button_color'\r\n                                    : 'bg_overlay_rev brdr hov_bg'\"\r\n                class=\"access wwp_week_btn\">\r\n                @for (date of week.dates; track date) {\r\n                  <div class=\"wwp_day\">\r\n                    {{date}}\r\n                  </div>\r\n                }\r\n              </button>\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n      <div class=\"bg_overlay brdr hr mar_5\"></div>\r\n      <div class=\"row space_between\">\r\n        @if (canSelectLastWeek$ | async) {\r\n          <button\r\n            (click)=\"selectLastWeek()\"\r\n            class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n            [attr.aria-label]=\"text().selectLastWeek\">\r\n            <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n          </button>\r\n        } @else {\r\n          <button disabled\r\n            class=\"access btn sm mar_5\"\r\n            [attr.aria-label]=\"text().selectLastWeek\">\r\n            <i class=\"fas fa-chevron-left mar_right5\"></i><span class=\"text bold\">{{text().lastWeek}}</span>\r\n          </button>\r\n        }\r\n        @if (currentDate.selectable) {\r\n          @if (((selectedWeek$ | async) === currentDate.week) && ((selectedYear$ | async) === currentDate.year)) {\r\n            <button\r\n              disabled\r\n              class=\"access btn sm mar_5\"\r\n              [attr.aria-label]=\"text().resetWeekSelection\">\r\n              <i class=\"fas fa-undo-alt\"></i>\r\n            </button>\r\n          } @else {\r\n            <button (click)=\"selectCurrentWeek()\"\r\n              particleTooltip=\"Reset to Current Week\"\r\n              class=\"access btn sm bg_overlay_rev brdr hov_bg mar_5\"\r\n              [attr.aria-label]=\"text().resetWeekSelection\">\r\n              <i class=\"fas fa-undo-alt\"></i>\r\n            </button>\r\n          }\r\n        }\r\n        @if (canSelectNextWeek$ | async) {\r\n          <button\r\n            (click)=\"selectNextWeek()\"\r\n            class=\"access btn sm bg_overlay_rev brdr mar_5 hov_bg\"\r\n            [attr.aria-label]=\"text().selectNextWeek\">\r\n            <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n          </button>\r\n        } @else {\r\n          <button disabled\r\n            class=\"access btn sm mar_5\"\r\n            [attr.aria-label]=\"text().selectNextWeek\">\r\n            <span class=\"text bold\">{{text().nextWeek}}</span><i class=\"fas fa-chevron-right mar_left5\"></i>\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</particle-popover>\r\n", styles: [":host{width:100%}.wwp_container{width:100%;min-width:150px;position:relative}.wwp_container:after{content:\"mm/dd/yyyy\";opacity:0;pointer-events:none}.wwp_input{position:absolute;inset:0;padding:inherit;padding-right:2.25em;width:100%;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;border:none;text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;color:inherit;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.wwp_input:not([disabled]){cursor:pointer}.wwp_input::-ms-expand{display:none}.wwp_button{position:absolute;height:calc(100% + 2px);width:2.25em;top:0;right:0;z-index:var(--z-frame);border-top-left-radius:0!important;border-bottom-left-radius:0!important;font-size:inherit;margin:-1px;-webkit-user-select:none;user-select:none;pointer-events:none;display:flex;align-items:center;justify-content:center}.wwp_button>svg{transition:all .2s ease}.wwp_container:hover .wwp_button>svg{transform:scale(1.2)}.wwp_placeholder{opacity:.5;display:inline}.wwp_options{border-radius:3px;line-height:1.5;overflow:hidden;font-weight:400;z-index:var(--z-overlay);width:300px;background:#fff0;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.wwp_weekday{font-size:12px;font-weight:900;min-width:30px;height:32px;display:flex;flex:1;align-items:center;justify-content:center;opacity:.8;-webkit-user-select:none;user-select:none}.wwp_week.currentWeek{border-radius:3px;background-color:#8080801a}.wwp_week_btn{display:flex;align-items:center;width:100%;border:none;padding:0;cursor:pointer}.wwp_week_btn:disabled{cursor:default}.wwp_day{font-size:12px;font-weight:400;min-width:14%;height:32px;display:flex;flex:1;border-radius:3px;-webkit-user-select:none;user-select:none;background-color:transparent;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -7420,7 +7427,7 @@ class ColorPickerComponent {
                 useExisting: forwardRef(() => ColorPickerComponent),
                 multi: true
             }
-        ], 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"] }] });
+        ], viewQueries: [{ propertyName: "colorInput", first: true, predicate: ["colorInput"], descendants: true }], ngImport: i0, template: "@if (render) {\r\n  <div [style.filter]=\"_disabled ? 'brightness(.95)' : ''\"\r\n    class=\"cp_container\"\r\n    [ngClass]=\"classList ? classList : 'input md bg_overlay brdr content_color'\"\r\n    >\r\n    @if (colorPickerSupported) {\r\n      <input #colorPicker\r\n        type=\"color\"\r\n        class=\"access cp_color\"\r\n        [value]=\"'#' + _value\"\r\n        [disabled]=\"_disabled\"\r\n        [attr.aria-label]=\"text.chooseColor\"\r\n        (input)=\"updateModel(colorPicker.value)\"\r\n        (change)=\"updateModel(colorPicker.value); colorSelected.emit(colorPicker.value)\"/>\r\n        <i class=\"fas fa-caret-down cp_caret\"></i>\r\n      } @else {\r\n        <div class=\"cp_swatch\">\r\n          <div class=\"width100 height100 bg_overlay brdr\" style=\"border-radius:inherit;\"\r\n          [style.background-color]=\"'#' + (_value || '000000')\"></div>\r\n        </div>\r\n      }\r\n      <div class=\"bg_overlay brdr vr cp_divider\"></div>\r\n      <div class=\"cp_hashtag\">#</div>\r\n      <input #colorInput\r\n        type=\"text\"\r\n        class=\"access cp_input\"\r\n        placeholder=\"000000\"\r\n        maxlength=\"6\"\r\n        [attr.aria-label]=\"text.enterHexCode\"\r\n        [ngModel]=\"_value\"\r\n        [disabled]=\"_disabled\"\r\n        (input)=\"input.emit(colorInput.value)\"\r\n        (paste)=\"handlePaste($event)\"\r\n        (keydown)=\"handleKeyDown($event)\"\r\n        (ngModelChange)=\"updateModel($event, true)\"\r\n        (blur)=\"handleBlur(colorInput.value)\"/>\r\n      </div>\r\n    }\r\n", styles: [":host{width:100%}.cp_container{width:100%;min-width:120px;position:relative}.cp_container:after{content:\"#\";opacity:0;pointer-events:none}.cp_color{width:4em;padding:3px 1.5em 3px 3px;height:inherit;cursor:pointer;position:absolute;inset:0;border:none;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;background-color:transparent;color:inherit}.cp_color:disabled{cursor:not-allowed}.cp_caret{position:absolute;left:2.75em;top:50%;margin-top:-.5em;pointer-events:none;opacity:.8}.cp_swatch{width:4em;padding:5px;height:inherit;border-radius:inherit;position:absolute;inset:0;border:none;-moz-appearance:none;-webkit-appearance:none;appearance:none;outline:none}.cp_divider{position:absolute;left:4em;top:0;width:1px;height:100%}.cp_hashtag{position:absolute;left:4.8em}.cp_input{position:absolute;inset:0 0 0 4em;padding:inherit;padding-left:1.8em;border:none;width:calc(100% - 4em);-moz-appearance:none;-webkit-appearance:none;appearance:none;font-size:inherit;outline:none;background-color:transparent;color:inherit}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
@@ -7430,7 +7437,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             useExisting: forwardRef(() => ColorPickerComponent),
                             multi: true
                         }
-                    ], 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"] }]
+                    ], 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"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -7734,11 +7741,11 @@ class AccordionComponent {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AccordionComponent, isStandalone: true, selector: "particle-accordion", inputs: { multiple: "multiple", height: "height", headerClass: "headerClass", textClass: "textClass", iconCollapsed: "iconCollapsed", iconExpanded: "iconExpanded", showIcon: "showIcon", text: "text" }, queries: [{ propertyName: "items", predicate: AccordionItemDirective }], viewQueries: [{ propertyName: "contentDivs", predicate: ["ref"], descendants: true }], ngImport: i0, template: "@for (item of items; track item; let i = $index) {\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: AccordionComponent, isStandalone: true, selector: "particle-accordion", inputs: { multiple: "multiple", height: "height", headerClass: "headerClass", textClass: "textClass", iconCollapsed: "iconCollapsed", iconExpanded: "iconExpanded", showIcon: "showIcon", text: "text" }, queries: [{ propertyName: "items", predicate: AccordionItemDirective }], viewQueries: [{ propertyName: "contentDivs", predicate: ["ref"], descendants: true }], ngImport: i0, template: "@for (item of items; track item; let i = $index) {\r\n  <div class=\"particle_accordion_item\" [class.disabled]=\"item.disabled\" [class.active]=\"expanded.has(i)\">\r\n    <button type=\"button\" class=\"particle_accordion_header width100\"\r\n      [ngClass]=\"(item.headerClass ? item.headerClass : headerClass) + (!item.disabled ? ' access' : '')\"\r\n      [style.height]=\"height\"\r\n      (click)=\"!item.disabled ? toggleState(i) : {}\"\r\n      [attr.aria-label]=\"!expanded.has(i) ? text.expand : text.collapse\"\r\n      >\r\n      @if (item.headerTemplate) {\r\n        <ng-container *ngTemplateOutlet=\"item.headerTemplate.templateRef\"></ng-container>\r\n      }\r\n      @if (!item.headerTemplate) {\r\n        @if (showIcon) {\r\n          <div class=\"text\" [ngClass]=\"textClass\">\r\n            @if (!expanded.has(i)) {\r\n              <span><i [ngClass]=\"iconCollapsed + ' fa-fw'\"></i></span>\r\n            }\r\n            @if (expanded.has(i)) {\r\n              <span><i [ngClass]=\"iconExpanded + ' fa-fw'\"></i></span>\r\n            }\r\n            {{item?.header}}\r\n          </div>\r\n        }\r\n        @if (!showIcon) {\r\n          <div class=\"text\" [ngClass]=\"textClass\">\r\n            <span>{{item?.header}}</span>\r\n          </div>\r\n        }\r\n      }\r\n    </button>\r\n    <div class=\"particle_accordion_content\" #ref>\r\n      <ng-container *ngTemplateOutlet=\"$any(item?.content?.templateRef)\"></ng-container>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{--accordion-disabled: rgb(159, 159, 161)}.particle_accordion_header{display:flex;justify-content:flex-start;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.particle_accordion_toggle_button{border:none;transition:transform .2s ease-in;background:none}.particle_accordion_item.disabled .particle_accordion_header{color:var(--accordion-disabled);cursor:auto}.particle_accordion_toggle_button:disabled{cursor:auto}.particle_accordion_toggle_button:disabled svg path:nth-child(2){fill:var(--accordion-disabled)}.particle_accordion_toggle_button:focus{outline:none}.particle_accordion_content{-webkit-user-select:text;user-select:text;overflow:hidden;transition:max-height .2s ease-out}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.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 item; 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"] }]
+            args: [{ selector: 'particle-accordion', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, NgTemplateOutlet, AccordionItemDirective], template: "@for (item of items; track item; let i = $index) {\r\n  <div class=\"particle_accordion_item\" [class.disabled]=\"item.disabled\" [class.active]=\"expanded.has(i)\">\r\n    <button type=\"button\" class=\"particle_accordion_header width100\"\r\n      [ngClass]=\"(item.headerClass ? item.headerClass : headerClass) + (!item.disabled ? ' access' : '')\"\r\n      [style.height]=\"height\"\r\n      (click)=\"!item.disabled ? toggleState(i) : {}\"\r\n      [attr.aria-label]=\"!expanded.has(i) ? text.expand : text.collapse\"\r\n      >\r\n      @if (item.headerTemplate) {\r\n        <ng-container *ngTemplateOutlet=\"item.headerTemplate.templateRef\"></ng-container>\r\n      }\r\n      @if (!item.headerTemplate) {\r\n        @if (showIcon) {\r\n          <div class=\"text\" [ngClass]=\"textClass\">\r\n            @if (!expanded.has(i)) {\r\n              <span><i [ngClass]=\"iconCollapsed + ' fa-fw'\"></i></span>\r\n            }\r\n            @if (expanded.has(i)) {\r\n              <span><i [ngClass]=\"iconExpanded + ' fa-fw'\"></i></span>\r\n            }\r\n            {{item?.header}}\r\n          </div>\r\n        }\r\n        @if (!showIcon) {\r\n          <div class=\"text\" [ngClass]=\"textClass\">\r\n            <span>{{item?.header}}</span>\r\n          </div>\r\n        }\r\n      }\r\n    </button>\r\n    <div class=\"particle_accordion_content\" #ref>\r\n      <ng-container *ngTemplateOutlet=\"$any(item?.content?.templateRef)\"></ng-container>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [":host{--accordion-disabled: rgb(159, 159, 161)}.particle_accordion_header{display:flex;justify-content:flex-start;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.particle_accordion_toggle_button{border:none;transition:transform .2s ease-in;background:none}.particle_accordion_item.disabled .particle_accordion_header{color:var(--accordion-disabled);cursor:auto}.particle_accordion_toggle_button:disabled{cursor:auto}.particle_accordion_toggle_button:disabled svg path:nth-child(2){fill:var(--accordion-disabled)}.particle_accordion_toggle_button:focus{outline:none}.particle_accordion_content{-webkit-user-select:text;user-select:text;overflow:hidden;transition:max-height .2s ease-out}\n"] }]
         }], propDecorators: { multiple: [{
                 type: Input
             }], height: [{
@@ -7844,11 +7851,11 @@ class SlideoverComponent {
         }, 100);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SlideoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SlideoverComponent, isStandalone: true, selector: "particle-slideover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, bgClass: { classPropertyName: "bgClass", publicName: "bgClass", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, hideCloseButton: { classPropertyName: "hideCloseButton", publicName: "hideCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: "<div #overlay (click)=\"close()\"></div>\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: SlideoverComponent, isStandalone: true, selector: "particle-slideover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, bgClass: { classPropertyName: "bgClass", publicName: "bgClass", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, hideCloseButton: { classPropertyName: "hideCloseButton", publicName: "hideCloseButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "overlay", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: "<div #overlay (click)=\"close()\"></div>\r\n<div\r\n  [ngClass]=\"bgClass() + ' ' + (slideoverOpen ? 'slideover_active_' + position : 'slideover_inactive_' + position) + ' slideover-panel ' + position\"\r\n  [style.width]=\"position === 'right' || position === 'left' ? (breakpointExceeded ? '100%' : width()) : null\"\r\n  [style.height]=\"position === 'top' || position === 'bottom' ? (breakpointExceeded ? '100%' : height()) : null\"\r\n  [style.left]=\"position === 'left' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\r\n  [style.right]=\"position === 'right' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\r\n  [style.bottom]=\"position === 'bottom' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\r\n  [style.top]=\"position === 'top' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\r\n  [style.visibility]=\"!visible ? 'hidden': 'visible'\"\r\n  [attr.aria-hidden]=\"!slideoverOpen\"\r\n  >\r\n  @if (!hideCloseButton()) {\r\n    <div class=\"push_close_bar\">\r\n      <button class=\"access btnset clear\"\r\n        [attr.aria-label]=\"text().close\"\r\n        (click)=\"close()\">\r\n        <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n          <i class=\"fas fa-times\"></i>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".slideover-panel{position:fixed;transition:transform .3s;display:flex;flex-direction:column;z-index:var(--z-dialog)}.slideover-panel.left{top:0;left:0;height:100%}.slideover-panel.right{top:0;right:0;height:100%}.slideover-panel.top{top:0;left:0;width:100%}.slideover-panel.bottom{bottom:0;left:0;width:100%}.slideover_inactive_left,.slideover_active_left{transition:left .2s ease-in-out}.slideover_inactive_right,.slideover_active_right{transition:right .2s ease-in-out}.slideover_inactive_top,.slideover_active_top{transition:top .2s ease-in-out}.slideover_inactive_bottom,.slideover_active_bottom{transition:bottom .2s ease-in-out}.push_close_bar{position:absolute;right:0;top:0;width:45px;height:45px;z-index:var(--z-dialog);display:flex;justify-content:center;align-items:center}.data_hide_button{float:right;display:flex;align-items:center;justify-content:center;font-size:9pt;min-height:20px;height:20px;min-width:20px;width:20px;border-radius:50%;cursor:pointer;padding:0;transition:all .2s ease-in-out;background-color:#ffffffe6;color:#0006;border:1px solid rgba(0,0,0,.1)}.data_hide_button:hover{background-color:#0000004d;color:#fffc;border:1px solid rgba(0,0,0,.1)}.particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SlideoverComponent, decorators: [{
             type: Component,
-            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"] }]
+            args: [{ selector: 'particle-slideover', imports: [NgClass], template: "<div #overlay (click)=\"close()\"></div>\r\n<div\r\n  [ngClass]=\"bgClass() + ' ' + (slideoverOpen ? 'slideover_active_' + position : 'slideover_inactive_' + position) + ' slideover-panel ' + position\"\r\n  [style.width]=\"position === 'right' || position === 'left' ? (breakpointExceeded ? '100%' : width()) : null\"\r\n  [style.height]=\"position === 'top' || position === 'bottom' ? (breakpointExceeded ? '100%' : height()) : null\"\r\n  [style.left]=\"position === 'left' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\r\n  [style.right]=\"position === 'right' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : width()) : null\"\r\n  [style.bottom]=\"position === 'bottom' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\r\n  [style.top]=\"position === 'top' && !slideoverOpen ? '-' + (breakpointExceeded ? '100%' : height()) : null\"\r\n  [style.visibility]=\"!visible ? 'hidden': 'visible'\"\r\n  [attr.aria-hidden]=\"!slideoverOpen\"\r\n  >\r\n  @if (!hideCloseButton()) {\r\n    <div class=\"push_close_bar\">\r\n      <button class=\"access btnset clear\"\r\n        [attr.aria-label]=\"text().close\"\r\n        (click)=\"close()\">\r\n        <div class=\"circle_20px ptl_brdr_color ptl_brdr_size ptl_input_bg_color\">\r\n          <i class=\"fas fa-times\"></i>\r\n        </div>\r\n      </button>\r\n    </div>\r\n  }\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".slideover-panel{position:fixed;transition:transform .3s;display:flex;flex-direction:column;z-index:var(--z-dialog)}.slideover-panel.left{top:0;left:0;height:100%}.slideover-panel.right{top:0;right:0;height:100%}.slideover-panel.top{top:0;left:0;width:100%}.slideover-panel.bottom{bottom:0;left:0;width:100%}.slideover_inactive_left,.slideover_active_left{transition:left .2s ease-in-out}.slideover_inactive_right,.slideover_active_right{transition:right .2s ease-in-out}.slideover_inactive_top,.slideover_active_top{transition:top .2s ease-in-out}.slideover_inactive_bottom,.slideover_active_bottom{transition:bottom .2s ease-in-out}.push_close_bar{position:absolute;right:0;top:0;width:45px;height:45px;z-index:var(--z-dialog);display:flex;justify-content:center;align-items:center}.data_hide_button{float:right;display:flex;align-items:center;justify-content:center;font-size:9pt;min-height:20px;height:20px;min-width:20px;width:20px;border-radius:50%;cursor:pointer;padding:0;transition:all .2s ease-in-out;background-color:#ffffffe6;color:#0006;border:1px solid rgba(0,0,0,.1)}.data_hide_button:hover{background-color:#0000004d;color:#fffc;border:1px solid rgba(0,0,0,.1)}.particle_dialog_overlay{position:fixed;display:block;width:100%;height:100%;inset:0;background-color:#78787866;z-index:var(--z-dialog)}\n"] }]
         }], propDecorators: { position: [{
                 type: Input
             }], overlay: [{
@@ -8031,11 +8038,11 @@ class ScrollToTopComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScrollToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScrollToTopComponent, isStandalone: true, selector: "particle-scroll-to-top", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, scrollDistance: { classPropertyName: "scrollDistance", publicName: "scrollDistance", isSignal: true, isRequired: false, transformFunction: null }, bottomOffset: { classPropertyName: "bottomOffset", publicName: "bottomOffset", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ($scrollTop | async; as scrollTop) {\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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ScrollToTopComponent, isStandalone: true, selector: "particle-scroll-to-top", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, scrollDistance: { classPropertyName: "scrollDistance", publicName: "scrollDistance", isSignal: true, isRequired: false, transformFunction: null }, bottomOffset: { classPropertyName: "bottomOffset", publicName: "bottomOffset", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ($scrollTop | async; as scrollTop) {\r\n  <div [style.visibility]=\"scrollTop > scrollDistance() ? 'visible' : 'hidden'\"\r\n    [style.opacity]=\"scrollTop > scrollDistance() ? '1' : '0'\"\r\n    [style.bottom]=\"bottomOffset() + 'px'\"\r\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n    <button (click)=\"scrollToTop()\"\r\n      class=\"access btn pad_10 brad_3 brdr content_color\"\r\n      type=\"button\"\r\n      [attr.aria-label]=\"text().scrollToTop\">\r\n      <span class=\"icon slide_up\"><i class=\"fas fa-chevron-up\"></i></span>\r\n    </button>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ScrollToTopComponent, decorators: [{
             type: Component,
-            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" }]
+            args: [{ selector: 'particle-scroll-to-top', imports: [AsyncPipe], template: "@if ($scrollTop | async; as scrollTop) {\r\n  <div [style.visibility]=\"scrollTop > scrollDistance() ? 'visible' : 'hidden'\"\r\n    [style.opacity]=\"scrollTop > scrollDistance() ? '1' : '0'\"\r\n    [style.bottom]=\"bottomOffset() + 'px'\"\r\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n    <button (click)=\"scrollToTop()\"\r\n      class=\"access btn pad_10 brad_3 brdr content_color\"\r\n      type=\"button\"\r\n      [attr.aria-label]=\"text().scrollToTop\">\r\n      <span class=\"icon slide_up\"><i class=\"fas fa-chevron-up\"></i></span>\r\n    </button>\r\n  </div>\r\n}\r\n" }]
         }] });
 
 class LayoutFullwidthSidebarComponent {
@@ -8064,11 +8071,11 @@ class LayoutFullwidthSidebarComponent {
         return `calc(100vh - ${offset}px)`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutFullwidthSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LayoutFullwidthSidebarComponent, isStandalone: true, selector: "particle-layout-fullwidth-sidebar", inputs: { mainContent: { classPropertyName: "mainContent", publicName: "mainContent", isSignal: true, isRequired: false, transformFunction: null }, rightSidebar: { classPropertyName: "rightSidebar", publicName: "rightSidebar", isSignal: true, isRequired: false, transformFunction: null }, mainContentContainerClassList: { classPropertyName: "mainContentContainerClassList", publicName: "mainContentContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarContainerClassList: { classPropertyName: "rightSidebarContainerClassList", publicName: "rightSidebarContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarSticky: { classPropertyName: "rightSidebarSticky", publicName: "rightSidebarSticky", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarWidth: { classPropertyName: "rightSidebarWidth", publicName: "rightSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarCollapsedTabOffset: { classPropertyName: "rightSidebarCollapsedTabOffset", publicName: "rightSidebarCollapsedTabOffset", isSignal: true, isRequired: false, transformFunction: null }, collapsedClassList: { classPropertyName: "collapsedClassList", publicName: "collapsedClassList", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarEnabled: { classPropertyName: "mobileSidebarEnabled", publicName: "mobileSidebarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "slideover", first: true, predicate: ["slideover"], descendants: true }], ngImport: i0, template: "<!-- setup for a side column -->\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LayoutFullwidthSidebarComponent, isStandalone: true, selector: "particle-layout-fullwidth-sidebar", inputs: { mainContent: { classPropertyName: "mainContent", publicName: "mainContent", isSignal: true, isRequired: false, transformFunction: null }, rightSidebar: { classPropertyName: "rightSidebar", publicName: "rightSidebar", isSignal: true, isRequired: false, transformFunction: null }, mainContentContainerClassList: { classPropertyName: "mainContentContainerClassList", publicName: "mainContentContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarContainerClassList: { classPropertyName: "rightSidebarContainerClassList", publicName: "rightSidebarContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarSticky: { classPropertyName: "rightSidebarSticky", publicName: "rightSidebarSticky", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarWidth: { classPropertyName: "rightSidebarWidth", publicName: "rightSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarCollapsedTabOffset: { classPropertyName: "rightSidebarCollapsedTabOffset", publicName: "rightSidebarCollapsedTabOffset", isSignal: true, isRequired: false, transformFunction: null }, collapsedClassList: { classPropertyName: "collapsedClassList", publicName: "collapsedClassList", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarEnabled: { classPropertyName: "mobileSidebarEnabled", publicName: "mobileSidebarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "slideover", first: true, predicate: ["slideover"], descendants: true }], ngImport: i0, template: "<!-- setup for a side column -->\r\n<div class=\"row height100 ent_r2l_row\">\r\n  <div class=\"row column space_between height100\"\r\n    [ngClass]=\"mainContentContainerClassList()\">\r\n    <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\r\n  </div>\r\n\r\n  @if (!rightSidebarSticky()) {\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [ngClass]=\"rightSidebarContainerClassList()\"\r\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n      [style.width]=\"rightSidebarWidth()\">\r\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n    </div>\r\n  }\r\n\r\n  @if (rightSidebarSticky()) {\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n      [style.width]=\"rightSidebarWidth()\">\r\n      <div class=\"row column sticky_sidebar\"\r\n        [ngClass]=\"rightSidebarContainerClassList()\"\r\n        [style.height]=\"stickySidebarHeight\">\r\n        <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\r\n  <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\r\n    [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\r\n    [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\r\n    style=\"z-index: var(--z-frame);\"\r\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n    <button\r\n      (click)=\"slideover.open()\"\r\n      class=\"access btn pad_10 brad_3 brdr content_color\"\r\n      type=\"button\">\r\n      <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\r\n    </button>\r\n  </div>\r\n  <particle-slideover\r\n    position=\"right\"\r\n    [width]=\"rightSidebarWidth()\"\r\n    [breakpoint]=\"1\"\r\n    #slideover\r\n    >\r\n    <div class=\"min_h40 header_color\">\r\n    </div>\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\r\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n    </div>\r\n  </particle-slideover>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlideoverComponent, selector: "particle-slideover", inputs: ["position", "modal", "width", "height", "bgClass", "text", "breakpoint", "hideCloseButton"], outputs: ["opened", "closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutFullwidthSidebarComponent, decorators: [{
             type: Component,
-            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" }]
+            args: [{ selector: 'particle-layout-fullwidth-sidebar', imports: [NgClass, NgTemplateOutlet, SlideoverComponent], template: "<!-- setup for a side column -->\r\n<div class=\"row height100 ent_r2l_row\">\r\n  <div class=\"row column space_between height100\"\r\n    [ngClass]=\"mainContentContainerClassList()\">\r\n    <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\r\n  </div>\r\n\r\n  @if (!rightSidebarSticky()) {\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [ngClass]=\"rightSidebarContainerClassList()\"\r\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n      [style.width]=\"rightSidebarWidth()\">\r\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n    </div>\r\n  }\r\n\r\n  @if (rightSidebarSticky()) {\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n      [style.width]=\"rightSidebarWidth()\">\r\n      <div class=\"row column sticky_sidebar\"\r\n        [ngClass]=\"rightSidebarContainerClassList()\"\r\n        [style.height]=\"stickySidebarHeight\">\r\n        <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\r\n  <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\r\n    [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\r\n    [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\r\n    style=\"z-index: var(--z-frame);\"\r\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n    <button\r\n      (click)=\"slideover.open()\"\r\n      class=\"access btn pad_10 brad_3 brdr content_color\"\r\n      type=\"button\">\r\n      <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\r\n    </button>\r\n  </div>\r\n  <particle-slideover\r\n    position=\"right\"\r\n    [width]=\"rightSidebarWidth()\"\r\n    [breakpoint]=\"1\"\r\n    #slideover\r\n    >\r\n    <div class=\"min_h40 header_color\">\r\n    </div>\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\r\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n    </div>\r\n  </particle-slideover>\r\n}\r\n" }]
         }], propDecorators: { slideover: [{
                 type: ViewChild,
                 args: ['slideover']
@@ -8111,11 +8118,11 @@ class LayoutFullFramingComponent {
         return `calc(100% - ${offset}px)`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutFullFramingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LayoutFullFramingComponent, isStandalone: true, selector: "particle-layout-full-framing", inputs: { mainContent: { classPropertyName: "mainContent", publicName: "mainContent", isSignal: true, isRequired: false, transformFunction: null }, rightSidebar: { classPropertyName: "rightSidebar", publicName: "rightSidebar", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, mainContentContainerClassList: { classPropertyName: "mainContentContainerClassList", publicName: "mainContentContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarContainerClassList: { classPropertyName: "rightSidebarContainerClassList", publicName: "rightSidebarContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, headerClassList: { classPropertyName: "headerClassList", publicName: "headerClassList", isSignal: true, isRequired: false, transformFunction: null }, footerClassList: { classPropertyName: "footerClassList", publicName: "footerClassList", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarWidth: { classPropertyName: "rightSidebarWidth", publicName: "rightSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarCollapsedTabOffset: { classPropertyName: "rightSidebarCollapsedTabOffset", publicName: "rightSidebarCollapsedTabOffset", isSignal: true, isRequired: false, transformFunction: null }, collapsedClassList: { classPropertyName: "collapsedClassList", publicName: "collapsedClassList", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarEnabled: { classPropertyName: "mobileSidebarEnabled", publicName: "mobileSidebarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "slideover", first: true, predicate: ["slideover"], descendants: true }], ngImport: i0, template: "<div class=\"width100 height100\">\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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LayoutFullFramingComponent, isStandalone: true, selector: "particle-layout-full-framing", inputs: { mainContent: { classPropertyName: "mainContent", publicName: "mainContent", isSignal: true, isRequired: false, transformFunction: null }, rightSidebar: { classPropertyName: "rightSidebar", publicName: "rightSidebar", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, mainContentContainerClassList: { classPropertyName: "mainContentContainerClassList", publicName: "mainContentContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarContainerClassList: { classPropertyName: "rightSidebarContainerClassList", publicName: "rightSidebarContainerClassList", isSignal: true, isRequired: false, transformFunction: null }, headerClassList: { classPropertyName: "headerClassList", publicName: "headerClassList", isSignal: true, isRequired: false, transformFunction: null }, footerClassList: { classPropertyName: "footerClassList", publicName: "footerClassList", isSignal: true, isRequired: false, transformFunction: null }, headerHeight: { classPropertyName: "headerHeight", publicName: "headerHeight", isSignal: true, isRequired: false, transformFunction: null }, footerHeight: { classPropertyName: "footerHeight", publicName: "footerHeight", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarWidth: { classPropertyName: "rightSidebarWidth", publicName: "rightSidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, breakpoint: { classPropertyName: "breakpoint", publicName: "breakpoint", isSignal: true, isRequired: false, transformFunction: null }, rightSidebarCollapsedTabOffset: { classPropertyName: "rightSidebarCollapsedTabOffset", publicName: "rightSidebarCollapsedTabOffset", isSignal: true, isRequired: false, transformFunction: null }, collapsedClassList: { classPropertyName: "collapsedClassList", publicName: "collapsedClassList", isSignal: true, isRequired: false, transformFunction: null }, mobileSidebarEnabled: { classPropertyName: "mobileSidebarEnabled", publicName: "mobileSidebarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "slideover", first: true, predicate: ["slideover"], descendants: true }], ngImport: i0, template: "<div class=\"width100 height100\">\r\n  <div class=\"width100 header_sticky\" [ngClass]=\"headerClassList()\" [style.height]=\"headerHeight()\">\r\n    <ng-template [ngTemplateOutlet]=\"header()\"></ng-template>\r\n  </div>\r\n\r\n  <div class=\"row ent_r2l_row\" [style.height]=\"contentSidebarHeight\">\r\n    <div class=\"row column space_between height100\"\r\n      [ngClass]=\"mainContentContainerClassList()\">\r\n      <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\r\n    </div>\r\n\r\n    <div class=\"col particle_layout_sidebar height100\"\r\n      [style.width]=\"rightSidebarWidth()\"\r\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n      >\r\n      <div class=\"row column sticky_sidebar height100\"\r\n        [ngClass]=\"rightSidebarContainerClassList()\"\r\n        [style.height]=\"stickySidebarHeight\"\r\n        [style.top]=\"headerHeight()\">\r\n        <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"width100 footer_sticky\" [ngClass]=\"footerClassList()\" [style.height]=\"footerHeight()\">\r\n    <ng-template [ngTemplateOutlet]=\"footer()\"></ng-template>\r\n  </div>\r\n</div>\r\n\r\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\r\n  <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\r\n    [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\r\n    [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\r\n    style=\"z-index: var(--z-frame);\"\r\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n    <button\r\n      (click)=\"slideover.open()\"\r\n      class=\"access btn pad_10 brad_3 brdr content_color\"\r\n      type=\"button\">\r\n      <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\r\n    </button>\r\n  </div>\r\n  <particle-slideover\r\n    position=\"right\"\r\n    [width]=\"rightSidebarWidth()\"\r\n    [breakpoint]=\"1\"\r\n    #slideover\r\n    >\r\n    <div class=\"min_h40 header_color\">\r\n    </div>\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\r\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n    </div>\r\n  </particle-slideover>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SlideoverComponent, selector: "particle-slideover", inputs: ["position", "modal", "width", "height", "bgClass", "text", "breakpoint", "hideCloseButton"], outputs: ["opened", "closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LayoutFullFramingComponent, decorators: [{
             type: Component,
-            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" }]
+            args: [{ selector: 'particle-layout-full-framing', imports: [NgClass, NgTemplateOutlet, SlideoverComponent], template: "<div class=\"width100 height100\">\r\n  <div class=\"width100 header_sticky\" [ngClass]=\"headerClassList()\" [style.height]=\"headerHeight()\">\r\n    <ng-template [ngTemplateOutlet]=\"header()\"></ng-template>\r\n  </div>\r\n\r\n  <div class=\"row ent_r2l_row\" [style.height]=\"contentSidebarHeight\">\r\n    <div class=\"row column space_between height100\"\r\n      [ngClass]=\"mainContentContainerClassList()\">\r\n      <ng-template [ngTemplateOutlet]=\"mainContent()\"></ng-template>\r\n    </div>\r\n\r\n    <div class=\"col particle_layout_sidebar height100\"\r\n      [style.width]=\"rightSidebarWidth()\"\r\n      [style.display]=\"window.innerWidth <= breakpoint() ? 'none' : ''\"\r\n      >\r\n      <div class=\"row column sticky_sidebar height100\"\r\n        [ngClass]=\"rightSidebarContainerClassList()\"\r\n        [style.height]=\"stickySidebarHeight\"\r\n        [style.top]=\"headerHeight()\">\r\n        <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"width100 footer_sticky\" [ngClass]=\"footerClassList()\" [style.height]=\"footerHeight()\">\r\n    <ng-template [ngTemplateOutlet]=\"footer()\"></ng-template>\r\n  </div>\r\n</div>\r\n\r\n@if (mobileSidebarEnabled() && rightSidebarCollapsedTabOffset() >= 0) {\r\n  <div [style.visibility]=\"window.innerWidth <= breakpoint() ? 'visible' : 'hidden'\"\r\n    [style.opacity]=\"window.innerWidth <= breakpoint() ? '1' : '0'\"\r\n    [style.top]=\"rightSidebarCollapsedTabOffset() + 'px'\"\r\n    style=\"z-index: var(--z-frame);\"\r\n    class=\"particle_scroll_button mar_right10 mar_bot15\">\r\n    <button\r\n      (click)=\"slideover.open()\"\r\n      class=\"access btn pad_10 brad_3 brdr content_color\"\r\n      type=\"button\">\r\n      <span class=\"icon slide_left\"><i class=\"fas fa-chevron-left\"></i></span>\r\n    </button>\r\n  </div>\r\n  <particle-slideover\r\n    position=\"right\"\r\n    [width]=\"rightSidebarWidth()\"\r\n    [breakpoint]=\"1\"\r\n    #slideover\r\n    >\r\n    <div class=\"min_h40 header_color\">\r\n    </div>\r\n    <div class=\"particle_layout_sidebar height100\"\r\n      [ngClass]=\"rightSidebarContainerClassList() + ' ' + collapsedClassList()\">\r\n      <ng-template [ngTemplateOutlet]=\"rightSidebar()\"></ng-template>\r\n    </div>\r\n  </particle-slideover>\r\n}\r\n" }]
         }], propDecorators: { slideover: [{
                 type: ViewChild,
                 args: ['slideover']
@@ -8203,7 +8210,7 @@ class ToggleSwitchComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ToggleSwitchComponent),
                 multi: true
-            }], 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" }] });
+            }], ngImport: i0, template: "@if (options$ | async; as options) {\r\n  <button\r\n    (click)=\"handleClick()\"\r\n    [attr.aria-label]=\"options.accessibilityLabel\"\r\n    [disabled]=\"disabled()\"\r\n    [ngClass]=\"value ? options.affirmativeColorClass : options.negativeColorClass\"\r\n    class=\"access btn sm v_center hov_glow p_toggle_button\"\r\n    >\r\n    @if (value) {\r\n      <ng-container [ngTemplateOutlet]=\"affirmativeSelected\"></ng-container>\r\n    } @else {\r\n      <div class=\"content_color p_toggle_shadow p_toggle_status\" [style.min-width]=\"options.toggleSwitchWidth + 'px'\">\r\n        <i [ngClass]=\"options.negativeIcon\" class=\"fa-fw\"></i>\r\n      </div>\r\n      <div class=\"opac_50 p_toggle_status\" [style.min-width]=\"(options.toggleTrackWidth - options.toggleSwitchWidth) + 'px'\">\r\n        {{options.negativeLabel}}\r\n      </div>\r\n    }\r\n  </button>\r\n  <ng-template #affirmativeSelected>\r\n    <div class=\"opac_50 p_toggle_status\" [style.min-width]=\"(options.toggleTrackWidth - options.toggleSwitchWidth) + 'px'\">\r\n      {{options.affirmativeLabel}}\r\n    </div>\r\n    <div class=\"content_color p_toggle_shadow p_toggle_status\" [style.min-width]=\"options.toggleSwitchWidth + 'px'\">\r\n      <i [ngClass]=\"options.affirmativeIcon\" class=\"fa-fw mar_right5\"></i>\r\n    </div>\r\n  </ng-template>\r\n}\r\n", styles: [".p_toggle_button{padding:2px;border-radius:50px}.p_toggle_status{min-width:65px;border-radius:50px;padding:5px 3px;transition:all .4s ease-in-out}.p_toggle_shadow{box-shadow:0 0 10px #323232bf}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
             type: Component,
@@ -8211,7 +8218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ToggleSwitchComponent),
                             multi: true
-                        }], 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"] }]
+                        }], imports: [NgClass, NgTemplateOutlet, AsyncPipe], template: "@if (options$ | async; as options) {\r\n  <button\r\n    (click)=\"handleClick()\"\r\n    [attr.aria-label]=\"options.accessibilityLabel\"\r\n    [disabled]=\"disabled()\"\r\n    [ngClass]=\"value ? options.affirmativeColorClass : options.negativeColorClass\"\r\n    class=\"access btn sm v_center hov_glow p_toggle_button\"\r\n    >\r\n    @if (value) {\r\n      <ng-container [ngTemplateOutlet]=\"affirmativeSelected\"></ng-container>\r\n    } @else {\r\n      <div class=\"content_color p_toggle_shadow p_toggle_status\" [style.min-width]=\"options.toggleSwitchWidth + 'px'\">\r\n        <i [ngClass]=\"options.negativeIcon\" class=\"fa-fw\"></i>\r\n      </div>\r\n      <div class=\"opac_50 p_toggle_status\" [style.min-width]=\"(options.toggleTrackWidth - options.toggleSwitchWidth) + 'px'\">\r\n        {{options.negativeLabel}}\r\n      </div>\r\n    }\r\n  </button>\r\n  <ng-template #affirmativeSelected>\r\n    <div class=\"opac_50 p_toggle_status\" [style.min-width]=\"(options.toggleTrackWidth - options.toggleSwitchWidth) + 'px'\">\r\n      {{options.affirmativeLabel}}\r\n    </div>\r\n    <div class=\"content_color p_toggle_shadow p_toggle_status\" [style.min-width]=\"options.toggleSwitchWidth + 'px'\">\r\n      <i [ngClass]=\"options.affirmativeIcon\" class=\"fa-fw mar_right5\"></i>\r\n    </div>\r\n  </ng-template>\r\n}\r\n", styles: [".p_toggle_button{padding:2px;border-radius:50px}.p_toggle_status{min-width:65px;border-radius:50px;padding:5px 3px;transition:all .4s ease-in-out}.p_toggle_shadow{box-shadow:0 0 10px #323232bf}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }] } });
@@ -8295,7 +8302,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\"\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: [""] });
+        ], ngImport: i0, template: "<div class=\"access ptl_input_bg_color ptl_brdr_color ptl_brdr_size ptl_brdr_radius\"\r\n  [style.height]=\"size() + 'px'\"\r\n  [style.width]=\"size() + 'px'\"\r\n  [style.min-width]=\"size() + 'px'\"\r\n  [style.min-height]=\"size() + 'px'\"\r\n  >\r\n  <button class=\"access btn clear width100 height100\"\r\n    tabindex=\"0\"\r\n    role=\"checkbox\"\r\n    type=\"button\"\r\n    [disabled]=\"disabled\"\r\n    [attr.aria-label]=\"_value ? text().uncheck : text().check\"\r\n    [attr.aria-checked]=\"_value\"\r\n    (click)=\"click()\"\r\n    >\r\n    <!-- show if checked state -->\r\n    @if (_value) {\r\n      <div><i class=\"fas fa-check fa-fw\" [style.font-size]=\"(size() / 2) + 'px'\"></i></div>\r\n    }\r\n  </button>\r\n\r\n  <input type=\"hidden\" [id]=\"inputId()\" [value]=\"value\" #hiddenInput/>\r\n</div>\r\n\r\n", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -8305,7 +8312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.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\"\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" }]
+                    ], 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" }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], value: [{
@@ -8831,20 +8838,20 @@ class InputMaskComponent {
         this.inputViewChild.nativeElement.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: InputMaskComponent, isStandalone: true, selector: "particle-input-mask", inputs: { type: "type", slotChar: "slotChar", autoClear: "autoClear", style: "style", inputId: "inputId", styleClass: "styleClass", placeholder: "placeholder", size: "size", maxlength: "maxlength", tabindex: "tabindex", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", disabled: "disabled", readonly: "readonly", unmask: "unmask", name: "name", required: "required", characterPattern: "characterPattern", autoFocus: "autoFocus", autocomplete: "autocomplete", mask: "mask" }, outputs: { onComplete: "onComplete", onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput" }, host: { properties: { "class.ui-inputwrapper-filled": "filled", "class.ui-inputwrapper-focus": "focus" } }, providers: [INPUTMASK_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<input #input [attr.id]="inputId" [attr.type]="type" [attr.name]="name" [ngStyle]="style" [ngClass]="styleClass" [attr.placeholder]="placeholder"
-                    [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: "19.0.5", type: InputMaskComponent, isStandalone: true, selector: "particle-input-mask", inputs: { type: "type", slotChar: "slotChar", autoClear: "autoClear", style: "style", inputId: "inputId", styleClass: "styleClass", placeholder: "placeholder", size: "size", maxlength: "maxlength", tabindex: "tabindex", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", disabled: "disabled", readonly: "readonly", unmask: "unmask", name: "name", required: "required", characterPattern: "characterPattern", autoFocus: "autoFocus", autocomplete: "autocomplete", mask: "mask" }, outputs: { onComplete: "onComplete", onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput" }, host: { properties: { "class.ui-inputwrapper-filled": "filled", "class.ui-inputwrapper-focus": "focus" } }, providers: [INPUTMASK_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<input #input [attr.id]="inputId" [attr.type]="type" [attr.name]="name" [ngStyle]="style" [ngClass]="styleClass" [attr.placeholder]="placeholder"
+                    [attr.size]="size" [attr.autocomplete]="autocomplete" [attr.maxlength]="maxlength" [attr.tabindex]="tabindex" [attr.aria-label]="ariaLabel"
+                    [attr.aria-required]="ariaRequired" [disabled]="disabled" [readonly]="readonly" [attr.required]="required"
+                    (focus)="onInputFocus($event)" (blur)="onInputBlur($event)" (keydown)="onKeyDown($event)"
                     (input)="onInputChange($event)" (paste)="handleInputChange($event)" (click)="onClick()">`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMaskComponent, decorators: [{
             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',
@@ -8925,11 +8932,11 @@ class ProgressBarComponent {
     showBorder = input(true);
     showMovement = input(false);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ProgressBarComponent, isStandalone: true, selector: "particle-progress-bar", inputs: { percentComplete: { classPropertyName: "percentComplete", publicName: "percentComplete", isSignal: false, isRequired: false, transformFunction: null }, backgroundColorClass: { classPropertyName: "backgroundColorClass", publicName: "backgroundColorClass", isSignal: true, isRequired: false, transformFunction: null }, progressColorClass: { classPropertyName: "progressColorClass", publicName: "progressColorClass", isSignal: true, isRequired: false, transformFunction: null }, showPercentComplete: { classPropertyName: "showPercentComplete", publicName: "showPercentComplete", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, showMovement: { classPropertyName: "showMovement", publicName: "showMovement", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [ngClass]=\"showBorder() ? backgroundColorClass() + ' brdr' : backgroundColorClass()\"\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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ProgressBarComponent, isStandalone: true, selector: "particle-progress-bar", inputs: { percentComplete: { classPropertyName: "percentComplete", publicName: "percentComplete", isSignal: false, isRequired: false, transformFunction: null }, backgroundColorClass: { classPropertyName: "backgroundColorClass", publicName: "backgroundColorClass", isSignal: true, isRequired: false, transformFunction: null }, progressColorClass: { classPropertyName: "progressColorClass", publicName: "progressColorClass", isSignal: true, isRequired: false, transformFunction: null }, showPercentComplete: { classPropertyName: "showPercentComplete", publicName: "showPercentComplete", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, showMovement: { classPropertyName: "showMovement", publicName: "showMovement", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [ngClass]=\"showBorder() ? backgroundColorClass() + ' brdr' : backgroundColorClass()\"\r\n  [style.border-radius]=\"borderRadius() + 'px'\"\r\n  [style.height]=\"height() ? height() + 'px' : ''\"\r\n  >\r\n  <div class=\"container_progress\"\r\n    [ngClass]=\"progressColorClass() + (showMovement() ? ' progress_movement' : '')\"\r\n    [style.width]=\"percentComplete + '%'\"\r\n    [style.border-radius]=\"borderRadius() + 'px'\"\r\n    [style.height]=\"height() ? (showBorder() ? (height() - 2) : height()) + 'px' : ''\"\r\n    [style.font-size]=\"height() < 20 ? '65%' : ''\"\r\n    >\r\n    @if ((showPercentComplete() && height() >= 10)) {\r\n      {{percentComplete}}%\r\n    } @else {\r\n      &nbsp;\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".container_progress{align-items:center;display:flex;justify-content:center}.progress_movement{animation:progress 10s linear infinite;background-image:url(data:image/png;base64,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)}@keyframes progress{0%{background-position:0% 0%}to{background-position:0% -100%}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
-            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,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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()\"\r\n  [style.border-radius]=\"borderRadius() + 'px'\"\r\n  [style.height]=\"height() ? height() + 'px' : ''\"\r\n  >\r\n  <div class=\"container_progress\"\r\n    [ngClass]=\"progressColorClass() + (showMovement() ? ' progress_movement' : '')\"\r\n    [style.width]=\"percentComplete + '%'\"\r\n    [style.border-radius]=\"borderRadius() + 'px'\"\r\n    [style.height]=\"height() ? (showBorder() ? (height() - 2) : height()) + 'px' : ''\"\r\n    [style.font-size]=\"height() < 20 ? '65%' : ''\"\r\n    >\r\n    @if ((showPercentComplete() && height() >= 10)) {\r\n      {{percentComplete}}%\r\n    } @else {\r\n      &nbsp;\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".container_progress{align-items:center;display:flex;justify-content:center}.progress_movement{animation:progress 10s linear infinite;background-image:url(data:image/png;base64,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)}@keyframes progress{0%{background-position:0% 0%}to{background-position:0% -100%}}\n"] }]
         }], propDecorators: { percentComplete: [{
                 type: Input
             }] } });
@@ -8948,11 +8955,11 @@ class LoaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LoaderComponent, isStandalone: true, selector: "particle-loader", inputs: { text: "text", disableText: "disableText", colors: "colors" }, ngImport: i0, template: "<div class=\"row column center_center height100\" style=\"max-width: 250px;\">\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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: LoaderComponent, isStandalone: true, selector: "particle-loader", inputs: { text: "text", disableText: "disableText", colors: "colors" }, ngImport: i0, template: "<div class=\"row column center_center height100\" style=\"max-width: 250px;\">\r\n  <div class=\"ptl_loader\">\r\n    <div class=\"ptl_loader__progress\" [style.background]=\"backgroundStyle ?? ''\"></div>\r\n  </div>\r\n  @if (!disableText) {\r\n    @if (text.loadingText) {\r\n      <div class=\"text md bold text_center mar_top15 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\r\n        {{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span>\r\n      </div>\r\n    }\r\n    @if (text.loadingSubtext) {\r\n      <div class=\"text sm text_center mar_top5 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\r\n        {{text.loadingSubtext}}\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".ptl_loader{height:2px;position:relative;overflow:hidden;width:100%}.ptl_loader__progress{background:linear-gradient(to right,rgba(0,0,0,0) 0%,var(--bg-purple-color) 33%,var(--bg-blue-color) 50%,var(--bg-green-color) 66%,rgba(0,0,0,0) 100%);position:absolute;bottom:0;top:0;width:100%;animation-duration:2s;animation-iteration-count:infinite;animation-name:ptl_loader}@keyframes ptl_loader{0%{left:-100%}to{left:100%}}.endpoint_fadein{animation:fadeInAnimation ease 1s;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}.endpoint_shape{height:7px;width:7px;min-width:7px;min-height:7px;border-radius:7px}.endpoint_spin{animation:spin 3s linear infinite;opacity:1;z-index:var(--z-frame)}@keyframes spin{to{transform:rotate(360deg)}}.endpoint_spin_rev{animation:spin_rev 3s linear infinite;opacity:1;z-index:var(--z-frame)}@keyframes spin_rev{to{transform:rotate(-360deg)}}.bars_vertical{height:60px;width:60px;display:flex;align-items:center;justify-content:center}.bars_vertical .bar1,.bars_vertical .bar2,.bars_vertical .bar3,.bars_vertical .bar4,.bars_vertical .bar5{animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:alternate;transform-origin:center center;margin:0 5px}.bars_vertical .bar1{animation-name:bars_vertical_grow;animation-delay:.2s}.bars_vertical .bar2{animation-name:bars_vertical_grow;animation-delay:.4s}.bars_vertical .bar3{animation-name:bars_vertical_grow;animation-delay:.6s}.bars_vertical .bar4{animation-name:bars_vertical_grow;animation-delay:.8s}.bars_vertical .bar5{animation-name:bars_vertical_grow;animation-delay:1s}@keyframes bars_vertical_grow{0%{transform:scale(.2);opacity:0}to{transform:scale(2);opacity:1}}@keyframes fadein{0%{opacity:0}to{opacity:.5}}.one{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:0s;animation:dot 1.3s infinite;animation-delay:0s}.two{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:.2s;animation:dot 1.3s infinite;animation-delay:.2s}.three{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:.3s;animation:dot 1.3s infinite;animation-delay:.3s}@-webkit-keyframes dot{0%{opacity:0}50%{opacity:0}to{opacity:1}}@keyframes dot{0%{opacity:0}50%{opacity:0}to{opacity:1}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.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;\">\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"] }]
+            args: [{ selector: 'particle-loader', standalone: true, imports: [], template: "<div class=\"row column center_center height100\" style=\"max-width: 250px;\">\r\n  <div class=\"ptl_loader\">\r\n    <div class=\"ptl_loader__progress\" [style.background]=\"backgroundStyle ?? ''\"></div>\r\n  </div>\r\n  @if (!disableText) {\r\n    @if (text.loadingText) {\r\n      <div class=\"text md bold text_center mar_top15 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\r\n        {{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span>\r\n      </div>\r\n    }\r\n    @if (text.loadingSubtext) {\r\n      <div class=\"text sm text_center mar_top5 ent_r2l_txt\" style=\"user-select: none;text-align: center !important;\">\r\n        {{text.loadingSubtext}}\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n", styles: [".ptl_loader{height:2px;position:relative;overflow:hidden;width:100%}.ptl_loader__progress{background:linear-gradient(to right,rgba(0,0,0,0) 0%,var(--bg-purple-color) 33%,var(--bg-blue-color) 50%,var(--bg-green-color) 66%,rgba(0,0,0,0) 100%);position:absolute;bottom:0;top:0;width:100%;animation-duration:2s;animation-iteration-count:infinite;animation-name:ptl_loader}@keyframes ptl_loader{0%{left:-100%}to{left:100%}}.endpoint_fadein{animation:fadeInAnimation ease 1s;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes fadeInAnimation{0%{opacity:0}to{opacity:1}}.endpoint_shape{height:7px;width:7px;min-width:7px;min-height:7px;border-radius:7px}.endpoint_spin{animation:spin 3s linear infinite;opacity:1;z-index:var(--z-frame)}@keyframes spin{to{transform:rotate(360deg)}}.endpoint_spin_rev{animation:spin_rev 3s linear infinite;opacity:1;z-index:var(--z-frame)}@keyframes spin_rev{to{transform:rotate(-360deg)}}.bars_vertical{height:60px;width:60px;display:flex;align-items:center;justify-content:center}.bars_vertical .bar1,.bars_vertical .bar2,.bars_vertical .bar3,.bars_vertical .bar4,.bars_vertical .bar5{animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:alternate;transform-origin:center center;margin:0 5px}.bars_vertical .bar1{animation-name:bars_vertical_grow;animation-delay:.2s}.bars_vertical .bar2{animation-name:bars_vertical_grow;animation-delay:.4s}.bars_vertical .bar3{animation-name:bars_vertical_grow;animation-delay:.6s}.bars_vertical .bar4{animation-name:bars_vertical_grow;animation-delay:.8s}.bars_vertical .bar5{animation-name:bars_vertical_grow;animation-delay:1s}@keyframes bars_vertical_grow{0%{transform:scale(.2);opacity:0}to{transform:scale(2);opacity:1}}@keyframes fadein{0%{opacity:0}to{opacity:.5}}.one{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:0s;animation:dot 1.3s infinite;animation-delay:0s}.two{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:.2s;animation:dot 1.3s infinite;animation-delay:.2s}.three{opacity:0;-webkit-animation:dot 1.3s infinite;-webkit-animation-delay:.3s;animation:dot 1.3s infinite;animation-delay:.3s}@-webkit-keyframes dot{0%{opacity:0}50%{opacity:0}to{opacity:1}}@keyframes dot{0%{opacity:0}50%{opacity:0}to{opacity:1}}\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], disableText: [{