@entake/particle 17.0.2 → 18.0.0

package/esm2022/app/modules/endpoint-state/components/endpoint-state.component.mjs

@@ -47,10 +47,10 @@ export class EndpointStateComponent {
      * Component constructor
      */
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: EndpointStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: EndpointStateComponent, selector: "particle-endpoint-state", inputs: { loading: "loading", loadingIcon: "loadingIcon", empty: "empty", emptyIcon: "emptyIcon", error: "error", errorIcon: "errorIcon", loadingOverlay: "loadingOverlay", loadingOverlayIcon: "loadingOverlayIcon", text: "text" }, ngImport: i0, template: "<!-- loading -->\r\n<div class=\"row column center_center\" *ngIf=\"loading\">\r\n  <ng-container [ngSwitch]=\"loadingIcon\">\r\n    <!-- bars_bounce -->\r\n    <ng-container *ngSwitchCase=\"'double_helix'\">\r\n      <div class=\"center_center square_60px\">\r\n        <div class=\"endpoint_spin\" style=\"position: absolute\">\r\n          <div class=\"bars_vertical\">\r\n            <div class=\"col endpoint_shape header_color bar1\"></div>\r\n            <div class=\"col endpoint_shape header_color bar2\"></div>\r\n            <div class=\"col endpoint_shape header_color_light_7 bar3\"></div>\r\n            <div class=\"col endpoint_shape header_color bar4\"></div>\r\n            <div class=\"col endpoint_shape header_color bar5\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"endpoint_spin_rev\" style=\"position: absolute\">\r\n          <div class=\"bars_vertical\">\r\n            <div class=\"col endpoint_shape header_color bar5\"></div>\r\n            <div class=\"col endpoint_shape header_color bar4\"></div>\r\n            <div class=\"col endpoint_shape header_color_light_7 bar3\"></div>\r\n            <div class=\"col endpoint_shape header_color bar2\"></div>\r\n            <div class=\"col endpoint_shape header_color bar1\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"circle_30px ptl_brdr_color ptl_brdr_size\" style=\"position: absolute\"></div>\r\n      </div>\r\n      <div *ngIf=\"text.loadingText\" class=\"text md bold center mar_top15\" style=\"user-select: none\">{{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span></div>\r\n      <div *ngIf=\"text.loadingSubtext\" class=\"text sm center mar_top5\" style=\"user-select: none\">{{text.loadingSubtext}}</div>\r\n    </ng-container>\r\n\r\n\r\n    <ng-container *ngSwitchCase=\"'double_helix_old'\">\r\n      <div class=\"bars_vertical\">\r\n        <div class=\"col size_1 bg_overlay brdr bar1\"></div>\r\n        <div class=\"col size_1 bg_overlay brdr bar2\"></div>\r\n        <div class=\"col size_1 bg_overlay brdr bar3\"></div>\r\n        <div class=\"col size_1 bg_overlay brdr bar4\"></div>\r\n        <div class=\"col size_1 bg_overlay brdr bar5\"></div>\r\n      </div>\r\n      <div *ngIf=\"text.loadingText\" class=\"text md bold center mar_top5\">{{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span></div>\r\n      <div *ngIf=\"text.loadingSubtext\" class=\"text sm center mar_top5\">{{text.loadingSubtext}}</div>\r\n    </ng-container>\r\n\r\n    <div *ngSwitchDefault>\r\n      <i class=\"{{loadingIcon}} fa-fw fa-3x opac_80\"></i>\r\n      <div *ngIf=\"text.loadingText\" class=\"text md bold center mar_top5\">{{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span></div>\r\n      <div *ngIf=\"text.loadingSubtext\" class=\"text sm center mar_top5\">{{text.loadingSubtext}}</div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n<!-- loading overlay -->\r\n<ng-container *ngIf=\"loadingOverlay\">\r\n  <div id=\"overlay\">\r\n  </div>\r\n  <div class=\"row column center_center content_color brad_5 shadow min_w280\" style=\"padding:25px;\" id=\"spinner\">\r\n    <div class=\"bars_vertical\">\r\n      <div class=\"col size_1 bg_overlay brdr bar1\"></div>\r\n      <div class=\"col size_1 bg_overlay brdr bar2\"></div>\r\n      <div class=\"col size_1 bg_overlay brdr bar3\"></div>\r\n      <div class=\"col size_1 bg_overlay brdr bar4\"></div>\r\n    </div>\r\n    <div *ngIf=\"text.loadingOverlayText\" class=\"text xlg bold center\" style=\"margin-top:20px;\">{{text.loadingOverlayText}}</div>\r\n    <div *ngIf=\"text.loadingOverlaySubtext\" class=\"text md center mar_top5\">{{text.loadingOverlaySubtext}}</div>\r\n  </div>\r\n</ng-container>\r\n\r\n<!-- empty -->\r\n<div class=\"row_block\" *ngIf=\"empty\">\r\n  <div *ngIf=\"emptyIcon\" class=\"h_center\"><i class=\"{{emptyIcon}}\" style=\"opacity:0.8;\"></i></div>\r\n  <div *ngIf=\"text.emptyText\" class=\"text md bold center mar_top5\">{{text.emptyText}}</div>\r\n  <div *ngIf=\"text.emptySubtext\" class=\"text sm center mar_top5\">{{text.emptySubtext}}</div>\r\n</div>\r\n\r\n<!-- error -->\r\n<div class=\"row_block\" *ngIf=\"error\">\r\n  <div *ngIf=\"errorIcon\" class=\"h_center\"><i class=\"{{errorIcon}}\" style=\"opacity:0.8;\"></i></div>\r\n  <div *ngIf=\"text.errorText\" class=\"text md bold center mar_top5\">{{text.errorText}}</div>\r\n  <div *ngIf=\"text.errorSubtext\" class=\"text sm center mar_top5\">{{text.errorSubtext}}</div>\r\n</div>\r\n", styles: [".bars_vertical{height:50px;width:120px;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:.8s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:alternate;transform-origin:center center;margin:0 10px}.bars_vertical .bar1{animation-name:bars_vertical_grow;animation-delay:.2s;height:5px}.bars_vertical .bar2{animation-name:bars_vertical_grow;animation-delay:.4s;height:5px}.bars_vertical .bar3{animation-name:bars_vertical_grow;animation-delay:.6s;height:5px}.bars_vertical .bar4{animation-name:bars_vertical_grow;animation-delay:.8s;height:5px}.bars_vertical .bar5{animation-name:bars_vertical_grow;animation-delay:1s;height:5px}@keyframes bars_vertical_grow{0%{transform:scaleY(1)}to{transform:scaleY(3.3)}}#overlay{position:fixed;display:block;width:100%;height:100%;inset:0;z-index:var(--z-notification);animation:fadein .3s ease-in-out;background-color:#78787866}#spinner{position:fixed;top:50%;left:50%;font-size:64px;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);animation:fadein .3s ease-in-out;z-index:var(--z-notification)}@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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: EndpointStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: EndpointStateComponent, selector: "particle-endpoint-state", inputs: { loading: "loading", loadingIcon: "loadingIcon", empty: "empty", emptyIcon: "emptyIcon", error: "error", errorIcon: "errorIcon", loadingOverlay: "loadingOverlay", loadingOverlayIcon: "loadingOverlayIcon", text: "text" }, ngImport: i0, template: "<!-- loading -->\r\n<div class=\"row column center_center\" *ngIf=\"loading\">\r\n  <ng-container [ngSwitch]=\"loadingIcon\">\r\n    <!-- bars_bounce -->\r\n    <ng-container *ngSwitchCase=\"'double_helix'\">\r\n      <div class=\"center_center square_60px\">\r\n        <div class=\"endpoint_spin\" style=\"position: absolute\">\r\n          <div class=\"bars_vertical\">\r\n            <div class=\"col endpoint_shape header_color bar1\"></div>\r\n            <div class=\"col endpoint_shape header_color bar2\"></div>\r\n            <div class=\"col endpoint_shape header_color_light_7 bar3\"></div>\r\n            <div class=\"col endpoint_shape header_color bar4\"></div>\r\n            <div class=\"col endpoint_shape header_color bar5\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"endpoint_spin_rev\" style=\"position: absolute\">\r\n          <div class=\"bars_vertical\">\r\n            <div class=\"col endpoint_shape header_color bar5\"></div>\r\n            <div class=\"col endpoint_shape header_color bar4\"></div>\r\n            <div class=\"col endpoint_shape header_color_light_7 bar3\"></div>\r\n            <div class=\"col endpoint_shape header_color bar2\"></div>\r\n            <div class=\"col endpoint_shape header_color bar1\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"circle_30px ptl_brdr_color ptl_brdr_size\" style=\"position: absolute\"></div>\r\n      </div>\r\n      <div *ngIf=\"text.loadingText\" class=\"text md bold center mar_top15\" style=\"user-select: none\">{{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span></div>\r\n      <div *ngIf=\"text.loadingSubtext\" class=\"text sm center mar_top5\" style=\"user-select: none\">{{text.loadingSubtext}}</div>\r\n    </ng-container>\r\n\r\n\r\n    <ng-container *ngSwitchCase=\"'double_helix_old'\">\r\n      <div class=\"bars_vertical\">\r\n        <div class=\"col size_1 bg_overlay brdr bar1\"></div>\r\n        <div class=\"col size_1 bg_overlay brdr bar2\"></div>\r\n        <div class=\"col size_1 bg_overlay brdr bar3\"></div>\r\n        <div class=\"col size_1 bg_overlay brdr bar4\"></div>\r\n        <div class=\"col size_1 bg_overlay brdr bar5\"></div>\r\n      </div>\r\n      <div *ngIf=\"text.loadingText\" class=\"text md bold center mar_top5\">{{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span></div>\r\n      <div *ngIf=\"text.loadingSubtext\" class=\"text sm center mar_top5\">{{text.loadingSubtext}}</div>\r\n    </ng-container>\r\n\r\n    <div *ngSwitchDefault>\r\n      <i class=\"{{loadingIcon}} fa-fw fa-3x opac_80\"></i>\r\n      <div *ngIf=\"text.loadingText\" class=\"text md bold center mar_top5\">{{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span></div>\r\n      <div *ngIf=\"text.loadingSubtext\" class=\"text sm center mar_top5\">{{text.loadingSubtext}}</div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n<!-- loading overlay -->\r\n<ng-container *ngIf=\"loadingOverlay\">\r\n  <div id=\"overlay\">\r\n  </div>\r\n  <div class=\"row column center_center content_color brad_5 shadow min_w280\" style=\"padding:25px;\" id=\"spinner\">\r\n    <div class=\"bars_vertical\">\r\n      <div class=\"col size_1 bg_overlay brdr bar1\"></div>\r\n      <div class=\"col size_1 bg_overlay brdr bar2\"></div>\r\n      <div class=\"col size_1 bg_overlay brdr bar3\"></div>\r\n      <div class=\"col size_1 bg_overlay brdr bar4\"></div>\r\n    </div>\r\n    <div *ngIf=\"text.loadingOverlayText\" class=\"text xlg bold center\" style=\"margin-top:20px;\">{{text.loadingOverlayText}}</div>\r\n    <div *ngIf=\"text.loadingOverlaySubtext\" class=\"text md center mar_top5\">{{text.loadingOverlaySubtext}}</div>\r\n  </div>\r\n</ng-container>\r\n\r\n<!-- empty -->\r\n<div class=\"row_block\" *ngIf=\"empty\">\r\n  <div *ngIf=\"emptyIcon\" class=\"h_center\"><i class=\"{{emptyIcon}}\" style=\"opacity:0.8;\"></i></div>\r\n  <div *ngIf=\"text.emptyText\" class=\"text md bold center mar_top5\">{{text.emptyText}}</div>\r\n  <div *ngIf=\"text.emptySubtext\" class=\"text sm center mar_top5\">{{text.emptySubtext}}</div>\r\n</div>\r\n\r\n<!-- error -->\r\n<div class=\"row_block\" *ngIf=\"error\">\r\n  <div *ngIf=\"errorIcon\" class=\"h_center\"><i class=\"{{errorIcon}}\" style=\"opacity:0.8;\"></i></div>\r\n  <div *ngIf=\"text.errorText\" class=\"text md bold center mar_top5\">{{text.errorText}}</div>\r\n  <div *ngIf=\"text.errorSubtext\" class=\"text sm center mar_top5\">{{text.errorSubtext}}</div>\r\n</div>\r\n", styles: [".bars_vertical{height:50px;width:120px;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:.8s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:alternate;transform-origin:center center;margin:0 10px}.bars_vertical .bar1{animation-name:bars_vertical_grow;animation-delay:.2s;height:5px}.bars_vertical .bar2{animation-name:bars_vertical_grow;animation-delay:.4s;height:5px}.bars_vertical .bar3{animation-name:bars_vertical_grow;animation-delay:.6s;height:5px}.bars_vertical .bar4{animation-name:bars_vertical_grow;animation-delay:.8s;height:5px}.bars_vertical .bar5{animation-name:bars_vertical_grow;animation-delay:1s;height:5px}@keyframes bars_vertical_grow{0%{transform:scaleY(1)}to{transform:scaleY(3.3)}}#overlay{position:fixed;display:block;width:100%;height:100%;inset:0;z-index:var(--z-notification);animation:fadein .3s ease-in-out;background-color:#78787866}#spinner{position:fixed;top:50%;left:50%;font-size:64px;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);animation:fadein .3s ease-in-out;z-index:var(--z-notification)}@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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: EndpointStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: EndpointStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-endpoint-state', template: "<!-- loading -->\r\n<div class=\"row column center_center\" *ngIf=\"loading\">\r\n  <ng-container [ngSwitch]=\"loadingIcon\">\r\n    <!-- bars_bounce -->\r\n    <ng-container *ngSwitchCase=\"'double_helix'\">\r\n      <div class=\"center_center square_60px\">\r\n        <div class=\"endpoint_spin\" style=\"position: absolute\">\r\n          <div class=\"bars_vertical\">\r\n            <div class=\"col endpoint_shape header_color bar1\"></div>\r\n            <div class=\"col endpoint_shape header_color bar2\"></div>\r\n            <div class=\"col endpoint_shape header_color_light_7 bar3\"></div>\r\n            <div class=\"col endpoint_shape header_color bar4\"></div>\r\n            <div class=\"col endpoint_shape header_color bar5\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"endpoint_spin_rev\" style=\"position: absolute\">\r\n          <div class=\"bars_vertical\">\r\n            <div class=\"col endpoint_shape header_color bar5\"></div>\r\n            <div class=\"col endpoint_shape header_color bar4\"></div>\r\n            <div class=\"col endpoint_shape header_color_light_7 bar3\"></div>\r\n            <div class=\"col endpoint_shape header_color bar2\"></div>\r\n            <div class=\"col endpoint_shape header_color bar1\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"circle_30px ptl_brdr_color ptl_brdr_size\" style=\"position: absolute\"></div>\r\n      </div>\r\n      <div *ngIf=\"text.loadingText\" class=\"text md bold center mar_top15\" style=\"user-select: none\">{{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span></div>\r\n      <div *ngIf=\"text.loadingSubtext\" class=\"text sm center mar_top5\" style=\"user-select: none\">{{text.loadingSubtext}}</div>\r\n    </ng-container>\r\n\r\n\r\n    <ng-container *ngSwitchCase=\"'double_helix_old'\">\r\n      <div class=\"bars_vertical\">\r\n        <div class=\"col size_1 bg_overlay brdr bar1\"></div>\r\n        <div class=\"col size_1 bg_overlay brdr bar2\"></div>\r\n        <div class=\"col size_1 bg_overlay brdr bar3\"></div>\r\n        <div class=\"col size_1 bg_overlay brdr bar4\"></div>\r\n        <div class=\"col size_1 bg_overlay brdr bar5\"></div>\r\n      </div>\r\n      <div *ngIf=\"text.loadingText\" class=\"text md bold center mar_top5\">{{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span></div>\r\n      <div *ngIf=\"text.loadingSubtext\" class=\"text sm center mar_top5\">{{text.loadingSubtext}}</div>\r\n    </ng-container>\r\n\r\n    <div *ngSwitchDefault>\r\n      <i class=\"{{loadingIcon}} fa-fw fa-3x opac_80\"></i>\r\n      <div *ngIf=\"text.loadingText\" class=\"text md bold center mar_top5\">{{text.loadingText}}<span class=\"one\">.</span><span class=\"two\">.</span><span class=\"three\">.</span></div>\r\n      <div *ngIf=\"text.loadingSubtext\" class=\"text sm center mar_top5\">{{text.loadingSubtext}}</div>\r\n    </div>\r\n  </ng-container>\r\n</div>\r\n\r\n<!-- loading overlay -->\r\n<ng-container *ngIf=\"loadingOverlay\">\r\n  <div id=\"overlay\">\r\n  </div>\r\n  <div class=\"row column center_center content_color brad_5 shadow min_w280\" style=\"padding:25px;\" id=\"spinner\">\r\n    <div class=\"bars_vertical\">\r\n      <div class=\"col size_1 bg_overlay brdr bar1\"></div>\r\n      <div class=\"col size_1 bg_overlay brdr bar2\"></div>\r\n      <div class=\"col size_1 bg_overlay brdr bar3\"></div>\r\n      <div class=\"col size_1 bg_overlay brdr bar4\"></div>\r\n    </div>\r\n    <div *ngIf=\"text.loadingOverlayText\" class=\"text xlg bold center\" style=\"margin-top:20px;\">{{text.loadingOverlayText}}</div>\r\n    <div *ngIf=\"text.loadingOverlaySubtext\" class=\"text md center mar_top5\">{{text.loadingOverlaySubtext}}</div>\r\n  </div>\r\n</ng-container>\r\n\r\n<!-- empty -->\r\n<div class=\"row_block\" *ngIf=\"empty\">\r\n  <div *ngIf=\"emptyIcon\" class=\"h_center\"><i class=\"{{emptyIcon}}\" style=\"opacity:0.8;\"></i></div>\r\n  <div *ngIf=\"text.emptyText\" class=\"text md bold center mar_top5\">{{text.emptyText}}</div>\r\n  <div *ngIf=\"text.emptySubtext\" class=\"text sm center mar_top5\">{{text.emptySubtext}}</div>\r\n</div>\r\n\r\n<!-- error -->\r\n<div class=\"row_block\" *ngIf=\"error\">\r\n  <div *ngIf=\"errorIcon\" class=\"h_center\"><i class=\"{{errorIcon}}\" style=\"opacity:0.8;\"></i></div>\r\n  <div *ngIf=\"text.errorText\" class=\"text md bold center mar_top5\">{{text.errorText}}</div>\r\n  <div *ngIf=\"text.errorSubtext\" class=\"text sm center mar_top5\">{{text.errorSubtext}}</div>\r\n</div>\r\n", styles: [".bars_vertical{height:50px;width:120px;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:.8s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-direction:alternate;transform-origin:center center;margin:0 10px}.bars_vertical .bar1{animation-name:bars_vertical_grow;animation-delay:.2s;height:5px}.bars_vertical .bar2{animation-name:bars_vertical_grow;animation-delay:.4s;height:5px}.bars_vertical .bar3{animation-name:bars_vertical_grow;animation-delay:.6s;height:5px}.bars_vertical .bar4{animation-name:bars_vertical_grow;animation-delay:.8s;height:5px}.bars_vertical .bar5{animation-name:bars_vertical_grow;animation-delay:1s;height:5px}@keyframes bars_vertical_grow{0%{transform:scaleY(1)}to{transform:scaleY(3.3)}}#overlay{position:fixed;display:block;width:100%;height:100%;inset:0;z-index:var(--z-notification);animation:fadein .3s ease-in-out;background-color:#78787866}#spinner{position:fixed;top:50%;left:50%;font-size:64px;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);animation:fadein .3s ease-in-out;z-index:var(--z-notification)}@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"] }]
         }], ctorParameters: () => [], propDecorators: { loading: [{

package/esm2022/app/modules/endpoint-state/endpoint-state.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { EndpointStateComponent } from './components/endpoint-state.component';
 import * as i0 from "@angular/core";
 export class ParticleEndpointStateModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleEndpointStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: ParticleEndpointStateModule, declarations: [EndpointStateComponent], imports: [CommonModule], exports: [EndpointStateComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleEndpointStateModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleEndpointStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: ParticleEndpointStateModule, declarations: [EndpointStateComponent], imports: [CommonModule], exports: [EndpointStateComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleEndpointStateModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleEndpointStateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleEndpointStateModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [EndpointStateComponent],

package/esm2022/app/modules/icons/components/icon-select.component.mjs

@@ -336,8 +336,8 @@ export class IconSelectComponent {
         this._searchClick.next('');
         this._activePage.next(0);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: IconSelectComponent, deps: [{ token: i1.IconsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: IconSelectComponent, selector: "particle-icon-select", inputs: { value: "value", disabled: "disabled", buttonColorClass: "buttonColorClass", buttonSizing: "buttonSizing", text: "text" }, outputs: { opened: "opened", selected: "selected", closed: "closed" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IconSelectComponent, deps: [{ token: i1.IconsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: IconSelectComponent, selector: "particle-icon-select", inputs: { value: "value", disabled: "disabled", buttonColorClass: "buttonColorClass", buttonSizing: "buttonSizing", text: "text" }, outputs: { opened: "opened", selected: "selected", closed: "closed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => IconSelectComponent),
@@ -345,7 +345,7 @@ export class IconSelectComponent {
             }
         ], viewQueries: [{ propertyName: "iconScrollContainer", first: true, predicate: ["iconScrollContainer"], descendants: true }], ngImport: i0, template: "<!-- choose button -->\r\n<button [ngClass]=\"buttonColorClass ? buttonColorClass : 'content_color'\"\r\n        [ngStyle]=\"{\r\n                     'width': buttonSizing,\r\n                     'min-width': buttonSizing,\r\n                     'height': buttonSizing,\r\n                     'min-height': buttonSizing\r\n                   }\"\r\n        (click)=\"openDialog()\"\r\n        [particleTooltip]=\"(_internalValue | async)?.prefix + ' ' + (_internalValue | async)?.name\"\r\n        [tooltipDisabled]=\"(_internalValue | async) === undefined\"\r\n        [disabled]=\"disabled\"\r\n        class=\"access wis_button bg_overlay brdr brad_3\"\r\n        [attr.aria-label]=\"text.selectAnIcon\">\r\n  <ng-container *ngIf=\"!showDialog else placeholderIcon\">\r\n    <div *ngIf=\"_internalValue | async as selectedIcon else noSelection\">\r\n      <i class=\"{{selectedIcon.prefix}} {{selectedIcon.name}} wis_icon\"></i>\r\n    </div>\r\n    <ng-template #noSelection>\r\n      <div><i class=\"fas fa-icons opacity_20\"></i></div>\r\n    </ng-template>\r\n  </ng-container>\r\n  <ng-template #placeholderIcon>\r\n    <div><i class=\"fas fa-spinner fa-spin\"></i></div>\r\n  </ng-template>\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          <ng-container *ngIf=\"_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                    <div *ngIf=\"filter.type === 'all' && filter.style === 'all'\" class=\"circle_8px ok_button_color\"></div>\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                      <div *ngIf=\"filter.type === 'fontawesome' && filter.style === 'all'\" class=\"circle_8px ok_button_color\"></div>\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                      <div *ngIf=\"filter.type === 'fontawesome' &&  filter.style === 'solid'\" class=\"circle_8px ok_button_color\"></div>\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                      <div *ngIf=\"filter.type === 'fontawesome' &&  filter.style === 'regular'\" class=\"circle_8px ok_button_color\"></div>\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                      <div *ngIf=\"filter.type === 'fontawesome' &&  filter.style === 'brands'\" class=\"circle_8px ok_button_color\"></div>\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                      <div *ngIf=\"filter.type === 'particle' && filter.style === 'all'\" class=\"circle_8px ok_button_color\"></div>\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                      <div *ngIf=\"filter.type === 'particle' && filter.style === 'solid'\" class=\"circle_8px ok_button_color\"></div>\r\n                    </div>\r\n                    <div class=\"text md\">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                      <div *ngIf=\"filter.type === 'particle' && filter.style === 'regular'\" class=\"circle_8px ok_button_color\"></div>\r\n                    </div>\r\n                    <div class=\"text md\">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: 'light', type: 'particle' })\"\r\n                        [ngClass]=\"{ 'selected': filter.type === 'particle' && filter.style === 'light' }\"\r\n                        class=\"access list_btn row space_between wis_filter_btn bg_overlay_rev brdr\"\r\n                        [attr.aria-label]=\"text.filterBy + ' ' + text.light + ' ' + text.customIcons\">\r\n                  <div class=\"v_center\">\r\n                    <div class=\"circle_16px bg_overlay_rev brdr mar_right10\">\r\n                      <div *ngIf=\"filter.type === 'particle' && filter.style === 'light'\" class=\"circle_8px ok_button_color\"></div>\r\n                    </div>\r\n                    <div class=\"text md\">{{text.light}}</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          </ng-container>\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          <div *ngIf=\"totalPages$ | async as totalPages\"\r\n               class=\"col v_center mar_10\">\r\n            <button *ngIf=\"canPaginatePrevious$ | async else disabledPreviousButton\"\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            <ng-template #disabledPreviousButton>\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            </ng-template>\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            <button *ngIf=\"canPaginateNext$ | async else disabledNextButton\"\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            <ng-template #disabledNextButton>\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            </ng-template>\r\n          </div>\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            <button *ngIf=\"(canSearch$ | async) && (_searchClick | async)\"\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            <button *ngIf=\"canSearch$ | async else disabledSearchButton\"\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            <ng-template #disabledSearchButton>\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            </ng-template>\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          <ng-container *ngIf=\"paginatedIcons$ | async as icons else noResults\">\r\n            <div class=\"row wrap top_left\" style=\"align-items:stretch;\">\r\n              <ng-container *ngFor=\"let icon of paginatedIcons$ | async\">\r\n                <div class=\"col size_1 min_w75 mar_5\">\r\n                  <button class=\"access wis_icon_btn\" (click)=\"handleIconSelect(icon)\" [attr.aria-label]=\"text.select + ' ' + icon.name\">\r\n                    <div [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              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n          <ng-template #noResults>\r\n            <div class=\"row column min_h300 center_center\">\r\n              <particle-endpoint-state\r\n                [empty]=\"true\"\r\n                [emptyIcon]=\"'fas fa-search fa-3x mar_bot5'\"\r\n                [text]=\"{emptyText: text.couldntFindAnything, emptySubtext: text.modifySearchCriteria}\">\r\n              </particle-endpoint-state>\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          </ng-template>\r\n        </div>\r\n        <div *ngIf=\"_internalValue | async as selectedIcon\"\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            <div class=\"v_center\" *ngIf=\"showIconSelectionPreview\">\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          </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      </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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.TooltipDirective, selector: "[particleTooltip]", inputs: ["particleTooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "component", type: i5.DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }, { kind: "component", type: i6.EndpointStateComponent, selector: "particle-endpoint-state", inputs: ["loading", "loadingIcon", "empty", "emptyIcon", "error", "errorIcon", "loadingOverlay", "loadingOverlayIcon", "text"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: IconSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IconSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-icon-select', providers: [
                         {

package/esm2022/app/modules/icons/particle-icons.module.mjs

@@ -29,21 +29,21 @@ export class ParticleIconsModule {
             FontAwesome.library.add(icon);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: ParticleIconsModule, declarations: [IconSelectComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleIconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: ParticleIconsModule, declarations: [IconSelectComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             ParticleTooltipModule,
             ParticleDialogModule,
             ParticleEndpointStateModule], exports: [IconSelectComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleIconsModule, providers: [IconsService], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleIconsModule, providers: [IconsService], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             ParticleTooltipModule,
             ParticleDialogModule,
             ParticleEndpointStateModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleIconsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleIconsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2022/app/modules/icons/services/icons.service.mjs

@@ -77,10 +77,10 @@ export class IconsService {
         }
         return icons;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: IconsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: IconsService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IconsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IconsService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: IconsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IconsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbnMuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9hcHAvbW9kdWxlcy9pY29ucy9zZXJ2aWNlcy9pY29ucy5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0MsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDbEYsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFDcEYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFDaEYsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDMUUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDOUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sc0NBQXNDLENBQUM7O0FBWTFFOztHQUVHO0FBRUgsTUFBTSxPQUFPLFlBQVk7SUFFdkI7Ozs7T0FJRztJQUNLLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxNQUFtQztRQUNwRSxNQUFNLEtBQUssR0FBNEMsRUFBRSxDQUFDO1FBRTFELElBQUksTUFBTSxLQUFLLEtBQUssSUFBSSxNQUFNLEtBQUssT0FBTyxFQUFFLENBQUM7WUFDM0MsS0FBSyxDQUFDLElBQUksQ0FBQyxHQUFHLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQUUsTUFBTSxFQUFFLHFCQUFxQixDQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDakgsQ0FBQztRQUVELElBQUksTUFBTSxLQUFLLEtBQUssSUFBSSxNQUFNLEtBQUssU0FBUyxFQUFFLENBQUM7WUFDN0MsS0FBSyxDQUFDLElBQUksQ0FBQyxHQUFHLHVCQUF1QixDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQUUsTUFBTSxFQUFFLHVCQUF1QixDQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDckgsQ0FBQztRQUVELElBQUksTUFBTSxLQUFLLEtBQUssSUFBSSxNQUFNLEtBQUssUUFBUSxFQUFFLENBQUM7WUFDNUMsS0FBSyxDQUFDLElBQUksQ0FBQyxHQUFHLHNCQUFzQixDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDLEVBQUUsTUFBTSxFQUFFLHNCQUFzQixDQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDbkgsQ0FBQztRQUVELE9BQU8sS0FBSyxDQUFDO0lBQ2YsQ0FBQztJQUVEOzs7O09BSUc7SUFDSyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsTUFBZ0M7UUFDOUQsTUFBTSxLQUFLLEdBQTRDLEVBQUUsQ0FBQztRQUUxRCxJQUFJLE1BQU0sS0FBSyxLQUFLLElBQUksTUFBTSxLQUFLLE9BQU8sRUFBRSxDQUFDO1lBQzNDLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxrQkFBa0IsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxFQUFFLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksRUFBRSxNQUFNLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQzlHLENBQUM7UUFFRCxJQUFJLE1BQU0sS0FBSyxLQUFLLElBQUksTUFBTSxLQUFLLFNBQVMsRUFBRSxDQUFDO1lBQzdDLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxvQkFBb0IsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxFQUFFLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksRUFBRSxNQUFNLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ2hILENBQUM7UUFFRCxJQUFJLE1BQU0sS0FBSyxLQUFLLElBQUksTUFBTSxLQUFLLE9BQU8sRUFBRSxDQUFDO1lBQzNDLEtBQUssQ0FBQyxJQUFJLENBQUMsR0FBRyxrQkFBa0IsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyxFQUFFLE1BQU0sRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksRUFBRSxNQUFNLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQzlHLENBQUM7UUFFRCxPQUFPLEtBQUssQ0FBQztJQUNmLENBQUM7SUFFRDs7T0FFRztJQUNILGdCQUFnQixDQUFDO0lBRWpCOzs7Ozs7T0FNRztJQUNILFFBQVEsQ0FDTixRQUE0QyxFQUM1QyxNQUE4RCxFQUM5RCxVQUFVLEdBQUcsRUFBRTtRQUVmLElBQUksS0FBSyxHQUE0QyxFQUFFLENBQUM7UUFFeEQsSUFBSSxRQUFRLEtBQUssS0FBSyxJQUFJLFFBQVEsS0FBSyxVQUFVLEVBQUUsQ0FBQztZQUNsRCxNQUFNLGFBQWEsR0FBRyxZQUFZLENBQUMsZ0JBQWdCLENBQUMsTUFBa0MsQ0FBQyxDQUFDO1lBRXhGLElBQUksYUFBYSxDQUFDLE1BQU0sRUFBRSxDQUFDO2dCQUN6QixLQUFLLENBQUMsSUFBSSxDQUFDLEdBQUcsYUFBYSxDQUFDLENBQUM7WUFDL0IsQ0FBQztRQUNILENBQUM7UUFFRCxJQUFJLFFBQVEsS0FBSyxLQUFLLElBQUksUUFBUSxLQUFLLGFBQWEsRUFBRSxDQUFDO1lBQ3JELE1BQU0sZ0JBQWdCLEdBQUcsWUFBWSxDQUFDLG1CQUFtQixDQUFDLE1BQXFDLENBQUMsQ0FBQztZQUVqRyxJQUFJLGdCQUFnQixDQUFDLE1BQU0sRUFBRSxDQUFDO2dCQUM1QixLQUFLLENBQUMsSUFBSSxDQUFDLEdBQUcsZ0JBQWdCLENBQUMsQ0FBQztZQUNsQyxDQUFDO1FBQ0gsQ0FBQztRQUVELE1BQU0saUJBQWlCLEdBQUcsVUFBVSxDQUFDLElBQUksRUFBRSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQzFELElBQUksaUJBQWlCLEVBQUUsQ0FBQztZQUN0QixLQUFLLEdBQUcsS0FBSyxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLGlCQUFpQixDQUFDLENBQUMsQ0FBQztRQUN0RSxDQUFDO1FBRUQsT0FBTyxLQUFLLENBQUM7SUFDZixDQUFDO3VHQXpGVSxZQUFZOzJHQUFaLFlBQVk7OzJGQUFaLFlBQVk7a0JBRHhCLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBGb250YXdlc29tZUljb25zQnJhbmRzIH0gZnJvbSAnLi4vbW9kZWxzL2ZvbnRhd2Vzb21lLWljb25zLWJyYW5kcy5tb2RlbCc7XG5pbXBvcnQgeyBGb250YXdlc29tZUljb25zUmVndWxhciB9IGZyb20gJy4uL21vZGVscy9mb250YXdlc29tZS1pY29ucy1yZWd1bGFyLm1vZGVsJztcbmltcG9ydCB7IEZvbnRhd2Vzb21lSWNvbnNTb2xpZCB9IGZyb20gJy4uL21vZGVscy9mb250YXdlc29tZS1pY29ucy1zb2xpZC5tb2RlbCc7XG5pbXBvcnQgeyBQYXJ0aWNsZUljb25zTGlnaHQgfSBmcm9tICcuLi9tb2RlbHMvcGFydGljbGUtaWNvbnMtbGlnaHQubW9kZWwnO1xuaW1wb3J0IHsgUGFydGljbGVJY29uc1JlZ3VsYXIgfSBmcm9tICcuLi9tb2RlbHMvcGFydGljbGUtaWNvbnMtcmVndWxhci5tb2RlbCc7XG5pbXBvcnQgeyBQYXJ0aWNsZUljb25zU29saWQgfSBmcm9tICcuLi9tb2RlbHMvcGFydGljbGUtaWNvbnMtc29saWQubW9kZWwnO1xuXG4vKipcbiAqIFR5cGUgcmVwcmVzZW50aW5nIHRoZSBhdmFpbGFibGUgUGFydGljbGUgaWNvbiBmaWx0ZXIgb3B0aW9uc1xuICovXG5kZWNsYXJlIHR5cGUgUGFydGljbGVJY29uRmlsdGVyT3B0aW9uID0gJ2FsbCcgfCAnc29saWQnIHwgJ3JlZ3VsYXInIHwgJ2xpZ2h0JztcblxuLyoqXG4gKiBUeXBlIHJlcHJlc2VudGluZyB0aGUgYXZhaWxhYmxlIEZvbnRhd2Vzb21lIGljb24gZmlsdGVyIG9wdGlvbnNcbiAqL1xuZGVjbGFyZSB0eXBlIEZvbnRhd2Vzb21lSWNvbkZpbHRlck9wdGlvbiA9ICdhbGwnIHwgJ3NvbGlkJyB8ICdyZWd1bGFyJyB8ICdicmFuZHMnO1xuXG4vKipcbiAqIFNlcnZpY2UgZm9yIGZpbHRlcmluZyBQYXJ0aWNsZS9Gb250YXdlc29tZSBpY29uc1xuICovXG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgSWNvbnNTZXJ2aWNlIHtcblxuICAvKipcbiAgICogR2V0IEZvbnRhd2Vzb21lIGljb25zIGZpbHRlcmVkIGJ5IGljb24gdHlwZVxuICAgKiBAcGFyYW0gZmlsdGVyIHRoZSBpY29uIHR5cGUgdG8gZmlsdGVyIGJ5XG4gICAqIEBwcml2YXRlXG4gICAqL1xuICBwcml2YXRlIHN0YXRpYyBnZXRGb250YXdlc29tZUljb25zKGZpbHRlcjogRm9udGF3ZXNvbWVJY29uRmlsdGVyT3B0aW9uKTogQXJyYXk8eyBwcmVmaXg6IHN0cmluZywgbmFtZTogc3RyaW5nIH0+IHtcbiAgICBjb25zdCBpY29uczogQXJyYXk8eyBwcmVmaXg6IHN0cmluZywgbmFtZTogc3RyaW5nIH0+ID0gW107XG5cbiAgICBpZiAoZmlsdGVyID09PSAnYWxsJyB8fCBmaWx0ZXIgPT09ICdzb2xpZCcpIHtcbiAgICAgIGljb25zLnB1c2goLi4uRm9udGF3ZXNvbWVJY29uc1NvbGlkLklDT05TLm1hcChpY29uID0+ICh7IHByZWZpeDogRm9udGF3ZXNvbWVJY29uc1NvbGlkLlBSRUZJWCwgbmFtZTogaWNvbiB9KSkpO1xuICAgIH1cblxuICAgIGlmIChmaWx0ZXIgPT09ICdhbGwnIHx8IGZpbHRlciA9PT0gJ3JlZ3VsYXInKSB7XG4gICAgICBpY29ucy5wdXNoKC4uLkZvbnRhd2Vzb21lSWNvbnNSZWd1bGFyLklDT05TLm1hcChpY29uID0+ICh7IHByZWZpeDogRm9udGF3ZXNvbWVJY29uc1JlZ3VsYXIuUFJFRklYLCBuYW1lOiBpY29uIH0pKSk7XG4gICAgfVxuXG4gICAgaWYgKGZpbHRlciA9PT0gJ2FsbCcgfHwgZmlsdGVyID09PSAnYnJhbmRzJykge1xuICAgICAgaWNvbnMucHVzaCguLi5Gb250YXdlc29tZUljb25zQnJhbmRzLklDT05TLm1hcChpY29uID0+ICh7IHByZWZpeDogRm9udGF3ZXNvbWVJY29uc0JyYW5kcy5QUkVGSVgsIG5hbWU6IGljb24gfSkpKTtcbiAgICB9XG5cbiAgICByZXR1cm4gaWNvbnM7XG4gIH1cblxuICAvKipcbiAgICogR2V0IFBhcnRpY2xlIGljb25zIGZpbHRlcmVkIGJ5IGljb24gdHlwZVxuICAgKiBAcGFyYW0gZmlsdGVyIHRoZSBpY29uIHR5cGUgdG8gZmlsdGVyIGJ5XG4gICAqIEBwcml2YXRlXG4gICAqL1xuICBwcml2YXRlIHN0YXRpYyBnZXRQYXJ0aWNsZUljb25zKGZpbHRlcjogUGFydGljbGVJY29uRmlsdGVyT3B0aW9uKTogQXJyYXk8eyBwcmVmaXg6IHN0cmluZywgbmFtZTogc3RyaW5nIH0+IHtcbiAgICBjb25zdCBpY29uczogQXJyYXk8eyBwcmVmaXg6IHN0cmluZywgbmFtZTogc3RyaW5nIH0+ID0gW107XG5cbiAgICBpZiAoZmlsdGVyID09PSAnYWxsJyB8fCBmaWx0ZXIgPT09ICdzb2xpZCcpIHtcbiAgICAgIGljb25zLnB1c2goLi4uUGFydGljbGVJY29uc1NvbGlkLmljb25zLm1hcChpY29uID0+ICh7IHByZWZpeDogaWNvbi5wcmVmaXgsIG5hbWU6IGBmYS0ke2ljb24uaWNvbk5hbWV9YCB9KSkpO1xuICAgIH1cblxuICAgIGlmIChmaWx0ZXIgPT09ICdhbGwnIHx8IGZpbHRlciA9PT0gJ3JlZ3VsYXInKSB7XG4gICAgICBpY29ucy5wdXNoKC4uLlBhcnRpY2xlSWNvbnNSZWd1bGFyLmljb25zLm1hcChpY29uID0+ICh7IHByZWZpeDogaWNvbi5wcmVmaXgsIG5hbWU6IGBmYS0ke2ljb24uaWNvbk5hbWV9YCB9KSkpO1xuICAgIH1cblxuICAgIGlmIChmaWx0ZXIgPT09ICdhbGwnIHx8IGZpbHRlciA9PT0gJ2xpZ2h0Jykge1xuICAgICAgaWNvbnMucHVzaCguLi5QYXJ0aWNsZUljb25zTGlnaHQuaWNvbnMubWFwKGljb24gPT4gKHsgcHJlZml4OiBpY29uLnByZWZpeCwgbmFtZTogYGZhLSR7aWNvbi5pY29uTmFtZX1gIH0pKSk7XG4gICAgfVxuXG4gICAgcmV0dXJuIGljb25zO1xuICB9XG5cbiAgLyoqXG4gICAqIENvbnN0cnVjdG9yXG4gICAqL1xuICBjb25zdHJ1Y3RvcigpIHsgfVxuXG4gIC8qKlxuICAgKiBHZXQgYSBsaXN0IG9mIGljb25zIChhcyBzdHJpbmdzKSBjb250YWluaW5nIGJvdGggUGFydGljbGUgaWNvbnNcbiAgICogYW5kIEZvbnRhd2Vzb21lIGljb25zIHRoYXQgbWF0Y2ggdGhlaXIgcmVzcGVjdGl2ZSBmaWx0ZXIgY3JpdGVyaWFcbiAgICogQHBhcmFtIGljb25UeXBlIHRoZSB0eXBlIG9mIGljb24sIG9yIGFsbCBpY29uc1xuICAgKiBAcGFyYW0gZmlsdGVyIHRoZSBpY29uIHN0eWxpbmcgdG8gZmlsdGVyIGJ5XG4gICAqIEBwYXJhbSBzZWFyY2hUZXh0IHRoZSBzZWFyY2ggdGV4dCB0byBmaWx0ZXIgaWNvbnMgYnlcbiAgICovXG4gIGdldEljb25zKFxuICAgIGljb25UeXBlOiAnYWxsJyB8ICdwYXJ0aWNsZScgfCAnZm9udGF3ZXNvbWUnLFxuICAgIGZpbHRlcjogUGFydGljbGVJY29uRmlsdGVyT3B0aW9uIHwgRm9udGF3ZXNvbWVJY29uRmlsdGVyT3B0aW9uLFxuICAgIHNlYXJjaFRleHQgPSAnJ1xuICApOiBBcnJheTx7IHByZWZpeDogc3RyaW5nLCBuYW1lOiBzdHJpbmcgfT4ge1xuICAgIGxldCBpY29uczogQXJyYXk8eyBwcmVmaXg6IHN0cmluZywgbmFtZTogc3RyaW5nIH0+ID0gW107XG5cbiAgICBpZiAoaWNvblR5cGUgPT09ICdhbGwnIHx8IGljb25UeXBlID09PSAncGFydGljbGUnKSB7XG4gICAgICBjb25zdCBwYXJ0aWNsZUljb25zID0gSWNvbnNTZXJ2aWNlLmdldFBhcnRpY2xlSWNvbnMoZmlsdGVyIGFzIFBhcnRpY2xlSWNvbkZpbHRlck9wdGlvbik7XG5cbiAgICAgIGlmIChwYXJ0aWNsZUljb25zLmxlbmd0aCkge1xuICAgICAgICBpY29ucy5wdXNoKC4uLnBhcnRpY2xlSWNvbnMpO1xuICAgICAgfVxuICAgIH1cblxuICAgIGlmIChpY29uVHlwZSA9PT0gJ2FsbCcgfHwgaWNvblR5cGUgPT09ICdmb250YXdlc29tZScpIHtcbiAgICAgIGNvbnN0IGZvbnRhd2Vzb21lSWNvbnMgPSBJY29uc1NlcnZpY2UuZ2V0Rm9udGF3ZXNvbWVJY29ucyhmaWx0ZXIgYXMgRm9udGF3ZXNvbWVJY29uRmlsdGVyT3B0aW9uKTtcblxuICAgICAgaWYgKGZvbnRhd2Vzb21lSWNvbnMubGVuZ3RoKSB7XG4gICAgICAgIGljb25zLnB1c2goLi4uZm9udGF3ZXNvbWVJY29ucyk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgY29uc3QgdHJpbW1lZFNlYXJjaFRleHQgPSBzZWFyY2hUZXh0LnRyaW0oKS50b0xvd2VyQ2FzZSgpO1xuICAgIGlmICh0cmltbWVkU2VhcmNoVGV4dCkge1xuICAgICAgaWNvbnMgPSBpY29ucy5maWx0ZXIoaWNvbiA9PiBpY29uLm5hbWUuaW5jbHVkZXModHJpbW1lZFNlYXJjaFRleHQpKTtcbiAgICB9XG5cbiAgICByZXR1cm4gaWNvbnM7XG4gIH1cbn1cbiJdfQ==

package/esm2022/app/modules/idle-timeout/idle-timeout.component.mjs

@@ -64,10 +64,10 @@ export class IdleTimeoutComponent {
             this.showDialog = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: IdleTimeoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: IdleTimeoutComponent, selector: "particle-idle-timeout", inputs: { borderRadius: "borderRadius", timeoutInSeconds: "timeoutInSeconds", text: "text" }, outputs: { timerEnd: "timerEnd" }, viewQueries: [{ propertyName: "timeoutDialog", first: true, predicate: ["timeoutDialog"], descendants: true }], ngImport: i0, template: "<!-- timeout dialog -->\r\n<particle-dialog [title]=\"text.sessionExpiring\"\r\n                 [object]=\"showDialog\"\r\n                 [borderRadius]=\"borderRadius\"\r\n                 (closed)=\"resetTimer()\"\r\n                 width=\"350px\" height=\"150px\"\r\n                 #timeoutDialog>\r\n  <div class=\"row column center_center height100\">\r\n    <div class=\"header sm bold center mar_bot10\">{{count}} {{count !== 1 ? text.seconds : text.second}}</div>\r\n    <button class=\"access btn md bg_overlay brdr ok_button_color\" [attr.aria-label]=\"text.stayLoggedIn\"\r\n            (click)=\"resetTimer()\">\r\n      <span class=\"text\">{{text.stayLoggedIn}}</span>\r\n    </button>\r\n  </div>\r\n</particle-dialog>\r\n", dependencies: [{ kind: "component", type: i1.DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IdleTimeoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: IdleTimeoutComponent, selector: "particle-idle-timeout", inputs: { borderRadius: "borderRadius", timeoutInSeconds: "timeoutInSeconds", text: "text" }, outputs: { timerEnd: "timerEnd" }, viewQueries: [{ propertyName: "timeoutDialog", first: true, predicate: ["timeoutDialog"], descendants: true }], ngImport: i0, template: "<!-- timeout dialog -->\r\n<particle-dialog [title]=\"text.sessionExpiring\"\r\n                 [object]=\"showDialog\"\r\n                 [borderRadius]=\"borderRadius\"\r\n                 (closed)=\"resetTimer()\"\r\n                 width=\"350px\" height=\"150px\"\r\n                 #timeoutDialog>\r\n  <div class=\"row column center_center height100\">\r\n    <div class=\"header sm bold center mar_bot10\">{{count}} {{count !== 1 ? text.seconds : text.second}}</div>\r\n    <button class=\"access btn md bg_overlay brdr ok_button_color\" [attr.aria-label]=\"text.stayLoggedIn\"\r\n            (click)=\"resetTimer()\">\r\n      <span class=\"text\">{{text.stayLoggedIn}}</span>\r\n    </button>\r\n  </div>\r\n</particle-dialog>\r\n", dependencies: [{ kind: "component", type: i1.DialogComponent, selector: "particle-dialog", inputs: ["object", "title", "titleClass", "showTitle", "allowClose", "bodyClass", "height", "width", "borderRadius", "text"], outputs: ["closed", "opened"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: IdleTimeoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: IdleTimeoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-idle-timeout', template: "<!-- timeout dialog -->\r\n<particle-dialog [title]=\"text.sessionExpiring\"\r\n                 [object]=\"showDialog\"\r\n                 [borderRadius]=\"borderRadius\"\r\n                 (closed)=\"resetTimer()\"\r\n                 width=\"350px\" height=\"150px\"\r\n                 #timeoutDialog>\r\n  <div class=\"row column center_center height100\">\r\n    <div class=\"header sm bold center mar_bot10\">{{count}} {{count !== 1 ? text.seconds : text.second}}</div>\r\n    <button class=\"access btn md bg_overlay brdr ok_button_color\" [attr.aria-label]=\"text.stayLoggedIn\"\r\n            (click)=\"resetTimer()\">\r\n      <span class=\"text\">{{text.stayLoggedIn}}</span>\r\n    </button>\r\n  </div>\r\n</particle-dialog>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { borderRadius: [{

package/esm2022/app/modules/idle-timeout/particle-idle-timeout.module.mjs

@@ -4,13 +4,13 @@ import { IdleTimeoutComponent } from './idle-timeout.component';
 import { ParticleDialogModule } from '../dialog/dialog.module';
 import * as i0 from "@angular/core";
 export class ParticleIdleTimeoutModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleIdleTimeoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: ParticleIdleTimeoutModule, declarations: [IdleTimeoutComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleIdleTimeoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: ParticleIdleTimeoutModule, declarations: [IdleTimeoutComponent], imports: [CommonModule,
             ParticleDialogModule], exports: [IdleTimeoutComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleIdleTimeoutModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleIdleTimeoutModule, imports: [CommonModule,
             ParticleDialogModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleIdleTimeoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleIdleTimeoutModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2022/app/modules/input-mask/input-mask.component.mjs

@@ -516,13 +516,13 @@ export class InputMaskComponent {
     focus() {
         this.inputViewChild.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: InputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: InputMaskComponent, selector: "particle-input-mask", inputs: { type: "type", slotChar: "slotChar", autoClear: "autoClear", style: "style", inputId: "inputId", styleClass: "styleClass", placeholder: "placeholder", size: "size", maxlength: "maxlength", tabindex: "tabindex", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", disabled: "disabled", readonly: "readonly", unmask: "unmask", name: "name", required: "required", characterPattern: "characterPattern", autoFocus: "autoFocus", autocomplete: "autocomplete", mask: "mask" }, outputs: { onComplete: "onComplete", onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput" }, host: { properties: { "class.ui-inputwrapper-filled": "filled", "class.ui-inputwrapper-focus": "focus" } }, providers: [INPUTMASK_VALUE_ACCESSOR], viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["input"], descendants: true, static: true }], ngImport: i0, template: `<input #input [attr.id]="inputId" [attr.type]="type" [attr.name]="name" [ngStyle]="style" [ngClass]="styleClass" [attr.placeholder]="placeholder"
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: InputMaskComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: InputMaskComponent, 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)" (keypress)="onKeyPress($event)" [attr.autofocus]="autoFocus"
                     (input)="onInputChange($event)" (paste)="handleInputChange($event)" (click)="onClick()">`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: InputMaskComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: InputMaskComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'particle-input-mask',

package/esm2022/app/modules/input-mask/input-mask.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { InputMaskComponent } from './input-mask.component';
 import * as i0 from "@angular/core";
 export class ParticleInputMaskModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleInputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: ParticleInputMaskModule, declarations: [InputMaskComponent], imports: [CommonModule], exports: [InputMaskComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleInputMaskModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleInputMaskModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: ParticleInputMaskModule, declarations: [InputMaskComponent], imports: [CommonModule], exports: [InputMaskComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleInputMaskModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleInputMaskModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleInputMaskModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2022/app/modules/keyfilter/keyfilter.directive.mjs

@@ -132,10 +132,10 @@ export class KeyfilterDirective {
             this.hostElement.nativeElement.value = '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KeyfilterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: KeyfilterDirective, selector: "[particleKeyfilter]", inputs: { filterType: ["particleKeyfilter", "filterType"], allowSpaces: "allowSpaces" }, host: { listeners: { "keydown": "onKeyDown($event)", "paste": "onPaste($event)", "blur": "onBlur()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: KeyfilterDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: KeyfilterDirective, selector: "[particleKeyfilter]", inputs: { filterType: ["particleKeyfilter", "filterType"], allowSpaces: "allowSpaces" }, host: { listeners: { "keydown": "onKeyDown($event)", "paste": "onPaste($event)", "blur": "onBlur()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: KeyfilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: KeyfilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[particleKeyfilter]'

package/esm2022/app/modules/keyfilter/keyfilter.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { KeyfilterDirective } from './keyfilter.directive';
 import * as i0 from "@angular/core";
 export class ParticleKeyfilterModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleKeyfilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: ParticleKeyfilterModule, declarations: [KeyfilterDirective], imports: [CommonModule], exports: [KeyfilterDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleKeyfilterModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleKeyfilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: ParticleKeyfilterModule, declarations: [KeyfilterDirective], imports: [CommonModule], exports: [KeyfilterDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleKeyfilterModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleKeyfilterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleKeyfilterModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [KeyfilterDirective],

package/esm2022/app/modules/layout/components/layout-full-framing/layout-full-framing.component.mjs

@@ -35,10 +35,10 @@ export class LayoutFullFramingComponent {
         return `calc(100% - ${offset}px)`;
     }
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: LayoutFullFramingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: LayoutFullFramingComponent, selector: "particle-layout-full-framing", inputs: { mainContent: "mainContent", rightSidebar: "rightSidebar", header: "header", footer: "footer", mainContentContainerClassList: "mainContentContainerClassList", rightSidebarContainerClassList: "rightSidebarContainerClassList", headerClassList: "headerClassList", footerClassList: "footerClassList", headerHeight: "headerHeight", footerHeight: "footerHeight", rightSidebarWidth: "rightSidebarWidth", breakpoint: "breakpoint", rightSidebarCollapsedTabOffset: "rightSidebarCollapsedTabOffset", collapsedClassList: "collapsedClassList" }, 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<ng-container *ngIf=\"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</ng-container>\r\n\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\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.SlideoverComponent, selector: "particle-slideover", inputs: ["position", "modal", "width", "height", "bgClass", "text", "breakpoint"], outputs: ["opened", "closed"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LayoutFullFramingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: LayoutFullFramingComponent, selector: "particle-layout-full-framing", inputs: { mainContent: "mainContent", rightSidebar: "rightSidebar", header: "header", footer: "footer", mainContentContainerClassList: "mainContentContainerClassList", rightSidebarContainerClassList: "rightSidebarContainerClassList", headerClassList: "headerClassList", footerClassList: "footerClassList", headerHeight: "headerHeight", footerHeight: "footerHeight", rightSidebarWidth: "rightSidebarWidth", breakpoint: "breakpoint", rightSidebarCollapsedTabOffset: "rightSidebarCollapsedTabOffset", collapsedClassList: "collapsedClassList" }, 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<ng-container *ngIf=\"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</ng-container>\r\n\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\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.SlideoverComponent, selector: "particle-slideover", inputs: ["position", "modal", "width", "height", "bgClass", "text", "breakpoint"], outputs: ["opened", "closed"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: LayoutFullFramingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LayoutFullFramingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-layout-full-framing', 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<ng-container *ngIf=\"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</ng-container>\r\n\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\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" }]
         }], ctorParameters: () => [], propDecorators: { mainContent: [{

package/esm2022/app/modules/layout/components/layout-fullwidth-sidebar/layout-fullwidth-sidebar.component.mjs

@@ -27,10 +27,10 @@ export class LayoutFullwidthSidebarComponent {
         return `calc(100vh - ${offset}px)`;
     }
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: LayoutFullwidthSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: LayoutFullwidthSidebarComponent, selector: "particle-layout-fullwidth-sidebar", inputs: { mainContent: "mainContent", rightSidebar: "rightSidebar", mainContentContainerClassList: "mainContentContainerClassList", rightSidebarContainerClassList: "rightSidebarContainerClassList", rightSidebarSticky: "rightSidebarSticky", headerHeight: "headerHeight", footerHeight: "footerHeight", rightSidebarWidth: "rightSidebarWidth", breakpoint: "breakpoint", rightSidebarCollapsedTabOffset: "rightSidebarCollapsedTabOffset", collapsedClassList: "collapsedClassList" }, 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  <ng-container *ngIf=\"!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  </ng-container>\r\n\r\n  <ng-container *ngIf=\"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  </ng-container>\r\n</div>\r\n\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\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\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.SlideoverComponent, selector: "particle-slideover", inputs: ["position", "modal", "width", "height", "bgClass", "text", "breakpoint"], outputs: ["opened", "closed"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LayoutFullwidthSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: LayoutFullwidthSidebarComponent, selector: "particle-layout-fullwidth-sidebar", inputs: { mainContent: "mainContent", rightSidebar: "rightSidebar", mainContentContainerClassList: "mainContentContainerClassList", rightSidebarContainerClassList: "rightSidebarContainerClassList", rightSidebarSticky: "rightSidebarSticky", headerHeight: "headerHeight", footerHeight: "footerHeight", rightSidebarWidth: "rightSidebarWidth", breakpoint: "breakpoint", rightSidebarCollapsedTabOffset: "rightSidebarCollapsedTabOffset", collapsedClassList: "collapsedClassList" }, 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  <ng-container *ngIf=\"!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  </ng-container>\r\n\r\n  <ng-container *ngIf=\"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  </ng-container>\r\n</div>\r\n\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\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\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", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.SlideoverComponent, selector: "particle-slideover", inputs: ["position", "modal", "width", "height", "bgClass", "text", "breakpoint"], outputs: ["opened", "closed"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: LayoutFullwidthSidebarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LayoutFullwidthSidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-layout-fullwidth-sidebar', 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  <ng-container *ngIf=\"!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  </ng-container>\r\n\r\n  <ng-container *ngIf=\"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  </ng-container>\r\n</div>\r\n\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\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\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" }]
         }], ctorParameters: () => [], propDecorators: { mainContent: [{

package/esm2022/app/modules/layout/layout.module.mjs

@@ -5,15 +5,15 @@ import { LayoutFullFramingComponent } from './components/layout-full-framing/lay
 import { ParticleSlideoverModule } from '../slideover/particle-slideover.module';
 import * as i0 from "@angular/core";
 export class ParticleLayoutModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: ParticleLayoutModule, declarations: [LayoutFullwidthSidebarComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: ParticleLayoutModule, declarations: [LayoutFullwidthSidebarComponent,
             LayoutFullFramingComponent], imports: [CommonModule,
             ParticleSlideoverModule], exports: [LayoutFullwidthSidebarComponent,
             LayoutFullFramingComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleLayoutModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleLayoutModule, imports: [CommonModule,
             ParticleSlideoverModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2022/app/modules/loader/components/loader.component.mjs

@@ -14,10 +14,10 @@ export class LoaderComponent {
             this.backgroundStyle = 'linear-gradient(to right, rgba(0,0,0,0) 0%, ' + colors[0] + ' 33%, ' + colors[1] + ' 50% , ' + colors[2] + ' 66%, rgba(0,0,0,0) 100%)';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: LoaderComponent, 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  <ng-container *ngIf=\"!disableText\">\r\n    <div *ngIf=\"text.loadingText\" 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    <div *ngIf=\"text.loadingSubtext\" 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  </ng-container>\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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: LoaderComponent, 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  <ng-container *ngIf=\"!disableText\">\r\n    <div *ngIf=\"text.loadingText\" 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    <div *ngIf=\"text.loadingSubtext\" 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  </ng-container>\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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: LoaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-loader', 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  <ng-container *ngIf=\"!disableText\">\r\n    <div *ngIf=\"text.loadingText\" 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    <div *ngIf=\"text.loadingSubtext\" 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  </ng-container>\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: [{

package/esm2022/app/modules/loader/loader.module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { LoaderComponent } from './components/loader.component';
 import * as i0 from "@angular/core";
 export class ParticleLoaderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: ParticleLoaderModule, declarations: [LoaderComponent], imports: [CommonModule], exports: [LoaderComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleLoaderModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleLoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: ParticleLoaderModule, declarations: [LoaderComponent], imports: [CommonModule], exports: [LoaderComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleLoaderModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParticleLoaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ParticleLoaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2022/app/modules/multi-select/multi-select.component.mjs

@@ -568,8 +568,8 @@ export class MultiSelectComponent {
         }
         return previousOption;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: MultiSelectComponent, selector: "particle-multi-select", inputs: { value: "value", options: "options", disabled: "disabled", classList: "classList", buttonClassList: "buttonClassList", entryClassList: "entryClassList", text: "text", type: "type", maxExpandedEntries: "maxExpandedEntries", expandedAsGrid: "expandedAsGrid", collapsedButtonTemplate: "collapsedButtonTemplate" }, outputs: { change: "change" }, host: { listeners: { "window:resize": "onWindowResize()", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.1", type: MultiSelectComponent, selector: "particle-multi-select", inputs: { value: "value", options: "options", disabled: "disabled", classList: "classList", buttonClassList: "buttonClassList", entryClassList: "entryClassList", text: "text", type: "type", maxExpandedEntries: "maxExpandedEntries", expandedAsGrid: "expandedAsGrid", collapsedButtonTemplate: "collapsedButtonTemplate" }, outputs: { change: "change" }, host: { listeners: { "window:resize": "onWindowResize()", "window:keydown": "onKeyDown($event)", "window:keyup": "onKeyUp($event)", "window:click": "onClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiSelectComponent),
@@ -588,7 +588,7 @@ export class MultiSelectComponent {
             ])
         ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'particle-multi-select', animations: [
                         trigger('openClose', [