@memberjunction/ng-explorer-core 2.61.0 → 2.63.0

package/dist/lib/style-guide-test/style-guide-test.component.js

@@ -134,12 +134,12 @@ function StyleGuideTestComponent_ng_template_219_Template(rf, ctx) { if (rf & 1)
 } }
 function StyleGuideTestComponent_ng_template_221_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 180)(1, "kendo-button", 181);
-    i0.ɵɵlistener("click", function StyleGuideTestComponent_ng_template_221_Template_kendo_button_click_1_listener() { const dataItem_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.editItem(dataItem_r13)); });
+    i0.ɵɵelementStart(0, "div", 180)(1, "button", 181);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_ng_template_221_Template_button_click_1_listener() { const dataItem_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.editItem(dataItem_r13)); });
     i0.ɵɵelement(2, "i", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "kendo-button", 182);
-    i0.ɵɵlistener("click", function StyleGuideTestComponent_ng_template_221_Template_kendo_button_click_3_listener() { const dataItem_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.deleteItem(dataItem_r13)); });
+    i0.ɵɵelementStart(3, "button", 182);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_ng_template_221_Template_button_click_3_listener() { const dataItem_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.deleteItem(dataItem_r13)); });
     i0.ɵɵelement(4, "i", 35);
     i0.ɵɵelementEnd()();
 } }
@@ -159,7 +159,7 @@ function StyleGuideTestComponent_ng_template_310_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementStart(3, "p");
     i0.ɵɵtext(4, "View your application's key metrics and performance indicators.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "kendo-button", 60);
+    i0.ɵɵelementStart(5, "button", 60);
     i0.ɵɵtext(6, "View Details");
     i0.ɵɵelementEnd()();
 } }
@@ -220,11 +220,11 @@ function StyleGuideTestComponent_div_372_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
     i0.ɵɵelement(20, "kendo-dropdownlist", 199);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 200)(22, "kendo-button", 201);
-    i0.ɵɵlistener("click", function StyleGuideTestComponent_div_372_Template_kendo_button_click_22_listener() { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeModal()); });
+    i0.ɵɵelementStart(21, "div", 200)(22, "button", 201);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_div_372_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeModal()); });
     i0.ɵɵtext(23, "Cancel");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "kendo-button", 60)(25, "span", 14);
+    i0.ɵɵelementStart(24, "button", 60)(25, "span", 14);
     i0.ɵɵelement(26, "i", 17);
     i0.ɵɵtext(27, " Save Changes ");
     i0.ɵɵelementEnd()()()()();
@@ -317,12 +317,12 @@ function StyleGuideTestComponent_kendo_dialog_374_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementStart(19, "kendo-formfield", 212);
     i0.ɵɵelement(20, "kendo-label", 213)(21, "kendo-textarea", 214);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "kendo-dialog-actions")(23, "kendo-button", 201);
-    i0.ɵɵlistener("click", function StyleGuideTestComponent_kendo_dialog_374_Template_kendo_button_click_23_listener() { i0.ɵɵrestoreView(_r16); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeKendoDialog()); });
+    i0.ɵɵelementStart(22, "kendo-dialog-actions")(23, "button", 201);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_kendo_dialog_374_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r16); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeKendoDialog()); });
     i0.ɵɵtext(24, "Cancel");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "kendo-button", 215);
-    i0.ɵɵlistener("click", function StyleGuideTestComponent_kendo_dialog_374_Template_kendo_button_click_25_listener() { i0.ɵɵrestoreView(_r16); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.submitForm()); });
+    i0.ɵɵelementStart(25, "button", 215);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_kendo_dialog_374_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r16); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.submitForm()); });
     i0.ɵɵelementStart(26, "span", 14);
     i0.ɵɵelement(27, "i", 17);
     i0.ɵɵtext(28, " Save Changes ");
@@ -520,7 +520,7 @@ export class StyleGuideTestComponent {
         return this.formGroup.get('comments');
     }
     static ɵfac = function StyleGuideTestComponent_Factory(t) { return new (t || StyleGuideTestComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StyleGuideTestComponent, selectors: [["mj-style-guide-test"]], decls: 375, vars: 62, consts: [["fullNameInput", ""], ["deptDropdown", ""], ["nameField", ""], ["emailField", ""], ["deptField", ""], [1, "mj-page-container"], [1, "mj-content-container"], [1, "mj-header"], [1, "mj-header-title"], [1, "fas", "fa-paint-brush", "mj-header-icon"], [1, "mj-header-subtitle"], [1, "fas", "fa-palette"], [1, "mj-header-actions"], ["fillMode", "outline", "rounded", "medium", "themeColor", "base"], [1, "button-content"], [1, "fas", "fa-download"], ["themeColor", "primary", "rounded", "medium"], [1, "fas", "fa-save"], [1, "typography-demo"], [1, "text-muted"], [1, "mb-3"], [1, "button-group"], ["themeColor", "primary", "rounded", "medium", "size", "large"], [1, "fas", "fa-check"], ["themeColor", "info", "rounded", "medium"], [1, "fas", "fa-info-circle"], ["themeColor", "success", "rounded", "medium"], [1, "fas", "fa-check-circle"], ["themeColor", "warning", "rounded", "medium"], [1, "fas", "fa-exclamation-triangle"], ["themeColor", "error", "rounded", "medium"], [1, "fas", "fa-times-circle"], ["fillMode", "flat", "rounded", "full", "size", "large", "title", "Edit"], [1, "fas", "fa-edit"], ["fillMode", "flat", "rounded", "full", "size", "large", "title", "Delete"], [1, "fas", "fa-trash"], ["fillMode", "flat", "rounded", "full", "size", "large", "title", "Settings"], [1, "fas", "fa-cog"], ["fillMode", "flat", "rounded", "full", "size", "large", "title", "Search"], [1, "fas", "fa-search"], [1, "mj-btn", "mj-btn-primary"], [1, "fas", "fa-rocket"], [1, "mj-btn", "mj-btn-secondary"], [1, "mj-btn", "mj-btn-ghost"], [1, "fas", "fa-times"], ["kendoButton", "", 3, "toggleable", "selected"], [1, "fas", "fa-bold"], ["kendoButton", "", 3, "toggleable"], [1, "fas", "fa-italic"], [1, "fas", "fa-underline"], [1, "mj-grid", "mj-grid-4"], ["class", "mj-kendo-icon-card", 3, "click", 4, "ngFor", "ngForOf"], [1, "mt-4"], [1, "mj-grid", "mj-grid-3"], [1, "custom-kendo-card"], [1, "fas", "fa-chart-bar", "mr-2"], ["label", "Real-time", "icon", "clock", "themeColor", "success"], ["label", "Interactive", "icon", "filter", "themeColor", "info"], ["orientation", "horizontal", "layout", "end"], ["fillMode", "flat"], ["themeColor", "primary"], [1, "text-center"], ["shape", "circle", "size", "large", 3, "imageSrc"], [1, "mt-3"], [1, "fas", "fa-bell"], ["rounded", "full", "themeColor", "error", "position", "edge", 3, "align"], [1, "mj-empty-state"], [1, "fas", "fa-inbox", "mj-empty-icon"], [1, "fas", "fa-upload"], [1, "mj-grid", "mj-grid-2"], ["orientation", "vertical", 1, "mb-3"], ["text", "Full Name", 3, "for"], ["placeholder", "Enter your full name", "rounded", "medium", 3, "clearButton", "formControl"], ["class", "k-form-error", 4, "ngIf"], ["text", "Department", 3, "for"], ["textField", "name", "valueField", "id", "rounded", "medium", 3, "ngModelChange", "data", "ngModel"], ["kendoDropDownListItemTemplate", ""], ["text", "Technologies"], ["placeholder", "Select technologies...", "rounded", "medium", 3, "ngModelChange", "data", "ngModel"], ["text", "Project Date"], ["format", "dd/MM/yyyy", "rounded", "medium", 3, "valueChange", "value"], [1, "form-group"], [1, "form-label"], [1, "fas", "fa-search", "mr-1"], [1, "mj-search"], [1, "fas", "fa-search", "mj-search-icon"], ["type", "text", "placeholder", "Search items...", 1, "mj-search-input", 3, "ngModelChange", "ngModel"], [1, "fas", "fa-comment", "mr-1"], ["placeholder", "Enter your comments...", "rounded", "medium", 3, "formControl", "rows"], [1, "checkbox-group"], [1, "checkbox-label"], ["type", "checkbox", "kendoCheckBox", ""], [1, "ml-2"], ["type", "checkbox", "kendoCheckBox", "", "checked", ""], [1, "radio-group"], ["class", "radio-label", 4, "ngFor", "ngForOf"], [1, "custom-grid", 3, "data", "height", "sortable", "filterable", "groupable", "reorderable", "resizable", "selectable"], [3, "width", "headerClass"], ["field", "name", "title", "Name", 3, "width"], ["kendoGridCellTemplate", ""], ["field", "email", "title", "Email", 3, "width"], ["field", "department", "title", "Department", 3, "width"], ["field", "status", "title", "Status", 3, "width"], ["title", "Actions", 3, "width", "sortable", "filterable"], [1, "badge-group"], [1, "badge", "badge-success"], [1, "fas", "fa-check", "mr-1"], [1, "badge", "badge-danger"], [1, "fas", "fa-times", "mr-1"], [1, "badge", "badge-warning"], [1, "fas", "fa-clock", "mr-1"], [1, "badge", "badge-info"], [1, "fas", "fa-info-circle", "mr-1"], ["label", "Approved", "icon", "check", "themeColor", "success", 3, "removable"], ["label", "In Progress", "icon", "clock", "themeColor", "warning", 3, "removable"], ["label", "Rejected", "icon", "x", "themeColor", "error", 3, "removable"], ["label", "Under Review", "icon", "eye", "themeColor", "info", 3, "removable"], [1, "fas", "fa-envelope", "mr-2"], ["themeColor", "error", "position", "edge", 3, "align"], ["fillMode", "flat", "rounded", "full", "size", "large"], ["themeColor", "warning", "position", "edge", "rounded", "full", 3, "align"], ["initials", "JD", "themeColor", "info"], ["themeColor", "success", "position", "edge", "size", "small", 3, "align"], [1, "mj-toolbar"], [1, "mj-toolbar-title"], [1, "fas", "fa-users", "mr-2"], [1, "mj-toolbar-actions"], ["placeholder", "Search users...", "rounded", "medium", 2, "width", "300px", 3, "ngModelChange", "clearButton", "ngModel"], ["kendoTextBoxPrefixTemplate", ""], ["fillMode", "outline", "rounded", "medium"], [1, "fas", "fa-filter"], [1, "fas", "fa-user-plus"], [1, "mj-breadcrumb"], [1, "mj-breadcrumb-item"], [1, "fas", "fa-home", "mr-1"], [1, "fas", "fa-chevron-right", "mj-breadcrumb-separator"], [1, "fas", "fa-th", "mr-1"], [1, "mj-breadcrumb-item", "mj-breadcrumb-current"], [1, "fas", "fa-paint-brush", "mr-1"], ["title", "Overview", 3, "selected"], ["kendoTabTitle", ""], ["kendoTabContent", ""], ["title", "Settings"], ["title", "Reports"], ["type", "percent", 1, "mb-2", 3, "value", "max", "animation"], ["type", "value", 1, "mb-2", "progress-success", 3, "value", "max"], [3, "indeterminate", "animation"], ["themeColor", "primary", 1, "mt-2", 3, "click"], [1, "fas", "fa-sync"], ["type", "converging-spinner", "themeColor", "primary", "size", "medium"], [1, "mt-2", "mb-0"], ["type", "infinite-spinner", "themeColor", "info", "size", "medium"], ["type", "pulsing", "themeColor", "success", "size", "medium"], [1, "fas", "fa-spinner", "fa-spin", 2, "font-size", "2rem", "color", "var(--mj-blue)"], [1, "mj-btn", "mj-btn-primary", 3, "click"], [1, "fas", "fa-window-maximize"], ["themeColor", "info", "rounded", "medium", 3, "click"], [1, "fas", "fa-comment"], [1, "mj-btn", "mj-btn-secondary", 3, "click"], ["class", "mj-modal-overlay", 3, "click", 4, "ngIf"], ["title", "Edit User Information", 3, "minWidth", "width", "height", "close", 4, "ngIf"], [1, "mj-kendo-icon-card", 3, "click"], ["rounded", "full", "size", "small", 1, "mt-2", 3, "label", "themeColor"], [1, "mj-card-actions"], [1, "mj-btn", "mj-btn-icon-only", "mj-btn-sm", 3, "click"], [1, "k-form-error"], [1, "dropdown-item-content"], [1, "mr-2"], [1, "radio-label"], ["type", "radio", "name", "theme", "kendoRadioButton", "", 3, "ngModelChange", "value", "ngModel"], [1, "user-cell"], ["themeColor", "info", "shape", "circle", "size", "small", 3, "initials"], [1, "user-info"], [1, "user-name"], [1, "user-role"], [1, "email-link", 3, "href"], [1, "fas", "fa-envelope", "mr-1"], ["rounded", "medium", "fillMode", "outline", 3, "label"], [1, "status-cell"], ["rounded", "full", "size", "small", 3, "themeColor"], [1, "action-buttons"], ["fillMode", "flat", "rounded", "full", "size", "small", "themeColor", "info", "title", "Edit", 3, "click"], ["fillMode", "flat", "rounded", "full", "size", "small", "themeColor", "error", "title", "Delete", 3, "click"], [1, "fas", "fa-search", "search-prefix-icon"], [1, "tab-title"], [1, "fas", "fa-chart-pie", "mr-2"], [1, "tab-content-wrapper"], [1, "fas", "fa-cog", "mr-2"], [1, "fas", "fa-file-alt", "mr-2"], [1, "mj-modal-overlay", 3, "click"], [1, "mj-modal", "mj-modal-lg", 3, "click"], [1, "mj-modal-header"], [1, "mj-modal-title"], [1, "fas", "fa-cog", "mj-modal-icon"], [1, "mj-modal-close", 3, "click"], [1, "mj-modal-body"], [1, "fas", "fa-user", "mr-1"], ["placeholder", "Enter username", "rounded", "medium"], [1, "fas", "fa-palette", "mr-1"], ["rounded", "medium", 3, "data", "value"], [1, "mj-modal-footer"], ["fillMode", "outline", 3, "click"], [1, "mj-modal", "mj-modal-confirm", 3, "click"], [1, "fas", "fa-exclamation-triangle", "mj-modal-confirm-icon", "warning"], [1, "mj-btn", "mj-btn-ghost", 3, "click"], [1, "mj-btn", "mj-btn-primary", 2, "background", "#dc3545", "border-color", "#dc3545"], ["title", "Edit User Information", 3, "close", "minWidth", "width", "height"], [3, "formGroup"], ["formControlName", "fullName", "placeholder", "Enter full name", "rounded", "medium", 3, "clearButton"], ["text", "Email Address", 3, "for"], ["formControlName", "email", "placeholder", "user@example.com", "rounded", "medium", 3, "clearButton"], ["formControlName", "department", "textField", "name", "valueField", "id", "rounded", "medium", 3, "data"], ["orientation", "vertical"], ["text", "Additional Notes"], ["formControlName", "comments", "placeholder", "Enter any additional notes...", "rounded", "medium", 3, "rows"], ["themeColor", "primary", 3, "click", "disabled"], [1, "fas", "fa-user", "search-prefix-icon"], [1, "fas", "fa-envelope", "search-prefix-icon"]], template: function StyleGuideTestComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StyleGuideTestComponent, selectors: [["mj-style-guide-test"]], decls: 375, vars: 62, consts: [["fullNameInput", ""], ["deptDropdown", ""], ["nameField", ""], ["emailField", ""], ["deptField", ""], [1, "mj-page-container"], [1, "mj-content-container"], [1, "mj-header"], [1, "mj-header-title"], [1, "fas", "fa-paint-brush", "mj-header-icon"], [1, "mj-header-subtitle"], [1, "fas", "fa-palette"], [1, "mj-header-actions"], ["kendoButton", "", "fillMode", "outline", "rounded", "medium", "themeColor", "base"], [1, "button-content"], [1, "fas", "fa-download"], ["kendoButton", "", "themeColor", "primary", "rounded", "medium"], [1, "fas", "fa-save"], [1, "typography-demo"], [1, "text-muted"], [1, "mb-3"], [1, "button-group"], ["kendoButton", "", "themeColor", "primary", "rounded", "medium", "size", "large"], [1, "fas", "fa-check"], ["kendoButton", "", "themeColor", "info", "rounded", "medium"], [1, "fas", "fa-info-circle"], ["kendoButton", "", "themeColor", "success", "rounded", "medium"], [1, "fas", "fa-check-circle"], ["kendoButton", "", "themeColor", "warning", "rounded", "medium"], [1, "fas", "fa-exclamation-triangle"], ["kendoButton", "", "themeColor", "error", "rounded", "medium"], [1, "fas", "fa-times-circle"], ["kendoButton", "", "fillMode", "flat", "rounded", "full", "size", "large", "title", "Edit"], [1, "fas", "fa-edit"], ["kendoButton", "", "fillMode", "flat", "rounded", "full", "size", "large", "title", "Delete"], [1, "fas", "fa-trash"], ["kendoButton", "", "fillMode", "flat", "rounded", "full", "size", "large", "title", "Settings"], [1, "fas", "fa-cog"], ["kendoButton", "", "fillMode", "flat", "rounded", "full", "size", "large", "title", "Search"], [1, "fas", "fa-search"], [1, "mj-btn", "mj-btn-primary"], [1, "fas", "fa-rocket"], [1, "mj-btn", "mj-btn-secondary"], [1, "mj-btn", "mj-btn-ghost"], [1, "fas", "fa-times"], ["kendoButton", "", 3, "toggleable", "selected"], [1, "fas", "fa-bold"], ["kendoButton", "", 3, "toggleable"], [1, "fas", "fa-italic"], [1, "fas", "fa-underline"], [1, "mj-grid", "mj-grid-4"], ["class", "mj-kendo-icon-card", 3, "click", 4, "ngFor", "ngForOf"], [1, "mt-4"], [1, "mj-grid", "mj-grid-3"], [1, "custom-kendo-card"], [1, "fas", "fa-chart-bar", "mr-2"], ["label", "Real-time", "icon", "clock", "themeColor", "success"], ["label", "Interactive", "icon", "filter", "themeColor", "info"], ["orientation", "horizontal", "layout", "end"], ["kendoButton", "", "fillMode", "flat"], ["kendoButton", "", "themeColor", "primary"], [1, "text-center"], ["shape", "circle", "size", "large", 3, "imageSrc"], [1, "mt-3"], [1, "fas", "fa-bell"], ["rounded", "full", "themeColor", "error", "position", "edge", 3, "align"], [1, "mj-empty-state"], [1, "fas", "fa-inbox", "mj-empty-icon"], [1, "fas", "fa-upload"], [1, "mj-grid", "mj-grid-2"], ["orientation", "vertical", 1, "mb-3"], ["text", "Full Name", 3, "for"], ["placeholder", "Enter your full name", "rounded", "medium", 3, "clearButton", "formControl"], ["class", "k-form-error", 4, "ngIf"], ["text", "Department", 3, "for"], ["textField", "name", "valueField", "id", "rounded", "medium", 3, "ngModelChange", "data", "ngModel"], ["kendoDropDownListItemTemplate", ""], ["text", "Technologies"], ["placeholder", "Select technologies...", "rounded", "medium", 3, "ngModelChange", "data", "ngModel"], ["text", "Project Date"], ["format", "dd/MM/yyyy", "rounded", "medium", 3, "valueChange", "value"], [1, "form-group"], [1, "form-label"], [1, "fas", "fa-search", "mr-1"], [1, "mj-search"], [1, "fas", "fa-search", "mj-search-icon"], ["type", "text", "placeholder", "Search items...", 1, "mj-search-input", 3, "ngModelChange", "ngModel"], [1, "fas", "fa-comment", "mr-1"], ["placeholder", "Enter your comments...", "rounded", "medium", 3, "formControl", "rows"], [1, "checkbox-group"], [1, "checkbox-label"], ["type", "checkbox", "kendoCheckBox", ""], [1, "ml-2"], ["type", "checkbox", "kendoCheckBox", "", "checked", ""], [1, "radio-group"], ["class", "radio-label", 4, "ngFor", "ngForOf"], [1, "custom-grid", 3, "data", "height", "sortable", "filterable", "groupable", "reorderable", "resizable", "selectable"], [3, "width", "headerClass"], ["field", "name", "title", "Name", 3, "width"], ["kendoGridCellTemplate", ""], ["field", "email", "title", "Email", 3, "width"], ["field", "department", "title", "Department", 3, "width"], ["field", "status", "title", "Status", 3, "width"], ["title", "Actions", 3, "width", "sortable", "filterable"], [1, "badge-group"], [1, "badge", "badge-success"], [1, "fas", "fa-check", "mr-1"], [1, "badge", "badge-danger"], [1, "fas", "fa-times", "mr-1"], [1, "badge", "badge-warning"], [1, "fas", "fa-clock", "mr-1"], [1, "badge", "badge-info"], [1, "fas", "fa-info-circle", "mr-1"], ["label", "Approved", "icon", "check", "themeColor", "success", 3, "removable"], ["label", "In Progress", "icon", "clock", "themeColor", "warning", 3, "removable"], ["label", "Rejected", "icon", "x", "themeColor", "error", 3, "removable"], ["label", "Under Review", "icon", "eye", "themeColor", "info", 3, "removable"], [1, "fas", "fa-envelope", "mr-2"], ["themeColor", "error", "position", "edge", 3, "align"], ["kendoButton", "", "fillMode", "flat", "rounded", "full", "size", "large"], ["themeColor", "warning", "position", "edge", "rounded", "full", 3, "align"], ["initials", "JD", "themeColor", "info"], ["themeColor", "success", "position", "edge", "size", "small", 3, "align"], [1, "mj-toolbar"], [1, "mj-toolbar-title"], [1, "fas", "fa-users", "mr-2"], [1, "mj-toolbar-actions"], ["placeholder", "Search users...", "rounded", "medium", 2, "width", "300px", 3, "ngModelChange", "clearButton", "ngModel"], ["kendoTextBoxPrefixTemplate", ""], ["kendoButton", "", "fillMode", "outline", "rounded", "medium"], [1, "fas", "fa-filter"], [1, "fas", "fa-user-plus"], [1, "mj-breadcrumb"], [1, "mj-breadcrumb-item"], [1, "fas", "fa-home", "mr-1"], [1, "fas", "fa-chevron-right", "mj-breadcrumb-separator"], [1, "fas", "fa-th", "mr-1"], [1, "mj-breadcrumb-item", "mj-breadcrumb-current"], [1, "fas", "fa-paint-brush", "mr-1"], ["title", "Overview", 3, "selected"], ["kendoTabTitle", ""], ["kendoTabContent", ""], ["title", "Settings"], ["title", "Reports"], ["type", "percent", 1, "mb-2", 3, "value", "max", "animation"], ["type", "value", 1, "mb-2", "progress-success", 3, "value", "max"], [3, "indeterminate", "animation"], ["kendoButton", "", "themeColor", "primary", 1, "mt-2", 3, "click"], [1, "fas", "fa-sync"], ["type", "converging-spinner", "themeColor", "primary", "size", "medium"], [1, "mt-2", "mb-0"], ["type", "infinite-spinner", "themeColor", "info", "size", "medium"], ["type", "pulsing", "themeColor", "success", "size", "medium"], [1, "fas", "fa-spinner", "fa-spin", 2, "font-size", "2rem", "color", "var(--mj-blue)"], [1, "mj-btn", "mj-btn-primary", 3, "click"], [1, "fas", "fa-window-maximize"], ["kendoButton", "", "themeColor", "info", "rounded", "medium", 3, "click"], [1, "fas", "fa-comment"], [1, "mj-btn", "mj-btn-secondary", 3, "click"], ["class", "mj-modal-overlay", 3, "click", 4, "ngIf"], ["title", "Edit User Information", 3, "minWidth", "width", "height", "close", 4, "ngIf"], [1, "mj-kendo-icon-card", 3, "click"], ["rounded", "full", "size", "small", 1, "mt-2", 3, "label", "themeColor"], [1, "mj-card-actions"], [1, "mj-btn", "mj-btn-icon-only", "mj-btn-sm", 3, "click"], [1, "k-form-error"], [1, "dropdown-item-content"], [1, "mr-2"], [1, "radio-label"], ["type", "radio", "name", "theme", "kendoRadioButton", "", 3, "ngModelChange", "value", "ngModel"], [1, "user-cell"], ["themeColor", "info", "shape", "circle", "size", "small", 3, "initials"], [1, "user-info"], [1, "user-name"], [1, "user-role"], [1, "email-link", 3, "href"], [1, "fas", "fa-envelope", "mr-1"], ["rounded", "medium", "fillMode", "outline", 3, "label"], [1, "status-cell"], ["rounded", "full", "size", "small", 3, "themeColor"], [1, "action-buttons"], ["kendoButton", "", "fillMode", "flat", "rounded", "full", "size", "small", "themeColor", "info", "title", "Edit", 3, "click"], ["kendoButton", "", "fillMode", "flat", "rounded", "full", "size", "small", "themeColor", "error", "title", "Delete", 3, "click"], [1, "fas", "fa-search", "search-prefix-icon"], [1, "tab-title"], [1, "fas", "fa-chart-pie", "mr-2"], [1, "tab-content-wrapper"], [1, "fas", "fa-cog", "mr-2"], [1, "fas", "fa-file-alt", "mr-2"], [1, "mj-modal-overlay", 3, "click"], [1, "mj-modal", "mj-modal-lg", 3, "click"], [1, "mj-modal-header"], [1, "mj-modal-title"], [1, "fas", "fa-cog", "mj-modal-icon"], [1, "mj-modal-close", 3, "click"], [1, "mj-modal-body"], [1, "fas", "fa-user", "mr-1"], ["placeholder", "Enter username", "rounded", "medium"], [1, "fas", "fa-palette", "mr-1"], ["rounded", "medium", 3, "data", "value"], [1, "mj-modal-footer"], ["kendoButton", "", "fillMode", "outline", 3, "click"], [1, "mj-modal", "mj-modal-confirm", 3, "click"], [1, "fas", "fa-exclamation-triangle", "mj-modal-confirm-icon", "warning"], [1, "mj-btn", "mj-btn-ghost", 3, "click"], [1, "mj-btn", "mj-btn-primary", 2, "background", "#dc3545", "border-color", "#dc3545"], ["title", "Edit User Information", 3, "close", "minWidth", "width", "height"], [3, "formGroup"], ["formControlName", "fullName", "placeholder", "Enter full name", "rounded", "medium", 3, "clearButton"], ["text", "Email Address", 3, "for"], ["formControlName", "email", "placeholder", "user@example.com", "rounded", "medium", 3, "clearButton"], ["formControlName", "department", "textField", "name", "valueField", "id", "rounded", "medium", 3, "data"], ["orientation", "vertical"], ["text", "Additional Notes"], ["formControlName", "comments", "placeholder", "Enter any additional notes...", "rounded", "medium", 3, "rows"], ["kendoButton", "", "themeColor", "primary", 3, "click", "disabled"], [1, "fas", "fa-user", "search-prefix-icon"], [1, "fas", "fa-envelope", "search-prefix-icon"]], template: function StyleGuideTestComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 5)(1, "div", 6)(2, "div", 7)(3, "div", 8);
             i0.ɵɵelement(4, "i", 9);
@@ -531,11 +531,11 @@ export class StyleGuideTestComponent {
             i0.ɵɵelement(9, "i", 11);
             i0.ɵɵtext(10, " Modern components with custom styling ");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(11, "div", 12)(12, "kendo-button", 13)(13, "span", 14);
+            i0.ɵɵelementStart(11, "div", 12)(12, "button", 13)(13, "span", 14);
             i0.ɵɵelement(14, "i", 15);
             i0.ɵɵtext(15, " Export ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(16, "kendo-button", 16)(17, "span", 14);
+            i0.ɵɵelementStart(16, "button", 16)(17, "span", 14);
             i0.ɵɵelement(18, "i", 17);
             i0.ɵɵtext(19, " Save Changes ");
             i0.ɵɵelementEnd()()()()();
@@ -566,39 +566,39 @@ export class StyleGuideTestComponent {
             i0.ɵɵelementStart(39, "div", 20)(40, "h4");
             i0.ɵɵtext(41, "Kendo Buttons with Font Awesome Icons");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(42, "div", 21)(43, "kendo-button", 22)(44, "span", 14);
+            i0.ɵɵelementStart(42, "div", 21)(43, "button", 22)(44, "span", 14);
             i0.ɵɵelement(45, "i", 23);
             i0.ɵɵtext(46, " Primary Action ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(47, "kendo-button", 24)(48, "span", 14);
+            i0.ɵɵelementStart(47, "button", 24)(48, "span", 14);
             i0.ɵɵelement(49, "i", 25);
             i0.ɵɵtext(50, " Info Button ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(51, "kendo-button", 26)(52, "span", 14);
+            i0.ɵɵelementStart(51, "button", 26)(52, "span", 14);
             i0.ɵɵelement(53, "i", 27);
             i0.ɵɵtext(54, " Success ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(55, "kendo-button", 28)(56, "span", 14);
+            i0.ɵɵelementStart(55, "button", 28)(56, "span", 14);
             i0.ɵɵelement(57, "i", 29);
             i0.ɵɵtext(58, " Warning ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(59, "kendo-button", 30)(60, "span", 14);
+            i0.ɵɵelementStart(59, "button", 30)(60, "span", 14);
             i0.ɵɵelement(61, "i", 31);
             i0.ɵɵtext(62, " Error ");
             i0.ɵɵelementEnd()()()();
             i0.ɵɵelementStart(63, "div", 20)(64, "h4");
             i0.ɵɵtext(65, "Icon-Only Kendo Buttons");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(66, "div", 21)(67, "kendo-button", 32);
+            i0.ɵɵelementStart(66, "div", 21)(67, "button", 32);
             i0.ɵɵelement(68, "i", 33);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(69, "kendo-button", 34);
+            i0.ɵɵelementStart(69, "button", 34);
             i0.ɵɵelement(70, "i", 35);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(71, "kendo-button", 36);
+            i0.ɵɵelementStart(71, "button", 36);
             i0.ɵɵelement(72, "i", 37);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(73, "kendo-button", 38);
+            i0.ɵɵelementStart(73, "button", 38);
             i0.ɵɵelement(74, "i", 39);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(75, "div", 20)(76, "h4");
@@ -650,10 +650,10 @@ export class StyleGuideTestComponent {
             i0.ɵɵelementStart(117, "kendo-chip-list");
             i0.ɵɵelement(118, "kendo-chip", 56)(119, "kendo-chip", 57);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(120, "kendo-card-actions", 58)(121, "kendo-button", 59);
+            i0.ɵɵelementStart(120, "kendo-card-actions", 58)(121, "button", 59);
             i0.ɵɵtext(122, "Details");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(123, "kendo-button", 60);
+            i0.ɵɵelementStart(123, "button", 60);
             i0.ɵɵtext(124, "View Dashboard");
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(125, "kendo-card", 54)(126, "kendo-card-body")(127, "div", 61);
@@ -664,7 +664,7 @@ export class StyleGuideTestComponent {
             i0.ɵɵelementStart(131, "p");
             i0.ɵɵtext(132, "Manage your account settings and preferences");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(133, "kendo-badge-container")(134, "kendo-button", 16)(135, "span", 14);
+            i0.ɵɵelementStart(133, "kendo-badge-container")(134, "button", 16)(135, "span", 14);
             i0.ɵɵelement(136, "i", 64);
             i0.ɵɵtext(137, " Notifications ");
             i0.ɵɵelementEnd()();
@@ -679,7 +679,7 @@ export class StyleGuideTestComponent {
             i0.ɵɵelementStart(146, "p");
             i0.ɵɵtext(147, "Start by importing your data");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(148, "kendo-button", 16)(149, "span", 14);
+            i0.ɵɵelementStart(148, "button", 16)(149, "span", 14);
             i0.ɵɵelement(150, "i", 68);
             i0.ɵɵtext(151, " Import Data ");
             i0.ɵɵelementEnd()()()()()()()();
@@ -797,14 +797,14 @@ export class StyleGuideTestComponent {
             i0.ɵɵelementStart(249, "div", 20)(250, "h4");
             i0.ɵɵtext(251, "Notification Badges");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(252, "div", 104)(253, "kendo-badge-container")(254, "kendo-button", 16);
+            i0.ɵɵelementStart(252, "div", 104)(253, "kendo-badge-container")(254, "button", 16);
             i0.ɵɵelement(255, "i", 117);
             i0.ɵɵtext(256, " Messages ");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(257, "kendo-badge", 118);
             i0.ɵɵtext(258, "12");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(259, "kendo-badge-container")(260, "kendo-button", 119);
+            i0.ɵɵelementStart(259, "kendo-badge-container")(260, "button", 119);
             i0.ɵɵelement(261, "i", 64);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(262, "kendo-badge", 120);
@@ -829,11 +829,11 @@ export class StyleGuideTestComponent {
             i0.ɵɵtwoWayListener("ngModelChange", function StyleGuideTestComponent_Template_kendo_textbox_ngModelChange_279_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.searchText, $event) || (ctx.searchText = $event); return i0.ɵɵresetView($event); });
             i0.ɵɵtemplate(280, StyleGuideTestComponent_ng_template_280_Template, 1, 0, "ng-template", 128);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(281, "kendo-button", 129)(282, "span", 14);
+            i0.ɵɵelementStart(281, "button", 129)(282, "span", 14);
             i0.ɵɵelement(283, "i", 130);
             i0.ɵɵtext(284, " Filter ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(285, "kendo-button", 16)(286, "span", 14);
+            i0.ɵɵelementStart(285, "button", 16)(286, "span", 14);
             i0.ɵɵelement(287, "i", 131);
             i0.ɵɵtext(288, " Add User ");
             i0.ɵɵelementEnd()()()()();
@@ -873,8 +873,8 @@ export class StyleGuideTestComponent {
             i0.ɵɵtext(322, "Kendo Progress Bars");
             i0.ɵɵelementEnd();
             i0.ɵɵelement(323, "kendo-progressbar", 144)(324, "kendo-progressbar", 145)(325, "kendo-progressbar", 146);
-            i0.ɵɵelementStart(326, "kendo-button", 147);
-            i0.ɵɵlistener("click", function StyleGuideTestComponent_Template_kendo_button_click_326_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.loadData()); });
+            i0.ɵɵelementStart(326, "button", 147);
+            i0.ɵɵlistener("click", function StyleGuideTestComponent_Template_button_click_326_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.loadData()); });
             i0.ɵɵelementStart(327, "span", 14);
             i0.ɵɵelement(328, "i", 148);
             i0.ɵɵtext(329, " Simulate Loading ");
@@ -910,8 +910,8 @@ export class StyleGuideTestComponent {
             i0.ɵɵelement(363, "i", 155);
             i0.ɵɵtext(364, " Custom Modal ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(365, "kendo-button", 156);
-            i0.ɵɵlistener("click", function StyleGuideTestComponent_Template_kendo_button_click_365_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.openKendoDialog()); });
+            i0.ɵɵelementStart(365, "button", 156);
+            i0.ɵɵlistener("click", function StyleGuideTestComponent_Template_button_click_365_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.openKendoDialog()); });
             i0.ɵɵelementStart(366, "span", 14);
             i0.ɵɵelement(367, "i", 157);
             i0.ɵɵtext(368, " Kendo Dialog ");
@@ -1011,7 +1011,7 @@ export class StyleGuideTestComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StyleGuideTestComponent, [{
         type: Component,
-        args: [{ selector: 'mj-style-guide-test', template: "<!-- Enhanced Style Guide with Kendo UI Components and Font Awesome -->\n<div class=\"mj-page-container\">\n  <!-- Page Header with Mixed Components -->\n  <div class=\"mj-content-container\">\n    <div class=\"mj-header\">\n      <div class=\"mj-header-title\">\n        <i class=\"fas fa-paint-brush mj-header-icon\"></i>\n        <div>\n          <h1>Kendo UI + Font Awesome Style Guide</h1>\n          <div class=\"mj-header-subtitle\">\n            <i class=\"fas fa-palette\"></i>\n            Modern components with custom styling\n          </div>\n        </div>\n      </div>\n      <div class=\"mj-header-actions\">\n        <!-- Kendo Button with Font Awesome Icon -->\n        <kendo-button fillMode=\"outline\" rounded=\"medium\" themeColor=\"base\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-download\"></i>\n            Export\n          </span>\n        </kendo-button>\n        <kendo-button themeColor=\"primary\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-save\"></i>\n            Save Changes\n          </span>\n        </kendo-button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Typography Section -->\n  <div class=\"mj-content-container\">\n    <h2>Typography Examples</h2>\n    <div class=\"typography-demo\">\n      <h1>Heading 1 - Main page titles</h1>\n      <h2>Heading 2 - Section headers</h2>\n      <h3>Heading 3 - Subsection titles</h3>\n      <h4>Heading 4 - Component titles</h4>\n      <p>Body text - Regular paragraph content with good readability and proper line height for easy reading.</p>\n      <p class=\"text-muted\">Muted text for secondary information</p>\n    </div>\n  </div>\n\n  <!-- Enhanced Button Examples -->\n  <div class=\"mj-content-container\">\n    <h2>Button System Comparison</h2>\n    \n    <div class=\"mb-3\">\n      <h4>Kendo Buttons with Font Awesome Icons</h4>\n      <div class=\"button-group\">\n        <kendo-button themeColor=\"primary\" rounded=\"medium\" size=\"large\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-check\"></i>\n            Primary Action\n          </span>\n        </kendo-button>\n        <kendo-button themeColor=\"info\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-info-circle\"></i>\n            Info Button\n          </span>\n        </kendo-button>\n        <kendo-button themeColor=\"success\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-check-circle\"></i>\n            Success\n          </span>\n        </kendo-button>\n        <kendo-button themeColor=\"warning\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-exclamation-triangle\"></i>\n            Warning\n          </span>\n        </kendo-button>\n        <kendo-button themeColor=\"error\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-times-circle\"></i>\n            Error\n          </span>\n        </kendo-button>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Icon-Only Kendo Buttons</h4>\n      <div class=\"button-group\">\n        <kendo-button fillMode=\"flat\" rounded=\"full\" size=\"large\" title=\"Edit\">\n          <i class=\"fas fa-edit\"></i>\n        </kendo-button>\n        <kendo-button fillMode=\"flat\" rounded=\"full\" size=\"large\" title=\"Delete\">\n          <i class=\"fas fa-trash\"></i>\n        </kendo-button>\n        <kendo-button fillMode=\"flat\" rounded=\"full\" size=\"large\" title=\"Settings\">\n          <i class=\"fas fa-cog\"></i>\n        </kendo-button>\n        <kendo-button fillMode=\"flat\" rounded=\"full\" size=\"large\" title=\"Search\">\n          <i class=\"fas fa-search\"></i>\n        </kendo-button>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Custom MJ Buttons (For Comparison)</h4>\n      <div class=\"button-group\">\n        <button class=\"mj-btn mj-btn-primary\">\n          <i class=\"fas fa-rocket\"></i>\n          Launch\n        </button>\n        <button class=\"mj-btn mj-btn-secondary\">\n          <i class=\"fas fa-edit\"></i>\n          Edit\n        </button>\n        <button class=\"mj-btn mj-btn-ghost\">\n          <i class=\"fas fa-times\"></i>\n          Cancel\n        </button>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Kendo Button Group</h4>\n      <kendo-buttongroup>\n        <button kendoButton [toggleable]=\"true\" [selected]=\"true\">\n          <i class=\"fas fa-bold\"></i>\n        </button>\n        <button kendoButton [toggleable]=\"true\">\n          <i class=\"fas fa-italic\"></i>\n        </button>\n        <button kendoButton [toggleable]=\"true\">\n          <i class=\"fas fa-underline\"></i>\n        </button>\n      </kendo-buttongroup>\n    </div>\n  </div>\n\n  <!-- Enhanced Card System with Icon Cards -->\n  <div class=\"mj-content-container\">\n    <h2>Card Components</h2>\n    \n    <h4>Icon Cards with Hover Effects (Kendo Cards)</h4>\n    <div class=\"mj-grid mj-grid-4\">\n      <kendo-card class=\"mj-kendo-icon-card\" *ngFor=\"let item of sampleItems\" (click)=\"handleCardClick(item)\">\n        <kendo-card-body>\n          <i [class]=\"'fas ' + item.icon + ' mj-card-icon-large'\"></i>\n          <h3>{{item.name}}</h3>\n          <p>{{item.description}}</p>\n          <kendo-chip \n            [label]=\"item.color.toUpperCase()\" \n            rounded=\"full\"\n            [themeColor]=\"item.color\"\n            size=\"small\"\n            class=\"mt-2\">\n          </kendo-chip>\n          <div class=\"mj-card-actions\">\n            <button class=\"mj-btn mj-btn-icon-only mj-btn-sm\" (click)=\"$event.stopPropagation(); handleButtonClick('edit', item)\">\n              <i class=\"fas fa-edit\"></i>\n            </button>\n            <button class=\"mj-btn mj-btn-icon-only mj-btn-sm\" (click)=\"$event.stopPropagation(); handleButtonClick('delete', item)\">\n              <i class=\"fas fa-trash\"></i>\n            </button>\n          </div>\n        </kendo-card-body>\n      </kendo-card>\n    </div>\n\n    <div class=\"mt-4\">\n      <h4>Kendo Cards with Custom Styling</h4>\n      <div class=\"mj-grid mj-grid-3\">\n        <kendo-card class=\"custom-kendo-card\">\n          <kendo-card-header>\n            <h4>\n              <i class=\"fas fa-chart-bar mr-2\"></i>\n              Analytics Overview\n            </h4>\n          </kendo-card-header>\n          <kendo-card-body>\n            <p>View real-time analytics and performance metrics for your application.</p>\n            <kendo-chip-list>\n              <kendo-chip label=\"Real-time\" icon=\"clock\" themeColor=\"success\"></kendo-chip>\n              <kendo-chip label=\"Interactive\" icon=\"filter\" themeColor=\"info\"></kendo-chip>\n            </kendo-chip-list>\n          </kendo-card-body>\n          <kendo-card-actions orientation=\"horizontal\" layout=\"end\">\n            <kendo-button fillMode=\"flat\">Details</kendo-button>\n            <kendo-button themeColor=\"primary\">View Dashboard</kendo-button>\n          </kendo-card-actions>\n        </kendo-card>\n\n        <kendo-card class=\"custom-kendo-card\">\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <kendo-avatar [imageSrc]=\"'assets/avatar-placeholder.jpg'\" shape=\"circle\" size=\"large\"></kendo-avatar>\n              <h4 class=\"mt-3\">User Profile</h4>\n              <p>Manage your account settings and preferences</p>\n              <kendo-badge-container>\n                <kendo-button themeColor=\"primary\" rounded=\"medium\">\n                  <span class=\"button-content\">\n                    <i class=\"fas fa-bell\"></i>\n                    Notifications\n                  </span>\n                </kendo-button>\n                <kendo-badge rounded=\"full\" themeColor=\"error\" position=\"edge\" [align]=\"badgeAlignTopEnd\">{{notificationCount}}</kendo-badge>\n              </kendo-badge-container>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n\n        <kendo-card class=\"custom-kendo-card\">\n          <kendo-card-body>\n            <div class=\"mj-empty-state\">\n              <i class=\"fas fa-inbox mj-empty-icon\"></i>\n              <h3>No Data Available</h3>\n              <p>Start by importing your data</p>\n              <kendo-button themeColor=\"primary\" rounded=\"medium\">\n                <span class=\"button-content\">\n                  <i class=\"fas fa-upload\"></i>\n                  Import Data\n                </span>\n              </kendo-button>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Enhanced Form Elements -->\n  <div class=\"mj-content-container\">\n    <h2>Form Elements - Kendo vs Custom</h2>\n    \n    <div class=\"mj-grid mj-grid-2\">\n      <div>\n        <h4>Kendo Form Components</h4>\n        \n        <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n          <kendo-label text=\"Full Name\" [for]=\"fullNameInput\"></kendo-label>\n          <kendo-textbox \n            #fullNameInput\n            placeholder=\"Enter your full name\"\n            [clearButton]=\"true\"\n            [formControl]=\"fullNameControl\"\n            rounded=\"medium\">\n          </kendo-textbox>\n          <div class=\"k-form-error\" *ngIf=\"fullNameControl.touched && fullNameControl.errors?.['required']\">\n            Full name is required\n          </div>\n        </kendo-formfield>\n\n        <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n          <kendo-label text=\"Department\" [for]=\"deptDropdown\"></kendo-label>\n          <kendo-dropdownlist \n            #deptDropdown\n            [data]=\"departments\"\n            textField=\"name\"\n            valueField=\"id\"\n            [(ngModel)]=\"selectedDepartment\"\n            rounded=\"medium\">\n            <ng-template kendoDropDownListItemTemplate let-dataItem>\n              <span class=\"dropdown-item-content\">\n                <i [class]=\"dataItem.icon\" class=\"mr-2\"></i>\n                {{ dataItem.name }}\n              </span>\n            </ng-template>\n          </kendo-dropdownlist>\n        </kendo-formfield>\n\n        <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n          <kendo-label text=\"Technologies\"></kendo-label>\n          <kendo-multiselect \n            [data]=\"technologies\"\n            [(ngModel)]=\"selectedTechnologies\"\n            placeholder=\"Select technologies...\"\n            rounded=\"medium\">\n          </kendo-multiselect>\n        </kendo-formfield>\n\n        <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n          <kendo-label text=\"Project Date\"></kendo-label>\n          <kendo-datepicker \n            [(value)]=\"dateValue\"\n            format=\"dd/MM/yyyy\"\n            rounded=\"medium\">\n          </kendo-datepicker>\n        </kendo-formfield>\n      </div>\n      \n      <div>\n        <h4>Custom Form Elements</h4>\n        \n        <div class=\"form-group\">\n          <label class=\"form-label\">\n            <i class=\"fas fa-search mr-1\"></i>\n            Search Field\n          </label>\n          <div class=\"mj-search\">\n            <i class=\"fas fa-search mj-search-icon\"></i>\n            <input type=\"text\" class=\"mj-search-input\" placeholder=\"Search items...\" [(ngModel)]=\"searchText\">\n          </div>\n        </div>\n\n        <div class=\"form-group\">\n          <label class=\"form-label\">\n            <i class=\"fas fa-comment mr-1\"></i>\n            Comments\n          </label>\n          <kendo-textarea \n            [formControl]=\"commentsControl\"\n            placeholder=\"Enter your comments...\"\n            [rows]=\"4\"\n            rounded=\"medium\">\n          </kendo-textarea>\n        </div>\n\n        <div class=\"form-group\">\n          <label class=\"form-label\">Options</label>\n          <div class=\"checkbox-group\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" kendoCheckBox />\n              <span class=\"ml-2\">Enable notifications</span>\n            </label>\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" kendoCheckBox checked />\n              <span class=\"ml-2\">Subscribe to newsletter</span>\n            </label>\n          </div>\n        </div>\n\n        <div class=\"form-group\">\n          <label class=\"form-label\">Theme Preference</label>\n          <div class=\"radio-group\">\n            <label class=\"radio-label\" *ngFor=\"let option of themeOptions\">\n              <input type=\"radio\" name=\"theme\" [value]=\"option\" [(ngModel)]=\"selectedTheme\" kendoRadioButton />\n              <span class=\"ml-2\">{{option}}</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Enhanced Kendo Grid with Font Awesome -->\n  <div class=\"mj-content-container\">\n    <h2>Enhanced Kendo Grid</h2>\n    \n    <kendo-grid \n      [data]=\"gridData\" \n      [height]=\"400\" \n      [sortable]=\"true\"\n      [filterable]=\"true\"\n      [groupable]=\"false\"\n      [reorderable]=\"true\"\n      [resizable]=\"true\"\n      [selectable]=\"{ checkboxOnly: true, mode: 'multiple' }\"\n      class=\"custom-grid\">\n      \n      <kendo-grid-checkbox-column [width]=\"45\" [headerClass]=\"'text-center'\" [class]=\"'text-center'\"></kendo-grid-checkbox-column>\n      \n      <kendo-grid-column field=\"name\" title=\"Name\" [width]=\"200\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <div class=\"user-cell\">\n            <kendo-avatar \n              [initials]=\"getInitials(dataItem.name)\" \n              themeColor=\"info\"\n              shape=\"circle\"\n              size=\"small\">\n            </kendo-avatar>\n            <div class=\"user-info\">\n              <div class=\"user-name\">{{ dataItem.name }}</div>\n              <div class=\"user-role\">{{ dataItem.role }}</div>\n            </div>\n          </div>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column field=\"email\" title=\"Email\" [width]=\"220\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <a href=\"mailto:{{dataItem.email}}\" class=\"email-link\">\n            <i class=\"fas fa-envelope mr-1\"></i>\n            {{ dataItem.email }}\n          </a>\n        </ng-template>\n      </kendo-grid-column>\n      \n      <kendo-grid-column field=\"department\" title=\"Department\" [width]=\"150\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <kendo-chip \n            [label]=\"dataItem.department\"\n            rounded=\"medium\"\n            fillMode=\"outline\">\n          </kendo-chip>\n        </ng-template>\n      </kendo-grid-column>\n      \n      <kendo-grid-column field=\"status\" title=\"Status\" [width]=\"120\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <span class=\"status-cell\">\n            <i [class]=\"getStatusIcon(dataItem.status) + ' mr-1'\"></i>\n            <kendo-badge \n              [themeColor]=\"getStatusThemeColor(dataItem.status)\"\n              rounded=\"full\"\n              size=\"small\">\n              {{ dataItem.status }}\n            </kendo-badge>\n          </span>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column title=\"Actions\" [width]=\"120\" [sortable]=\"false\" [filterable]=\"false\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <div class=\"action-buttons\">\n            <kendo-button \n              fillMode=\"flat\"\n              rounded=\"full\"\n              size=\"small\"\n              themeColor=\"info\"\n              title=\"Edit\"\n              (click)=\"editItem(dataItem)\">\n              <i class=\"fas fa-edit\"></i>\n            </kendo-button>\n            <kendo-button \n              fillMode=\"flat\"\n              rounded=\"full\"\n              size=\"small\"\n              themeColor=\"error\"\n              title=\"Delete\"\n              (click)=\"deleteItem(dataItem)\">\n              <i class=\"fas fa-trash\"></i>\n            </kendo-button>\n          </div>\n        </ng-template>\n      </kendo-grid-column>\n    </kendo-grid>\n  </div>\n\n  <!-- Badges and Chips -->\n  <div class=\"mj-content-container\">\n    <h2>Badges, Chips & Status Indicators</h2>\n    \n    <div class=\"mb-3\">\n      <h4>Custom Badges with Font Awesome</h4>\n      <div class=\"badge-group\">\n        <span class=\"badge badge-success\">\n          <i class=\"fas fa-check mr-1\"></i>\n          Active\n        </span>\n        <span class=\"badge badge-danger\">\n          <i class=\"fas fa-times mr-1\"></i>\n          Inactive\n        </span>\n        <span class=\"badge badge-warning\">\n          <i class=\"fas fa-clock mr-1\"></i>\n          Pending\n        </span>\n        <span class=\"badge badge-info\">\n          <i class=\"fas fa-info-circle mr-1\"></i>\n          Info\n        </span>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Kendo Chips with Icons</h4>\n      <kendo-chip-list>\n        <kendo-chip label=\"Approved\" icon=\"check\" themeColor=\"success\" [removable]=\"true\"></kendo-chip>\n        <kendo-chip label=\"In Progress\" icon=\"clock\" themeColor=\"warning\" [removable]=\"true\"></kendo-chip>\n        <kendo-chip label=\"Rejected\" icon=\"x\" themeColor=\"error\" [removable]=\"true\"></kendo-chip>\n        <kendo-chip label=\"Under Review\" icon=\"eye\" themeColor=\"info\" [removable]=\"true\"></kendo-chip>\n      </kendo-chip-list>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Notification Badges</h4>\n      <div class=\"badge-group\">\n        <kendo-badge-container>\n          <kendo-button themeColor=\"primary\" rounded=\"medium\">\n            <i class=\"fas fa-envelope mr-2\"></i>\n            Messages\n          </kendo-button>\n          <kendo-badge themeColor=\"error\" position=\"edge\" [align]=\"badgeAlignTopEnd\">12</kendo-badge>\n        </kendo-badge-container>\n\n        <kendo-badge-container>\n          <kendo-button fillMode=\"flat\" rounded=\"full\" size=\"large\">\n            <i class=\"fas fa-bell\"></i>\n          </kendo-button>\n          <kendo-badge themeColor=\"warning\" position=\"edge\" [align]=\"badgeAlignTopEnd\" rounded=\"full\">3</kendo-badge>\n        </kendo-badge-container>\n\n        <kendo-badge-container>\n          <kendo-avatar initials=\"JD\" themeColor=\"info\"></kendo-avatar>\n          <kendo-badge themeColor=\"success\" position=\"edge\" [align]=\"badgeAlignBottomEnd\" size=\"small\">\n            <i class=\"fas fa-check\"></i>\n          </kendo-badge>\n        </kendo-badge-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Navigation Components -->\n  <div class=\"mj-content-container\">\n    <h2>Navigation & Layout Components</h2>\n    \n    <div class=\"mb-3\">\n      <h4>Enhanced Toolbar with Search</h4>\n      <div class=\"mj-toolbar\">\n        <h3 class=\"mj-toolbar-title\">\n          <i class=\"fas fa-users mr-2\"></i>\n          User Management\n        </h3>\n        <div class=\"mj-toolbar-actions\">\n          <kendo-textbox \n            placeholder=\"Search users...\"\n            [clearButton]=\"true\"\n            [(ngModel)]=\"searchText\"\n            rounded=\"medium\"\n            style=\"width: 300px;\">\n            <ng-template kendoTextBoxPrefixTemplate>\n              <i class=\"fas fa-search search-prefix-icon\"></i>\n            </ng-template>\n          </kendo-textbox>\n          <kendo-button fillMode=\"outline\" rounded=\"medium\">\n            <span class=\"button-content\">\n              <i class=\"fas fa-filter\"></i>\n              Filter\n            </span>\n          </kendo-button>\n          <kendo-button themeColor=\"primary\" rounded=\"medium\">\n            <span class=\"button-content\">\n              <i class=\"fas fa-user-plus\"></i>\n              Add User\n            </span>\n          </kendo-button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Breadcrumb Navigation</h4>\n      <nav class=\"mj-breadcrumb\">\n        <span class=\"mj-breadcrumb-item\">\n          <i class=\"fas fa-home mr-1\"></i>\n          Home\n        </span>\n        <i class=\"fas fa-chevron-right mj-breadcrumb-separator\"></i>\n        <span class=\"mj-breadcrumb-item\">\n          <i class=\"fas fa-th mr-1\"></i>\n          Components\n        </span>\n        <i class=\"fas fa-chevron-right mj-breadcrumb-separator\"></i>\n        <span class=\"mj-breadcrumb-item mj-breadcrumb-current\">\n          <i class=\"fas fa-paint-brush mr-1\"></i>\n          Style Guide\n        </span>\n      </nav>\n    </div>\n\n    <div>\n      <h4>Kendo TabStrip with Font Awesome</h4>\n      <kendo-tabstrip>\n        <kendo-tabstrip-tab title=\"Overview\" [selected]=\"true\">\n          <ng-template kendoTabTitle>\n            <span class=\"tab-title\">\n              <i class=\"fas fa-chart-pie mr-2\"></i>\n              Overview\n            </span>\n          </ng-template>\n          <ng-template kendoTabContent>\n            <div class=\"tab-content-wrapper\">\n              <h5>Dashboard Overview</h5>\n              <p>View your application's key metrics and performance indicators.</p>\n              <kendo-button themeColor=\"primary\">View Details</kendo-button>\n            </div>\n          </ng-template>\n        </kendo-tabstrip-tab>\n        \n        <kendo-tabstrip-tab title=\"Settings\">\n          <ng-template kendoTabTitle>\n            <span class=\"tab-title\">\n              <i class=\"fas fa-cog mr-2\"></i>\n              Settings\n            </span>\n          </ng-template>\n          <ng-template kendoTabContent>\n            <div class=\"tab-content-wrapper\">\n              <h5>Application Settings</h5>\n              <p>Configure your application preferences and options.</p>\n            </div>\n          </ng-template>\n        </kendo-tabstrip-tab>\n        \n        <kendo-tabstrip-tab title=\"Reports\">\n          <ng-template kendoTabTitle>\n            <span class=\"tab-title\">\n              <i class=\"fas fa-file-alt mr-2\"></i>\n              Reports\n            </span>\n          </ng-template>\n          <ng-template kendoTabContent>\n            <div class=\"tab-content-wrapper\">\n              <h5>Generate Reports</h5>\n              <p>Create and download various reports from your data.</p>\n            </div>\n          </ng-template>\n        </kendo-tabstrip-tab>\n      </kendo-tabstrip>\n    </div>\n  </div>\n\n  <!-- Progress and Loading States -->\n  <div class=\"mj-content-container\">\n    <h2>Progress & Loading Indicators</h2>\n    \n    <div class=\"mb-3\">\n      <h4>Kendo Progress Bars</h4>\n      <kendo-progressbar \n        [value]=\"progressValue\" \n        [max]=\"100\"\n        type=\"percent\"\n        [animation]=\"true\"\n        class=\"mb-2\">\n      </kendo-progressbar>\n      \n      <kendo-progressbar \n        [value]=\"progressValue\" \n        [max]=\"100\"\n        type=\"value\"\n        class=\"mb-2 progress-success\">\n      </kendo-progressbar>\n      \n      <kendo-progressbar \n        [indeterminate]=\"true\"\n        [animation]=\"true\">\n      </kendo-progressbar>\n      \n      <kendo-button themeColor=\"primary\" (click)=\"loadData()\" class=\"mt-2\">\n        <span class=\"button-content\">\n          <i class=\"fas fa-sync\"></i>\n          Simulate Loading\n        </span>\n      </kendo-button>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Loading States</h4>\n      <div class=\"mj-grid mj-grid-4\">\n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <kendo-loader type=\"converging-spinner\" themeColor=\"primary\" size=\"medium\"></kendo-loader>\n              <p class=\"mt-2 mb-0\">Converging</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n        \n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <kendo-loader type=\"infinite-spinner\" themeColor=\"info\" size=\"medium\"></kendo-loader>\n              <p class=\"mt-2 mb-0\">Infinite</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n        \n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <kendo-loader type=\"pulsing\" themeColor=\"success\" size=\"medium\"></kendo-loader>\n              <p class=\"mt-2 mb-0\">Pulsing</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n        \n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <i class=\"fas fa-spinner fa-spin\" style=\"font-size: 2rem; color: var(--mj-blue);\"></i>\n              <p class=\"mt-2 mb-0\">Font Awesome</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Modal/Dialog Examples -->\n  <div class=\"mj-content-container\">\n    <h2>Modals & Dialogs</h2>\n    \n    <div class=\"button-group\">\n      <button class=\"mj-btn mj-btn-primary\" (click)=\"openModal()\">\n        <i class=\"fas fa-window-maximize\"></i>\n        Custom Modal\n      </button>\n      <kendo-button themeColor=\"info\" rounded=\"medium\" (click)=\"openKendoDialog()\">\n        <span class=\"button-content\">\n          <i class=\"fas fa-comment\"></i>\n          Kendo Dialog\n        </span>\n      </kendo-button>\n      <button class=\"mj-btn mj-btn-secondary\" (click)=\"openConfirmModal()\">\n        <i class=\"fas fa-exclamation-triangle\"></i>\n        Confirm Dialog\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Custom Modal -->\n<div class=\"mj-modal-overlay\" *ngIf=\"isModalOpen\" (click)=\"closeModal()\">\n  <div class=\"mj-modal mj-modal-lg\" (click)=\"$event.stopPropagation()\">\n    <div class=\"mj-modal-header\">\n      <h3 class=\"mj-modal-title\">\n        <i class=\"fas fa-cog mj-modal-icon\"></i>\n        Custom Modal Example\n      </h3>\n      <button class=\"mj-modal-close\" (click)=\"closeModal()\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n    <div class=\"mj-modal-body\">\n      <p>This custom modal maintains your brand styling while working alongside Kendo components.</p>\n      \n      <div class=\"form-group\">\n        <label class=\"form-label\">\n          <i class=\"fas fa-user mr-1\"></i>\n          Username\n        </label>\n        <kendo-textbox placeholder=\"Enter username\" rounded=\"medium\"></kendo-textbox>\n      </div>\n      \n      <div class=\"form-group\">\n        <label class=\"form-label\">\n          <i class=\"fas fa-palette mr-1\"></i>\n          Theme Preference\n        </label>\n        <kendo-dropdownlist \n          [data]=\"themeOptions\"\n          [value]=\"selectedTheme\"\n          rounded=\"medium\">\n        </kendo-dropdownlist>\n      </div>\n    </div>\n    <div class=\"mj-modal-footer\">\n      <kendo-button fillMode=\"outline\" (click)=\"closeModal()\">Cancel</kendo-button>\n      <kendo-button themeColor=\"primary\">\n        <span class=\"button-content\">\n          <i class=\"fas fa-save\"></i>\n          Save Changes\n        </span>\n      </kendo-button>\n    </div>\n  </div>\n</div>\n\n<!-- Confirmation Modal -->\n<div class=\"mj-modal-overlay\" *ngIf=\"isConfirmModalOpen\" (click)=\"closeConfirmModal()\">\n  <div class=\"mj-modal mj-modal-confirm\" (click)=\"$event.stopPropagation()\">\n    <div class=\"mj-modal-header\">\n      <h3 class=\"mj-modal-title\">Confirm Delete</h3>\n      <button class=\"mj-modal-close\" (click)=\"closeConfirmModal()\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n    <div class=\"mj-modal-body\">\n      <i class=\"fas fa-exclamation-triangle mj-modal-confirm-icon warning\"></i>\n      <h4>Are you sure?</h4>\n      <p>This action cannot be undone. All associated data will be permanently deleted.</p>\n    </div>\n    <div class=\"mj-modal-footer\">\n      <button class=\"mj-btn mj-btn-ghost\" (click)=\"closeConfirmModal()\">Cancel</button>\n      <button class=\"mj-btn mj-btn-primary\" style=\"background: #dc3545; border-color: #dc3545;\">\n        <i class=\"fas fa-trash\"></i>\n        Delete\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Kendo Dialog -->\n<kendo-dialog \n  title=\"Edit User Information\" \n  *ngIf=\"isKendoDialogOpen\" \n  (close)=\"closeKendoDialog()\" \n  [minWidth]=\"450\" \n  [width]=\"600\"\n  [height]=\"400\">\n  \n  <form [formGroup]=\"formGroup\">\n    <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n      <kendo-label text=\"Full Name\" [for]=\"nameField\"></kendo-label>\n      <kendo-textbox \n        #nameField\n        formControlName=\"fullName\"\n        placeholder=\"Enter full name\"\n        [clearButton]=\"true\"\n        rounded=\"medium\">\n        <ng-template kendoTextBoxPrefixTemplate>\n          <i class=\"fas fa-user search-prefix-icon\"></i>\n        </ng-template>\n      </kendo-textbox>\n      <div class=\"k-form-error\" *ngIf=\"fullNameControl.touched && fullNameControl.errors?.['required']\">\n        Name is required\n      </div>\n    </kendo-formfield>\n\n    <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n      <kendo-label text=\"Email Address\" [for]=\"emailField\"></kendo-label>\n      <kendo-textbox \n        #emailField\n        formControlName=\"email\"\n        placeholder=\"user@example.com\"\n        [clearButton]=\"true\"\n        rounded=\"medium\">\n        <ng-template kendoTextBoxPrefixTemplate>\n          <i class=\"fas fa-envelope search-prefix-icon\"></i>\n        </ng-template>\n      </kendo-textbox>\n      <div class=\"k-form-error\" *ngIf=\"emailControl.touched && emailControl.errors?.['email']\">\n        Please enter a valid email\n      </div>\n    </kendo-formfield>\n\n    <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n      <kendo-label text=\"Department\" [for]=\"deptField\"></kendo-label>\n      <kendo-dropdownlist \n        #deptField\n        formControlName=\"department\"\n        [data]=\"departments\"\n        textField=\"name\"\n        valueField=\"id\"\n        rounded=\"medium\">\n        <ng-template kendoDropDownListItemTemplate let-dataItem>\n          <span class=\"dropdown-item-content\">\n            <i [class]=\"dataItem.icon\" class=\"mr-2\"></i>\n            {{ dataItem.name }}\n          </span>\n        </ng-template>\n      </kendo-dropdownlist>\n    </kendo-formfield>\n\n    <kendo-formfield orientation=\"vertical\">\n      <kendo-label text=\"Additional Notes\"></kendo-label>\n      <kendo-textarea \n        formControlName=\"comments\"\n        placeholder=\"Enter any additional notes...\"\n        [rows]=\"3\"\n        rounded=\"medium\">\n      </kendo-textarea>\n    </kendo-formfield>\n  </form>\n  \n  <kendo-dialog-actions>\n    <kendo-button fillMode=\"outline\" (click)=\"closeKendoDialog()\">Cancel</kendo-button>\n    <kendo-button themeColor=\"primary\" (click)=\"submitForm()\" [disabled]=\"!formGroup.valid\">\n      <span class=\"button-content\">\n        <i class=\"fas fa-save\"></i>\n        Save Changes\n      </span>\n    </kendo-button>\n  </kendo-dialog-actions>\n</kendo-dialog>\n", styles: ["/* Enhanced Style Guide Component Styles */\n/* Integrating Kendo UI with Font Awesome and Custom Cards */\n\n/* Component specific overrides and additions */\n.typography-demo h1,\n.typography-demo h2,\n.typography-demo h3,\n.typography-demo h4 {\n    margin-bottom: 1rem;\n}\n\n.typography-demo p {\n    margin-bottom: 0.5rem;\n}\n\n.button-group {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n    align-items: center;\n    margin-bottom: 1rem;\n}\n\n/* Button content wrapper for Font Awesome icons in Kendo buttons */\n.button-content {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.button-content i {\n    font-size: 14px;\n}\n\n/* Badge and chip groups */\n.badge-group {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n    align-items: center;\n}\n\n/* Enhanced Kendo Card styling */\n.custom-kendo-card {\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\n}\n\n.custom-kendo-card:hover {\n    transform: translateY(-4px);\n    border-color: var(--light-blue);\n    box-shadow: \n        0 8px 32px rgba(9, 35, 64, 0.12),\n        0 4px 16px rgba(0, 118, 182, 0.1);\n}\n\n.custom-kendo-card .k-card-header {\n    background: var(--gray-600);\n    border-bottom: 1px solid var(--gray-600);\n}\n\n.custom-kendo-card .k-card-header h4 {\n    margin: 0;\n    display: flex;\n    align-items: center;\n    color: var(--navy);\n}\n\n/* Enhanced Grid Styling */\n.custom-grid {\n    border-radius: var(--border-radius);\n    overflow: hidden;\n}\n\n.custom-grid .k-grid-header {\n    background: linear-gradient(135deg, var(--gray-600) 0%, #e8e8e8 100%);\n}\n\n.custom-grid .k-grid-header th {\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    font-weight: 600;\n}\n\n/* User cell in grid */\n.user-cell {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.user-info {\n    display: flex;\n    flex-direction: column;\n}\n\n.user-name {\n    font-weight: 500;\n    color: var(--navy);\n}\n\n.user-role {\n    font-size: 12px;\n    color: var(--gray-800);\n}\n\n/* Email link styling */\n.email-link {\n    color: var(--mj-blue);\n    text-decoration: none;\n    transition: color 0.2s ease;\n}\n\n.email-link:hover {\n    color: var(--navy);\n    text-decoration: underline;\n}\n\n/* Status cell */\n.status-cell {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Action buttons in grid */\n.action-buttons {\n    display: flex;\n    gap: 4px;\n}\n\n/* Dropdown item with icon */\n.dropdown-item-content {\n    display: flex;\n    align-items: center;\n}\n\n.dropdown-item-content i {\n    width: 20px;\n    text-align: center;\n}\n\n/* Search prefix icon in Kendo TextBox */\n.search-prefix-icon {\n    color: var(--gray-800);\n    margin: 0 8px;\n}\n\n/* Tab title with icon */\n.tab-title {\n    display: flex;\n    align-items: center;\n}\n\n.tab-content-wrapper {\n    padding: 20px;\n}\n\n/* Checkbox group styling */\n.checkbox-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n/* Kendo overrides for better integration */\n.k-button .fa,\n.k-button .fas {\n    font-size: 14px;\n}\n\n/* Ensure Kendo buttons with Font Awesome icons have proper spacing */\n.k-button > span {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n/* Kendo Badge enhancements */\n.k-badge {\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Kendo Chip enhancements */\n.k-chip {\n    font-weight: 500;\n    transition: all 0.2s ease;\n}\n\n.k-chip:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n/* Form field enhancements */\nkendo-formfield {\n    display: block;\n}\n\nkendo-formfield .k-label {\n    font-weight: 500;\n    color: var(--navy);\n    margin-bottom: 0.5rem;\n}\n\n/* Kendo Dialog enhancements */\n.k-dialog-wrapper .k-dialog {\n    border-radius: 20px;\n    overflow: hidden;\n}\n\n.k-dialog-wrapper .k-dialog-titlebar {\n    background: linear-gradient(135deg, var(--gray-600) 0%, #f8f9fa 100%);\n    padding: 24px 30px;\n}\n\n.k-dialog-wrapper .k-dialog-title {\n    font-size: 1.5rem;\n    color: var(--navy);\n}\n\n.k-dialog-wrapper .k-dialog-content {\n    padding: 30px;\n}\n\n/* Progress bar enhancements */\n.k-progressbar {\n    height: 8px;\n    border-radius: 4px;\n    background: var(--gray-600);\n}\n\n.k-progressbar .k-progress-status-wrap {\n    font-weight: 500;\n}\n\n/* Success progress bar */\n.progress-success .k-progressbar-progress {\n    background-color: #28a745 !important;\n}\n\n/* Loader container styling */\n.k-loader-container {\n    padding: 20px;\n}\n\n/* Ensure Font Awesome icons display properly */\n.fas, .fa {\n    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome';\n    font-weight: 900;\n}\n\n.far {\n    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome';\n    font-weight: 400;\n}\n\n/* Utility margin classes used in template */\n.mb-0 { margin-bottom: 0 !important; }\n.mb-1 { margin-bottom: 0.25rem !important; }\n.mb-2 { margin-bottom: 0.5rem !important; }\n.mb-3 { margin-bottom: 1rem !important; }\n.mb-4 { margin-bottom: 1.5rem !important; }\n\n.mt-0 { margin-top: 0 !important; }\n.mt-1 { margin-top: 0.25rem !important; }\n.mt-2 { margin-top: 0.5rem !important; }\n.mt-3 { margin-top: 1rem !important; }\n.mt-4 { margin-top: 1.5rem !important; }\n\n.mr-0 { margin-right: 0 !important; }\n.mr-1 { margin-right: 0.25rem !important; }\n.mr-2 { margin-right: 0.5rem !important; }\n\n.ml-0 { margin-left: 0 !important; }\n.ml-1 { margin-left: 0.25rem !important; }\n.ml-2 { margin-left: 0.5rem !important; }\n\n.p-3 { padding: 1rem !important; }\n\n/* Text alignment */\n.text-center { text-align: center !important; }\n\n/* Form error styling */\n.k-form-error {\n    color: #dc3545;\n    font-size: 12px;\n    margin-top: 4px;\n    display: block;\n}\n\n/* Radio group styling */\n.radio-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.radio-label {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n/* Color utilities */\n.bg-success { background-color: #28a745 !important; }\n\n/* Modal backdrop fix for proper display */\n.mj-modal-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(9, 35, 64, 0.6);\n    backdrop-filter: blur(8px);\n    z-index: 10000;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 20px;\n    animation: modal-overlay-appear 0.3s ease-out;\n}\n\n/* Fix for double borders in modals */\n.mj-modal .k-textbox,\n.mj-modal .k-dropdown,\n.mj-modal .k-dropdownlist {\n    border: 1px solid var(--gray-700) !important;\n}\n\n.mj-modal .k-textbox:focus,\n.mj-modal .k-dropdown:focus-within,\n.mj-modal .k-dropdownlist:focus-within {\n    border-color: var(--mj-blue) !important;\n}\n\n/* Icon card styles have been moved to global _common.scss */\n/* The mj-kendo-icon-card class is now globally available */\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n    .button-group {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .button-group .k-button,\n    .button-group .mj-btn {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .mj-toolbar {\n        flex-direction: column;\n        gap: 10px;\n    }\n    \n    .mj-toolbar-actions {\n        width: 100%;\n        flex-direction: column;\n        gap: 10px;\n    }\n    \n    .mj-toolbar-actions > * {\n        width: 100%;\n    }\n    \n    .custom-grid {\n        font-size: 12px;\n    }\n    \n    .k-grid td,\n    .k-grid th {\n        padding: 8px;\n    }\n    \n    .user-cell {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n    }\n    \n    .k-dialog-wrapper .k-dialog {\n        margin: 10px;\n        width: calc(100vw - 20px) !important;\n        max-width: none;\n    }\n}\n\n/* Print styles */\n@media print {\n    .mj-header-actions,\n    .mj-toolbar-actions,\n    .mj-card-actions,\n    .action-buttons,\n    .k-grid-toolbar,\n    .button-group {\n        display: none !important;\n    }\n    \n    .mj-card {\n        break-inside: avoid;\n        box-shadow: none;\n        border: 1px solid #ddd;\n    }\n}\n\n/* Dark mode support (if needed) */\n@media (prefers-color-scheme: dark) {\n    /* Add dark mode overrides here if needed */\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n    .mj-card,\n    .custom-kendo-card,\n    .k-button,\n    .mj-btn {\n        border-width: 2px !important;\n    }\n    \n    .badge,\n    .k-badge,\n    .k-chip {\n        border: 2px solid currentColor;\n    }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n    *,\n    *::before,\n    *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n    \n    .mj-card:hover,\n    .custom-kendo-card:hover {\n        transform: none !important;\n    }\n}\n"] }]
+        args: [{ selector: 'mj-style-guide-test', template: "<!-- Enhanced Style Guide with Kendo UI Components and Font Awesome -->\n<div class=\"mj-page-container\">\n  <!-- Page Header with Mixed Components -->\n  <div class=\"mj-content-container\">\n    <div class=\"mj-header\">\n      <div class=\"mj-header-title\">\n        <i class=\"fas fa-paint-brush mj-header-icon\"></i>\n        <div>\n          <h1>Kendo UI + Font Awesome Style Guide</h1>\n          <div class=\"mj-header-subtitle\">\n            <i class=\"fas fa-palette\"></i>\n            Modern components with custom styling\n          </div>\n        </div>\n      </div>\n      <div class=\"mj-header-actions\">\n        <!-- Kendo Button with Font Awesome Icon -->\n        <button kendoButton fillMode=\"outline\" rounded=\"medium\" themeColor=\"base\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-download\"></i>\n            Export\n          </span>\n        </button>\n        <button kendoButton themeColor=\"primary\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-save\"></i>\n            Save Changes\n          </span>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Typography Section -->\n  <div class=\"mj-content-container\">\n    <h2>Typography Examples</h2>\n    <div class=\"typography-demo\">\n      <h1>Heading 1 - Main page titles</h1>\n      <h2>Heading 2 - Section headers</h2>\n      <h3>Heading 3 - Subsection titles</h3>\n      <h4>Heading 4 - Component titles</h4>\n      <p>Body text - Regular paragraph content with good readability and proper line height for easy reading.</p>\n      <p class=\"text-muted\">Muted text for secondary information</p>\n    </div>\n  </div>\n\n  <!-- Enhanced Button Examples -->\n  <div class=\"mj-content-container\">\n    <h2>Button System Comparison</h2>\n    \n    <div class=\"mb-3\">\n      <h4>Kendo Buttons with Font Awesome Icons</h4>\n      <div class=\"button-group\">\n        <button kendoButton themeColor=\"primary\" rounded=\"medium\" size=\"large\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-check\"></i>\n            Primary Action\n          </span>\n        </button>\n        <button kendoButton themeColor=\"info\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-info-circle\"></i>\n            Info Button\n          </span>\n        </button>\n        <button kendoButton themeColor=\"success\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-check-circle\"></i>\n            Success\n          </span>\n        </button>\n        <button kendoButton themeColor=\"warning\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-exclamation-triangle\"></i>\n            Warning\n          </span>\n        </button>\n        <button kendoButton themeColor=\"error\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-times-circle\"></i>\n            Error\n          </span>\n        </button>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Icon-Only Kendo Buttons</h4>\n      <div class=\"button-group\">\n        <button kendoButton fillMode=\"flat\" rounded=\"full\" size=\"large\" title=\"Edit\">\n          <i class=\"fas fa-edit\"></i>\n        </button>\n        <button kendoButton fillMode=\"flat\" rounded=\"full\" size=\"large\" title=\"Delete\">\n          <i class=\"fas fa-trash\"></i>\n        </button>\n        <button kendoButton fillMode=\"flat\" rounded=\"full\" size=\"large\" title=\"Settings\">\n          <i class=\"fas fa-cog\"></i>\n        </button>\n        <button kendoButton fillMode=\"flat\" rounded=\"full\" size=\"large\" title=\"Search\">\n          <i class=\"fas fa-search\"></i>\n        </button>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Custom MJ Buttons (For Comparison)</h4>\n      <div class=\"button-group\">\n        <button class=\"mj-btn mj-btn-primary\">\n          <i class=\"fas fa-rocket\"></i>\n          Launch\n        </button>\n        <button class=\"mj-btn mj-btn-secondary\">\n          <i class=\"fas fa-edit\"></i>\n          Edit\n        </button>\n        <button class=\"mj-btn mj-btn-ghost\">\n          <i class=\"fas fa-times\"></i>\n          Cancel\n        </button>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Kendo Button Group</h4>\n      <kendo-buttongroup>\n        <button kendoButton [toggleable]=\"true\" [selected]=\"true\">\n          <i class=\"fas fa-bold\"></i>\n        </button>\n        <button kendoButton [toggleable]=\"true\">\n          <i class=\"fas fa-italic\"></i>\n        </button>\n        <button kendoButton [toggleable]=\"true\">\n          <i class=\"fas fa-underline\"></i>\n        </button>\n      </kendo-buttongroup>\n    </div>\n  </div>\n\n  <!-- Enhanced Card System with Icon Cards -->\n  <div class=\"mj-content-container\">\n    <h2>Card Components</h2>\n    \n    <h4>Icon Cards with Hover Effects (Kendo Cards)</h4>\n    <div class=\"mj-grid mj-grid-4\">\n      <kendo-card class=\"mj-kendo-icon-card\" *ngFor=\"let item of sampleItems\" (click)=\"handleCardClick(item)\">\n        <kendo-card-body>\n          <i [class]=\"'fas ' + item.icon + ' mj-card-icon-large'\"></i>\n          <h3>{{item.name}}</h3>\n          <p>{{item.description}}</p>\n          <kendo-chip \n            [label]=\"item.color.toUpperCase()\" \n            rounded=\"full\"\n            [themeColor]=\"item.color\"\n            size=\"small\"\n            class=\"mt-2\">\n          </kendo-chip>\n          <div class=\"mj-card-actions\">\n            <button class=\"mj-btn mj-btn-icon-only mj-btn-sm\" (click)=\"$event.stopPropagation(); handleButtonClick('edit', item)\">\n              <i class=\"fas fa-edit\"></i>\n            </button>\n            <button class=\"mj-btn mj-btn-icon-only mj-btn-sm\" (click)=\"$event.stopPropagation(); handleButtonClick('delete', item)\">\n              <i class=\"fas fa-trash\"></i>\n            </button>\n          </div>\n        </kendo-card-body>\n      </kendo-card>\n    </div>\n\n    <div class=\"mt-4\">\n      <h4>Kendo Cards with Custom Styling</h4>\n      <div class=\"mj-grid mj-grid-3\">\n        <kendo-card class=\"custom-kendo-card\">\n          <kendo-card-header>\n            <h4>\n              <i class=\"fas fa-chart-bar mr-2\"></i>\n              Analytics Overview\n            </h4>\n          </kendo-card-header>\n          <kendo-card-body>\n            <p>View real-time analytics and performance metrics for your application.</p>\n            <kendo-chip-list>\n              <kendo-chip label=\"Real-time\" icon=\"clock\" themeColor=\"success\"></kendo-chip>\n              <kendo-chip label=\"Interactive\" icon=\"filter\" themeColor=\"info\"></kendo-chip>\n            </kendo-chip-list>\n          </kendo-card-body>\n          <kendo-card-actions orientation=\"horizontal\" layout=\"end\">\n            <button kendoButton fillMode=\"flat\">Details</button>\n            <button kendoButton themeColor=\"primary\">View Dashboard</button>\n          </kendo-card-actions>\n        </kendo-card>\n\n        <kendo-card class=\"custom-kendo-card\">\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <kendo-avatar [imageSrc]=\"'assets/avatar-placeholder.jpg'\" shape=\"circle\" size=\"large\"></kendo-avatar>\n              <h4 class=\"mt-3\">User Profile</h4>\n              <p>Manage your account settings and preferences</p>\n              <kendo-badge-container>\n                <button kendoButton themeColor=\"primary\" rounded=\"medium\">\n                  <span class=\"button-content\">\n                    <i class=\"fas fa-bell\"></i>\n                    Notifications\n                  </span>\n                </button>\n                <kendo-badge rounded=\"full\" themeColor=\"error\" position=\"edge\" [align]=\"badgeAlignTopEnd\">{{notificationCount}}</kendo-badge>\n              </kendo-badge-container>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n\n        <kendo-card class=\"custom-kendo-card\">\n          <kendo-card-body>\n            <div class=\"mj-empty-state\">\n              <i class=\"fas fa-inbox mj-empty-icon\"></i>\n              <h3>No Data Available</h3>\n              <p>Start by importing your data</p>\n              <button kendoButton themeColor=\"primary\" rounded=\"medium\">\n                <span class=\"button-content\">\n                  <i class=\"fas fa-upload\"></i>\n                  Import Data\n                </span>\n              </button>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Enhanced Form Elements -->\n  <div class=\"mj-content-container\">\n    <h2>Form Elements - Kendo vs Custom</h2>\n    \n    <div class=\"mj-grid mj-grid-2\">\n      <div>\n        <h4>Kendo Form Components</h4>\n        \n        <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n          <kendo-label text=\"Full Name\" [for]=\"fullNameInput\"></kendo-label>\n          <kendo-textbox \n            #fullNameInput\n            placeholder=\"Enter your full name\"\n            [clearButton]=\"true\"\n            [formControl]=\"fullNameControl\"\n            rounded=\"medium\">\n          </kendo-textbox>\n          <div class=\"k-form-error\" *ngIf=\"fullNameControl.touched && fullNameControl.errors?.['required']\">\n            Full name is required\n          </div>\n        </kendo-formfield>\n\n        <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n          <kendo-label text=\"Department\" [for]=\"deptDropdown\"></kendo-label>\n          <kendo-dropdownlist \n            #deptDropdown\n            [data]=\"departments\"\n            textField=\"name\"\n            valueField=\"id\"\n            [(ngModel)]=\"selectedDepartment\"\n            rounded=\"medium\">\n            <ng-template kendoDropDownListItemTemplate let-dataItem>\n              <span class=\"dropdown-item-content\">\n                <i [class]=\"dataItem.icon\" class=\"mr-2\"></i>\n                {{ dataItem.name }}\n              </span>\n            </ng-template>\n          </kendo-dropdownlist>\n        </kendo-formfield>\n\n        <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n          <kendo-label text=\"Technologies\"></kendo-label>\n          <kendo-multiselect \n            [data]=\"technologies\"\n            [(ngModel)]=\"selectedTechnologies\"\n            placeholder=\"Select technologies...\"\n            rounded=\"medium\">\n          </kendo-multiselect>\n        </kendo-formfield>\n\n        <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n          <kendo-label text=\"Project Date\"></kendo-label>\n          <kendo-datepicker \n            [(value)]=\"dateValue\"\n            format=\"dd/MM/yyyy\"\n            rounded=\"medium\">\n          </kendo-datepicker>\n        </kendo-formfield>\n      </div>\n      \n      <div>\n        <h4>Custom Form Elements</h4>\n        \n        <div class=\"form-group\">\n          <label class=\"form-label\">\n            <i class=\"fas fa-search mr-1\"></i>\n            Search Field\n          </label>\n          <div class=\"mj-search\">\n            <i class=\"fas fa-search mj-search-icon\"></i>\n            <input type=\"text\" class=\"mj-search-input\" placeholder=\"Search items...\" [(ngModel)]=\"searchText\">\n          </div>\n        </div>\n\n        <div class=\"form-group\">\n          <label class=\"form-label\">\n            <i class=\"fas fa-comment mr-1\"></i>\n            Comments\n          </label>\n          <kendo-textarea \n            [formControl]=\"commentsControl\"\n            placeholder=\"Enter your comments...\"\n            [rows]=\"4\"\n            rounded=\"medium\">\n          </kendo-textarea>\n        </div>\n\n        <div class=\"form-group\">\n          <label class=\"form-label\">Options</label>\n          <div class=\"checkbox-group\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" kendoCheckBox />\n              <span class=\"ml-2\">Enable notifications</span>\n            </label>\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" kendoCheckBox checked />\n              <span class=\"ml-2\">Subscribe to newsletter</span>\n            </label>\n          </div>\n        </div>\n\n        <div class=\"form-group\">\n          <label class=\"form-label\">Theme Preference</label>\n          <div class=\"radio-group\">\n            <label class=\"radio-label\" *ngFor=\"let option of themeOptions\">\n              <input type=\"radio\" name=\"theme\" [value]=\"option\" [(ngModel)]=\"selectedTheme\" kendoRadioButton />\n              <span class=\"ml-2\">{{option}}</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Enhanced Kendo Grid with Font Awesome -->\n  <div class=\"mj-content-container\">\n    <h2>Enhanced Kendo Grid</h2>\n    \n    <kendo-grid \n      [data]=\"gridData\" \n      [height]=\"400\" \n      [sortable]=\"true\"\n      [filterable]=\"true\"\n      [groupable]=\"false\"\n      [reorderable]=\"true\"\n      [resizable]=\"true\"\n      [selectable]=\"{ checkboxOnly: true, mode: 'multiple' }\"\n      class=\"custom-grid\">\n      \n      <kendo-grid-checkbox-column [width]=\"45\" [headerClass]=\"'text-center'\" [class]=\"'text-center'\"></kendo-grid-checkbox-column>\n      \n      <kendo-grid-column field=\"name\" title=\"Name\" [width]=\"200\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <div class=\"user-cell\">\n            <kendo-avatar \n              [initials]=\"getInitials(dataItem.name)\" \n              themeColor=\"info\"\n              shape=\"circle\"\n              size=\"small\">\n            </kendo-avatar>\n            <div class=\"user-info\">\n              <div class=\"user-name\">{{ dataItem.name }}</div>\n              <div class=\"user-role\">{{ dataItem.role }}</div>\n            </div>\n          </div>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column field=\"email\" title=\"Email\" [width]=\"220\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <a href=\"mailto:{{dataItem.email}}\" class=\"email-link\">\n            <i class=\"fas fa-envelope mr-1\"></i>\n            {{ dataItem.email }}\n          </a>\n        </ng-template>\n      </kendo-grid-column>\n      \n      <kendo-grid-column field=\"department\" title=\"Department\" [width]=\"150\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <kendo-chip \n            [label]=\"dataItem.department\"\n            rounded=\"medium\"\n            fillMode=\"outline\">\n          </kendo-chip>\n        </ng-template>\n      </kendo-grid-column>\n      \n      <kendo-grid-column field=\"status\" title=\"Status\" [width]=\"120\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <span class=\"status-cell\">\n            <i [class]=\"getStatusIcon(dataItem.status) + ' mr-1'\"></i>\n            <kendo-badge \n              [themeColor]=\"getStatusThemeColor(dataItem.status)\"\n              rounded=\"full\"\n              size=\"small\">\n              {{ dataItem.status }}\n            </kendo-badge>\n          </span>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column title=\"Actions\" [width]=\"120\" [sortable]=\"false\" [filterable]=\"false\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <div class=\"action-buttons\">\n            <button kendoButton\n              fillMode=\"flat\"\n              rounded=\"full\"\n              size=\"small\"\n              themeColor=\"info\"\n              title=\"Edit\"\n              (click)=\"editItem(dataItem)\">\n              <i class=\"fas fa-edit\"></i>\n            </button>\n            <button kendoButton\n              fillMode=\"flat\"\n              rounded=\"full\"\n              size=\"small\"\n              themeColor=\"error\"\n              title=\"Delete\"\n              (click)=\"deleteItem(dataItem)\">\n              <i class=\"fas fa-trash\"></i>\n            </button>\n          </div>\n        </ng-template>\n      </kendo-grid-column>\n    </kendo-grid>\n  </div>\n\n  <!-- Badges and Chips -->\n  <div class=\"mj-content-container\">\n    <h2>Badges, Chips & Status Indicators</h2>\n    \n    <div class=\"mb-3\">\n      <h4>Custom Badges with Font Awesome</h4>\n      <div class=\"badge-group\">\n        <span class=\"badge badge-success\">\n          <i class=\"fas fa-check mr-1\"></i>\n          Active\n        </span>\n        <span class=\"badge badge-danger\">\n          <i class=\"fas fa-times mr-1\"></i>\n          Inactive\n        </span>\n        <span class=\"badge badge-warning\">\n          <i class=\"fas fa-clock mr-1\"></i>\n          Pending\n        </span>\n        <span class=\"badge badge-info\">\n          <i class=\"fas fa-info-circle mr-1\"></i>\n          Info\n        </span>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Kendo Chips with Icons</h4>\n      <kendo-chip-list>\n        <kendo-chip label=\"Approved\" icon=\"check\" themeColor=\"success\" [removable]=\"true\"></kendo-chip>\n        <kendo-chip label=\"In Progress\" icon=\"clock\" themeColor=\"warning\" [removable]=\"true\"></kendo-chip>\n        <kendo-chip label=\"Rejected\" icon=\"x\" themeColor=\"error\" [removable]=\"true\"></kendo-chip>\n        <kendo-chip label=\"Under Review\" icon=\"eye\" themeColor=\"info\" [removable]=\"true\"></kendo-chip>\n      </kendo-chip-list>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Notification Badges</h4>\n      <div class=\"badge-group\">\n        <kendo-badge-container>\n          <button kendoButton themeColor=\"primary\" rounded=\"medium\">\n            <i class=\"fas fa-envelope mr-2\"></i>\n            Messages\n          </button>\n          <kendo-badge themeColor=\"error\" position=\"edge\" [align]=\"badgeAlignTopEnd\">12</kendo-badge>\n        </kendo-badge-container>\n\n        <kendo-badge-container>\n          <button kendoButton fillMode=\"flat\" rounded=\"full\" size=\"large\">\n            <i class=\"fas fa-bell\"></i>\n          </button>\n          <kendo-badge themeColor=\"warning\" position=\"edge\" [align]=\"badgeAlignTopEnd\" rounded=\"full\">3</kendo-badge>\n        </kendo-badge-container>\n\n        <kendo-badge-container>\n          <kendo-avatar initials=\"JD\" themeColor=\"info\"></kendo-avatar>\n          <kendo-badge themeColor=\"success\" position=\"edge\" [align]=\"badgeAlignBottomEnd\" size=\"small\">\n            <i class=\"fas fa-check\"></i>\n          </kendo-badge>\n        </kendo-badge-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Navigation Components -->\n  <div class=\"mj-content-container\">\n    <h2>Navigation & Layout Components</h2>\n    \n    <div class=\"mb-3\">\n      <h4>Enhanced Toolbar with Search</h4>\n      <div class=\"mj-toolbar\">\n        <h3 class=\"mj-toolbar-title\">\n          <i class=\"fas fa-users mr-2\"></i>\n          User Management\n        </h3>\n        <div class=\"mj-toolbar-actions\">\n          <kendo-textbox \n            placeholder=\"Search users...\"\n            [clearButton]=\"true\"\n            [(ngModel)]=\"searchText\"\n            rounded=\"medium\"\n            style=\"width: 300px;\">\n            <ng-template kendoTextBoxPrefixTemplate>\n              <i class=\"fas fa-search search-prefix-icon\"></i>\n            </ng-template>\n          </kendo-textbox>\n          <button kendoButton fillMode=\"outline\" rounded=\"medium\">\n            <span class=\"button-content\">\n              <i class=\"fas fa-filter\"></i>\n              Filter\n            </span>\n          </button>\n          <button kendoButton themeColor=\"primary\" rounded=\"medium\">\n            <span class=\"button-content\">\n              <i class=\"fas fa-user-plus\"></i>\n              Add User\n            </span>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Breadcrumb Navigation</h4>\n      <nav class=\"mj-breadcrumb\">\n        <span class=\"mj-breadcrumb-item\">\n          <i class=\"fas fa-home mr-1\"></i>\n          Home\n        </span>\n        <i class=\"fas fa-chevron-right mj-breadcrumb-separator\"></i>\n        <span class=\"mj-breadcrumb-item\">\n          <i class=\"fas fa-th mr-1\"></i>\n          Components\n        </span>\n        <i class=\"fas fa-chevron-right mj-breadcrumb-separator\"></i>\n        <span class=\"mj-breadcrumb-item mj-breadcrumb-current\">\n          <i class=\"fas fa-paint-brush mr-1\"></i>\n          Style Guide\n        </span>\n      </nav>\n    </div>\n\n    <div>\n      <h4>Kendo TabStrip with Font Awesome</h4>\n      <kendo-tabstrip>\n        <kendo-tabstrip-tab title=\"Overview\" [selected]=\"true\">\n          <ng-template kendoTabTitle>\n            <span class=\"tab-title\">\n              <i class=\"fas fa-chart-pie mr-2\"></i>\n              Overview\n            </span>\n          </ng-template>\n          <ng-template kendoTabContent>\n            <div class=\"tab-content-wrapper\">\n              <h5>Dashboard Overview</h5>\n              <p>View your application's key metrics and performance indicators.</p>\n              <button kendoButton themeColor=\"primary\">View Details</button>\n            </div>\n          </ng-template>\n        </kendo-tabstrip-tab>\n        \n        <kendo-tabstrip-tab title=\"Settings\">\n          <ng-template kendoTabTitle>\n            <span class=\"tab-title\">\n              <i class=\"fas fa-cog mr-2\"></i>\n              Settings\n            </span>\n          </ng-template>\n          <ng-template kendoTabContent>\n            <div class=\"tab-content-wrapper\">\n              <h5>Application Settings</h5>\n              <p>Configure your application preferences and options.</p>\n            </div>\n          </ng-template>\n        </kendo-tabstrip-tab>\n        \n        <kendo-tabstrip-tab title=\"Reports\">\n          <ng-template kendoTabTitle>\n            <span class=\"tab-title\">\n              <i class=\"fas fa-file-alt mr-2\"></i>\n              Reports\n            </span>\n          </ng-template>\n          <ng-template kendoTabContent>\n            <div class=\"tab-content-wrapper\">\n              <h5>Generate Reports</h5>\n              <p>Create and download various reports from your data.</p>\n            </div>\n          </ng-template>\n        </kendo-tabstrip-tab>\n      </kendo-tabstrip>\n    </div>\n  </div>\n\n  <!-- Progress and Loading States -->\n  <div class=\"mj-content-container\">\n    <h2>Progress & Loading Indicators</h2>\n    \n    <div class=\"mb-3\">\n      <h4>Kendo Progress Bars</h4>\n      <kendo-progressbar \n        [value]=\"progressValue\" \n        [max]=\"100\"\n        type=\"percent\"\n        [animation]=\"true\"\n        class=\"mb-2\">\n      </kendo-progressbar>\n      \n      <kendo-progressbar \n        [value]=\"progressValue\" \n        [max]=\"100\"\n        type=\"value\"\n        class=\"mb-2 progress-success\">\n      </kendo-progressbar>\n      \n      <kendo-progressbar \n        [indeterminate]=\"true\"\n        [animation]=\"true\">\n      </kendo-progressbar>\n      \n      <button kendoButton themeColor=\"primary\" (click)=\"loadData()\" class=\"mt-2\">\n        <span class=\"button-content\">\n          <i class=\"fas fa-sync\"></i>\n          Simulate Loading\n        </span>\n      </button>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Loading States</h4>\n      <div class=\"mj-grid mj-grid-4\">\n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <kendo-loader type=\"converging-spinner\" themeColor=\"primary\" size=\"medium\"></kendo-loader>\n              <p class=\"mt-2 mb-0\">Converging</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n        \n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <kendo-loader type=\"infinite-spinner\" themeColor=\"info\" size=\"medium\"></kendo-loader>\n              <p class=\"mt-2 mb-0\">Infinite</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n        \n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <kendo-loader type=\"pulsing\" themeColor=\"success\" size=\"medium\"></kendo-loader>\n              <p class=\"mt-2 mb-0\">Pulsing</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n        \n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <i class=\"fas fa-spinner fa-spin\" style=\"font-size: 2rem; color: var(--mj-blue);\"></i>\n              <p class=\"mt-2 mb-0\">Font Awesome</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Modal/Dialog Examples -->\n  <div class=\"mj-content-container\">\n    <h2>Modals & Dialogs</h2>\n    \n    <div class=\"button-group\">\n      <button class=\"mj-btn mj-btn-primary\" (click)=\"openModal()\">\n        <i class=\"fas fa-window-maximize\"></i>\n        Custom Modal\n      </button>\n      <button kendoButton themeColor=\"info\" rounded=\"medium\" (click)=\"openKendoDialog()\">\n        <span class=\"button-content\">\n          <i class=\"fas fa-comment\"></i>\n          Kendo Dialog\n        </span>\n      </button>\n      <button class=\"mj-btn mj-btn-secondary\" (click)=\"openConfirmModal()\">\n        <i class=\"fas fa-exclamation-triangle\"></i>\n        Confirm Dialog\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Custom Modal -->\n<div class=\"mj-modal-overlay\" *ngIf=\"isModalOpen\" (click)=\"closeModal()\">\n  <div class=\"mj-modal mj-modal-lg\" (click)=\"$event.stopPropagation()\">\n    <div class=\"mj-modal-header\">\n      <h3 class=\"mj-modal-title\">\n        <i class=\"fas fa-cog mj-modal-icon\"></i>\n        Custom Modal Example\n      </h3>\n      <button class=\"mj-modal-close\" (click)=\"closeModal()\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n    <div class=\"mj-modal-body\">\n      <p>This custom modal maintains your brand styling while working alongside Kendo components.</p>\n      \n      <div class=\"form-group\">\n        <label class=\"form-label\">\n          <i class=\"fas fa-user mr-1\"></i>\n          Username\n        </label>\n        <kendo-textbox placeholder=\"Enter username\" rounded=\"medium\"></kendo-textbox>\n      </div>\n      \n      <div class=\"form-group\">\n        <label class=\"form-label\">\n          <i class=\"fas fa-palette mr-1\"></i>\n          Theme Preference\n        </label>\n        <kendo-dropdownlist \n          [data]=\"themeOptions\"\n          [value]=\"selectedTheme\"\n          rounded=\"medium\">\n        </kendo-dropdownlist>\n      </div>\n    </div>\n    <div class=\"mj-modal-footer\">\n      <button kendoButton fillMode=\"outline\" (click)=\"closeModal()\">Cancel</button>\n      <button kendoButton themeColor=\"primary\">\n        <span class=\"button-content\">\n          <i class=\"fas fa-save\"></i>\n          Save Changes\n        </span>\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Confirmation Modal -->\n<div class=\"mj-modal-overlay\" *ngIf=\"isConfirmModalOpen\" (click)=\"closeConfirmModal()\">\n  <div class=\"mj-modal mj-modal-confirm\" (click)=\"$event.stopPropagation()\">\n    <div class=\"mj-modal-header\">\n      <h3 class=\"mj-modal-title\">Confirm Delete</h3>\n      <button class=\"mj-modal-close\" (click)=\"closeConfirmModal()\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n    <div class=\"mj-modal-body\">\n      <i class=\"fas fa-exclamation-triangle mj-modal-confirm-icon warning\"></i>\n      <h4>Are you sure?</h4>\n      <p>This action cannot be undone. All associated data will be permanently deleted.</p>\n    </div>\n    <div class=\"mj-modal-footer\">\n      <button class=\"mj-btn mj-btn-ghost\" (click)=\"closeConfirmModal()\">Cancel</button>\n      <button class=\"mj-btn mj-btn-primary\" style=\"background: #dc3545; border-color: #dc3545;\">\n        <i class=\"fas fa-trash\"></i>\n        Delete\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Kendo Dialog -->\n<kendo-dialog \n  title=\"Edit User Information\" \n  *ngIf=\"isKendoDialogOpen\" \n  (close)=\"closeKendoDialog()\" \n  [minWidth]=\"450\" \n  [width]=\"600\"\n  [height]=\"400\">\n  \n  <form [formGroup]=\"formGroup\">\n    <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n      <kendo-label text=\"Full Name\" [for]=\"nameField\"></kendo-label>\n      <kendo-textbox \n        #nameField\n        formControlName=\"fullName\"\n        placeholder=\"Enter full name\"\n        [clearButton]=\"true\"\n        rounded=\"medium\">\n        <ng-template kendoTextBoxPrefixTemplate>\n          <i class=\"fas fa-user search-prefix-icon\"></i>\n        </ng-template>\n      </kendo-textbox>\n      <div class=\"k-form-error\" *ngIf=\"fullNameControl.touched && fullNameControl.errors?.['required']\">\n        Name is required\n      </div>\n    </kendo-formfield>\n\n    <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n      <kendo-label text=\"Email Address\" [for]=\"emailField\"></kendo-label>\n      <kendo-textbox \n        #emailField\n        formControlName=\"email\"\n        placeholder=\"user@example.com\"\n        [clearButton]=\"true\"\n        rounded=\"medium\">\n        <ng-template kendoTextBoxPrefixTemplate>\n          <i class=\"fas fa-envelope search-prefix-icon\"></i>\n        </ng-template>\n      </kendo-textbox>\n      <div class=\"k-form-error\" *ngIf=\"emailControl.touched && emailControl.errors?.['email']\">\n        Please enter a valid email\n      </div>\n    </kendo-formfield>\n\n    <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n      <kendo-label text=\"Department\" [for]=\"deptField\"></kendo-label>\n      <kendo-dropdownlist \n        #deptField\n        formControlName=\"department\"\n        [data]=\"departments\"\n        textField=\"name\"\n        valueField=\"id\"\n        rounded=\"medium\">\n        <ng-template kendoDropDownListItemTemplate let-dataItem>\n          <span class=\"dropdown-item-content\">\n            <i [class]=\"dataItem.icon\" class=\"mr-2\"></i>\n            {{ dataItem.name }}\n          </span>\n        </ng-template>\n      </kendo-dropdownlist>\n    </kendo-formfield>\n\n    <kendo-formfield orientation=\"vertical\">\n      <kendo-label text=\"Additional Notes\"></kendo-label>\n      <kendo-textarea \n        formControlName=\"comments\"\n        placeholder=\"Enter any additional notes...\"\n        [rows]=\"3\"\n        rounded=\"medium\">\n      </kendo-textarea>\n    </kendo-formfield>\n  </form>\n  \n  <kendo-dialog-actions>\n    <button kendoButton fillMode=\"outline\" (click)=\"closeKendoDialog()\">Cancel</button>\n    <button kendoButton themeColor=\"primary\" (click)=\"submitForm()\" [disabled]=\"!formGroup.valid\">\n      <span class=\"button-content\">\n        <i class=\"fas fa-save\"></i>\n        Save Changes\n      </span>\n    </button>\n  </kendo-dialog-actions>\n</kendo-dialog>\n", styles: ["/* Enhanced Style Guide Component Styles */\n/* Integrating Kendo UI with Font Awesome and Custom Cards */\n\n/* Component specific overrides and additions */\n.typography-demo h1,\n.typography-demo h2,\n.typography-demo h3,\n.typography-demo h4 {\n    margin-bottom: 1rem;\n}\n\n.typography-demo p {\n    margin-bottom: 0.5rem;\n}\n\n.button-group {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n    align-items: center;\n    margin-bottom: 1rem;\n}\n\n/* Button content wrapper for Font Awesome icons in Kendo buttons */\n.button-content {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.button-content i {\n    font-size: 14px;\n}\n\n/* Badge and chip groups */\n.badge-group {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n    align-items: center;\n}\n\n/* Enhanced Kendo Card styling */\n.custom-kendo-card {\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\n}\n\n.custom-kendo-card:hover {\n    transform: translateY(-4px);\n    border-color: var(--light-blue);\n    box-shadow: \n        0 8px 32px rgba(9, 35, 64, 0.12),\n        0 4px 16px rgba(0, 118, 182, 0.1);\n}\n\n.custom-kendo-card .k-card-header {\n    background: var(--gray-600);\n    border-bottom: 1px solid var(--gray-600);\n}\n\n.custom-kendo-card .k-card-header h4 {\n    margin: 0;\n    display: flex;\n    align-items: center;\n    color: var(--navy);\n}\n\n/* Enhanced Grid Styling */\n.custom-grid {\n    border-radius: var(--border-radius);\n    overflow: hidden;\n}\n\n.custom-grid .k-grid-header {\n    background: linear-gradient(135deg, var(--gray-600) 0%, #e8e8e8 100%);\n}\n\n.custom-grid .k-grid-header th {\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    font-weight: 600;\n}\n\n/* User cell in grid */\n.user-cell {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.user-info {\n    display: flex;\n    flex-direction: column;\n}\n\n.user-name {\n    font-weight: 500;\n    color: var(--navy);\n}\n\n.user-role {\n    font-size: 12px;\n    color: var(--gray-800);\n}\n\n/* Email link styling */\n.email-link {\n    color: var(--mj-blue);\n    text-decoration: none;\n    transition: color 0.2s ease;\n}\n\n.email-link:hover {\n    color: var(--navy);\n    text-decoration: underline;\n}\n\n/* Status cell */\n.status-cell {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Action buttons in grid */\n.action-buttons {\n    display: flex;\n    gap: 4px;\n}\n\n/* Dropdown item with icon */\n.dropdown-item-content {\n    display: flex;\n    align-items: center;\n}\n\n.dropdown-item-content i {\n    width: 20px;\n    text-align: center;\n}\n\n/* Search prefix icon in Kendo TextBox */\n.search-prefix-icon {\n    color: var(--gray-800);\n    margin: 0 8px;\n}\n\n/* Tab title with icon */\n.tab-title {\n    display: flex;\n    align-items: center;\n}\n\n.tab-content-wrapper {\n    padding: 20px;\n}\n\n/* Checkbox group styling */\n.checkbox-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n/* Kendo overrides for better integration */\n.k-button .fa,\n.k-button .fas {\n    font-size: 14px;\n}\n\n/* Ensure Kendo buttons with Font Awesome icons have proper spacing */\n.k-button > span {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n/* Kendo Badge enhancements */\n.k-badge {\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Kendo Chip enhancements */\n.k-chip {\n    font-weight: 500;\n    transition: all 0.2s ease;\n}\n\n.k-chip:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n/* Form field enhancements */\nkendo-formfield {\n    display: block;\n}\n\nkendo-formfield .k-label {\n    font-weight: 500;\n    color: var(--navy);\n    margin-bottom: 0.5rem;\n}\n\n/* Kendo Dialog enhancements */\n.k-dialog-wrapper .k-dialog {\n    border-radius: 20px;\n    overflow: hidden;\n}\n\n.k-dialog-wrapper .k-dialog-titlebar {\n    background: linear-gradient(135deg, var(--gray-600) 0%, #f8f9fa 100%);\n    padding: 24px 30px;\n}\n\n.k-dialog-wrapper .k-dialog-title {\n    font-size: 1.5rem;\n    color: var(--navy);\n}\n\n.k-dialog-wrapper .k-dialog-content {\n    padding: 30px;\n}\n\n/* Progress bar enhancements */\n.k-progressbar {\n    height: 8px;\n    border-radius: 4px;\n    background: var(--gray-600);\n}\n\n.k-progressbar .k-progress-status-wrap {\n    font-weight: 500;\n}\n\n/* Success progress bar */\n.progress-success .k-progressbar-progress {\n    background-color: #28a745 !important;\n}\n\n/* Loader container styling */\n.k-loader-container {\n    padding: 20px;\n}\n\n/* Ensure Font Awesome icons display properly */\n.fas, .fa {\n    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome';\n    font-weight: 900;\n}\n\n.far {\n    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome';\n    font-weight: 400;\n}\n\n/* Utility margin classes used in template */\n.mb-0 { margin-bottom: 0 !important; }\n.mb-1 { margin-bottom: 0.25rem !important; }\n.mb-2 { margin-bottom: 0.5rem !important; }\n.mb-3 { margin-bottom: 1rem !important; }\n.mb-4 { margin-bottom: 1.5rem !important; }\n\n.mt-0 { margin-top: 0 !important; }\n.mt-1 { margin-top: 0.25rem !important; }\n.mt-2 { margin-top: 0.5rem !important; }\n.mt-3 { margin-top: 1rem !important; }\n.mt-4 { margin-top: 1.5rem !important; }\n\n.mr-0 { margin-right: 0 !important; }\n.mr-1 { margin-right: 0.25rem !important; }\n.mr-2 { margin-right: 0.5rem !important; }\n\n.ml-0 { margin-left: 0 !important; }\n.ml-1 { margin-left: 0.25rem !important; }\n.ml-2 { margin-left: 0.5rem !important; }\n\n.p-3 { padding: 1rem !important; }\n\n/* Text alignment */\n.text-center { text-align: center !important; }\n\n/* Form error styling */\n.k-form-error {\n    color: #dc3545;\n    font-size: 12px;\n    margin-top: 4px;\n    display: block;\n}\n\n/* Radio group styling */\n.radio-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.radio-label {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n/* Color utilities */\n.bg-success { background-color: #28a745 !important; }\n\n/* Modal backdrop fix for proper display */\n.mj-modal-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(9, 35, 64, 0.6);\n    backdrop-filter: blur(8px);\n    z-index: 10000;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 20px;\n    animation: modal-overlay-appear 0.3s ease-out;\n}\n\n/* Fix for double borders in modals */\n.mj-modal .k-textbox,\n.mj-modal .k-dropdown,\n.mj-modal .k-dropdownlist {\n    border: 1px solid var(--gray-700) !important;\n}\n\n.mj-modal .k-textbox:focus,\n.mj-modal .k-dropdown:focus-within,\n.mj-modal .k-dropdownlist:focus-within {\n    border-color: var(--mj-blue) !important;\n}\n\n/* Icon card styles have been moved to global _common.scss */\n/* The mj-kendo-icon-card class is now globally available */\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n    .button-group {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .button-group .k-button,\n    .button-group .mj-btn {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .mj-toolbar {\n        flex-direction: column;\n        gap: 10px;\n    }\n    \n    .mj-toolbar-actions {\n        width: 100%;\n        flex-direction: column;\n        gap: 10px;\n    }\n    \n    .mj-toolbar-actions > * {\n        width: 100%;\n    }\n    \n    .custom-grid {\n        font-size: 12px;\n    }\n    \n    .k-grid td,\n    .k-grid th {\n        padding: 8px;\n    }\n    \n    .user-cell {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n    }\n    \n    .k-dialog-wrapper .k-dialog {\n        margin: 10px;\n        width: calc(100vw - 20px) !important;\n        max-width: none;\n    }\n}\n\n/* Print styles */\n@media print {\n    .mj-header-actions,\n    .mj-toolbar-actions,\n    .mj-card-actions,\n    .action-buttons,\n    .k-grid-toolbar,\n    .button-group {\n        display: none !important;\n    }\n    \n    .mj-card {\n        break-inside: avoid;\n        box-shadow: none;\n        border: 1px solid #ddd;\n    }\n}\n\n/* Dark mode support (if needed) */\n@media (prefers-color-scheme: dark) {\n    /* Add dark mode overrides here if needed */\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n    .mj-card,\n    .custom-kendo-card,\n    .k-button,\n    .mj-btn {\n        border-width: 2px !important;\n    }\n    \n    .badge,\n    .k-badge,\n    .k-chip {\n        border: 2px solid currentColor;\n    }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n    *,\n    *::before,\n    *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n    \n    .mj-card:hover,\n    .custom-kendo-card:hover {\n        transform: none !important;\n    }\n}\n"] }]
     }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StyleGuideTestComponent, { className: "StyleGuideTestComponent", filePath: "src/lib/style-guide-test/style-guide-test.component.ts", lineNumber: 13 }); })();
 //# sourceMappingURL=style-guide-test.component.js.map