@memberjunction/ng-explorer-core 2.51.0 → 2.53.0

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

@@ -0,0 +1,1017 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@progress/kendo-angular-grid";
+import * as i4 from "@progress/kendo-angular-dialog";
+import * as i5 from "@progress/kendo-angular-indicators";
+import * as i6 from "@progress/kendo-angular-buttons";
+import * as i7 from "@progress/kendo-angular-layout";
+import * as i8 from "@progress/kendo-angular-inputs";
+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";
+const _c0 = () => ({ checkboxOnly: true, mode: "multiple" });
+function StyleGuideTestComponent_kendo_card_104_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-card", 161);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_kendo_card_104_Template_kendo_card_click_0_listener() { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.handleCardClick(item_r3)); });
+    i0.ɵɵelementStart(1, "kendo-card-body");
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementStart(3, "h3");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(7, "kendo-chip", 162);
+    i0.ɵɵelementStart(8, "div", 163)(9, "button", 164);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_kendo_card_104_Template_button_click_9_listener($event) { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r3.handleButtonClick("edit", item_r3)); });
+    i0.ɵɵelement(10, "i", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 164);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_kendo_card_104_Template_button_click_11_listener($event) { const item_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r3.handleButtonClick("delete", item_r3)); });
+    i0.ɵɵelement(12, "i", 35);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const item_r3 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap("fas " + item_r3.icon + " mj-card-icon-large");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r3.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r3.description);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("label", item_r3.color.toUpperCase())("themeColor", item_r3.color);
+} }
+function StyleGuideTestComponent_div_163_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 165);
+    i0.ɵɵtext(1, " Full name is required ");
+    i0.ɵɵelementEnd();
+} }
+function StyleGuideTestComponent_ng_template_168_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 166);
+    i0.ɵɵelement(1, "i", 167);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dataItem_r5 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(dataItem_r5.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", dataItem_r5.name, " ");
+} }
+function StyleGuideTestComponent_label_206_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 168)(1, "input", 169);
+    i0.ɵɵtwoWayListener("ngModelChange", function StyleGuideTestComponent_label_206_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r3 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r3.selectedTheme, $event) || (ctx_r3.selectedTheme = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 92);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const option_r7 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", option_r7);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r3.selectedTheme);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(option_r7);
+} }
+function StyleGuideTestComponent_ng_template_213_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 170);
+    i0.ɵɵelement(1, "kendo-avatar", 171);
+    i0.ɵɵelementStart(2, "div", 172)(3, "div", 173);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 174);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const dataItem_r8 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("initials", ctx_r3.getInitials(dataItem_r8.name));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(dataItem_r8.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(dataItem_r8.role);
+} }
+function StyleGuideTestComponent_ng_template_215_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "a", 175);
+    i0.ɵɵelement(1, "i", 176);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dataItem_r9 = ctx.$implicit;
+    i0.ɵɵpropertyInterpolate1("href", "mailto:", dataItem_r9.email, "", i0.ɵɵsanitizeUrl);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", dataItem_r9.email, " ");
+} }
+function StyleGuideTestComponent_ng_template_217_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-chip", 177);
+} if (rf & 2) {
+    const dataItem_r10 = ctx.$implicit;
+    i0.ɵɵproperty("label", dataItem_r10.department);
+} }
+function StyleGuideTestComponent_ng_template_219_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 178);
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementStart(2, "kendo-badge", 179);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const dataItem_r11 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r3.getStatusIcon(dataItem_r11.status) + " mr-1");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("themeColor", ctx_r3.getStatusThemeColor(dataItem_r11.status));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", dataItem_r11.status, " ");
+} }
+function StyleGuideTestComponent_ng_template_221_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 180)(1, "kendo-button", 181);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_ng_template_221_Template_kendo_button_click_1_listener() { const dataItem_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.editItem(dataItem_r13)); });
+    i0.ɵɵelement(2, "i", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "kendo-button", 182);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_ng_template_221_Template_kendo_button_click_3_listener() { const dataItem_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.deleteItem(dataItem_r13)); });
+    i0.ɵɵelement(4, "i", 35);
+    i0.ɵɵelementEnd()();
+} }
+function StyleGuideTestComponent_ng_template_280_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 183);
+} }
+function StyleGuideTestComponent_ng_template_309_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 184);
+    i0.ɵɵelement(1, "i", 185);
+    i0.ɵɵtext(2, " Overview ");
+    i0.ɵɵelementEnd();
+} }
+function StyleGuideTestComponent_ng_template_310_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 186)(1, "h5");
+    i0.ɵɵtext(2, "Dashboard Overview");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4, "View your application's key metrics and performance indicators.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "kendo-button", 60);
+    i0.ɵɵtext(6, "View Details");
+    i0.ɵɵelementEnd()();
+} }
+function StyleGuideTestComponent_ng_template_312_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 184);
+    i0.ɵɵelement(1, "i", 187);
+    i0.ɵɵtext(2, " Settings ");
+    i0.ɵɵelementEnd();
+} }
+function StyleGuideTestComponent_ng_template_313_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 186)(1, "h5");
+    i0.ɵɵtext(2, "Application Settings");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4, "Configure your application preferences and options.");
+    i0.ɵɵelementEnd()();
+} }
+function StyleGuideTestComponent_ng_template_315_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 184);
+    i0.ɵɵelement(1, "i", 188);
+    i0.ɵɵtext(2, " Reports ");
+    i0.ɵɵelementEnd();
+} }
+function StyleGuideTestComponent_ng_template_316_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 186)(1, "h5");
+    i0.ɵɵtext(2, "Generate Reports");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4, "Create and download various reports from your data.");
+    i0.ɵɵelementEnd()();
+} }
+function StyleGuideTestComponent_div_372_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 189);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_div_372_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeModal()); });
+    i0.ɵɵelementStart(1, "div", 190);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_div_372_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r14); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 191)(3, "h3", 192);
+    i0.ɵɵelement(4, "i", 193);
+    i0.ɵɵtext(5, " Custom Modal Example ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 194);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_div_372_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeModal()); });
+    i0.ɵɵelement(7, "i", 44);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 195)(9, "p");
+    i0.ɵɵtext(10, "This custom modal maintains your brand styling while working alongside Kendo components.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 81)(12, "label", 82);
+    i0.ɵɵelement(13, "i", 196);
+    i0.ɵɵtext(14, " Username ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(15, "kendo-textbox", 197);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div", 81)(17, "label", 82);
+    i0.ɵɵelement(18, "i", 198);
+    i0.ɵɵtext(19, " Theme Preference ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(20, "kendo-dropdownlist", 199);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(21, "div", 200)(22, "kendo-button", 201);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_div_372_Template_kendo_button_click_22_listener() { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeModal()); });
+    i0.ɵɵtext(23, "Cancel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "kendo-button", 60)(25, "span", 14);
+    i0.ɵɵelement(26, "i", 17);
+    i0.ɵɵtext(27, " Save Changes ");
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(20);
+    i0.ɵɵproperty("data", ctx_r3.themeOptions)("value", ctx_r3.selectedTheme);
+} }
+function StyleGuideTestComponent_div_373_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 189);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_div_373_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeConfirmModal()); });
+    i0.ɵɵelementStart(1, "div", 202);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_div_373_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r15); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 191)(3, "h3", 192);
+    i0.ɵɵtext(4, "Confirm Delete");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 194);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_div_373_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r15); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeConfirmModal()); });
+    i0.ɵɵelement(6, "i", 44);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 195);
+    i0.ɵɵelement(8, "i", 203);
+    i0.ɵɵelementStart(9, "h4");
+    i0.ɵɵtext(10, "Are you sure?");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "p");
+    i0.ɵɵtext(12, "This action cannot be undone. All associated data will be permanently deleted.");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 200)(14, "button", 204);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_div_373_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r15); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeConfirmModal()); });
+    i0.ɵɵtext(15, "Cancel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "button", 205);
+    i0.ɵɵelement(17, "i", 35);
+    i0.ɵɵtext(18, " Delete ");
+    i0.ɵɵelementEnd()()()();
+} }
+function StyleGuideTestComponent_kendo_dialog_374_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 216);
+} }
+function StyleGuideTestComponent_kendo_dialog_374_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 165);
+    i0.ɵɵtext(1, " Name is required ");
+    i0.ɵɵelementEnd();
+} }
+function StyleGuideTestComponent_kendo_dialog_374_ng_template_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 217);
+} }
+function StyleGuideTestComponent_kendo_dialog_374_div_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 165);
+    i0.ɵɵtext(1, " Please enter a valid email ");
+    i0.ɵɵelementEnd();
+} }
+function StyleGuideTestComponent_kendo_dialog_374_ng_template_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 166);
+    i0.ɵɵelement(1, "i", 167);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dataItem_r17 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(dataItem_r17.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", dataItem_r17.name, " ");
+} }
+function StyleGuideTestComponent_kendo_dialog_374_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 206);
+    i0.ɵɵlistener("close", function StyleGuideTestComponent_kendo_dialog_374_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeKendoDialog()); });
+    i0.ɵɵelementStart(1, "form", 207)(2, "kendo-formfield", 70);
+    i0.ɵɵelement(3, "kendo-label", 71);
+    i0.ɵɵelementStart(4, "kendo-textbox", 208, 2);
+    i0.ɵɵtemplate(6, StyleGuideTestComponent_kendo_dialog_374_ng_template_6_Template, 1, 0, "ng-template", 128);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(7, StyleGuideTestComponent_kendo_dialog_374_div_7_Template, 2, 0, "div", 73);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "kendo-formfield", 70);
+    i0.ɵɵelement(9, "kendo-label", 209);
+    i0.ɵɵelementStart(10, "kendo-textbox", 210, 3);
+    i0.ɵɵtemplate(12, StyleGuideTestComponent_kendo_dialog_374_ng_template_12_Template, 1, 0, "ng-template", 128);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(13, StyleGuideTestComponent_kendo_dialog_374_div_13_Template, 2, 0, "div", 73);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "kendo-formfield", 70);
+    i0.ɵɵelement(15, "kendo-label", 74);
+    i0.ɵɵelementStart(16, "kendo-dropdownlist", 211, 4);
+    i0.ɵɵtemplate(18, StyleGuideTestComponent_kendo_dialog_374_ng_template_18_Template, 3, 3, "ng-template", 76);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "kendo-formfield", 212);
+    i0.ɵɵelement(20, "kendo-label", 213)(21, "kendo-textarea", 214);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "kendo-dialog-actions")(23, "kendo-button", 201);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_kendo_dialog_374_Template_kendo_button_click_23_listener() { i0.ɵɵrestoreView(_r16); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.closeKendoDialog()); });
+    i0.ɵɵtext(24, "Cancel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "kendo-button", 215);
+    i0.ɵɵlistener("click", function StyleGuideTestComponent_kendo_dialog_374_Template_kendo_button_click_25_listener() { i0.ɵɵrestoreView(_r16); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.submitForm()); });
+    i0.ɵɵelementStart(26, "span", 14);
+    i0.ɵɵelement(27, "i", 17);
+    i0.ɵɵtext(28, " Save Changes ");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const nameField_r18 = i0.ɵɵreference(5);
+    const emailField_r19 = i0.ɵɵreference(11);
+    const deptField_r20 = i0.ɵɵreference(17);
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("minWidth", 450)("width", 600)("height", 400);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("formGroup", ctx_r3.formGroup);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("for", nameField_r18);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("clearButton", true);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r3.fullNameControl.touched && (ctx_r3.fullNameControl.errors == null ? null : ctx_r3.fullNameControl.errors["required"]));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("for", emailField_r19);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("clearButton", true);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r3.emailControl.touched && (ctx_r3.emailControl.errors == null ? null : ctx_r3.emailControl.errors["email"]));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("for", deptField_r20);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("data", ctx_r3.departments);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("rows", 3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("disabled", !ctx_r3.formGroup.valid);
+} }
+export class StyleGuideTestComponent {
+    // Sample data for demonstrations
+    sampleItems = [
+        { name: 'Analytics Dashboard', description: 'View comprehensive analytics and metrics', icon: 'fa-chart-line', color: 'primary' },
+        { name: 'User Management', description: 'Manage users and permissions', icon: 'fa-users', color: 'info' },
+        { name: 'System Settings', description: 'Configure application settings', icon: 'fa-cog', color: 'warning' },
+        { name: 'Reports', description: 'Generate and view reports', icon: 'fa-file-alt', color: 'success' }
+    ];
+    // Enhanced grid data with avatars
+    gridData = [
+        { id: 1, name: 'John Anderson', email: 'john.anderson@company.com', department: 'Engineering', status: 'Active', role: 'Senior Developer' },
+        { id: 2, name: 'Sarah Mitchell', email: 'sarah.mitchell@company.com', department: 'Design', status: 'Active', role: 'UI/UX Lead' },
+        { id: 3, name: 'Michael Chen', email: 'michael.chen@company.com', department: 'Marketing', status: 'Pending', role: 'Marketing Manager' },
+        { id: 4, name: 'Emily Rodriguez', email: 'emily.rodriguez@company.com', department: 'Sales', status: 'Inactive', role: 'Sales Representative' },
+        { id: 5, name: 'David Park', email: 'david.park@company.com', department: 'Operations', status: 'Active', role: 'Operations Manager' }
+    ];
+    // Dropdown data
+    departments = [
+        { id: 1, name: 'Engineering', icon: 'fa fa-code' },
+        { id: 2, name: 'Design', icon: 'fa fa-paint-brush' },
+        { id: 3, name: 'Marketing', icon: 'fa fa-bullhorn' },
+        { id: 4, name: 'Sales', icon: 'fa fa-dollar-sign' },
+        { id: 5, name: 'Operations', icon: 'fa fa-cogs' }
+    ];
+    technologies = ['JavaScript', 'TypeScript', 'Angular', 'React', 'Vue.js', 'Node.js'];
+    phases = ['Planning', 'Design', 'Development', 'Testing', 'Deployment', 'Maintenance'];
+    themeOptions = ['Light', 'Dark', 'Auto'];
+    // Form group
+    formGroup;
+    // State variables
+    isModalOpen = false;
+    isConfirmModalOpen = false;
+    isKendoDialogOpen = false;
+    selectedTab = 0;
+    selectedDepartment = this.departments[0];
+    selectedTechnologies = ['Angular', 'TypeScript'];
+    selectedTheme = 'Light';
+    searchText = '';
+    progressValue = 65;
+    dateValue = new Date();
+    // Notification counter
+    notificationCount = 5;
+    // Badge align values
+    badgeAlignTopEnd = { horizontal: 'end', vertical: 'top' };
+    badgeAlignBottomEnd = { horizontal: 'end', vertical: 'bottom' };
+    constructor() {
+        this.formGroup = new FormGroup({
+            fullName: new FormControl('', Validators.required),
+            email: new FormControl('', [Validators.required, Validators.email]),
+            department: new FormControl(null),
+            comments: new FormControl('')
+        });
+    }
+    // Modal methods
+    openModal() {
+        this.isModalOpen = true;
+    }
+    closeModal() {
+        this.isModalOpen = false;
+    }
+    openConfirmModal() {
+        this.isConfirmModalOpen = true;
+    }
+    closeConfirmModal() {
+        this.isConfirmModalOpen = false;
+    }
+    openKendoDialog() {
+        this.isKendoDialogOpen = true;
+    }
+    closeKendoDialog() {
+        this.isKendoDialogOpen = false;
+    }
+    // Utility methods
+    getStatusBadgeClass(status) {
+        switch (status.toLowerCase()) {
+            case 'active':
+                return 'badge badge-success';
+            case 'inactive':
+                return 'badge badge-danger';
+            case 'pending':
+                return 'badge badge-primary';
+            default:
+                return 'badge';
+        }
+    }
+    // Get Kendo theme color for status
+    getStatusThemeColor(status) {
+        switch (status.toLowerCase()) {
+            case 'active':
+                return 'success';
+            case 'inactive':
+                return 'error';
+            case 'pending':
+                return 'warning';
+            default:
+                return 'info';
+        }
+    }
+    // Get Font Awesome icon for status
+    getStatusIcon(status) {
+        switch (status.toLowerCase()) {
+            case 'active':
+                return 'fa fa-check-circle';
+            case 'inactive':
+                return 'fa fa-times-circle';
+            case 'pending':
+                return 'fa fa-clock';
+            default:
+                return 'fa fa-info-circle';
+        }
+    }
+    handleCardClick(item) {
+        console.log('Card clicked:', item);
+        // Could open a detail view or dialog
+    }
+    handleButtonClick(action, item) {
+        console.log('Button clicked:', action, item);
+    }
+    // Form submission
+    submitForm() {
+        if (this.formGroup.valid) {
+            console.log('Form submitted:', this.formGroup.value);
+            this.closeKendoDialog();
+        }
+    }
+    // Simulate data loading
+    loadData() {
+        this.progressValue = 0;
+        const interval = setInterval(() => {
+            this.progressValue += 10;
+            if (this.progressValue >= 100) {
+                clearInterval(interval);
+            }
+        }, 200);
+    }
+    // Get initials from name
+    getInitials(name) {
+        if (!name)
+            return '';
+        return name.split(' ').map(n => n[0]).join('').toUpperCase();
+    }
+    // Grid actions
+    editItem(dataItem) {
+        console.log('Edit item:', dataItem);
+        this.openKendoDialog();
+    }
+    deleteItem(dataItem) {
+        console.log('Delete item:', dataItem);
+        this.openConfirmModal();
+    }
+    // Helper methods for form controls
+    get fullNameControl() {
+        return this.formGroup.get('fullName');
+    }
+    get emailControl() {
+        return this.formGroup.get('email');
+    }
+    get departmentControl() {
+        return this.formGroup.get('department');
+    }
+    get commentsControl() {
+        return this.formGroup.get('comments');
+    }
+    static ɵfac = function StyleGuideTestComponent_Factory(t) { return new (t || StyleGuideTestComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StyleGuideTestComponent, selectors: [["mj-style-guide-test"]], decls: 375, vars: 62, consts: [["fullNameInput", ""], ["deptDropdown", ""], ["nameField", ""], ["emailField", ""], ["deptField", ""], [1, "mj-page-container"], [1, "mj-content-container"], [1, "mj-header"], [1, "mj-header-title"], [1, "fas", "fa-paint-brush", "mj-header-icon"], [1, "mj-header-subtitle"], [1, "fas", "fa-palette"], [1, "mj-header-actions"], ["fillMode", "outline", "rounded", "medium", "themeColor", "base"], [1, "button-content"], [1, "fas", "fa-download"], ["themeColor", "primary", "rounded", "medium"], [1, "fas", "fa-save"], [1, "typography-demo"], [1, "text-muted"], [1, "mb-3"], [1, "button-group"], ["themeColor", "primary", "rounded", "medium", "size", "large"], [1, "fas", "fa-check"], ["themeColor", "info", "rounded", "medium"], [1, "fas", "fa-info-circle"], ["themeColor", "success", "rounded", "medium"], [1, "fas", "fa-check-circle"], ["themeColor", "warning", "rounded", "medium"], [1, "fas", "fa-exclamation-triangle"], ["themeColor", "error", "rounded", "medium"], [1, "fas", "fa-times-circle"], ["fillMode", "flat", "rounded", "full", "size", "large", "title", "Edit"], [1, "fas", "fa-edit"], ["fillMode", "flat", "rounded", "full", "size", "large", "title", "Delete"], [1, "fas", "fa-trash"], ["fillMode", "flat", "rounded", "full", "size", "large", "title", "Settings"], [1, "fas", "fa-cog"], ["fillMode", "flat", "rounded", "full", "size", "large", "title", "Search"], [1, "fas", "fa-search"], [1, "mj-btn", "mj-btn-primary"], [1, "fas", "fa-rocket"], [1, "mj-btn", "mj-btn-secondary"], [1, "mj-btn", "mj-btn-ghost"], [1, "fas", "fa-times"], ["kendoButton", "", 3, "toggleable", "selected"], [1, "fas", "fa-bold"], ["kendoButton", "", 3, "toggleable"], [1, "fas", "fa-italic"], [1, "fas", "fa-underline"], [1, "mj-grid", "mj-grid-4"], ["class", "mj-kendo-icon-card", 3, "click", 4, "ngFor", "ngForOf"], [1, "mt-4"], [1, "mj-grid", "mj-grid-3"], [1, "custom-kendo-card"], [1, "fas", "fa-chart-bar", "mr-2"], ["label", "Real-time", "icon", "clock", "themeColor", "success"], ["label", "Interactive", "icon", "filter", "themeColor", "info"], ["orientation", "horizontal", "layout", "end"], ["fillMode", "flat"], ["themeColor", "primary"], [1, "text-center"], ["shape", "circle", "size", "large", 3, "imageSrc"], [1, "mt-3"], [1, "fas", "fa-bell"], ["rounded", "full", "themeColor", "error", "position", "edge", 3, "align"], [1, "mj-empty-state"], [1, "fas", "fa-inbox", "mj-empty-icon"], [1, "fas", "fa-upload"], [1, "mj-grid", "mj-grid-2"], ["orientation", "vertical", 1, "mb-3"], ["text", "Full Name", 3, "for"], ["placeholder", "Enter your full name", "rounded", "medium", 3, "clearButton", "formControl"], ["class", "k-form-error", 4, "ngIf"], ["text", "Department", 3, "for"], ["textField", "name", "valueField", "id", "rounded", "medium", 3, "ngModelChange", "data", "ngModel"], ["kendoDropDownListItemTemplate", ""], ["text", "Technologies"], ["placeholder", "Select technologies...", "rounded", "medium", 3, "ngModelChange", "data", "ngModel"], ["text", "Project Date"], ["format", "dd/MM/yyyy", "rounded", "medium", 3, "valueChange", "value"], [1, "form-group"], [1, "form-label"], [1, "fas", "fa-search", "mr-1"], [1, "mj-search"], [1, "fas", "fa-search", "mj-search-icon"], ["type", "text", "placeholder", "Search items...", 1, "mj-search-input", 3, "ngModelChange", "ngModel"], [1, "fas", "fa-comment", "mr-1"], ["placeholder", "Enter your comments...", "rounded", "medium", 3, "formControl", "rows"], [1, "checkbox-group"], [1, "checkbox-label"], ["type", "checkbox", "kendoCheckBox", ""], [1, "ml-2"], ["type", "checkbox", "kendoCheckBox", "", "checked", ""], [1, "radio-group"], ["class", "radio-label", 4, "ngFor", "ngForOf"], [1, "custom-grid", 3, "data", "height", "sortable", "filterable", "groupable", "reorderable", "resizable", "selectable"], [3, "width", "headerClass"], ["field", "name", "title", "Name", 3, "width"], ["kendoGridCellTemplate", ""], ["field", "email", "title", "Email", 3, "width"], ["field", "department", "title", "Department", 3, "width"], ["field", "status", "title", "Status", 3, "width"], ["title", "Actions", 3, "width", "sortable", "filterable"], [1, "badge-group"], [1, "badge", "badge-success"], [1, "fas", "fa-check", "mr-1"], [1, "badge", "badge-danger"], [1, "fas", "fa-times", "mr-1"], [1, "badge", "badge-warning"], [1, "fas", "fa-clock", "mr-1"], [1, "badge", "badge-info"], [1, "fas", "fa-info-circle", "mr-1"], ["label", "Approved", "icon", "check", "themeColor", "success", 3, "removable"], ["label", "In Progress", "icon", "clock", "themeColor", "warning", 3, "removable"], ["label", "Rejected", "icon", "x", "themeColor", "error", 3, "removable"], ["label", "Under Review", "icon", "eye", "themeColor", "info", 3, "removable"], [1, "fas", "fa-envelope", "mr-2"], ["themeColor", "error", "position", "edge", 3, "align"], ["fillMode", "flat", "rounded", "full", "size", "large"], ["themeColor", "warning", "position", "edge", "rounded", "full", 3, "align"], ["initials", "JD", "themeColor", "info"], ["themeColor", "success", "position", "edge", "size", "small", 3, "align"], [1, "mj-toolbar"], [1, "mj-toolbar-title"], [1, "fas", "fa-users", "mr-2"], [1, "mj-toolbar-actions"], ["placeholder", "Search users...", "rounded", "medium", 2, "width", "300px", 3, "ngModelChange", "clearButton", "ngModel"], ["kendoTextBoxPrefixTemplate", ""], ["fillMode", "outline", "rounded", "medium"], [1, "fas", "fa-filter"], [1, "fas", "fa-user-plus"], [1, "mj-breadcrumb"], [1, "mj-breadcrumb-item"], [1, "fas", "fa-home", "mr-1"], [1, "fas", "fa-chevron-right", "mj-breadcrumb-separator"], [1, "fas", "fa-th", "mr-1"], [1, "mj-breadcrumb-item", "mj-breadcrumb-current"], [1, "fas", "fa-paint-brush", "mr-1"], ["title", "Overview", 3, "selected"], ["kendoTabTitle", ""], ["kendoTabContent", ""], ["title", "Settings"], ["title", "Reports"], ["type", "percent", 1, "mb-2", 3, "value", "max", "animation"], ["type", "value", 1, "mb-2", "progress-success", 3, "value", "max"], [3, "indeterminate", "animation"], ["themeColor", "primary", 1, "mt-2", 3, "click"], [1, "fas", "fa-sync"], ["type", "converging-spinner", "themeColor", "primary", "size", "medium"], [1, "mt-2", "mb-0"], ["type", "infinite-spinner", "themeColor", "info", "size", "medium"], ["type", "pulsing", "themeColor", "success", "size", "medium"], [1, "fas", "fa-spinner", "fa-spin", 2, "font-size", "2rem", "color", "var(--mj-blue)"], [1, "mj-btn", "mj-btn-primary", 3, "click"], [1, "fas", "fa-window-maximize"], ["themeColor", "info", "rounded", "medium", 3, "click"], [1, "fas", "fa-comment"], [1, "mj-btn", "mj-btn-secondary", 3, "click"], ["class", "mj-modal-overlay", 3, "click", 4, "ngIf"], ["title", "Edit User Information", 3, "minWidth", "width", "height", "close", 4, "ngIf"], [1, "mj-kendo-icon-card", 3, "click"], ["rounded", "full", "size", "small", 1, "mt-2", 3, "label", "themeColor"], [1, "mj-card-actions"], [1, "mj-btn", "mj-btn-icon-only", "mj-btn-sm", 3, "click"], [1, "k-form-error"], [1, "dropdown-item-content"], [1, "mr-2"], [1, "radio-label"], ["type", "radio", "name", "theme", "kendoRadioButton", "", 3, "ngModelChange", "value", "ngModel"], [1, "user-cell"], ["themeColor", "info", "shape", "circle", "size", "small", 3, "initials"], [1, "user-info"], [1, "user-name"], [1, "user-role"], [1, "email-link", 3, "href"], [1, "fas", "fa-envelope", "mr-1"], ["rounded", "medium", "fillMode", "outline", 3, "label"], [1, "status-cell"], ["rounded", "full", "size", "small", 3, "themeColor"], [1, "action-buttons"], ["fillMode", "flat", "rounded", "full", "size", "small", "themeColor", "info", "title", "Edit", 3, "click"], ["fillMode", "flat", "rounded", "full", "size", "small", "themeColor", "error", "title", "Delete", 3, "click"], [1, "fas", "fa-search", "search-prefix-icon"], [1, "tab-title"], [1, "fas", "fa-chart-pie", "mr-2"], [1, "tab-content-wrapper"], [1, "fas", "fa-cog", "mr-2"], [1, "fas", "fa-file-alt", "mr-2"], [1, "mj-modal-overlay", 3, "click"], [1, "mj-modal", "mj-modal-lg", 3, "click"], [1, "mj-modal-header"], [1, "mj-modal-title"], [1, "fas", "fa-cog", "mj-modal-icon"], [1, "mj-modal-close", 3, "click"], [1, "mj-modal-body"], [1, "fas", "fa-user", "mr-1"], ["placeholder", "Enter username", "rounded", "medium"], [1, "fas", "fa-palette", "mr-1"], ["rounded", "medium", 3, "data", "value"], [1, "mj-modal-footer"], ["fillMode", "outline", 3, "click"], [1, "mj-modal", "mj-modal-confirm", 3, "click"], [1, "fas", "fa-exclamation-triangle", "mj-modal-confirm-icon", "warning"], [1, "mj-btn", "mj-btn-ghost", 3, "click"], [1, "mj-btn", "mj-btn-primary", 2, "background", "#dc3545", "border-color", "#dc3545"], ["title", "Edit User Information", 3, "close", "minWidth", "width", "height"], [3, "formGroup"], ["formControlName", "fullName", "placeholder", "Enter full name", "rounded", "medium", 3, "clearButton"], ["text", "Email Address", 3, "for"], ["formControlName", "email", "placeholder", "user@example.com", "rounded", "medium", 3, "clearButton"], ["formControlName", "department", "textField", "name", "valueField", "id", "rounded", "medium", 3, "data"], ["orientation", "vertical"], ["text", "Additional Notes"], ["formControlName", "comments", "placeholder", "Enter any additional notes...", "rounded", "medium", 3, "rows"], ["themeColor", "primary", 3, "click", "disabled"], [1, "fas", "fa-user", "search-prefix-icon"], [1, "fas", "fa-envelope", "search-prefix-icon"]], template: function StyleGuideTestComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 5)(1, "div", 6)(2, "div", 7)(3, "div", 8);
+            i0.ɵɵelement(4, "i", 9);
+            i0.ɵɵelementStart(5, "div")(6, "h1");
+            i0.ɵɵtext(7, "Kendo UI + Font Awesome Style Guide");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "div", 10);
+            i0.ɵɵelement(9, "i", 11);
+            i0.ɵɵtext(10, " Modern components with custom styling ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(11, "div", 12)(12, "kendo-button", 13)(13, "span", 14);
+            i0.ɵɵelement(14, "i", 15);
+            i0.ɵɵtext(15, " Export ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(16, "kendo-button", 16)(17, "span", 14);
+            i0.ɵɵelement(18, "i", 17);
+            i0.ɵɵtext(19, " Save Changes ");
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(20, "div", 6)(21, "h2");
+            i0.ɵɵtext(22, "Typography Examples");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(23, "div", 18)(24, "h1");
+            i0.ɵɵtext(25, "Heading 1 - Main page titles");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(26, "h2");
+            i0.ɵɵtext(27, "Heading 2 - Section headers");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(28, "h3");
+            i0.ɵɵtext(29, "Heading 3 - Subsection titles");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(30, "h4");
+            i0.ɵɵtext(31, "Heading 4 - Component titles");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(32, "p");
+            i0.ɵɵtext(33, "Body text - Regular paragraph content with good readability and proper line height for easy reading.");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(34, "p", 19);
+            i0.ɵɵtext(35, "Muted text for secondary information");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(36, "div", 6)(37, "h2");
+            i0.ɵɵtext(38, "Button System Comparison");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(39, "div", 20)(40, "h4");
+            i0.ɵɵtext(41, "Kendo Buttons with Font Awesome Icons");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(42, "div", 21)(43, "kendo-button", 22)(44, "span", 14);
+            i0.ɵɵelement(45, "i", 23);
+            i0.ɵɵtext(46, " Primary Action ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(47, "kendo-button", 24)(48, "span", 14);
+            i0.ɵɵelement(49, "i", 25);
+            i0.ɵɵtext(50, " Info Button ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(51, "kendo-button", 26)(52, "span", 14);
+            i0.ɵɵelement(53, "i", 27);
+            i0.ɵɵtext(54, " Success ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(55, "kendo-button", 28)(56, "span", 14);
+            i0.ɵɵelement(57, "i", 29);
+            i0.ɵɵtext(58, " Warning ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(59, "kendo-button", 30)(60, "span", 14);
+            i0.ɵɵelement(61, "i", 31);
+            i0.ɵɵtext(62, " Error ");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(63, "div", 20)(64, "h4");
+            i0.ɵɵtext(65, "Icon-Only Kendo Buttons");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(66, "div", 21)(67, "kendo-button", 32);
+            i0.ɵɵelement(68, "i", 33);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(69, "kendo-button", 34);
+            i0.ɵɵelement(70, "i", 35);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(71, "kendo-button", 36);
+            i0.ɵɵelement(72, "i", 37);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(73, "kendo-button", 38);
+            i0.ɵɵelement(74, "i", 39);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(75, "div", 20)(76, "h4");
+            i0.ɵɵtext(77, "Custom MJ Buttons (For Comparison)");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(78, "div", 21)(79, "button", 40);
+            i0.ɵɵelement(80, "i", 41);
+            i0.ɵɵtext(81, " Launch ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(82, "button", 42);
+            i0.ɵɵelement(83, "i", 33);
+            i0.ɵɵtext(84, " Edit ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(85, "button", 43);
+            i0.ɵɵelement(86, "i", 44);
+            i0.ɵɵtext(87, " Cancel ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(88, "div", 20)(89, "h4");
+            i0.ɵɵtext(90, "Kendo Button Group");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(91, "kendo-buttongroup")(92, "button", 45);
+            i0.ɵɵelement(93, "i", 46);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(94, "button", 47);
+            i0.ɵɵelement(95, "i", 48);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(96, "button", 47);
+            i0.ɵɵelement(97, "i", 49);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(98, "div", 6)(99, "h2");
+            i0.ɵɵtext(100, "Card Components");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(101, "h4");
+            i0.ɵɵtext(102, "Icon Cards with Hover Effects (Kendo Cards)");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(103, "div", 50);
+            i0.ɵɵtemplate(104, StyleGuideTestComponent_kendo_card_104_Template, 13, 6, "kendo-card", 51);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(105, "div", 52)(106, "h4");
+            i0.ɵɵtext(107, "Kendo Cards with Custom Styling");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(108, "div", 53)(109, "kendo-card", 54)(110, "kendo-card-header")(111, "h4");
+            i0.ɵɵelement(112, "i", 55);
+            i0.ɵɵtext(113, " Analytics Overview ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(114, "kendo-card-body")(115, "p");
+            i0.ɵɵtext(116, "View real-time analytics and performance metrics for your application.");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(117, "kendo-chip-list");
+            i0.ɵɵelement(118, "kendo-chip", 56)(119, "kendo-chip", 57);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(120, "kendo-card-actions", 58)(121, "kendo-button", 59);
+            i0.ɵɵtext(122, "Details");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(123, "kendo-button", 60);
+            i0.ɵɵtext(124, "View Dashboard");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(125, "kendo-card", 54)(126, "kendo-card-body")(127, "div", 61);
+            i0.ɵɵelement(128, "kendo-avatar", 62);
+            i0.ɵɵelementStart(129, "h4", 63);
+            i0.ɵɵtext(130, "User Profile");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(131, "p");
+            i0.ɵɵtext(132, "Manage your account settings and preferences");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(133, "kendo-badge-container")(134, "kendo-button", 16)(135, "span", 14);
+            i0.ɵɵelement(136, "i", 64);
+            i0.ɵɵtext(137, " Notifications ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(138, "kendo-badge", 65);
+            i0.ɵɵtext(139);
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(140, "kendo-card", 54)(141, "kendo-card-body")(142, "div", 66);
+            i0.ɵɵelement(143, "i", 67);
+            i0.ɵɵelementStart(144, "h3");
+            i0.ɵɵtext(145, "No Data Available");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(146, "p");
+            i0.ɵɵtext(147, "Start by importing your data");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(148, "kendo-button", 16)(149, "span", 14);
+            i0.ɵɵelement(150, "i", 68);
+            i0.ɵɵtext(151, " Import Data ");
+            i0.ɵɵelementEnd()()()()()()()();
+            i0.ɵɵelementStart(152, "div", 6)(153, "h2");
+            i0.ɵɵtext(154, "Form Elements - Kendo vs Custom");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(155, "div", 69)(156, "div")(157, "h4");
+            i0.ɵɵtext(158, "Kendo Form Components");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(159, "kendo-formfield", 70);
+            i0.ɵɵelement(160, "kendo-label", 71)(161, "kendo-textbox", 72, 0);
+            i0.ɵɵtemplate(163, StyleGuideTestComponent_div_163_Template, 2, 0, "div", 73);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(164, "kendo-formfield", 70);
+            i0.ɵɵelement(165, "kendo-label", 74);
+            i0.ɵɵelementStart(166, "kendo-dropdownlist", 75, 1);
+            i0.ɵɵtwoWayListener("ngModelChange", function StyleGuideTestComponent_Template_kendo_dropdownlist_ngModelChange_166_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedDepartment, $event) || (ctx.selectedDepartment = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵtemplate(168, StyleGuideTestComponent_ng_template_168_Template, 3, 3, "ng-template", 76);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(169, "kendo-formfield", 70);
+            i0.ɵɵelement(170, "kendo-label", 77);
+            i0.ɵɵelementStart(171, "kendo-multiselect", 78);
+            i0.ɵɵtwoWayListener("ngModelChange", function StyleGuideTestComponent_Template_kendo_multiselect_ngModelChange_171_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedTechnologies, $event) || (ctx.selectedTechnologies = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(172, "kendo-formfield", 70);
+            i0.ɵɵelement(173, "kendo-label", 79);
+            i0.ɵɵelementStart(174, "kendo-datepicker", 80);
+            i0.ɵɵtwoWayListener("valueChange", function StyleGuideTestComponent_Template_kendo_datepicker_valueChange_174_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.dateValue, $event) || (ctx.dateValue = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(175, "div")(176, "h4");
+            i0.ɵɵtext(177, "Custom Form Elements");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(178, "div", 81)(179, "label", 82);
+            i0.ɵɵelement(180, "i", 83);
+            i0.ɵɵtext(181, " Search Field ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(182, "div", 84);
+            i0.ɵɵelement(183, "i", 85);
+            i0.ɵɵelementStart(184, "input", 86);
+            i0.ɵɵtwoWayListener("ngModelChange", function StyleGuideTestComponent_Template_input_ngModelChange_184_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.searchText, $event) || (ctx.searchText = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(185, "div", 81)(186, "label", 82);
+            i0.ɵɵelement(187, "i", 87);
+            i0.ɵɵtext(188, " Comments ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(189, "kendo-textarea", 88);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(190, "div", 81)(191, "label", 82);
+            i0.ɵɵtext(192, "Options");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(193, "div", 89)(194, "label", 90);
+            i0.ɵɵelement(195, "input", 91);
+            i0.ɵɵelementStart(196, "span", 92);
+            i0.ɵɵtext(197, "Enable notifications");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(198, "label", 90);
+            i0.ɵɵelement(199, "input", 93);
+            i0.ɵɵelementStart(200, "span", 92);
+            i0.ɵɵtext(201, "Subscribe to newsletter");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(202, "div", 81)(203, "label", 82);
+            i0.ɵɵtext(204, "Theme Preference");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(205, "div", 94);
+            i0.ɵɵtemplate(206, StyleGuideTestComponent_label_206_Template, 4, 3, "label", 95);
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(207, "div", 6)(208, "h2");
+            i0.ɵɵtext(209, "Enhanced Kendo Grid");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(210, "kendo-grid", 96);
+            i0.ɵɵelement(211, "kendo-grid-checkbox-column", 97);
+            i0.ɵɵelementStart(212, "kendo-grid-column", 98);
+            i0.ɵɵtemplate(213, StyleGuideTestComponent_ng_template_213_Template, 7, 3, "ng-template", 99);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(214, "kendo-grid-column", 100);
+            i0.ɵɵtemplate(215, StyleGuideTestComponent_ng_template_215_Template, 3, 3, "ng-template", 99);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(216, "kendo-grid-column", 101);
+            i0.ɵɵtemplate(217, StyleGuideTestComponent_ng_template_217_Template, 1, 1, "ng-template", 99);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(218, "kendo-grid-column", 102);
+            i0.ɵɵtemplate(219, StyleGuideTestComponent_ng_template_219_Template, 4, 4, "ng-template", 99);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(220, "kendo-grid-column", 103);
+            i0.ɵɵtemplate(221, StyleGuideTestComponent_ng_template_221_Template, 5, 0, "ng-template", 99);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(222, "div", 6)(223, "h2");
+            i0.ɵɵtext(224, "Badges, Chips & Status Indicators");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(225, "div", 20)(226, "h4");
+            i0.ɵɵtext(227, "Custom Badges with Font Awesome");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(228, "div", 104)(229, "span", 105);
+            i0.ɵɵelement(230, "i", 106);
+            i0.ɵɵtext(231, " Active ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(232, "span", 107);
+            i0.ɵɵelement(233, "i", 108);
+            i0.ɵɵtext(234, " Inactive ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(235, "span", 109);
+            i0.ɵɵelement(236, "i", 110);
+            i0.ɵɵtext(237, " Pending ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(238, "span", 111);
+            i0.ɵɵelement(239, "i", 112);
+            i0.ɵɵtext(240, " Info ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(241, "div", 20)(242, "h4");
+            i0.ɵɵtext(243, "Kendo Chips with Icons");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(244, "kendo-chip-list");
+            i0.ɵɵelement(245, "kendo-chip", 113)(246, "kendo-chip", 114)(247, "kendo-chip", 115)(248, "kendo-chip", 116);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(249, "div", 20)(250, "h4");
+            i0.ɵɵtext(251, "Notification Badges");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(252, "div", 104)(253, "kendo-badge-container")(254, "kendo-button", 16);
+            i0.ɵɵelement(255, "i", 117);
+            i0.ɵɵtext(256, " Messages ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(257, "kendo-badge", 118);
+            i0.ɵɵtext(258, "12");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(259, "kendo-badge-container")(260, "kendo-button", 119);
+            i0.ɵɵelement(261, "i", 64);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(262, "kendo-badge", 120);
+            i0.ɵɵtext(263, "3");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(264, "kendo-badge-container");
+            i0.ɵɵelement(265, "kendo-avatar", 121);
+            i0.ɵɵelementStart(266, "kendo-badge", 122);
+            i0.ɵɵelement(267, "i", 23);
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(268, "div", 6)(269, "h2");
+            i0.ɵɵtext(270, "Navigation & Layout Components");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(271, "div", 20)(272, "h4");
+            i0.ɵɵtext(273, "Enhanced Toolbar with Search");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(274, "div", 123)(275, "h3", 124);
+            i0.ɵɵelement(276, "i", 125);
+            i0.ɵɵtext(277, " User Management ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(278, "div", 126)(279, "kendo-textbox", 127);
+            i0.ɵɵtwoWayListener("ngModelChange", function StyleGuideTestComponent_Template_kendo_textbox_ngModelChange_279_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.searchText, $event) || (ctx.searchText = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵtemplate(280, StyleGuideTestComponent_ng_template_280_Template, 1, 0, "ng-template", 128);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(281, "kendo-button", 129)(282, "span", 14);
+            i0.ɵɵelement(283, "i", 130);
+            i0.ɵɵtext(284, " Filter ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(285, "kendo-button", 16)(286, "span", 14);
+            i0.ɵɵelement(287, "i", 131);
+            i0.ɵɵtext(288, " Add User ");
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(289, "div", 20)(290, "h4");
+            i0.ɵɵtext(291, "Breadcrumb Navigation");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(292, "nav", 132)(293, "span", 133);
+            i0.ɵɵelement(294, "i", 134);
+            i0.ɵɵtext(295, " Home ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(296, "i", 135);
+            i0.ɵɵelementStart(297, "span", 133);
+            i0.ɵɵelement(298, "i", 136);
+            i0.ɵɵtext(299, " Components ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(300, "i", 135);
+            i0.ɵɵelementStart(301, "span", 137);
+            i0.ɵɵelement(302, "i", 138);
+            i0.ɵɵtext(303, " Style Guide ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(304, "div")(305, "h4");
+            i0.ɵɵtext(306, "Kendo TabStrip with Font Awesome");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(307, "kendo-tabstrip")(308, "kendo-tabstrip-tab", 139);
+            i0.ɵɵtemplate(309, StyleGuideTestComponent_ng_template_309_Template, 3, 0, "ng-template", 140)(310, StyleGuideTestComponent_ng_template_310_Template, 7, 0, "ng-template", 141);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(311, "kendo-tabstrip-tab", 142);
+            i0.ɵɵtemplate(312, StyleGuideTestComponent_ng_template_312_Template, 3, 0, "ng-template", 140)(313, StyleGuideTestComponent_ng_template_313_Template, 5, 0, "ng-template", 141);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(314, "kendo-tabstrip-tab", 143);
+            i0.ɵɵtemplate(315, StyleGuideTestComponent_ng_template_315_Template, 3, 0, "ng-template", 140)(316, StyleGuideTestComponent_ng_template_316_Template, 5, 0, "ng-template", 141);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(317, "div", 6)(318, "h2");
+            i0.ɵɵtext(319, "Progress & Loading Indicators");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(320, "div", 20)(321, "h4");
+            i0.ɵɵtext(322, "Kendo Progress Bars");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(323, "kendo-progressbar", 144)(324, "kendo-progressbar", 145)(325, "kendo-progressbar", 146);
+            i0.ɵɵelementStart(326, "kendo-button", 147);
+            i0.ɵɵlistener("click", function StyleGuideTestComponent_Template_kendo_button_click_326_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.loadData()); });
+            i0.ɵɵelementStart(327, "span", 14);
+            i0.ɵɵelement(328, "i", 148);
+            i0.ɵɵtext(329, " Simulate Loading ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(330, "div", 20)(331, "h4");
+            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.ɵɵelementStart(338, "p", 150);
+            i0.ɵɵtext(339, "Converging");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(340, "kendo-card")(341, "kendo-card-body")(342, "div", 61);
+            i0.ɵɵelement(343, "kendo-loader", 151);
+            i0.ɵɵelementStart(344, "p", 150);
+            i0.ɵɵtext(345, "Infinite");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(346, "kendo-card")(347, "kendo-card-body")(348, "div", 61);
+            i0.ɵɵelement(349, "kendo-loader", 152);
+            i0.ɵɵelementStart(350, "p", 150);
+            i0.ɵɵtext(351, "Pulsing");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(352, "kendo-card")(353, "kendo-card-body")(354, "div", 61);
+            i0.ɵɵelement(355, "i", 153);
+            i0.ɵɵelementStart(356, "p", 150);
+            i0.ɵɵtext(357, "Font Awesome");
+            i0.ɵɵelementEnd()()()()()()();
+            i0.ɵɵelementStart(358, "div", 6)(359, "h2");
+            i0.ɵɵtext(360, "Modals & Dialogs");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(361, "div", 21)(362, "button", 154);
+            i0.ɵɵlistener("click", function StyleGuideTestComponent_Template_button_click_362_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.openModal()); });
+            i0.ɵɵelement(363, "i", 155);
+            i0.ɵɵtext(364, " Custom Modal ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(365, "kendo-button", 156);
+            i0.ɵɵlistener("click", function StyleGuideTestComponent_Template_kendo_button_click_365_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.openKendoDialog()); });
+            i0.ɵɵelementStart(366, "span", 14);
+            i0.ɵɵelement(367, "i", 157);
+            i0.ɵɵtext(368, " Kendo Dialog ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(369, "button", 158);
+            i0.ɵɵlistener("click", function StyleGuideTestComponent_Template_button_click_369_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.openConfirmModal()); });
+            i0.ɵɵelement(370, "i", 29);
+            i0.ɵɵtext(371, " Confirm Dialog ");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵtemplate(372, StyleGuideTestComponent_div_372_Template, 28, 2, "div", 159)(373, StyleGuideTestComponent_div_373_Template, 19, 0, "div", 159)(374, StyleGuideTestComponent_kendo_dialog_374_Template, 29, 14, "kendo-dialog", 160);
+        } if (rf & 2) {
+            const fullNameInput_r21 = i0.ɵɵreference(162);
+            const deptDropdown_r22 = i0.ɵɵreference(167);
+            i0.ɵɵadvance(92);
+            i0.ɵɵproperty("toggleable", true)("selected", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("toggleable", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("toggleable", true);
+            i0.ɵɵadvance(8);
+            i0.ɵɵproperty("ngForOf", ctx.sampleItems);
+            i0.ɵɵadvance(24);
+            i0.ɵɵproperty("imageSrc", "assets/avatar-placeholder.jpg");
+            i0.ɵɵadvance(10);
+            i0.ɵɵproperty("align", ctx.badgeAlignTopEnd);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate(ctx.notificationCount);
+            i0.ɵɵadvance(21);
+            i0.ɵɵproperty("for", fullNameInput_r21);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("clearButton", true)("formControl", ctx.fullNameControl);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.fullNameControl.touched && (ctx.fullNameControl.errors == null ? null : ctx.fullNameControl.errors["required"]));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("for", deptDropdown_r22);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("data", ctx.departments);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.selectedDepartment);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("data", ctx.technologies);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.selectedTechnologies);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtwoWayProperty("value", ctx.dateValue);
+            i0.ɵɵadvance(10);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.searchText);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("formControl", ctx.commentsControl)("rows", 4);
+            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.ɵɵadvance();
+            i0.ɵɵclassMap("text-center");
+            i0.ɵɵproperty("width", 45)("headerClass", "text-center");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("width", 200);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("width", 220);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("width", 150);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("width", 120);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("width", 120)("sortable", false)("filterable", false);
+            i0.ɵɵadvance(25);
+            i0.ɵɵproperty("removable", true);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("removable", true);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("removable", true);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("removable", true);
+            i0.ɵɵadvance(9);
+            i0.ɵɵproperty("align", ctx.badgeAlignTopEnd);
+            i0.ɵɵadvance(5);
+            i0.ɵɵproperty("align", ctx.badgeAlignTopEnd);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("align", ctx.badgeAlignBottomEnd);
+            i0.ɵɵadvance(13);
+            i0.ɵɵproperty("clearButton", true);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.searchText);
+            i0.ɵɵadvance(29);
+            i0.ɵɵproperty("selected", true);
+            i0.ɵɵadvance(15);
+            i0.ɵɵproperty("value", ctx.progressValue)("max", 100)("animation", true);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", ctx.progressValue)("max", 100);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("indeterminate", true)("animation", true);
+            i0.ɵɵadvance(47);
+            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}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StyleGuideTestComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-style-guide-test', template: "<!-- Enhanced Style Guide with Kendo UI Components and Font Awesome -->\n<div class=\"mj-page-container\">\n  <!-- Page Header with Mixed Components -->\n  <div class=\"mj-content-container\">\n    <div class=\"mj-header\">\n      <div class=\"mj-header-title\">\n        <i class=\"fas fa-paint-brush mj-header-icon\"></i>\n        <div>\n          <h1>Kendo UI + Font Awesome Style Guide</h1>\n          <div class=\"mj-header-subtitle\">\n            <i class=\"fas fa-palette\"></i>\n            Modern components with custom styling\n          </div>\n        </div>\n      </div>\n      <div class=\"mj-header-actions\">\n        <!-- Kendo Button with Font Awesome Icon -->\n        <kendo-button fillMode=\"outline\" rounded=\"medium\" themeColor=\"base\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-download\"></i>\n            Export\n          </span>\n        </kendo-button>\n        <kendo-button themeColor=\"primary\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-save\"></i>\n            Save Changes\n          </span>\n        </kendo-button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Typography Section -->\n  <div class=\"mj-content-container\">\n    <h2>Typography Examples</h2>\n    <div class=\"typography-demo\">\n      <h1>Heading 1 - Main page titles</h1>\n      <h2>Heading 2 - Section headers</h2>\n      <h3>Heading 3 - Subsection titles</h3>\n      <h4>Heading 4 - Component titles</h4>\n      <p>Body text - Regular paragraph content with good readability and proper line height for easy reading.</p>\n      <p class=\"text-muted\">Muted text for secondary information</p>\n    </div>\n  </div>\n\n  <!-- Enhanced Button Examples -->\n  <div class=\"mj-content-container\">\n    <h2>Button System Comparison</h2>\n    \n    <div class=\"mb-3\">\n      <h4>Kendo Buttons with Font Awesome Icons</h4>\n      <div class=\"button-group\">\n        <kendo-button themeColor=\"primary\" rounded=\"medium\" size=\"large\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-check\"></i>\n            Primary Action\n          </span>\n        </kendo-button>\n        <kendo-button themeColor=\"info\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-info-circle\"></i>\n            Info Button\n          </span>\n        </kendo-button>\n        <kendo-button themeColor=\"success\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-check-circle\"></i>\n            Success\n          </span>\n        </kendo-button>\n        <kendo-button themeColor=\"warning\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-exclamation-triangle\"></i>\n            Warning\n          </span>\n        </kendo-button>\n        <kendo-button themeColor=\"error\" rounded=\"medium\">\n          <span class=\"button-content\">\n            <i class=\"fas fa-times-circle\"></i>\n            Error\n          </span>\n        </kendo-button>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Icon-Only Kendo Buttons</h4>\n      <div class=\"button-group\">\n        <kendo-button fillMode=\"flat\" rounded=\"full\" size=\"large\" title=\"Edit\">\n          <i class=\"fas fa-edit\"></i>\n        </kendo-button>\n        <kendo-button fillMode=\"flat\" rounded=\"full\" size=\"large\" title=\"Delete\">\n          <i class=\"fas fa-trash\"></i>\n        </kendo-button>\n        <kendo-button fillMode=\"flat\" rounded=\"full\" size=\"large\" title=\"Settings\">\n          <i class=\"fas fa-cog\"></i>\n        </kendo-button>\n        <kendo-button fillMode=\"flat\" rounded=\"full\" size=\"large\" title=\"Search\">\n          <i class=\"fas fa-search\"></i>\n        </kendo-button>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Custom MJ Buttons (For Comparison)</h4>\n      <div class=\"button-group\">\n        <button class=\"mj-btn mj-btn-primary\">\n          <i class=\"fas fa-rocket\"></i>\n          Launch\n        </button>\n        <button class=\"mj-btn mj-btn-secondary\">\n          <i class=\"fas fa-edit\"></i>\n          Edit\n        </button>\n        <button class=\"mj-btn mj-btn-ghost\">\n          <i class=\"fas fa-times\"></i>\n          Cancel\n        </button>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Kendo Button Group</h4>\n      <kendo-buttongroup>\n        <button kendoButton [toggleable]=\"true\" [selected]=\"true\">\n          <i class=\"fas fa-bold\"></i>\n        </button>\n        <button kendoButton [toggleable]=\"true\">\n          <i class=\"fas fa-italic\"></i>\n        </button>\n        <button kendoButton [toggleable]=\"true\">\n          <i class=\"fas fa-underline\"></i>\n        </button>\n      </kendo-buttongroup>\n    </div>\n  </div>\n\n  <!-- Enhanced Card System with Icon Cards -->\n  <div class=\"mj-content-container\">\n    <h2>Card Components</h2>\n    \n    <h4>Icon Cards with Hover Effects (Kendo Cards)</h4>\n    <div class=\"mj-grid mj-grid-4\">\n      <kendo-card class=\"mj-kendo-icon-card\" *ngFor=\"let item of sampleItems\" (click)=\"handleCardClick(item)\">\n        <kendo-card-body>\n          <i [class]=\"'fas ' + item.icon + ' mj-card-icon-large'\"></i>\n          <h3>{{item.name}}</h3>\n          <p>{{item.description}}</p>\n          <kendo-chip \n            [label]=\"item.color.toUpperCase()\" \n            rounded=\"full\"\n            [themeColor]=\"item.color\"\n            size=\"small\"\n            class=\"mt-2\">\n          </kendo-chip>\n          <div class=\"mj-card-actions\">\n            <button class=\"mj-btn mj-btn-icon-only mj-btn-sm\" (click)=\"$event.stopPropagation(); handleButtonClick('edit', item)\">\n              <i class=\"fas fa-edit\"></i>\n            </button>\n            <button class=\"mj-btn mj-btn-icon-only mj-btn-sm\" (click)=\"$event.stopPropagation(); handleButtonClick('delete', item)\">\n              <i class=\"fas fa-trash\"></i>\n            </button>\n          </div>\n        </kendo-card-body>\n      </kendo-card>\n    </div>\n\n    <div class=\"mt-4\">\n      <h4>Kendo Cards with Custom Styling</h4>\n      <div class=\"mj-grid mj-grid-3\">\n        <kendo-card class=\"custom-kendo-card\">\n          <kendo-card-header>\n            <h4>\n              <i class=\"fas fa-chart-bar mr-2\"></i>\n              Analytics Overview\n            </h4>\n          </kendo-card-header>\n          <kendo-card-body>\n            <p>View real-time analytics and performance metrics for your application.</p>\n            <kendo-chip-list>\n              <kendo-chip label=\"Real-time\" icon=\"clock\" themeColor=\"success\"></kendo-chip>\n              <kendo-chip label=\"Interactive\" icon=\"filter\" themeColor=\"info\"></kendo-chip>\n            </kendo-chip-list>\n          </kendo-card-body>\n          <kendo-card-actions orientation=\"horizontal\" layout=\"end\">\n            <kendo-button fillMode=\"flat\">Details</kendo-button>\n            <kendo-button themeColor=\"primary\">View Dashboard</kendo-button>\n          </kendo-card-actions>\n        </kendo-card>\n\n        <kendo-card class=\"custom-kendo-card\">\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <kendo-avatar [imageSrc]=\"'assets/avatar-placeholder.jpg'\" shape=\"circle\" size=\"large\"></kendo-avatar>\n              <h4 class=\"mt-3\">User Profile</h4>\n              <p>Manage your account settings and preferences</p>\n              <kendo-badge-container>\n                <kendo-button themeColor=\"primary\" rounded=\"medium\">\n                  <span class=\"button-content\">\n                    <i class=\"fas fa-bell\"></i>\n                    Notifications\n                  </span>\n                </kendo-button>\n                <kendo-badge rounded=\"full\" themeColor=\"error\" position=\"edge\" [align]=\"badgeAlignTopEnd\">{{notificationCount}}</kendo-badge>\n              </kendo-badge-container>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n\n        <kendo-card class=\"custom-kendo-card\">\n          <kendo-card-body>\n            <div class=\"mj-empty-state\">\n              <i class=\"fas fa-inbox mj-empty-icon\"></i>\n              <h3>No Data Available</h3>\n              <p>Start by importing your data</p>\n              <kendo-button themeColor=\"primary\" rounded=\"medium\">\n                <span class=\"button-content\">\n                  <i class=\"fas fa-upload\"></i>\n                  Import Data\n                </span>\n              </kendo-button>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Enhanced Form Elements -->\n  <div class=\"mj-content-container\">\n    <h2>Form Elements - Kendo vs Custom</h2>\n    \n    <div class=\"mj-grid mj-grid-2\">\n      <div>\n        <h4>Kendo Form Components</h4>\n        \n        <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n          <kendo-label text=\"Full Name\" [for]=\"fullNameInput\"></kendo-label>\n          <kendo-textbox \n            #fullNameInput\n            placeholder=\"Enter your full name\"\n            [clearButton]=\"true\"\n            [formControl]=\"fullNameControl\"\n            rounded=\"medium\">\n          </kendo-textbox>\n          <div class=\"k-form-error\" *ngIf=\"fullNameControl.touched && fullNameControl.errors?.['required']\">\n            Full name is required\n          </div>\n        </kendo-formfield>\n\n        <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n          <kendo-label text=\"Department\" [for]=\"deptDropdown\"></kendo-label>\n          <kendo-dropdownlist \n            #deptDropdown\n            [data]=\"departments\"\n            textField=\"name\"\n            valueField=\"id\"\n            [(ngModel)]=\"selectedDepartment\"\n            rounded=\"medium\">\n            <ng-template kendoDropDownListItemTemplate let-dataItem>\n              <span class=\"dropdown-item-content\">\n                <i [class]=\"dataItem.icon\" class=\"mr-2\"></i>\n                {{ dataItem.name }}\n              </span>\n            </ng-template>\n          </kendo-dropdownlist>\n        </kendo-formfield>\n\n        <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n          <kendo-label text=\"Technologies\"></kendo-label>\n          <kendo-multiselect \n            [data]=\"technologies\"\n            [(ngModel)]=\"selectedTechnologies\"\n            placeholder=\"Select technologies...\"\n            rounded=\"medium\">\n          </kendo-multiselect>\n        </kendo-formfield>\n\n        <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n          <kendo-label text=\"Project Date\"></kendo-label>\n          <kendo-datepicker \n            [(value)]=\"dateValue\"\n            format=\"dd/MM/yyyy\"\n            rounded=\"medium\">\n          </kendo-datepicker>\n        </kendo-formfield>\n      </div>\n      \n      <div>\n        <h4>Custom Form Elements</h4>\n        \n        <div class=\"form-group\">\n          <label class=\"form-label\">\n            <i class=\"fas fa-search mr-1\"></i>\n            Search Field\n          </label>\n          <div class=\"mj-search\">\n            <i class=\"fas fa-search mj-search-icon\"></i>\n            <input type=\"text\" class=\"mj-search-input\" placeholder=\"Search items...\" [(ngModel)]=\"searchText\">\n          </div>\n        </div>\n\n        <div class=\"form-group\">\n          <label class=\"form-label\">\n            <i class=\"fas fa-comment mr-1\"></i>\n            Comments\n          </label>\n          <kendo-textarea \n            [formControl]=\"commentsControl\"\n            placeholder=\"Enter your comments...\"\n            [rows]=\"4\"\n            rounded=\"medium\">\n          </kendo-textarea>\n        </div>\n\n        <div class=\"form-group\">\n          <label class=\"form-label\">Options</label>\n          <div class=\"checkbox-group\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" kendoCheckBox />\n              <span class=\"ml-2\">Enable notifications</span>\n            </label>\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" kendoCheckBox checked />\n              <span class=\"ml-2\">Subscribe to newsletter</span>\n            </label>\n          </div>\n        </div>\n\n        <div class=\"form-group\">\n          <label class=\"form-label\">Theme Preference</label>\n          <div class=\"radio-group\">\n            <label class=\"radio-label\" *ngFor=\"let option of themeOptions\">\n              <input type=\"radio\" name=\"theme\" [value]=\"option\" [(ngModel)]=\"selectedTheme\" kendoRadioButton />\n              <span class=\"ml-2\">{{option}}</span>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Enhanced Kendo Grid with Font Awesome -->\n  <div class=\"mj-content-container\">\n    <h2>Enhanced Kendo Grid</h2>\n    \n    <kendo-grid \n      [data]=\"gridData\" \n      [height]=\"400\" \n      [sortable]=\"true\"\n      [filterable]=\"true\"\n      [groupable]=\"false\"\n      [reorderable]=\"true\"\n      [resizable]=\"true\"\n      [selectable]=\"{ checkboxOnly: true, mode: 'multiple' }\"\n      class=\"custom-grid\">\n      \n      <kendo-grid-checkbox-column [width]=\"45\" [headerClass]=\"'text-center'\" [class]=\"'text-center'\"></kendo-grid-checkbox-column>\n      \n      <kendo-grid-column field=\"name\" title=\"Name\" [width]=\"200\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <div class=\"user-cell\">\n            <kendo-avatar \n              [initials]=\"getInitials(dataItem.name)\" \n              themeColor=\"info\"\n              shape=\"circle\"\n              size=\"small\">\n            </kendo-avatar>\n            <div class=\"user-info\">\n              <div class=\"user-name\">{{ dataItem.name }}</div>\n              <div class=\"user-role\">{{ dataItem.role }}</div>\n            </div>\n          </div>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column field=\"email\" title=\"Email\" [width]=\"220\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <a href=\"mailto:{{dataItem.email}}\" class=\"email-link\">\n            <i class=\"fas fa-envelope mr-1\"></i>\n            {{ dataItem.email }}\n          </a>\n        </ng-template>\n      </kendo-grid-column>\n      \n      <kendo-grid-column field=\"department\" title=\"Department\" [width]=\"150\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <kendo-chip \n            [label]=\"dataItem.department\"\n            rounded=\"medium\"\n            fillMode=\"outline\">\n          </kendo-chip>\n        </ng-template>\n      </kendo-grid-column>\n      \n      <kendo-grid-column field=\"status\" title=\"Status\" [width]=\"120\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <span class=\"status-cell\">\n            <i [class]=\"getStatusIcon(dataItem.status) + ' mr-1'\"></i>\n            <kendo-badge \n              [themeColor]=\"getStatusThemeColor(dataItem.status)\"\n              rounded=\"full\"\n              size=\"small\">\n              {{ dataItem.status }}\n            </kendo-badge>\n          </span>\n        </ng-template>\n      </kendo-grid-column>\n\n      <kendo-grid-column title=\"Actions\" [width]=\"120\" [sortable]=\"false\" [filterable]=\"false\">\n        <ng-template kendoGridCellTemplate let-dataItem>\n          <div class=\"action-buttons\">\n            <kendo-button \n              fillMode=\"flat\"\n              rounded=\"full\"\n              size=\"small\"\n              themeColor=\"info\"\n              title=\"Edit\"\n              (click)=\"editItem(dataItem)\">\n              <i class=\"fas fa-edit\"></i>\n            </kendo-button>\n            <kendo-button \n              fillMode=\"flat\"\n              rounded=\"full\"\n              size=\"small\"\n              themeColor=\"error\"\n              title=\"Delete\"\n              (click)=\"deleteItem(dataItem)\">\n              <i class=\"fas fa-trash\"></i>\n            </kendo-button>\n          </div>\n        </ng-template>\n      </kendo-grid-column>\n    </kendo-grid>\n  </div>\n\n  <!-- Badges and Chips -->\n  <div class=\"mj-content-container\">\n    <h2>Badges, Chips & Status Indicators</h2>\n    \n    <div class=\"mb-3\">\n      <h4>Custom Badges with Font Awesome</h4>\n      <div class=\"badge-group\">\n        <span class=\"badge badge-success\">\n          <i class=\"fas fa-check mr-1\"></i>\n          Active\n        </span>\n        <span class=\"badge badge-danger\">\n          <i class=\"fas fa-times mr-1\"></i>\n          Inactive\n        </span>\n        <span class=\"badge badge-warning\">\n          <i class=\"fas fa-clock mr-1\"></i>\n          Pending\n        </span>\n        <span class=\"badge badge-info\">\n          <i class=\"fas fa-info-circle mr-1\"></i>\n          Info\n        </span>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Kendo Chips with Icons</h4>\n      <kendo-chip-list>\n        <kendo-chip label=\"Approved\" icon=\"check\" themeColor=\"success\" [removable]=\"true\"></kendo-chip>\n        <kendo-chip label=\"In Progress\" icon=\"clock\" themeColor=\"warning\" [removable]=\"true\"></kendo-chip>\n        <kendo-chip label=\"Rejected\" icon=\"x\" themeColor=\"error\" [removable]=\"true\"></kendo-chip>\n        <kendo-chip label=\"Under Review\" icon=\"eye\" themeColor=\"info\" [removable]=\"true\"></kendo-chip>\n      </kendo-chip-list>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Notification Badges</h4>\n      <div class=\"badge-group\">\n        <kendo-badge-container>\n          <kendo-button themeColor=\"primary\" rounded=\"medium\">\n            <i class=\"fas fa-envelope mr-2\"></i>\n            Messages\n          </kendo-button>\n          <kendo-badge themeColor=\"error\" position=\"edge\" [align]=\"badgeAlignTopEnd\">12</kendo-badge>\n        </kendo-badge-container>\n\n        <kendo-badge-container>\n          <kendo-button fillMode=\"flat\" rounded=\"full\" size=\"large\">\n            <i class=\"fas fa-bell\"></i>\n          </kendo-button>\n          <kendo-badge themeColor=\"warning\" position=\"edge\" [align]=\"badgeAlignTopEnd\" rounded=\"full\">3</kendo-badge>\n        </kendo-badge-container>\n\n        <kendo-badge-container>\n          <kendo-avatar initials=\"JD\" themeColor=\"info\"></kendo-avatar>\n          <kendo-badge themeColor=\"success\" position=\"edge\" [align]=\"badgeAlignBottomEnd\" size=\"small\">\n            <i class=\"fas fa-check\"></i>\n          </kendo-badge>\n        </kendo-badge-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Navigation Components -->\n  <div class=\"mj-content-container\">\n    <h2>Navigation & Layout Components</h2>\n    \n    <div class=\"mb-3\">\n      <h4>Enhanced Toolbar with Search</h4>\n      <div class=\"mj-toolbar\">\n        <h3 class=\"mj-toolbar-title\">\n          <i class=\"fas fa-users mr-2\"></i>\n          User Management\n        </h3>\n        <div class=\"mj-toolbar-actions\">\n          <kendo-textbox \n            placeholder=\"Search users...\"\n            [clearButton]=\"true\"\n            [(ngModel)]=\"searchText\"\n            rounded=\"medium\"\n            style=\"width: 300px;\">\n            <ng-template kendoTextBoxPrefixTemplate>\n              <i class=\"fas fa-search search-prefix-icon\"></i>\n            </ng-template>\n          </kendo-textbox>\n          <kendo-button fillMode=\"outline\" rounded=\"medium\">\n            <span class=\"button-content\">\n              <i class=\"fas fa-filter\"></i>\n              Filter\n            </span>\n          </kendo-button>\n          <kendo-button themeColor=\"primary\" rounded=\"medium\">\n            <span class=\"button-content\">\n              <i class=\"fas fa-user-plus\"></i>\n              Add User\n            </span>\n          </kendo-button>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Breadcrumb Navigation</h4>\n      <nav class=\"mj-breadcrumb\">\n        <span class=\"mj-breadcrumb-item\">\n          <i class=\"fas fa-home mr-1\"></i>\n          Home\n        </span>\n        <i class=\"fas fa-chevron-right mj-breadcrumb-separator\"></i>\n        <span class=\"mj-breadcrumb-item\">\n          <i class=\"fas fa-th mr-1\"></i>\n          Components\n        </span>\n        <i class=\"fas fa-chevron-right mj-breadcrumb-separator\"></i>\n        <span class=\"mj-breadcrumb-item mj-breadcrumb-current\">\n          <i class=\"fas fa-paint-brush mr-1\"></i>\n          Style Guide\n        </span>\n      </nav>\n    </div>\n\n    <div>\n      <h4>Kendo TabStrip with Font Awesome</h4>\n      <kendo-tabstrip>\n        <kendo-tabstrip-tab title=\"Overview\" [selected]=\"true\">\n          <ng-template kendoTabTitle>\n            <span class=\"tab-title\">\n              <i class=\"fas fa-chart-pie mr-2\"></i>\n              Overview\n            </span>\n          </ng-template>\n          <ng-template kendoTabContent>\n            <div class=\"tab-content-wrapper\">\n              <h5>Dashboard Overview</h5>\n              <p>View your application's key metrics and performance indicators.</p>\n              <kendo-button themeColor=\"primary\">View Details</kendo-button>\n            </div>\n          </ng-template>\n        </kendo-tabstrip-tab>\n        \n        <kendo-tabstrip-tab title=\"Settings\">\n          <ng-template kendoTabTitle>\n            <span class=\"tab-title\">\n              <i class=\"fas fa-cog mr-2\"></i>\n              Settings\n            </span>\n          </ng-template>\n          <ng-template kendoTabContent>\n            <div class=\"tab-content-wrapper\">\n              <h5>Application Settings</h5>\n              <p>Configure your application preferences and options.</p>\n            </div>\n          </ng-template>\n        </kendo-tabstrip-tab>\n        \n        <kendo-tabstrip-tab title=\"Reports\">\n          <ng-template kendoTabTitle>\n            <span class=\"tab-title\">\n              <i class=\"fas fa-file-alt mr-2\"></i>\n              Reports\n            </span>\n          </ng-template>\n          <ng-template kendoTabContent>\n            <div class=\"tab-content-wrapper\">\n              <h5>Generate Reports</h5>\n              <p>Create and download various reports from your data.</p>\n            </div>\n          </ng-template>\n        </kendo-tabstrip-tab>\n      </kendo-tabstrip>\n    </div>\n  </div>\n\n  <!-- Progress and Loading States -->\n  <div class=\"mj-content-container\">\n    <h2>Progress & Loading Indicators</h2>\n    \n    <div class=\"mb-3\">\n      <h4>Kendo Progress Bars</h4>\n      <kendo-progressbar \n        [value]=\"progressValue\" \n        [max]=\"100\"\n        type=\"percent\"\n        [animation]=\"true\"\n        class=\"mb-2\">\n      </kendo-progressbar>\n      \n      <kendo-progressbar \n        [value]=\"progressValue\" \n        [max]=\"100\"\n        type=\"value\"\n        class=\"mb-2 progress-success\">\n      </kendo-progressbar>\n      \n      <kendo-progressbar \n        [indeterminate]=\"true\"\n        [animation]=\"true\">\n      </kendo-progressbar>\n      \n      <kendo-button themeColor=\"primary\" (click)=\"loadData()\" class=\"mt-2\">\n        <span class=\"button-content\">\n          <i class=\"fas fa-sync\"></i>\n          Simulate Loading\n        </span>\n      </kendo-button>\n    </div>\n\n    <div class=\"mb-3\">\n      <h4>Loading States</h4>\n      <div class=\"mj-grid mj-grid-4\">\n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <kendo-loader type=\"converging-spinner\" themeColor=\"primary\" size=\"medium\"></kendo-loader>\n              <p class=\"mt-2 mb-0\">Converging</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n        \n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <kendo-loader type=\"infinite-spinner\" themeColor=\"info\" size=\"medium\"></kendo-loader>\n              <p class=\"mt-2 mb-0\">Infinite</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n        \n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <kendo-loader type=\"pulsing\" themeColor=\"success\" size=\"medium\"></kendo-loader>\n              <p class=\"mt-2 mb-0\">Pulsing</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n        \n        <kendo-card>\n          <kendo-card-body>\n            <div class=\"text-center\">\n              <i class=\"fas fa-spinner fa-spin\" style=\"font-size: 2rem; color: var(--mj-blue);\"></i>\n              <p class=\"mt-2 mb-0\">Font Awesome</p>\n            </div>\n          </kendo-card-body>\n        </kendo-card>\n      </div>\n    </div>\n  </div>\n\n  <!-- Modal/Dialog Examples -->\n  <div class=\"mj-content-container\">\n    <h2>Modals & Dialogs</h2>\n    \n    <div class=\"button-group\">\n      <button class=\"mj-btn mj-btn-primary\" (click)=\"openModal()\">\n        <i class=\"fas fa-window-maximize\"></i>\n        Custom Modal\n      </button>\n      <kendo-button themeColor=\"info\" rounded=\"medium\" (click)=\"openKendoDialog()\">\n        <span class=\"button-content\">\n          <i class=\"fas fa-comment\"></i>\n          Kendo Dialog\n        </span>\n      </kendo-button>\n      <button class=\"mj-btn mj-btn-secondary\" (click)=\"openConfirmModal()\">\n        <i class=\"fas fa-exclamation-triangle\"></i>\n        Confirm Dialog\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Custom Modal -->\n<div class=\"mj-modal-overlay\" *ngIf=\"isModalOpen\" (click)=\"closeModal()\">\n  <div class=\"mj-modal mj-modal-lg\" (click)=\"$event.stopPropagation()\">\n    <div class=\"mj-modal-header\">\n      <h3 class=\"mj-modal-title\">\n        <i class=\"fas fa-cog mj-modal-icon\"></i>\n        Custom Modal Example\n      </h3>\n      <button class=\"mj-modal-close\" (click)=\"closeModal()\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n    <div class=\"mj-modal-body\">\n      <p>This custom modal maintains your brand styling while working alongside Kendo components.</p>\n      \n      <div class=\"form-group\">\n        <label class=\"form-label\">\n          <i class=\"fas fa-user mr-1\"></i>\n          Username\n        </label>\n        <kendo-textbox placeholder=\"Enter username\" rounded=\"medium\"></kendo-textbox>\n      </div>\n      \n      <div class=\"form-group\">\n        <label class=\"form-label\">\n          <i class=\"fas fa-palette mr-1\"></i>\n          Theme Preference\n        </label>\n        <kendo-dropdownlist \n          [data]=\"themeOptions\"\n          [value]=\"selectedTheme\"\n          rounded=\"medium\">\n        </kendo-dropdownlist>\n      </div>\n    </div>\n    <div class=\"mj-modal-footer\">\n      <kendo-button fillMode=\"outline\" (click)=\"closeModal()\">Cancel</kendo-button>\n      <kendo-button themeColor=\"primary\">\n        <span class=\"button-content\">\n          <i class=\"fas fa-save\"></i>\n          Save Changes\n        </span>\n      </kendo-button>\n    </div>\n  </div>\n</div>\n\n<!-- Confirmation Modal -->\n<div class=\"mj-modal-overlay\" *ngIf=\"isConfirmModalOpen\" (click)=\"closeConfirmModal()\">\n  <div class=\"mj-modal mj-modal-confirm\" (click)=\"$event.stopPropagation()\">\n    <div class=\"mj-modal-header\">\n      <h3 class=\"mj-modal-title\">Confirm Delete</h3>\n      <button class=\"mj-modal-close\" (click)=\"closeConfirmModal()\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n    <div class=\"mj-modal-body\">\n      <i class=\"fas fa-exclamation-triangle mj-modal-confirm-icon warning\"></i>\n      <h4>Are you sure?</h4>\n      <p>This action cannot be undone. All associated data will be permanently deleted.</p>\n    </div>\n    <div class=\"mj-modal-footer\">\n      <button class=\"mj-btn mj-btn-ghost\" (click)=\"closeConfirmModal()\">Cancel</button>\n      <button class=\"mj-btn mj-btn-primary\" style=\"background: #dc3545; border-color: #dc3545;\">\n        <i class=\"fas fa-trash\"></i>\n        Delete\n      </button>\n    </div>\n  </div>\n</div>\n\n<!-- Kendo Dialog -->\n<kendo-dialog \n  title=\"Edit User Information\" \n  *ngIf=\"isKendoDialogOpen\" \n  (close)=\"closeKendoDialog()\" \n  [minWidth]=\"450\" \n  [width]=\"600\"\n  [height]=\"400\">\n  \n  <form [formGroup]=\"formGroup\">\n    <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n      <kendo-label text=\"Full Name\" [for]=\"nameField\"></kendo-label>\n      <kendo-textbox \n        #nameField\n        formControlName=\"fullName\"\n        placeholder=\"Enter full name\"\n        [clearButton]=\"true\"\n        rounded=\"medium\">\n        <ng-template kendoTextBoxPrefixTemplate>\n          <i class=\"fas fa-user search-prefix-icon\"></i>\n        </ng-template>\n      </kendo-textbox>\n      <div class=\"k-form-error\" *ngIf=\"fullNameControl.touched && fullNameControl.errors?.['required']\">\n        Name is required\n      </div>\n    </kendo-formfield>\n\n    <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n      <kendo-label text=\"Email Address\" [for]=\"emailField\"></kendo-label>\n      <kendo-textbox \n        #emailField\n        formControlName=\"email\"\n        placeholder=\"user@example.com\"\n        [clearButton]=\"true\"\n        rounded=\"medium\">\n        <ng-template kendoTextBoxPrefixTemplate>\n          <i class=\"fas fa-envelope search-prefix-icon\"></i>\n        </ng-template>\n      </kendo-textbox>\n      <div class=\"k-form-error\" *ngIf=\"emailControl.touched && emailControl.errors?.['email']\">\n        Please enter a valid email\n      </div>\n    </kendo-formfield>\n\n    <kendo-formfield orientation=\"vertical\" class=\"mb-3\">\n      <kendo-label text=\"Department\" [for]=\"deptField\"></kendo-label>\n      <kendo-dropdownlist \n        #deptField\n        formControlName=\"department\"\n        [data]=\"departments\"\n        textField=\"name\"\n        valueField=\"id\"\n        rounded=\"medium\">\n        <ng-template kendoDropDownListItemTemplate let-dataItem>\n          <span class=\"dropdown-item-content\">\n            <i [class]=\"dataItem.icon\" class=\"mr-2\"></i>\n            {{ dataItem.name }}\n          </span>\n        </ng-template>\n      </kendo-dropdownlist>\n    </kendo-formfield>\n\n    <kendo-formfield orientation=\"vertical\">\n      <kendo-label text=\"Additional Notes\"></kendo-label>\n      <kendo-textarea \n        formControlName=\"comments\"\n        placeholder=\"Enter any additional notes...\"\n        [rows]=\"3\"\n        rounded=\"medium\">\n      </kendo-textarea>\n    </kendo-formfield>\n  </form>\n  \n  <kendo-dialog-actions>\n    <kendo-button fillMode=\"outline\" (click)=\"closeKendoDialog()\">Cancel</kendo-button>\n    <kendo-button themeColor=\"primary\" (click)=\"submitForm()\" [disabled]=\"!formGroup.valid\">\n      <span class=\"button-content\">\n        <i class=\"fas fa-save\"></i>\n        Save Changes\n      </span>\n    </kendo-button>\n  </kendo-dialog-actions>\n</kendo-dialog>\n", styles: ["/* Enhanced Style Guide Component Styles */\n/* Integrating Kendo UI with Font Awesome and Custom Cards */\n\n/* Component specific overrides and additions */\n.typography-demo h1,\n.typography-demo h2,\n.typography-demo h3,\n.typography-demo h4 {\n    margin-bottom: 1rem;\n}\n\n.typography-demo p {\n    margin-bottom: 0.5rem;\n}\n\n.button-group {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n    align-items: center;\n    margin-bottom: 1rem;\n}\n\n/* Button content wrapper for Font Awesome icons in Kendo buttons */\n.button-content {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.button-content i {\n    font-size: 14px;\n}\n\n/* Badge and chip groups */\n.badge-group {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n    align-items: center;\n}\n\n/* Enhanced Kendo Card styling */\n.custom-kendo-card {\n    transition: all 0.3s ease;\n    border: 2px solid transparent;\n}\n\n.custom-kendo-card:hover {\n    transform: translateY(-4px);\n    border-color: var(--light-blue);\n    box-shadow: \n        0 8px 32px rgba(9, 35, 64, 0.12),\n        0 4px 16px rgba(0, 118, 182, 0.1);\n}\n\n.custom-kendo-card .k-card-header {\n    background: var(--gray-600);\n    border-bottom: 1px solid var(--gray-600);\n}\n\n.custom-kendo-card .k-card-header h4 {\n    margin: 0;\n    display: flex;\n    align-items: center;\n    color: var(--navy);\n}\n\n/* Enhanced Grid Styling */\n.custom-grid {\n    border-radius: var(--border-radius);\n    overflow: hidden;\n}\n\n.custom-grid .k-grid-header {\n    background: linear-gradient(135deg, var(--gray-600) 0%, #e8e8e8 100%);\n}\n\n.custom-grid .k-grid-header th {\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    font-weight: 600;\n}\n\n/* User cell in grid */\n.user-cell {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.user-info {\n    display: flex;\n    flex-direction: column;\n}\n\n.user-name {\n    font-weight: 500;\n    color: var(--navy);\n}\n\n.user-role {\n    font-size: 12px;\n    color: var(--gray-800);\n}\n\n/* Email link styling */\n.email-link {\n    color: var(--mj-blue);\n    text-decoration: none;\n    transition: color 0.2s ease;\n}\n\n.email-link:hover {\n    color: var(--navy);\n    text-decoration: underline;\n}\n\n/* Status cell */\n.status-cell {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Action buttons in grid */\n.action-buttons {\n    display: flex;\n    gap: 4px;\n}\n\n/* Dropdown item with icon */\n.dropdown-item-content {\n    display: flex;\n    align-items: center;\n}\n\n.dropdown-item-content i {\n    width: 20px;\n    text-align: center;\n}\n\n/* Search prefix icon in Kendo TextBox */\n.search-prefix-icon {\n    color: var(--gray-800);\n    margin: 0 8px;\n}\n\n/* Tab title with icon */\n.tab-title {\n    display: flex;\n    align-items: center;\n}\n\n.tab-content-wrapper {\n    padding: 20px;\n}\n\n/* Checkbox group styling */\n.checkbox-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n/* Kendo overrides for better integration */\n.k-button .fa,\n.k-button .fas {\n    font-size: 14px;\n}\n\n/* Ensure Kendo buttons with Font Awesome icons have proper spacing */\n.k-button > span {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n/* Kendo Badge enhancements */\n.k-badge {\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Kendo Chip enhancements */\n.k-chip {\n    font-weight: 500;\n    transition: all 0.2s ease;\n}\n\n.k-chip:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n/* Form field enhancements */\nkendo-formfield {\n    display: block;\n}\n\nkendo-formfield .k-label {\n    font-weight: 500;\n    color: var(--navy);\n    margin-bottom: 0.5rem;\n}\n\n/* Kendo Dialog enhancements */\n.k-dialog-wrapper .k-dialog {\n    border-radius: 20px;\n    overflow: hidden;\n}\n\n.k-dialog-wrapper .k-dialog-titlebar {\n    background: linear-gradient(135deg, var(--gray-600) 0%, #f8f9fa 100%);\n    padding: 24px 30px;\n}\n\n.k-dialog-wrapper .k-dialog-title {\n    font-size: 1.5rem;\n    color: var(--navy);\n}\n\n.k-dialog-wrapper .k-dialog-content {\n    padding: 30px;\n}\n\n/* Progress bar enhancements */\n.k-progressbar {\n    height: 8px;\n    border-radius: 4px;\n    background: var(--gray-600);\n}\n\n.k-progressbar .k-progress-status-wrap {\n    font-weight: 500;\n}\n\n/* Success progress bar */\n.progress-success .k-progressbar-progress {\n    background-color: #28a745 !important;\n}\n\n/* Loader container styling */\n.k-loader-container {\n    padding: 20px;\n}\n\n/* Ensure Font Awesome icons display properly */\n.fas, .fa {\n    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome';\n    font-weight: 900;\n}\n\n.far {\n    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', 'FontAwesome';\n    font-weight: 400;\n}\n\n/* Utility margin classes used in template */\n.mb-0 { margin-bottom: 0 !important; }\n.mb-1 { margin-bottom: 0.25rem !important; }\n.mb-2 { margin-bottom: 0.5rem !important; }\n.mb-3 { margin-bottom: 1rem !important; }\n.mb-4 { margin-bottom: 1.5rem !important; }\n\n.mt-0 { margin-top: 0 !important; }\n.mt-1 { margin-top: 0.25rem !important; }\n.mt-2 { margin-top: 0.5rem !important; }\n.mt-3 { margin-top: 1rem !important; }\n.mt-4 { margin-top: 1.5rem !important; }\n\n.mr-0 { margin-right: 0 !important; }\n.mr-1 { margin-right: 0.25rem !important; }\n.mr-2 { margin-right: 0.5rem !important; }\n\n.ml-0 { margin-left: 0 !important; }\n.ml-1 { margin-left: 0.25rem !important; }\n.ml-2 { margin-left: 0.5rem !important; }\n\n.p-3 { padding: 1rem !important; }\n\n/* Text alignment */\n.text-center { text-align: center !important; }\n\n/* Form error styling */\n.k-form-error {\n    color: #dc3545;\n    font-size: 12px;\n    margin-top: 4px;\n    display: block;\n}\n\n/* Radio group styling */\n.radio-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.radio-label {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n}\n\n/* Color utilities */\n.bg-success { background-color: #28a745 !important; }\n\n/* Modal backdrop fix for proper display */\n.mj-modal-overlay {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(9, 35, 64, 0.6);\n    backdrop-filter: blur(8px);\n    z-index: 10000;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 20px;\n    animation: modal-overlay-appear 0.3s ease-out;\n}\n\n/* Fix for double borders in modals */\n.mj-modal .k-textbox,\n.mj-modal .k-dropdown,\n.mj-modal .k-dropdownlist {\n    border: 1px solid var(--gray-700) !important;\n}\n\n.mj-modal .k-textbox:focus,\n.mj-modal .k-dropdown:focus-within,\n.mj-modal .k-dropdownlist:focus-within {\n    border-color: var(--mj-blue) !important;\n}\n\n/* Icon card styles have been moved to global _common.scss */\n/* The mj-kendo-icon-card class is now globally available */\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n    .button-group {\n        flex-direction: column;\n        align-items: stretch;\n    }\n    \n    .button-group .k-button,\n    .button-group .mj-btn {\n        width: 100%;\n        justify-content: center;\n    }\n    \n    .mj-toolbar {\n        flex-direction: column;\n        gap: 10px;\n    }\n    \n    .mj-toolbar-actions {\n        width: 100%;\n        flex-direction: column;\n        gap: 10px;\n    }\n    \n    .mj-toolbar-actions > * {\n        width: 100%;\n    }\n    \n    .custom-grid {\n        font-size: 12px;\n    }\n    \n    .k-grid td,\n    .k-grid th {\n        padding: 8px;\n    }\n    \n    .user-cell {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 4px;\n    }\n    \n    .k-dialog-wrapper .k-dialog {\n        margin: 10px;\n        width: calc(100vw - 20px) !important;\n        max-width: none;\n    }\n}\n\n/* Print styles */\n@media print {\n    .mj-header-actions,\n    .mj-toolbar-actions,\n    .mj-card-actions,\n    .action-buttons,\n    .k-grid-toolbar,\n    .button-group {\n        display: none !important;\n    }\n    \n    .mj-card {\n        break-inside: avoid;\n        box-shadow: none;\n        border: 1px solid #ddd;\n    }\n}\n\n/* Dark mode support (if needed) */\n@media (prefers-color-scheme: dark) {\n    /* Add dark mode overrides here if needed */\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n    .mj-card,\n    .custom-kendo-card,\n    .k-button,\n    .mj-btn {\n        border-width: 2px !important;\n    }\n    \n    .badge,\n    .k-badge,\n    .k-chip {\n        border: 2px solid currentColor;\n    }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n    *,\n    *::before,\n    *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n    \n    .mj-card:hover,\n    .custom-kendo-card:hover {\n        transform: none !important;\n    }\n}\n"] }]
+    }], () => [], 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