@osovitny/anatoly 3.17.110 → 3.17.111

package/fesm2022/osovitny-anatoly.mjs

@@ -4183,7 +4183,7 @@ class DiscountCodesApiService extends ApiServiceBase {
 </file>
 */
 //Node
-const _c0$g = a0 => ({ "show": a0 });
+const _c0$h = a0 => ({ "show": a0 });
 function OrderSummaryComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 12)(1, "div", 13)(2, "input", 14);
@@ -4195,7 +4195,7 @@ function OrderSummaryComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0$g, ctx_r0.showPromoCode));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(2, _c0$h, ctx_r0.showPromoCode));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngModel", ctx_r0.promoCode);
 } }
@@ -4294,7 +4294,7 @@ class OrderSummaryComponent extends ComponentBase {
             i0.ɵɵadvance(12);
             i0.ɵɵtextInterpolate1("$", ctx.ps.subtotal, "");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$g, ctx.showPromoCode));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$h, ctx.showPromoCode));
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(17, ctx.showPromoCode ? 17 : -1);
             i0.ɵɵadvance(6);
@@ -4424,7 +4424,7 @@ class PaymentMethodsComponent extends ComponentBase {
 </file>
 */
 //Node
-const _c0$f = a0 => ({ "active": a0 });
+const _c0$g = a0 => ({ "active": a0 });
 class PaymentOptionsComponent extends ComponentBase {
     constructor(ps) {
         super();
@@ -4473,11 +4473,11 @@ class PaymentOptionsComponent extends ComponentBase {
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$f, ctx.ps.selectedPaymentType == 2));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$g, ctx.ps.selectedPaymentType == 2));
             i0.ɵɵadvance(7);
             i0.ɵɵtextInterpolate1("$", ctx.priceWeekly, "");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$f, ctx.ps.selectedPaymentType == 1));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c0$g, ctx.ps.selectedPaymentType == 1));
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate1("Covers the full ", ctx.numberOfWeeks, " weeks ");
             i0.ɵɵadvance(2);
@@ -4947,7 +4947,7 @@ class PayPalScriptService {
   Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
 </file>
 */
-const _c0$e = ["payPalButtonContainer"];
+const _c0$f = ["payPalButtonContainer"];
 class PayPalComponent {
     set payPalButtonContainer(content) {
         this.payPalButtonContainerElem = content;
@@ -5214,7 +5214,7 @@ class PayPalComponent {
     }
     static { this.ɵfac = function PayPalComponent_Factory(t) { return new (t || PayPalComponent)(i0.ɵɵdirectiveInject(PayPalScriptService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PayPalComponent, selectors: [["anatoly-billing-paypal-container"]], viewQuery: function PayPalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$e, 5);
+            i0.ɵɵviewQuery(_c0$f, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.payPalButtonContainer = _t.first);
@@ -6342,7 +6342,7 @@ function SignUpButtonComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", !_r6.innerHTML.trim());
 } }
-const _c0$d = ["*"];
+const _c0$e = ["*"];
 class SignUpButtonComponent extends ComponentBase {
     constructor() {
         super();
@@ -6361,7 +6361,7 @@ class SignUpButtonComponent extends ComponentBase {
         }
     }
     static { this.ɵfac = function SignUpButtonComponent_Factory(t) { return new (t || SignUpButtonComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SignUpButtonComponent, selectors: [["anatoly-signup-button"]], inputs: { qs: "qs" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$d, decls: 4, vars: 2, consts: [[3, "href", "class", 4, "ngIf"], [3, "routerLink", "class", 4, "ngIf"], ["contentTemplate", ""], [3, "href"], [4, "ngTemplateOutlet"], [3, "routerLink"], ["ref", ""], [4, "ngIf"]], template: function SignUpButtonComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SignUpButtonComponent, selectors: [["anatoly-signup-button"]], inputs: { qs: "qs" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$e, decls: 4, vars: 2, consts: [[3, "href", "class", 4, "ngIf"], [3, "routerLink", "class", 4, "ngIf"], ["contentTemplate", ""], [3, "href"], [4, "ngTemplateOutlet"], [3, "routerLink"], ["ref", ""], [4, "ngIf"]], template: function SignUpButtonComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, SignUpButtonComponent_a_0_Template, 2, 5, "a", 0)(1, SignUpButtonComponent_a_1_Template, 2, 5, "a", 1)(2, SignUpButtonComponent_ng_template_2_Template, 4, 1, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
@@ -6610,12 +6610,12 @@ class SubscribePlanButtonComponent {
 </file>
 */
 //Node
-const _c0$c = [[["card-header"]], [["card-body"]], "*", [["card-footer"]]];
+const _c0$d = [[["card-header"]], [["card-body"]], "*", [["card-footer"]]];
 const _c1 = ["card-header", "card-body", "*", "card-footer"];
 class CardComponent extends ComponentBase {
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵCardComponent_BaseFactory; return function CardComponent_Factory(t) { return (ɵCardComponent_BaseFactory || (ɵCardComponent_BaseFactory = i0.ɵɵgetInheritedFactory(CardComponent)))(t || CardComponent); }; })(); }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardComponent, selectors: [["anatoly-card"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1, decls: 5, vars: 3, template: function CardComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$c);
+            i0.ɵɵprojectionDef(_c0$d);
             i0.ɵɵelementStart(0, "div");
             i0.ɵɵprojection(1);
             i0.ɵɵprojection(2, 1);
@@ -6656,10 +6656,10 @@ function CardHeaderComponent_h3_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.title);
 } }
-const _c0$b = ["*"];
+const _c0$c = ["*"];
 class CardHeaderComponent extends ComponentBase {
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵCardHeaderComponent_BaseFactory; return function CardHeaderComponent_Factory(t) { return (ɵCardHeaderComponent_BaseFactory || (ɵCardHeaderComponent_BaseFactory = i0.ɵɵgetInheritedFactory(CardHeaderComponent)))(t || CardHeaderComponent); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardHeaderComponent, selectors: [["anatoly-card-header"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$b, decls: 4, vars: 4, consts: [[1, "card-title"], [4, "ngIf"]], template: function CardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardHeaderComponent, selectors: [["anatoly-card-header"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$c, decls: 4, vars: 4, consts: [[1, "card-title"], [4, "ngIf"]], template: function CardHeaderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div")(1, "div", 0);
             i0.ɵɵtemplate(2, CardHeaderComponent_h3_2_Template, 2, 1, "h3", 1);
@@ -6693,10 +6693,10 @@ class CardHeaderComponent extends ComponentBase {
 </file>
 */
 //Node
-const _c0$a = ["*"];
+const _c0$b = ["*"];
 class CardBodyComponent extends ComponentBase {
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵCardBodyComponent_BaseFactory; return function CardBodyComponent_Factory(t) { return (ɵCardBodyComponent_BaseFactory || (ɵCardBodyComponent_BaseFactory = i0.ɵɵgetInheritedFactory(CardBodyComponent)))(t || CardBodyComponent); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardBodyComponent, selectors: [["anatoly-card-body"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$a, decls: 2, vars: 3, template: function CardBodyComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardBodyComponent, selectors: [["anatoly-card-body"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$b, decls: 2, vars: 3, template: function CardBodyComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div");
             i0.ɵɵprojection(1);
@@ -6726,10 +6726,10 @@ class CardBodyComponent extends ComponentBase {
 </file>
 */
 //Node
-const _c0$9 = ["*"];
+const _c0$a = ["*"];
 class CardFooterComponent extends ComponentBase {
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵCardFooterComponent_BaseFactory; return function CardFooterComponent_Factory(t) { return (ɵCardFooterComponent_BaseFactory || (ɵCardFooterComponent_BaseFactory = i0.ɵɵgetInheritedFactory(CardFooterComponent)))(t || CardFooterComponent); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardFooterComponent, selectors: [["anatoly-card-footer"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$9, decls: 2, vars: 3, template: function CardFooterComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CardFooterComponent, selectors: [["anatoly-card-footer"]], features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c0$a, decls: 2, vars: 3, template: function CardFooterComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div");
             i0.ɵɵprojection(1);
@@ -7598,14 +7598,14 @@ class HtmlEditorComponent extends HtmlEditorComponentBase {
 </file>
 */
 //Node
-const _c0$8 = ["*"];
+const _c0$9 = ["*"];
 class CheckIconComponent {
     constructor() {
         //Inputs
         this.checked = true;
     }
     static { this.ɵfac = function CheckIconComponent_Factory(t) { return new (t || CheckIconComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckIconComponent, selectors: [["anatoly-check-icon"]], inputs: { checked: "checked" }, ngContentSelectors: _c0$8, decls: 2, vars: 2, consts: [[3, "icon", "ngClass"]], template: function CheckIconComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckIconComponent, selectors: [["anatoly-check-icon"]], inputs: { checked: "checked" }, ngContentSelectors: _c0$9, decls: 2, vars: 2, consts: [[3, "icon", "ngClass"]], template: function CheckIconComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵelement(0, "fa-icon", 0);
             i0.ɵɵprojection(1);
@@ -7621,6 +7621,162 @@ class CheckIconComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CheckIconComponent, { className: "CheckIconComponent", filePath: "lib\\ui\\components\\check-icon\\check-icon.component.ts", lineNumber: 24 }); })();
 
+/*
+<file>
+  Project:
+    @osovitny/anatoly
+
+  Authors:
+    Anatoly Osovitny anatoly.osovitny@osovitny.com
+
+  Created:
+    23 Apr 2024
+
+  Copyright (c) 2016-2025 Osovitny Inc. All rights reserved.
+</file>
+*/
+//Node
+function ControlPanelComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 9)(1, "h2");
+    i0.ɵɵtext(2, "Sort By:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "kendo-dropdownlist", 10);
+    i0.ɵɵlistener("ngModelChange", function ControlPanelComponent_Conditional_7_Template_kendo_dropdownlist_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectedSortBy = $event); })("valueChange", function ControlPanelComponent_Conditional_7_Template_kendo_dropdownlist_valueChange_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.onSortByChange()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("data", ctx_r0.sortByItems)("valuePrimitive", true)("ngModel", ctx_r0.selectedSortBy);
+} }
+function ControlPanelComponent_Conditional_8_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(0, "a", 20);
+    i0.ɵɵlistener("click", function ControlPanelComponent_Conditional_8_Conditional_10_Template_a_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r6 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r6.onAdd()); });
+    i0.ɵɵelement(1, "fa-icon", 21);
+    i0.ɵɵelementEnd();
+} }
+const _c0$8 = a0 => ({ "active": a0 });
+function ControlPanelComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11)(1, "a", 3);
+    i0.ɵɵlistener("click", function ControlPanelComponent_Conditional_8_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r8.onViewSwitch("grid")); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 12);
+    i0.ɵɵelement(3, "path", 13)(4, "path", 14)(5, "path", 15)(6, "path", 16);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(7, "a", 3);
+    i0.ɵɵlistener("click", function ControlPanelComponent_Conditional_8_Template_a_click_7_listener() { i0.ɵɵrestoreView(_r9); const ctx_r10 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r10.onViewSwitch("list")); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(8, "svg", 17);
+    i0.ɵɵelement(9, "path", 18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(10, ControlPanelComponent_Conditional_8_Conditional_10_Template, 2, 0, "a", 19);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0$8, ctx_r1.viewType == "grid"));
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$8, ctx_r1.viewType == "list"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(10, ctx_r1.addVisible ? 10 : -1);
+} }
+class ControlPanelComponent extends ComponentBase {
+    constructor() {
+        super(...arguments);
+        this.addVisible = false;
+        this.sortByVisible = false;
+        this.viewTypeVisible = false;
+        //Outputs
+        this.settingsChange = new EventEmitter();
+        this.add = new EventEmitter();
+    }
+    ngOnInit() {
+        this.resetSettings();
+        this.fireSettingsChange();
+    }
+    fireSettingsChange() {
+        this.settingsChange.emit(this.getSettings());
+    }
+    fireAdd() {
+        this.add.emit();
+    }
+    //Public
+    resetSettings() {
+        this.selectedSortBy = 1;
+        this.filterVisible = false;
+        this.viewType = DataViewType.List;
+    }
+    getSettings() {
+        let sortBy = this.selectedSortBy;
+        let filterVisible = this.filterVisible;
+        let viewType = this.viewType;
+        return {
+            sortBy: sortBy,
+            filterVisible: filterVisible,
+            viewType: viewType
+        };
+    }
+    //Events
+    onFilterToggle() {
+        this.filterVisible = !this.filterVisible;
+        this.fireSettingsChange();
+    }
+    onSortByChange() {
+        this.fireSettingsChange();
+    }
+    onViewSwitch(value) {
+        this.viewType = value;
+        this.fireSettingsChange();
+    }
+    onAdd() {
+        this.fireAdd();
+    }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵControlPanelComponent_BaseFactory; return function ControlPanelComponent_Factory(t) { return (ɵControlPanelComponent_BaseFactory || (ɵControlPanelComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ControlPanelComponent)))(t || ControlPanelComponent); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ControlPanelComponent, selectors: [["anatoly-data-grid-control-panel"]], inputs: { mode: "mode", sortByItems: "sortByItems", addVisible: "addVisible", sortByVisible: "sortByVisible", viewTypeVisible: "viewTypeVisible" }, outputs: { settingsChange: "settingsChange", add: "add" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 5, consts: [[1, "data-grid"], [1, "control-panel"], [1, "filter"], ["href", "javascript:void(0)", 1, "btn", "btn-icon", "btn-primary", 3, "ngClass", "click"], ["height", "22", "viewBox", "0 0 32 32", "width", "20", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M2 7h.142a3.981 3.981 0 0 0 7.716 0H30a1 1 0 0 0 0-2H9.858a3.981 3.981 0 0 0-7.716 0H2a1 1 0 0 0 0 2zm4-3a2 2 0 1 1-2 2 2 2 0 0 1 2-2zm24 11h-.142a3.981 3.981 0 0 0-7.716 0H2a1 1 0 0 0 0 2h20.142a3.981 3.981 0 0 0 7.716 0H30a1 1 0 0 0 0-2zm-4 3a2 2 0 1 1 2-2 2 2 0 0 1-2 2zm4 7H19.858a3.981 3.981 0 0 0-7.716 0H2a1 1 0 0 0 0 2h10.142a3.981 3.981 0 0 0 7.716 0H30a1 1 0 0 0 0-2zm-14 3a2 2 0 1 1 2-2 2 2 0 0 1-2 2z", "fill", "currentColor"], [1, "tools"], ["class", "sort-by"], ["class", "actions"], [1, "sort-by"], ["valueField", "value", "textField", "text", 3, "data", "valuePrimitive", "ngModel", "ngModelChange", "valueChange"], [1, "actions"], ["fill", "none", "height", "18", "viewBox", "0 0 18 18", "width", "18", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M6 1H2C1.44772 1 1 1.44772 1 2V6C1 6.55228 1.44772 7 2 7H6C6.55228 7 7 6.55228 7 6V2C7 1.44772 6.55228 1 6 1Z", "stroke", "currentColor", "stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], ["d", "M16 1H12C11.4477 1 11 1.44772 11 2V6C11 6.55228 11.4477 7 12 7H16C16.5523 7 17 6.55228 17 6V2C17 1.44772 16.5523 1 16 1Z", "stroke", "currentColor", "stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], ["d", "M6 11H2C1.44772 11 1 11.4477 1 12V16C1 16.5523 1.44772 17 2 17H6C6.55228 17 7 16.5523 7 16V12C7 11.4477 6.55228 11 6 11Z", "stroke", "currentColor", "stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], ["d", "M16 11H12C11.4477 11 11 11.4477 11 12V16C11 16.5523 11.4477 17 12 17H16C16.5523 17 17 16.5523 17 16V12C17 11.4477 16.5523 11 16 11Z", "stroke", "currentColor", "stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2"], ["fill", "none", "height", "15", "viewBox", "0 0 19 15", "width", "19", "xmlns", "http://www.w3.org/2000/svg"], ["d", "M1.5 6C0.67 6 0 6.67 0 7.5C0 8.33 0.67 9 1.5 9C2.33 9 3 8.33 3 7.5C3 6.67 2.33 6 1.5 6ZM1.5 0C0.67 0 0 0.67 0 1.5C0 2.33 0.67 3 1.5 3C2.33 3 3 2.33 3 1.5C3 0.67 2.33 0 1.5 0ZM1.5 12C0.67 12 0 12.68 0 13.5C0 14.32 0.68 15 1.5 15C2.32 15 3 14.32 3 13.5C3 12.68 2.33 12 1.5 12ZM5.5 14.5H17.5C18.05 14.5 18.5 14.05 18.5 13.5C18.5 12.95 18.05 12.5 17.5 12.5H5.5C4.95 12.5 4.5 12.95 4.5 13.5C4.5 14.05 4.95 14.5 5.5 14.5ZM5.5 8.5H17.5C18.05 8.5 18.5 8.05 18.5 7.5C18.5 6.95 18.05 6.5 17.5 6.5H5.5C4.95 6.5 4.5 6.95 4.5 7.5C4.5 8.05 4.95 8.5 5.5 8.5ZM4.5 1.5C4.5 2.05 4.95 2.5 5.5 2.5H17.5C18.05 2.5 18.5 2.05 18.5 1.5C18.5 0.95 18.05 0.5 17.5 0.5H5.5C4.95 0.5 4.5 0.95 4.5 1.5Z", "fill", "currentColor"], ["class", "btn btn-icon btn-primary", "href", "javascript:void(0)"], ["href", "javascript:void(0)", 1, "btn", "btn-icon", "btn-primary", 3, "click"], ["icon", "plus"]], template: function ControlPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "a", 3);
+            i0.ɵɵlistener("click", function ControlPanelComponent_Template_a_click_3_listener() { return ctx.onFilterToggle(); });
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(4, "svg", 4);
+            i0.ɵɵelement(5, "path", 5);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(6, "div", 6);
+            i0.ɵɵtemplate(7, ControlPanelComponent_Conditional_7_Template, 4, 3, "div", 7)(8, ControlPanelComponent_Conditional_8_Template, 11, 7, "div", 8);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0$8, ctx.filterVisible));
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(7, ctx.sortByVisible ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(8, ctx.viewTypeVisible ? 8 : -1);
+        } }, dependencies: [i1$2.NgClass, i2.NgControlStatus, i2.NgModel, i1$6.FaIconComponent, i3.DropDownListComponent], encapsulation: 2 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ControlPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'anatoly-data-grid-control-panel', template: "<div class='data-grid'>\r\n  <div class='control-panel'>\r\n    <div class='filter'>\r\n      <a (click)='onFilterToggle()'\r\n         [ngClass]=\"{'active': filterVisible}\"\r\n         class='btn btn-icon btn-primary'\r\n         href='javascript:void(0)'>\r\n        <svg height='22' viewBox='0 0 32 32' width='20' xmlns='http://www.w3.org/2000/svg'>\r\n          <path d='M2 7h.142a3.981 3.981 0 0 0 7.716 0H30a1 1 0 0 0 0-2H9.858a3.981 3.981 0 0 0-7.716 0H2a1 1 0 0 0 0 2zm4-3a2 2 0 1 1-2 2 2 2 0 0 1 2-2zm24 11h-.142a3.981 3.981 0 0 0-7.716 0H2a1 1 0 0 0 0 2h20.142a3.981 3.981 0 0 0 7.716 0H30a1 1 0 0 0 0-2zm-4 3a2 2 0 1 1 2-2 2 2 0 0 1-2 2zm4 7H19.858a3.981 3.981 0 0 0-7.716 0H2a1 1 0 0 0 0 2h10.142a3.981 3.981 0 0 0 7.716 0H30a1 1 0 0 0 0-2zm-14 3a2 2 0 1 1 2-2 2 2 0 0 1-2 2z'\r\n                fill='currentColor'></path>\r\n        </svg>\r\n      </a>\r\n    </div>\r\n    <div class='tools'>\r\n      @if (sortByVisible) {\r\n        <div class='sort-by'>\r\n          <h2>Sort By:</h2>\r\n          <kendo-dropdownlist [data]='sortByItems'\r\n                              valueField='value'\r\n                              textField='text'\r\n                              [valuePrimitive]='true'\r\n                              [(ngModel)]='selectedSortBy'\r\n                              (valueChange)='onSortByChange()'>\r\n          </kendo-dropdownlist>\r\n        </div>\r\n      }\r\n\r\n      @if (viewTypeVisible) {\r\n        <div class='actions'>\r\n          <a class='btn btn-icon btn-primary' href='javascript:void(0)'\r\n             [ngClass]=\"{'active': viewType == 'grid'}\"\r\n             (click)=\"onViewSwitch('grid')\">\r\n            <svg fill='none' height='18' viewBox='0 0 18 18' width='18' xmlns='http://www.w3.org/2000/svg'>\r\n              <path d='M6 1H2C1.44772 1 1 1.44772 1 2V6C1 6.55228 1.44772 7 2 7H6C6.55228 7 7 6.55228 7 6V2C7 1.44772 6.55228 1 6 1Z'\r\n                    stroke='currentColor'\r\n                    stroke-linecap='round'\r\n                    stroke-linejoin='round'\r\n                    stroke-width='2' />\r\n              <path d='M16 1H12C11.4477 1 11 1.44772 11 2V6C11 6.55228 11.4477 7 12 7H16C16.5523 7 17 6.55228 17 6V2C17 1.44772 16.5523 1 16 1Z'\r\n                    stroke='currentColor'\r\n                    stroke-linecap='round'\r\n                    stroke-linejoin='round'\r\n                    stroke-width='2' />\r\n              <path d='M6 11H2C1.44772 11 1 11.4477 1 12V16C1 16.5523 1.44772 17 2 17H6C6.55228 17 7 16.5523 7 16V12C7 11.4477 6.55228 11 6 11Z'\r\n                    stroke='currentColor'\r\n                    stroke-linecap='round'\r\n                    stroke-linejoin='round'\r\n                    stroke-width='2' />\r\n              <path d='M16 11H12C11.4477 11 11 11.4477 11 12V16C11 16.5523 11.4477 17 12 17H16C16.5523 17 17 16.5523 17 16V12C17 11.4477 16.5523 11 16 11Z'\r\n                    stroke='currentColor'\r\n                    stroke-linecap='round'\r\n                    stroke-linejoin='round'\r\n                    stroke-width='2' />\r\n            </svg>\r\n          </a>\r\n          <a class='btn btn-icon btn-primary' href='javascript:void(0)'\r\n             [ngClass]=\"{'active': viewType == 'list'}\"\r\n             (click)=\"onViewSwitch('list')\">\r\n              <svg fill='none' height='15' viewBox='0 0 19 15' width='19' xmlns='http://www.w3.org/2000/svg'>\r\n                <path d='M1.5 6C0.67 6 0 6.67 0 7.5C0 8.33 0.67 9 1.5 9C2.33 9 3 8.33 3 7.5C3 6.67 2.33 6 1.5 6ZM1.5 0C0.67 0 0 0.67 0 1.5C0 2.33 0.67 3 1.5 3C2.33 3 3 2.33 3 1.5C3 0.67 2.33 0 1.5 0ZM1.5 12C0.67 12 0 12.68 0 13.5C0 14.32 0.68 15 1.5 15C2.32 15 3 14.32 3 13.5C3 12.68 2.33 12 1.5 12ZM5.5 14.5H17.5C18.05 14.5 18.5 14.05 18.5 13.5C18.5 12.95 18.05 12.5 17.5 12.5H5.5C4.95 12.5 4.5 12.95 4.5 13.5C4.5 14.05 4.95 14.5 5.5 14.5ZM5.5 8.5H17.5C18.05 8.5 18.5 8.05 18.5 7.5C18.5 6.95 18.05 6.5 17.5 6.5H5.5C4.95 6.5 4.5 6.95 4.5 7.5C4.5 8.05 4.95 8.5 5.5 8.5ZM4.5 1.5C4.5 2.05 4.95 2.5 5.5 2.5H17.5C18.05 2.5 18.5 2.05 18.5 1.5C18.5 0.95 18.05 0.5 17.5 0.5H5.5C4.95 0.5 4.5 0.95 4.5 1.5Z'\r\n                      fill='currentColor' />\r\n              </svg>\r\n          </a>\r\n\r\n          @if (addVisible) {\r\n            <a class='btn btn-icon btn-primary' href='javascript:void(0)' (click)='onAdd()'>\r\n              <fa-icon icon='plus' />\r\n            </a>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+    }], null, { mode: [{
+            type: Input
+        }], sortByItems: [{
+            type: Input
+        }], addVisible: [{
+            type: Input
+        }], sortByVisible: [{
+            type: Input
+        }], viewTypeVisible: [{
+            type: Input
+        }], settingsChange: [{
+            type: Output
+        }], add: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ControlPanelComponent, { className: "ControlPanelComponent", filePath: "lib\\ui\\components\\data-grid\\control-panel.component.ts", lineNumber: 27 }); })();
+
 /*
 <file>
   Project:
@@ -8191,12 +8347,12 @@ class Copy2ClipboardComponent extends ComponentBase {
             i0.ɵɵelement(1, "fa-icon", 1);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵclassMapInterpolate1("btn ", ctx.classes, "");
+            i0.ɵɵclassMapInterpolate1("btn btn-icon ", ctx.classes, "");
         } }, dependencies: [i1$6.FaIconComponent], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Copy2ClipboardComponent, [{
         type: Component,
-        args: [{ selector: 'anatoly-copy-2-clipboard', template: "<a class=\"btn {{ classes }}\" (click)=\"onCopy2Clipboard($event)\">\r\n  <fa-icon size=\"lg\" icon=\"copy\"></fa-icon>\r\n</a>\r\n" }]
+        args: [{ selector: 'anatoly-copy-2-clipboard', template: "<a class=\"btn btn-icon {{ classes }}\" (click)=\"onCopy2Clipboard($event)\">\r\n  <fa-icon size=\"lg\" icon=\"copy\" />\r\n</a>\r\n" }]
     }], null, { tooltip: [{
             type: Input
         }], text: [{
@@ -10224,6 +10380,7 @@ const MAIN_COMPONENTS = [
     CardFooterComponent,
     CheckIconComponent,
     Copy2ClipboardComponent,
+    ControlPanelComponent,
     DataPagerComponent,
     //Dropdownlists
     CountryDropdownlist,
@@ -10403,7 +10560,7 @@ class AnatolyUIModule {
                 ]
             }]
     }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AnatolyUIModule, { declarations: [BuyAccessButtonComponent, SubscribePlanButtonComponent, CardComponent, CardHeaderComponent, CardBodyComponent, CardFooterComponent, CheckIconComponent, Copy2ClipboardComponent, DataPagerComponent, CountryDropdownlist, ModerationStatusDropdownlist, PublishStatusDropdownlist, TimezoneDropdownlist, HtmlEditorComponent, SignInButtonComponent, SignUpButtonComponent, SignOutButtonComponent, NodataComponent, NoMobileSupportComponent, PageSpinnerComponent, LoadingComponent, UrlSlugComponent, FeatureWillBeReadyComponent, YouAgreeToOurTermsComponent, ContactUsDialog, NativeElementDirective, HoveringDirective, AddressComponent, CompanyComponent, ContactUsForm, SafeHtmlPipe, ReplaceTextPipe, FileSizePipe, FormValidationSummaryComponent, ItemValidationSummaryComponent], imports: [CommonModule,
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(AnatolyUIModule, { declarations: [BuyAccessButtonComponent, SubscribePlanButtonComponent, CardComponent, CardHeaderComponent, CardBodyComponent, CardFooterComponent, CheckIconComponent, Copy2ClipboardComponent, ControlPanelComponent, DataPagerComponent, CountryDropdownlist, ModerationStatusDropdownlist, PublishStatusDropdownlist, TimezoneDropdownlist, HtmlEditorComponent, SignInButtonComponent, SignUpButtonComponent, SignOutButtonComponent, NodataComponent, NoMobileSupportComponent, PageSpinnerComponent, LoadingComponent, UrlSlugComponent, FeatureWillBeReadyComponent, YouAgreeToOurTermsComponent, ContactUsDialog, NativeElementDirective, HoveringDirective, AddressComponent, CompanyComponent, ContactUsForm, SafeHtmlPipe, ReplaceTextPipe, FileSizePipe, FormValidationSummaryComponent, ItemValidationSummaryComponent], imports: [CommonModule,
         RouterModule,
         ReactiveFormsModule,
         FormsModule,
@@ -10411,7 +10568,7 @@ class AnatolyUIModule {
         FERootModule,
         //External Modules
         FaModule,
-        KendoModule], exports: [BuyAccessButtonComponent, SubscribePlanButtonComponent, CardComponent, CardHeaderComponent, CardBodyComponent, CardFooterComponent, CheckIconComponent, Copy2ClipboardComponent, DataPagerComponent, CountryDropdownlist, ModerationStatusDropdownlist, PublishStatusDropdownlist, TimezoneDropdownlist, HtmlEditorComponent, SignInButtonComponent, SignUpButtonComponent, SignOutButtonComponent, NodataComponent, NoMobileSupportComponent, PageSpinnerComponent, LoadingComponent, UrlSlugComponent, FeatureWillBeReadyComponent, YouAgreeToOurTermsComponent, ContactUsDialog, NativeElementDirective, HoveringDirective, AddressComponent, CompanyComponent, ContactUsForm, SafeHtmlPipe, ReplaceTextPipe, FileSizePipe, FormValidationSummaryComponent, ItemValidationSummaryComponent] }); })();
+        KendoModule], exports: [BuyAccessButtonComponent, SubscribePlanButtonComponent, CardComponent, CardHeaderComponent, CardBodyComponent, CardFooterComponent, CheckIconComponent, Copy2ClipboardComponent, ControlPanelComponent, DataPagerComponent, CountryDropdownlist, ModerationStatusDropdownlist, PublishStatusDropdownlist, TimezoneDropdownlist, HtmlEditorComponent, SignInButtonComponent, SignUpButtonComponent, SignOutButtonComponent, NodataComponent, NoMobileSupportComponent, PageSpinnerComponent, LoadingComponent, UrlSlugComponent, FeatureWillBeReadyComponent, YouAgreeToOurTermsComponent, ContactUsDialog, NativeElementDirective, HoveringDirective, AddressComponent, CompanyComponent, ContactUsForm, SafeHtmlPipe, ReplaceTextPipe, FileSizePipe, FormValidationSummaryComponent, ItemValidationSummaryComponent] }); })();
 
 /*
 <file>
@@ -10476,5 +10633,5 @@ class AnatolyModule {
  * Generated bundle index. Do not edit.
  */
 
-export { AddressComponent, AdminGuard, Alerts, AnatolyBillingModule, AnatolyCoreModule, AnatolyDataModule, AnatolyHttpInterceptor, AnatolyIAMModule, AnatolyIAMPagesModule, AnatolyModule, AnatolyUIModule, ApiServiceBase, ApiUrl, AppContextService, AppCoreSettings, AppName, AppSettings, AppVersion, AppsGoServiceBase, AuthService, AuthenticationGuard, BillingUtils, BraintreeDialog, Browser, BuyAccessButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CheckIconComponent, ClientApps, CompanyComponent, ComponentBase, ContactUsDialog, ContactUsForm, Convert, Copy2ClipboardComponent, CoreApiService, CountryDropdownlist, CurrenciesApiService, CurrenciesStorageService, DOM, DataPagerComponent, DataViewType, DateConvert, DefaultEditorOptions, DialogBase, DigitalMarketingService, DiscountCodeStatus, DiscountCodeType, DiscountCodesApiService, EditComponentBase, EditPageBase, EmailsApiService, EnumEditComponentBase, FeatureWillBeReadyComponent, FileSizePipe, FormValidationSummaryComponent, GABillingEvents, GAEvents, GlobalErrorHandler, GoServiceBase, GoogleAnalyticsService, GridEditServiceBase, GridReadServiceBase, Guid, HoveringDirective, HtmlEditorComponent, HtmlEditorComponentBase, IdleService, InjectorInstance, IsDevMode, IsProdMode, ItemValidationSummaryComponent, L10NUrl, L10nUtils, ListBase, LoadingComponent, LoadingService, LocalStorageService, LocalizationInjectorInstance, LocalizationModule, LocalizationService, LocalizationSettingsModule, LocalizePipe, LoggingService, MSALUtils, ModerationStatus, ModerationStatusDropdownlist, NativeElementDirective, NoMobileSupportComponent, NodataComponent, NotificationService, OrderSummaryComponent, PageBase, PageSpinnerComponent, PagedPageBase, PayPalComponent, PayPalScriptService, PaymentMethod, PaymentMethodsComponent, PaymentOptionsComponent, PaymentStage, PaymentType, PaymentsApiService, PaymentsService, PaypalButtonComponent, PublishStatus, PublishStatusDropdownlist, QSUtils, ReplaceTextPipe, SafeHtmlPipe, ScriptService, SessionStorageService, SignInButtonComponent, SignOutButtonComponent, SignUpButtonComponent, StarterGuard, StarterService, Stopwatch, StripeDialog, Subs, SubscribePlanButtonComponent, SubscriptionsApiService, TimezoneDropdownlist, TransactionsApiService, UrlSlugComponent, Utils, ValidationSummaryComponent, XmlFormatter, YouAgreeToOurTermsComponent, dateFormats, dateTimeFormats, getAppSettingsById, getAppSettingsByName, is, localizationInitializerFactory, throwIfAlreadyLoaded, timeFormats, translateLoaderFactory };
+export { AddressComponent, AdminGuard, Alerts, AnatolyBillingModule, AnatolyCoreModule, AnatolyDataModule, AnatolyHttpInterceptor, AnatolyIAMModule, AnatolyIAMPagesModule, AnatolyModule, AnatolyUIModule, ApiServiceBase, ApiUrl, AppContextService, AppCoreSettings, AppName, AppSettings, AppVersion, AppsGoServiceBase, AuthService, AuthenticationGuard, BillingUtils, BraintreeDialog, Browser, BuyAccessButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CheckIconComponent, ClientApps, CompanyComponent, ComponentBase, ContactUsDialog, ContactUsForm, ControlPanelComponent, Convert, Copy2ClipboardComponent, CoreApiService, CountryDropdownlist, CurrenciesApiService, CurrenciesStorageService, DOM, DataPagerComponent, DataViewType, DateConvert, DefaultEditorOptions, DialogBase, DigitalMarketingService, DiscountCodeStatus, DiscountCodeType, DiscountCodesApiService, EditComponentBase, EditPageBase, EmailsApiService, EnumEditComponentBase, FeatureWillBeReadyComponent, FileSizePipe, FormValidationSummaryComponent, GABillingEvents, GAEvents, GlobalErrorHandler, GoServiceBase, GoogleAnalyticsService, GridEditServiceBase, GridReadServiceBase, Guid, HoveringDirective, HtmlEditorComponent, HtmlEditorComponentBase, IdleService, InjectorInstance, IsDevMode, IsProdMode, ItemValidationSummaryComponent, L10NUrl, L10nUtils, ListBase, LoadingComponent, LoadingService, LocalStorageService, LocalizationInjectorInstance, LocalizationModule, LocalizationService, LocalizationSettingsModule, LocalizePipe, LoggingService, MSALUtils, ModerationStatus, ModerationStatusDropdownlist, NativeElementDirective, NoMobileSupportComponent, NodataComponent, NotificationService, OrderSummaryComponent, PageBase, PageSpinnerComponent, PagedPageBase, PayPalComponent, PayPalScriptService, PaymentMethod, PaymentMethodsComponent, PaymentOptionsComponent, PaymentStage, PaymentType, PaymentsApiService, PaymentsService, PaypalButtonComponent, PublishStatus, PublishStatusDropdownlist, QSUtils, ReplaceTextPipe, SafeHtmlPipe, ScriptService, SessionStorageService, SignInButtonComponent, SignOutButtonComponent, SignUpButtonComponent, StarterGuard, StarterService, Stopwatch, StripeDialog, Subs, SubscribePlanButtonComponent, SubscriptionsApiService, TimezoneDropdownlist, TransactionsApiService, UrlSlugComponent, Utils, ValidationSummaryComponent, XmlFormatter, YouAgreeToOurTermsComponent, dateFormats, dateTimeFormats, getAppSettingsById, getAppSettingsByName, is, localizationInitializerFactory, throwIfAlreadyLoaded, timeFormats, translateLoaderFactory };
 //# sourceMappingURL=osovitny-anatoly.mjs.map