@memberjunction/ng-explorer-core 2.121.0 → 2.122.0

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

@@ -13,6 +13,7 @@ import * as i9 from "@progress/kendo-angular-label";
 import * as i10 from "@progress/kendo-angular-dropdowns";
 import * as i11 from "@progress/kendo-angular-progressbar";
 import * as i12 from "@progress/kendo-angular-dateinputs";
+import * as i13 from "@memberjunction/ng-shared-generic";
 const _c0 = () => ({ checkboxOnly: true, mode: "multiple" });
 function StyleGuideTestComponent_kendo_card_104_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -520,7 +521,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"], ["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) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StyleGuideTestComponent, selectors: [["mj-style-guide-test"]], decls: 375, vars: 65, 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"], ["size", "small", 3, "showText"], [1, "mt-2", "mb-0"], ["size", "medium", 3, "showText"], ["size", "large", 3, "showText"], ["text", "Loading...", "size", "medium"], [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);
@@ -883,24 +884,24 @@ export class StyleGuideTestComponent {
             i0.ɵɵtext(332, "Loading States");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(333, "div", 50)(334, "kendo-card")(335, "kendo-card-body")(336, "div", 61);
-            i0.ɵɵelement(337, "kendo-loader", 149);
+            i0.ɵɵelement(337, "mj-loading", 149);
             i0.ɵɵelementStart(338, "p", 150);
-            i0.ɵɵtext(339, "Converging");
+            i0.ɵɵtext(339, "Small");
             i0.ɵɵelementEnd()()()();
             i0.ɵɵelementStart(340, "kendo-card")(341, "kendo-card-body")(342, "div", 61);
-            i0.ɵɵelement(343, "kendo-loader", 151);
+            i0.ɵɵelement(343, "mj-loading", 151);
             i0.ɵɵelementStart(344, "p", 150);
-            i0.ɵɵtext(345, "Infinite");
+            i0.ɵɵtext(345, "Medium");
             i0.ɵɵelementEnd()()()();
             i0.ɵɵelementStart(346, "kendo-card")(347, "kendo-card-body")(348, "div", 61);
-            i0.ɵɵelement(349, "kendo-loader", 152);
+            i0.ɵɵelement(349, "mj-loading", 152);
             i0.ɵɵelementStart(350, "p", 150);
-            i0.ɵɵtext(351, "Pulsing");
+            i0.ɵɵtext(351, "Large");
             i0.ɵɵelementEnd()()()();
             i0.ɵɵelementStart(352, "kendo-card")(353, "kendo-card-body")(354, "div", 61);
-            i0.ɵɵelement(355, "i", 153);
+            i0.ɵɵelement(355, "mj-loading", 153);
             i0.ɵɵelementStart(356, "p", 150);
-            i0.ɵɵtext(357, "Font Awesome");
+            i0.ɵɵtext(357, "With Text");
             i0.ɵɵelementEnd()()()()()()();
             i0.ɵɵelementStart(358, "div", 6)(359, "h2");
             i0.ɵɵtext(360, "Modals & Dialogs");
@@ -962,7 +963,7 @@ export class StyleGuideTestComponent {
             i0.ɵɵadvance(17);
             i0.ɵɵproperty("ngForOf", ctx.themeOptions);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("data", ctx.gridData)("height", 400)("sortable", true)("filterable", true)("groupable", false)("reorderable", true)("resizable", true)("selectable", i0.ɵɵpureFunction0(61, _c0));
+            i0.ɵɵproperty("data", ctx.gridData)("height", 400)("sortable", true)("filterable", true)("groupable", false)("reorderable", true)("resizable", true)("selectable", i0.ɵɵpureFunction0(64, _c0));
             i0.ɵɵadvance();
             i0.ɵɵclassMap("text-center");
             i0.ɵɵproperty("width", 45)("headerClass", "text-center");
@@ -1001,17 +1002,23 @@ export class StyleGuideTestComponent {
             i0.ɵɵproperty("value", ctx.progressValue)("max", 100);
             i0.ɵɵadvance();
             i0.ɵɵproperty("indeterminate", true)("animation", true);
-            i0.ɵɵadvance(47);
+            i0.ɵɵadvance(12);
+            i0.ɵɵproperty("showText", false);
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("showText", false);
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("showText", false);
+            i0.ɵɵadvance(23);
             i0.ɵɵproperty("ngIf", ctx.isModalOpen);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.isConfirmModalOpen);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.isKendoDialogOpen);
-        } }, dependencies: [i1.NgForOf, i1.NgIf, i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.RadioControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.FormControlDirective, i2.FormGroupDirective, i2.FormControlName, i3.GridComponent, i3.ColumnComponent, i3.CheckboxColumnComponent, i3.CellTemplateDirective, i4.DialogComponent, i4.DialogActionsComponent, i5.BadgeComponent, i5.BadgeContainerComponent, i5.LoaderComponent, i6.ButtonGroupComponent, i6.ButtonComponent, i6.ChipComponent, i6.ChipListComponent, i7.TabStripComponent, i7.TabStripTabComponent, i7.TabContentDirective, i7.TabTitleDirective, i8.TextAreaComponent, i8.TextBoxComponent, i8.TextBoxPrefixTemplateDirective, i8.CheckBoxDirective, i8.RadioButtonDirective, i8.FormFieldComponent, i9.LabelComponent, i7.AvatarComponent, i7.CardComponent, i7.CardHeaderComponent, i7.CardBodyComponent, i7.CardActionsComponent, i10.ItemTemplateDirective, i10.DropDownListComponent, i10.MultiSelectComponent, i11.ProgressBarComponent, i12.DatePickerComponent], styles: ["\n\n\n\n\n\n\n.typography-demo[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%], \n.typography-demo[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%], \n.typography-demo[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.typography-demo[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin-bottom: 1rem;\n}\n\n.typography-demo[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin-bottom: 0.5rem;\n}\n\n.button-group[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n    align-items: center;\n    margin-bottom: 1rem;\n}\n\n\n\n.button-content[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.button-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n\n\n.badge-group[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n    align-items: center;\n}\n\n\n\n.custom-kendo-card[_ngcontent-%COMP%] {\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\n}\n\n.custom-kendo-card[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   .k-card-header[_ngcontent-%COMP%] {\n    background: var(--gray-600);\n    border-bottom: 1px solid var(--gray-600);\n}\n\n.custom-kendo-card[_ngcontent-%COMP%]   .k-card-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    display: flex;\n    align-items: center;\n    color: var(--navy);\n}\n\n\n\n.custom-grid[_ngcontent-%COMP%] {\n    border-radius: var(--border-radius);\n    overflow: hidden;\n}\n\n.custom-grid[_ngcontent-%COMP%]   .k-grid-header[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, var(--gray-600) 0%, #e8e8e8 100%);\n}\n\n.custom-grid[_ngcontent-%COMP%]   .k-grid-header[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    font-weight: 600;\n}\n\n\n\n.user-cell[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.user-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.user-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--navy);\n}\n\n.user-role[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--gray-800);\n}\n\n\n\n.email-link[_ngcontent-%COMP%] {\n    color: var(--mj-blue);\n    text-decoration: none;\n    transition: color 0.2s ease;\n}\n\n.email-link[_ngcontent-%COMP%]:hover {\n    color: var(--navy);\n    text-decoration: underline;\n}\n\n\n\n.status-cell[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n.action-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n\n\n.dropdown-item-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n}\n\n.dropdown-item-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    width: 20px;\n    text-align: center;\n}\n\n\n\n.search-prefix-icon[_ngcontent-%COMP%] {\n    color: var(--gray-800);\n    margin: 0 8px;\n}\n\n\n\n.tab-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n}\n\n.tab-content-wrapper[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n\n\n.checkbox-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n\n\n.k-button[_ngcontent-%COMP%]   .fa[_ngcontent-%COMP%], \n.k-button[_ngcontent-%COMP%]   .fas[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n\n\n.k-button[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n\n\n.k-badge[_ngcontent-%COMP%] {\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\n\n.k-chip[_ngcontent-%COMP%] {\n    font-weight: 500;\n    transition: all 0.2s ease;\n}\n\n.k-chip[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n\n\nkendo-formfield[_ngcontent-%COMP%] {\n    display: block;\n}\n\nkendo-formfield[_ngcontent-%COMP%]   .k-label[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--navy);\n    margin-bottom: 0.5rem;\n}\n\n\n\n.k-dialog-wrapper[_ngcontent-%COMP%]   .k-dialog[_ngcontent-%COMP%] {\n    border-radius: 20px;\n    overflow: hidden;\n}\n\n.k-dialog-wrapper[_ngcontent-%COMP%]   .k-dialog-titlebar[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, var(--gray-600) 0%, #f8f9fa 100%);\n    padding: 24px 30px;\n}\n\n.k-dialog-wrapper[_ngcontent-%COMP%]   .k-dialog-title[_ngcontent-%COMP%] {\n    font-size: 1.5rem;\n    color: var(--navy);\n}\n\n.k-dialog-wrapper[_ngcontent-%COMP%]   .k-dialog-content[_ngcontent-%COMP%] {\n    padding: 30px;\n}\n\n\n\n.k-progressbar[_ngcontent-%COMP%] {\n    height: 8px;\n    border-radius: 4px;\n    background: var(--gray-600);\n}\n\n.k-progressbar[_ngcontent-%COMP%]   .k-progress-status-wrap[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n\n\n.progress-success[_ngcontent-%COMP%]   .k-progressbar-progress[_ngcontent-%COMP%] {\n    background-color: #28a745 !important;\n}\n\n\n\n.k-loader-container[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n\n\n.fas[_ngcontent-%COMP%], .fa[_ngcontent-%COMP%] {\n    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome';\n    font-weight: 900;\n}\n\n.far[_ngcontent-%COMP%] {\n    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome';\n    font-weight: 400;\n}\n\n\n\n.mb-0[_ngcontent-%COMP%] { margin-bottom: 0 !important; }\n.mb-1[_ngcontent-%COMP%] { margin-bottom: 0.25rem !important; }\n.mb-2[_ngcontent-%COMP%] { margin-bottom: 0.5rem !important; }\n.mb-3[_ngcontent-%COMP%] { margin-bottom: 1rem !important; }\n.mb-4[_ngcontent-%COMP%] { margin-bottom: 1.5rem !important; }\n\n.mt-0[_ngcontent-%COMP%] { margin-top: 0 !important; }\n.mt-1[_ngcontent-%COMP%] { margin-top: 0.25rem !important; }\n.mt-2[_ngcontent-%COMP%] { margin-top: 0.5rem !important; }\n.mt-3[_ngcontent-%COMP%] { margin-top: 1rem !important; }\n.mt-4[_ngcontent-%COMP%] { margin-top: 1.5rem !important; }\n\n.mr-0[_ngcontent-%COMP%] { margin-right: 0 !important; }\n.mr-1[_ngcontent-%COMP%] { margin-right: 0.25rem !important; }\n.mr-2[_ngcontent-%COMP%] { margin-right: 0.5rem !important; }\n\n.ml-0[_ngcontent-%COMP%] { margin-left: 0 !important; }\n.ml-1[_ngcontent-%COMP%] { margin-left: 0.25rem !important; }\n.ml-2[_ngcontent-%COMP%] { margin-left: 0.5rem !important; }\n\n.p-3[_ngcontent-%COMP%] { padding: 1rem !important; }\n\n\n\n.text-center[_ngcontent-%COMP%] { text-align: center !important; }\n\n\n\n.k-form-error[_ngcontent-%COMP%] {\n    color: #dc3545;\n    font-size: 12px;\n    margin-top: 4px;\n    display: block;\n}\n\n\n\n.radio-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n\n\n.bg-success[_ngcontent-%COMP%] { background-color: #28a745 !important; }\n\n\n\n.mj-modal-overlay[_ngcontent-%COMP%] {\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\n\n.mj-modal[_ngcontent-%COMP%]   .k-textbox[_ngcontent-%COMP%], \n.mj-modal[_ngcontent-%COMP%]   .k-dropdown[_ngcontent-%COMP%], \n.mj-modal[_ngcontent-%COMP%]   .k-dropdownlist[_ngcontent-%COMP%] {\n    border: 1px solid var(--gray-700) !important;\n}\n\n.mj-modal[_ngcontent-%COMP%]   .k-textbox[_ngcontent-%COMP%]:focus, \n.mj-modal[_ngcontent-%COMP%]   .k-dropdown[_ngcontent-%COMP%]:focus-within, \n.mj-modal[_ngcontent-%COMP%]   .k-dropdownlist[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--mj-blue) !important;\n}\n\n\n\n\n\n\n\n\n@media (max-width: 768px) {\n    .button-group[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .button-group[_ngcontent-%COMP%]   .k-button[_ngcontent-%COMP%], \n   .button-group[_ngcontent-%COMP%]   .mj-btn[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .mj-toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 10px;\n    }\n    \n    .mj-toolbar-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        flex-direction: column;\n        gap: 10px;\n    }\n    \n    .mj-toolbar-actions[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n    \n    .custom-grid[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n    \n    .k-grid[_ngcontent-%COMP%]   td[_ngcontent-%COMP%], \n   .k-grid[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n        padding: 8px;\n    }\n    \n    .user-cell[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n    }\n    \n    .k-dialog-wrapper[_ngcontent-%COMP%]   .k-dialog[_ngcontent-%COMP%] {\n        margin: 10px;\n        width: calc(100vw - 20px) !important;\n        max-width: none;\n    }\n}\n\n\n\n@media print {\n    .mj-header-actions[_ngcontent-%COMP%], \n   .mj-toolbar-actions[_ngcontent-%COMP%], \n   .mj-card-actions[_ngcontent-%COMP%], \n   .action-buttons[_ngcontent-%COMP%], \n   .k-grid-toolbar[_ngcontent-%COMP%], \n   .button-group[_ngcontent-%COMP%] {\n        display: none !important;\n    }\n    \n    .mj-card[_ngcontent-%COMP%] {\n        break-inside: avoid;\n        box-shadow: none;\n        border: 1px solid #ddd;\n    }\n}\n\n\n\n@media (prefers-color-scheme: dark) {\n    \n\n}\n\n\n\n@media (prefers-contrast: high) {\n    .mj-card[_ngcontent-%COMP%], \n   .custom-kendo-card[_ngcontent-%COMP%], \n   .k-button[_ngcontent-%COMP%], \n   .mj-btn[_ngcontent-%COMP%] {\n        border-width: 2px !important;\n    }\n    \n    .badge[_ngcontent-%COMP%], \n   .k-badge[_ngcontent-%COMP%], \n   .k-chip[_ngcontent-%COMP%] {\n        border: 2px solid currentColor;\n    }\n}\n\n\n\n@media (prefers-reduced-motion: reduce) {\n    *[_ngcontent-%COMP%], \n   *[_ngcontent-%COMP%]::before, \n   *[_ngcontent-%COMP%]::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n    \n    .mj-card[_ngcontent-%COMP%]:hover, \n   .custom-kendo-card[_ngcontent-%COMP%]:hover {\n        transform: none !important;\n    }\n}"] });
+        } }, dependencies: [i1.NgForOf, i1.NgIf, i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.RadioControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.FormControlDirective, i2.FormGroupDirective, i2.FormControlName, i3.GridComponent, i3.ColumnComponent, i3.CheckboxColumnComponent, i3.CellTemplateDirective, i4.DialogComponent, i4.DialogActionsComponent, i5.BadgeComponent, i5.BadgeContainerComponent, i6.ButtonGroupComponent, i6.ButtonComponent, i6.ChipComponent, i6.ChipListComponent, i7.TabStripComponent, i7.TabStripTabComponent, i7.TabContentDirective, i7.TabTitleDirective, i8.TextAreaComponent, i8.TextBoxComponent, i8.TextBoxPrefixTemplateDirective, i8.CheckBoxDirective, i8.RadioButtonDirective, i8.FormFieldComponent, i9.LabelComponent, i7.AvatarComponent, i7.CardComponent, i7.CardHeaderComponent, i7.CardBodyComponent, i7.CardActionsComponent, i10.ItemTemplateDirective, i10.DropDownListComponent, i10.MultiSelectComponent, i11.ProgressBarComponent, i12.DatePickerComponent, i13.LoadingComponent], styles: ["\n\n\n\n\n\n\n.typography-demo[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%], \n.typography-demo[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%], \n.typography-demo[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.typography-demo[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin-bottom: 1rem;\n}\n\n.typography-demo[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin-bottom: 0.5rem;\n}\n\n.button-group[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n    align-items: center;\n    margin-bottom: 1rem;\n}\n\n\n\n.button-content[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.button-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n\n\n.badge-group[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n    align-items: center;\n}\n\n\n\n.custom-kendo-card[_ngcontent-%COMP%] {\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\n}\n\n.custom-kendo-card[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]   .k-card-header[_ngcontent-%COMP%] {\n    background: var(--gray-600);\n    border-bottom: 1px solid var(--gray-600);\n}\n\n.custom-kendo-card[_ngcontent-%COMP%]   .k-card-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    display: flex;\n    align-items: center;\n    color: var(--navy);\n}\n\n\n\n.custom-grid[_ngcontent-%COMP%] {\n    border-radius: var(--border-radius);\n    overflow: hidden;\n}\n\n.custom-grid[_ngcontent-%COMP%]   .k-grid-header[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, var(--gray-600) 0%, #e8e8e8 100%);\n}\n\n.custom-grid[_ngcontent-%COMP%]   .k-grid-header[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    font-weight: 600;\n}\n\n\n\n.user-cell[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.user-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.user-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--navy);\n}\n\n.user-role[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--gray-800);\n}\n\n\n\n.email-link[_ngcontent-%COMP%] {\n    color: var(--mj-blue);\n    text-decoration: none;\n    transition: color 0.2s ease;\n}\n\n.email-link[_ngcontent-%COMP%]:hover {\n    color: var(--navy);\n    text-decoration: underline;\n}\n\n\n\n.status-cell[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n.action-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n\n\n.dropdown-item-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n}\n\n.dropdown-item-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    width: 20px;\n    text-align: center;\n}\n\n\n\n.search-prefix-icon[_ngcontent-%COMP%] {\n    color: var(--gray-800);\n    margin: 0 8px;\n}\n\n\n\n.tab-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n}\n\n.tab-content-wrapper[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n\n\n.checkbox-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n\n\n.k-button[_ngcontent-%COMP%]   .fa[_ngcontent-%COMP%], \n.k-button[_ngcontent-%COMP%]   .fas[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n\n\n.k-button[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n\n\n.k-badge[_ngcontent-%COMP%] {\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\n\n.k-chip[_ngcontent-%COMP%] {\n    font-weight: 500;\n    transition: all 0.2s ease;\n}\n\n.k-chip[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n\n\nkendo-formfield[_ngcontent-%COMP%] {\n    display: block;\n}\n\nkendo-formfield[_ngcontent-%COMP%]   .k-label[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--navy);\n    margin-bottom: 0.5rem;\n}\n\n\n\n.k-dialog-wrapper[_ngcontent-%COMP%]   .k-dialog[_ngcontent-%COMP%] {\n    border-radius: 20px;\n    overflow: hidden;\n}\n\n.k-dialog-wrapper[_ngcontent-%COMP%]   .k-dialog-titlebar[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, var(--gray-600) 0%, #f8f9fa 100%);\n    padding: 24px 30px;\n}\n\n.k-dialog-wrapper[_ngcontent-%COMP%]   .k-dialog-title[_ngcontent-%COMP%] {\n    font-size: 1.5rem;\n    color: var(--navy);\n}\n\n.k-dialog-wrapper[_ngcontent-%COMP%]   .k-dialog-content[_ngcontent-%COMP%] {\n    padding: 30px;\n}\n\n\n\n.k-progressbar[_ngcontent-%COMP%] {\n    height: 8px;\n    border-radius: 4px;\n    background: var(--gray-600);\n}\n\n.k-progressbar[_ngcontent-%COMP%]   .k-progress-status-wrap[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n\n\n.progress-success[_ngcontent-%COMP%]   .k-progressbar-progress[_ngcontent-%COMP%] {\n    background-color: #28a745 !important;\n}\n\n\n\n.k-loader-container[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n\n\n.fas[_ngcontent-%COMP%], .fa[_ngcontent-%COMP%] {\n    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome';\n    font-weight: 900;\n}\n\n.far[_ngcontent-%COMP%] {\n    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome';\n    font-weight: 400;\n}\n\n\n\n.mb-0[_ngcontent-%COMP%] { margin-bottom: 0 !important; }\n.mb-1[_ngcontent-%COMP%] { margin-bottom: 0.25rem !important; }\n.mb-2[_ngcontent-%COMP%] { margin-bottom: 0.5rem !important; }\n.mb-3[_ngcontent-%COMP%] { margin-bottom: 1rem !important; }\n.mb-4[_ngcontent-%COMP%] { margin-bottom: 1.5rem !important; }\n\n.mt-0[_ngcontent-%COMP%] { margin-top: 0 !important; }\n.mt-1[_ngcontent-%COMP%] { margin-top: 0.25rem !important; }\n.mt-2[_ngcontent-%COMP%] { margin-top: 0.5rem !important; }\n.mt-3[_ngcontent-%COMP%] { margin-top: 1rem !important; }\n.mt-4[_ngcontent-%COMP%] { margin-top: 1.5rem !important; }\n\n.mr-0[_ngcontent-%COMP%] { margin-right: 0 !important; }\n.mr-1[_ngcontent-%COMP%] { margin-right: 0.25rem !important; }\n.mr-2[_ngcontent-%COMP%] { margin-right: 0.5rem !important; }\n\n.ml-0[_ngcontent-%COMP%] { margin-left: 0 !important; }\n.ml-1[_ngcontent-%COMP%] { margin-left: 0.25rem !important; }\n.ml-2[_ngcontent-%COMP%] { margin-left: 0.5rem !important; }\n\n.p-3[_ngcontent-%COMP%] { padding: 1rem !important; }\n\n\n\n.text-center[_ngcontent-%COMP%] { text-align: center !important; }\n\n\n\n.k-form-error[_ngcontent-%COMP%] {\n    color: #dc3545;\n    font-size: 12px;\n    margin-top: 4px;\n    display: block;\n}\n\n\n\n.radio-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n\n\n.bg-success[_ngcontent-%COMP%] { background-color: #28a745 !important; }\n\n\n\n.mj-modal-overlay[_ngcontent-%COMP%] {\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\n\n.mj-modal[_ngcontent-%COMP%]   .k-textbox[_ngcontent-%COMP%], \n.mj-modal[_ngcontent-%COMP%]   .k-dropdown[_ngcontent-%COMP%], \n.mj-modal[_ngcontent-%COMP%]   .k-dropdownlist[_ngcontent-%COMP%] {\n    border: 1px solid var(--gray-700) !important;\n}\n\n.mj-modal[_ngcontent-%COMP%]   .k-textbox[_ngcontent-%COMP%]:focus, \n.mj-modal[_ngcontent-%COMP%]   .k-dropdown[_ngcontent-%COMP%]:focus-within, \n.mj-modal[_ngcontent-%COMP%]   .k-dropdownlist[_ngcontent-%COMP%]:focus-within {\n    border-color: var(--mj-blue) !important;\n}\n\n\n\n\n\n\n\n\n@media (max-width: 768px) {\n    .button-group[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .button-group[_ngcontent-%COMP%]   .k-button[_ngcontent-%COMP%], \n   .button-group[_ngcontent-%COMP%]   .mj-btn[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .mj-toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 10px;\n    }\n    \n    .mj-toolbar-actions[_ngcontent-%COMP%] {\n        width: 100%;\n        flex-direction: column;\n        gap: 10px;\n    }\n    \n    .mj-toolbar-actions[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n    \n    .custom-grid[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n    \n    .k-grid[_ngcontent-%COMP%]   td[_ngcontent-%COMP%], \n   .k-grid[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n        padding: 8px;\n    }\n    \n    .user-cell[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n    }\n    \n    .k-dialog-wrapper[_ngcontent-%COMP%]   .k-dialog[_ngcontent-%COMP%] {\n        margin: 10px;\n        width: calc(100vw - 20px) !important;\n        max-width: none;\n    }\n}\n\n\n\n@media print {\n    .mj-header-actions[_ngcontent-%COMP%], \n   .mj-toolbar-actions[_ngcontent-%COMP%], \n   .mj-card-actions[_ngcontent-%COMP%], \n   .action-buttons[_ngcontent-%COMP%], \n   .k-grid-toolbar[_ngcontent-%COMP%], \n   .button-group[_ngcontent-%COMP%] {\n        display: none !important;\n    }\n    \n    .mj-card[_ngcontent-%COMP%] {\n        break-inside: avoid;\n        box-shadow: none;\n        border: 1px solid #ddd;\n    }\n}\n\n\n\n@media (prefers-color-scheme: dark) {\n    \n\n}\n\n\n\n@media (prefers-contrast: high) {\n    .mj-card[_ngcontent-%COMP%], \n   .custom-kendo-card[_ngcontent-%COMP%], \n   .k-button[_ngcontent-%COMP%], \n   .mj-btn[_ngcontent-%COMP%] {\n        border-width: 2px !important;\n    }\n    \n    .badge[_ngcontent-%COMP%], \n   .k-badge[_ngcontent-%COMP%], \n   .k-chip[_ngcontent-%COMP%] {\n        border: 2px solid currentColor;\n    }\n}\n\n\n\n@media (prefers-reduced-motion: reduce) {\n    *[_ngcontent-%COMP%], \n   *[_ngcontent-%COMP%]::before, \n   *[_ngcontent-%COMP%]::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n    \n    .mj-card[_ngcontent-%COMP%]:hover, \n   .custom-kendo-card[_ngcontent-%COMP%]:hover {\n        transform: none !important;\n    }\n}"] });
 }
 (() => { (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        <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"] }]
+        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              <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n              <p class=\"mt-2 mb-0\">Small</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n\n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\n              <p class=\"mt-2 mb-0\">Medium</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n\n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <mj-loading [showText]=\"false\" size=\"large\"></mj-loading>\n              <p class=\"mt-2 mb-0\">Large</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n\n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <mj-loading text=\"Loading...\" size=\"medium\"></mj-loading>\n              <p class=\"mt-2 mb-0\">With Text</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

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

@@ -1 +1 @@
-{"version":3,"file":"style-guide-test.component.js","sourceRoot":"","sources":["../../../src/lib/style-guide-test/style-guide-test.component.ts","../../../src/lib/style-guide-test/style-guide-test.component.html"],"names":[],"mappings":"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"}
+{"version":3,"file":"style-guide-test.component.js","sourceRoot":"","sources":["../../../src/lib/style-guide-test/style-guide-test.component.ts","../../../src/lib/style-guide-test/style-guide-test.component.html"],"names":[],"mappings":"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"}

package/dist/lib/tabbed-dashboard/tabbed-dashboard.component.d.ts

@@ -1,6 +1,6 @@
 import { OnInit, ElementRef, AfterViewInit, ViewContainerRef, OnDestroy } from '@angular/core';
 import { DashboardEntity, DashboardUserStateEntity } from '@memberjunction/core-entities';
-import { BaseDashboard } from '@memberjunction/ng-dashboards';
+import { BaseDashboard } from '@memberjunction/ng-shared';
 import { MJTabStripComponent } from '@memberjunction/ng-tabstrip';
 import { Router } from '@angular/router';
 import * as i0 from "@angular/core";

package/dist/lib/tabbed-dashboard/tabbed-dashboard.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabbed-dashboard.component.d.ts","sourceRoot":"","sources":["../../../src/lib/tabbed-dashboard/tabbed-dashboard.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAa,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAgB,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1I,OAAO,EAAE,eAAe,EAAiC,wBAAwB,EAAgB,MAAM,+BAA+B,CAAC;AACvI,OAAO,EAAE,aAAa,EAAmB,MAAM,+BAA+B,CAAC;AAE/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;;AAKzC,qBAKa,wBAAyB,YAAW,MAAM,EAAE,aAAa,EAAE,SAAS;IA6BnE,OAAO,CAAC,MAAM;IA5BH,QAAQ,EAAG,mBAAmB,CAAC;IACzB,cAAc,EAAG,UAAU,CAAC;IAC3B,eAAe,EAAG,UAAU,CAAC;IAChC,YAAY,EAAG,UAAU,CAAC;IACO,iBAAiB,EAAG,gBAAgB,CAAC;IAEjG;;OAEG;IACa,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpD;;OAEG;IACa,cAAc,EAAE,MAAM,CAAa;IAEnD;;OAEG;IACa,wBAAwB,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAU;IAEtE,UAAU,EAAE,eAAe,EAAE,CAAM;IACnC,OAAO,EAAE,OAAO,CAAQ;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEnC,OAAO,CAAC,kBAAkB,CAAyC;IACnE,OAAO,CAAC,sBAAsB,CAAuD;gBAEjE,MAAM,EAAE,MAAM;IAE5B,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAIzB,eAAe;IA6BrB,OAAO,CAAC,6BAA6B;YAavB,cAAc;IAuErB,oBAAoB,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS;IAuG3E,OAAO,CAAC,qBAAqB;cAiBb,sBAAsB,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,wBAAwB,CAAC;IAsBvF,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IA0BnC,qBAAqB,IAAI,IAAI;YAqCtB,iBAAiB;IAqC/B,WAAW,IAAI,IAAI;yCAtYR,wBAAwB;2CAAxB,wBAAwB;CA8YpC"}
+{"version":3,"file":"tabbed-dashboard.component.d.ts","sourceRoot":"","sources":["../../../src/lib/tabbed-dashboard/tabbed-dashboard.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,MAAM,EAAa,UAAU,EAAE,aAAa,EAAE,gBAAgB,EAAgB,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1I,OAAO,EAAE,eAAe,EAAiC,wBAAwB,EAAgB,MAAM,+BAA+B,CAAC;AACvI,OAAO,EAAE,aAAa,EAAmB,MAAM,2BAA2B,CAAC;AAE3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;;AAKzC,qBAKa,wBAAyB,YAAW,MAAM,EAAE,aAAa,EAAE,SAAS;IA6BnE,OAAO,CAAC,MAAM;IA5BH,QAAQ,EAAG,mBAAmB,CAAC;IACzB,cAAc,EAAG,UAAU,CAAC;IAC3B,eAAe,EAAG,UAAU,CAAC;IAChC,YAAY,EAAG,UAAU,CAAC;IACO,iBAAiB,EAAG,gBAAgB,CAAC;IAEjG;;OAEG;IACa,aAAa,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEpD;;OAEG;IACa,cAAc,EAAE,MAAM,CAAa;IAEnD;;OAEG;IACa,wBAAwB,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAU;IAEtE,UAAU,EAAE,eAAe,EAAE,CAAM;IACnC,OAAO,EAAE,OAAO,CAAQ;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEnC,OAAO,CAAC,kBAAkB,CAAyC;IACnE,OAAO,CAAC,sBAAsB,CAAuD;gBAEjE,MAAM,EAAE,MAAM;IAE5B,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAIzB,eAAe;IA6BrB,OAAO,CAAC,6BAA6B;YAavB,cAAc;IAuErB,oBAAoB,CAAC,WAAW,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS;IAuG3E,OAAO,CAAC,qBAAqB;cAiBb,sBAAsB,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,wBAAwB,CAAC;IAsBvF,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IA0BnC,qBAAqB,IAAI,IAAI;YAqCtB,iBAAiB;IAqC/B,WAAW,IAAI,IAAI;yCAtYR,wBAAwB;2CAAxB,wBAAwB;CA8YpC"}