@memberjunction/ng-skip-chat 2.102.0 → 2.104.0

package/dist/lib/artifacts/skip-component-feedback-panel.component.d.ts

@@ -0,0 +1,120 @@
+import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Interface representing a component in the dependency hierarchy
+ */
+export interface ComponentNode {
+    name: string;
+    title: string;
+    description?: string;
+    location: 'embedded' | 'registry';
+    dependencies?: ComponentNode[];
+    namespace?: string;
+    registry?: string;
+}
+/**
+ * Interface for feedback submission
+ */
+export interface ComponentFeedback {
+    componentName: string;
+    componentNamespace: string;
+    componentVersion?: string;
+    rating: number;
+    comments?: string;
+    conversationID?: string;
+    conversationDetailID?: string;
+    reportID?: string;
+    dashboardID?: string;
+}
+/**
+ * Component feedback panel that displays component hierarchy tree
+ * and allows users to select components and provide star ratings with comments
+ */
+export declare class SkipComponentFeedbackPanelComponent implements OnInit, OnChanges {
+    rootComponent: ComponentNode | null;
+    conversationID?: string;
+    conversationDetailID?: string;
+    reportID?: string;
+    dashboardID?: string;
+    isVisible: boolean;
+    feedbackSubmitted: EventEmitter<ComponentFeedback>;
+    componentSelected: EventEmitter<ComponentNode>;
+    closed: EventEmitter<void>;
+    selectedComponent: ComponentNode | null;
+    starRating: number;
+    hoverRating: number;
+    feedbackComment: string;
+    expandedNodes: Set<string>;
+    isSubmitting: boolean;
+    submitSuccess: boolean;
+    submitError: string;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Toggle node expansion in the tree
+     */
+    toggleNode(node: ComponentNode): void;
+    /**
+     * Check if a node is expanded
+     */
+    isNodeExpanded(node: ComponentNode): boolean;
+    /**
+     * Select a component for feedback
+     */
+    selectComponent(node: ComponentNode, event?: MouseEvent): void;
+    /**
+     * Check if a component is selected
+     */
+    isComponentSelected(node: ComponentNode): boolean;
+    /**
+     * Set star rating on click
+     */
+    setRating(rating: number): void;
+    /**
+     * Set hover rating for visual feedback
+     */
+    setHoverRating(rating: number): void;
+    /**
+     * Clear hover rating
+     */
+    clearHoverRating(): void;
+    /**
+     * Get the current displayed rating (hover or actual)
+     */
+    getDisplayRating(): number;
+    /**
+     * Check if a star should be filled
+     */
+    isStarFilled(index: number): boolean;
+    /**
+     * Reset the feedback form
+     */
+    resetFeedbackForm(): void;
+    /**
+     * Check if the form is valid for submission
+     */
+    canSubmit(): boolean;
+    /**
+     * Submit the feedback
+     */
+    submitFeedback(): Promise<void>;
+    /**
+     * Close the panel
+     */
+    closePanel(): void;
+    /**
+     * Get indentation level for a node (for visual hierarchy)
+     */
+    getNodeIndentation(depth: number): string;
+    /**
+     * Recursively build the component tree HTML
+     */
+    buildComponentTree(node: ComponentNode, depth?: number): any[];
+    /**
+     * Get all tree items for rendering
+     */
+    getTreeItems(): any[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkipComponentFeedbackPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkipComponentFeedbackPanelComponent, "skip-component-feedback-panel", never, { "rootComponent": { "alias": "rootComponent"; "required": false; }; "conversationID": { "alias": "conversationID"; "required": false; }; "conversationDetailID": { "alias": "conversationDetailID"; "required": false; }; "reportID": { "alias": "reportID"; "required": false; }; "dashboardID": { "alias": "dashboardID"; "required": false; }; "isVisible": { "alias": "isVisible"; "required": false; }; }, { "feedbackSubmitted": "feedbackSubmitted"; "componentSelected": "componentSelected"; "closed": "closed"; }, never, never, true, never>;
+}
+//# sourceMappingURL=skip-component-feedback-panel.component.d.ts.map

package/dist/lib/artifacts/skip-component-feedback-panel.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skip-component-feedback-panel.component.d.ts","sourceRoot":"","sources":["../../../src/lib/artifacts/skip-component-feedback-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;;AAQzG;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,UAAU,GAAG,UAAU,CAAC;IAClC,YAAY,CAAC,EAAE,aAAa,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,qBAca,mCAAoC,YAAW,MAAM,EAAE,SAAS;IAClE,aAAa,EAAE,aAAa,GAAG,IAAI,CAAQ;IAC3C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,UAAS;IAEjB,iBAAiB,kCAAyC;IAC1D,iBAAiB,8BAAqC;IACtD,MAAM,qBAA4B;IAE5C,iBAAiB,EAAE,aAAa,GAAG,IAAI,CAAQ;IAC/C,UAAU,SAAK;IACf,WAAW,SAAK;IAChB,eAAe,SAAM;IACrB,aAAa,cAAqB;IAClC,YAAY,UAAS;IACrB,aAAa,UAAS;IACtB,WAAW,SAAM;IAEjB,QAAQ,IAAI,IAAI;IAOhB,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAUzC;;OAEG;IACH,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI;IASrC;;OAEG;IACH,cAAc,CAAC,IAAI,EAAE,aAAa,GAAG,OAAO;IAI5C;;OAEG;IACH,eAAe,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI;IAU9D;;OAEG;IACH,mBAAmB,CAAC,IAAI,EAAE,aAAa,GAAG,OAAO;IAIjD;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAI/B;;OAEG;IACH,cAAc,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAIpC;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAIxB;;OAEG;IACH,gBAAgB,IAAI,MAAM;IAI1B;;OAEG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIpC;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAQzB;;OAEG;IACH,SAAS,IAAI,OAAO;IAIpB;;OAEG;IACG,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;IA4CrC;;OAEG;IACH,UAAU,IAAI,IAAI;IAIlB;;OAEG;IACH,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAIzC;;OAEG;IACH,kBAAkB,CAAC,IAAI,EAAE,aAAa,EAAE,KAAK,SAAI,GAAG,GAAG,EAAE;IAgBzD;;OAEG;IACH,YAAY,IAAI,GAAG,EAAE;yCArNV,mCAAmC;2CAAnC,mCAAmC;CA2N/C"}

package/dist/lib/artifacts/skip-component-feedback-panel.component.js

@@ -0,0 +1,473 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import { LayoutModule } from '@progress/kendo-angular-layout';
+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-buttons";
+const _forTrack0 = ($index, $item) => $item.node.name;
+const _c0 = () => [1, 2, 3, 4, 5];
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_15_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 25);
+    i0.ɵɵlistener("click", function SkipComponentFeedbackPanelComponent_div_0_Conditional_15_For_2_Conditional_1_Template_i_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const item_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); ctx_r1.toggleNode(item_r4.node); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("fa-solid", true)("fa-chevron-right", !ctx_r1.isNodeExpanded(item_r4.node))("fa-chevron-down", ctx_r1.isNodeExpanded(item_r4.node));
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_15_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 20);
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_15_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 24);
+    i0.ɵɵtext(1, "Registry");
+    i0.ɵɵelementEnd();
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵlistener("click", function SkipComponentFeedbackPanelComponent_div_0_Conditional_15_For_2_Template_div_click_0_listener($event) { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectComponent(item_r4.node, $event)); });
+    i0.ɵɵtemplate(1, SkipComponentFeedbackPanelComponent_div_0_Conditional_15_For_2_Conditional_1_Template, 1, 6, "i", 19)(2, SkipComponentFeedbackPanelComponent_div_0_Conditional_15_For_2_Conditional_2_Template, 1, 0, "span", 20);
+    i0.ɵɵelement(3, "i", 21);
+    i0.ɵɵelementStart(4, "div", 22)(5, "span", 23);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(7, SkipComponentFeedbackPanelComponent_div_0_Conditional_15_For_2_Conditional_7_Template, 2, 0, "span", 24);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("padding-left", ctx_r1.getNodeIndentation(item_r4.depth));
+    i0.ɵɵclassProp("selected", ctx_r1.isComponentSelected(item_r4.node));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r4.hasChildren ? 1 : 2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(item_r4.node.title || item_r4.node.name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r4.node.location === "registry" ? 7 : -1);
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵrepeaterCreate(1, SkipComponentFeedbackPanelComponent_div_0_Conditional_15_For_2_Template, 8, 7, "div", 17, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.getTreeItems());
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵelement(1, "i", 26);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "No component hierarchy available");
+    i0.ɵɵelementEnd()();
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 28);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.selectedComponent.description);
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_For_11_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 44);
+    i0.ɵɵlistener("click", function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_For_11_Template_i_click_0_listener() { const star_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setRating(star_r8)); })("mouseenter", function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_For_11_Template_i_mouseenter_0_listener() { const star_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setHoverRating(star_r8)); })("mouseleave", function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_For_11_Template_i_mouseleave_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.clearHoverRating()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const star_r8 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("fa-solid", ctx_r1.isStarFilled(star_r8))("fa-regular", !ctx_r1.isStarFilled(star_r8))("fa-star", true);
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 33);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r1.starRating, " out of 5 stars");
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 34);
+    i0.ɵɵtext(1, "Click to rate");
+    i0.ɵɵelementEnd();
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 39);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r1.feedbackComment.length, "/1000");
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 45);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2, "Submitting...");
+    i0.ɵɵelementEnd();
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 46);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2, "Submit Feedback");
+    i0.ɵɵelementEnd();
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Feedback submitted successfully!");
+    i0.ɵɵelementEnd()();
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.submitError);
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 10);
+    i0.ɵɵelement(2, "i", 27);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(5, SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_5_Template, 2, 1, "p", 28);
+    i0.ɵɵelementStart(6, "div", 29)(7, "label", 30);
+    i0.ɵɵtext(8, "Your Rating");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 31);
+    i0.ɵɵrepeaterCreate(10, SkipComponentFeedbackPanelComponent_div_0_Conditional_18_For_11_Template, 1, 6, "i", 32, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(12, SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_12_Template, 2, 1, "span", 33)(13, SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_13_Template, 2, 0, "span", 34);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 35)(15, "label", 36);
+    i0.ɵɵtext(16, " Comments ");
+    i0.ɵɵelementStart(17, "span", 37);
+    i0.ɵɵtext(18, "(optional)");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "textarea", 38);
+    i0.ɵɵtwoWayListener("ngModelChange", function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Template_textarea_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.feedbackComment, $event) || (ctx_r1.feedbackComment = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtext(20, "              ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(21, SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_21_Template, 2, 1, "span", 39);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "div", 40)(23, "button", 41);
+    i0.ɵɵlistener("click", function SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.submitFeedback()); });
+    i0.ɵɵtemplate(24, SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_24_Template, 3, 0)(25, SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_25_Template, 3, 0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(26, SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_26_Template, 4, 0, "div", 42)(27, SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Conditional_27_Template, 4, 1, "div", 43);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("Rate: ", ctx_r1.selectedComponent.title || ctx_r1.selectedComponent.name, "");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedComponent.description ? 5 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵrepeater(i0.ɵɵpureFunction0(10, _c0));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.starRating > 0 ? 12 : 13);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.feedbackComment);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.feedbackComment.length > 0 ? 21 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("themeColor", "primary")("disabled", !ctx_r1.canSubmit());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isSubmitting ? 24 : 25);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.submitSuccess ? 26 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.submitError ? 27 : -1);
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵelement(1, "i", 49);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Select a component from the tree to provide feedback");
+    i0.ɵɵelementEnd()();
+} }
+function SkipComponentFeedbackPanelComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵlistener("click", function SkipComponentFeedbackPanelComponent_div_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closePanel()); });
+    i0.ɵɵelementStart(1, "div", 2);
+    i0.ɵɵlistener("click", function SkipComponentFeedbackPanelComponent_div_0_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 3)(3, "div", 4);
+    i0.ɵɵelement(4, "i", 5);
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6, "Component Feedback");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "button", 6);
+    i0.ɵɵlistener("click", function SkipComponentFeedbackPanelComponent_div_0_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closePanel()); });
+    i0.ɵɵelement(8, "i", 7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 8)(10, "div", 9)(11, "div", 10);
+    i0.ɵɵelement(12, "i", 11);
+    i0.ɵɵelementStart(13, "span");
+    i0.ɵɵtext(14, "Select Component");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(15, SkipComponentFeedbackPanelComponent_div_0_Conditional_15_Template, 3, 0, "div", 12)(16, SkipComponentFeedbackPanelComponent_div_0_Conditional_16_Template, 4, 0, "div", 13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 14);
+    i0.ɵɵtemplate(18, SkipComponentFeedbackPanelComponent_div_0_Conditional_18_Template, 28, 11, "div", 15)(19, SkipComponentFeedbackPanelComponent_div_0_Conditional_19_Template, 4, 0, "div", 16);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(15);
+    i0.ɵɵconditional(ctx_r1.rootComponent ? 15 : 16);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.selectedComponent ? 18 : 19);
+} }
+/**
+ * Component feedback panel that displays component hierarchy tree
+ * and allows users to select components and provide star ratings with comments
+ */
+export class SkipComponentFeedbackPanelComponent {
+    rootComponent = null;
+    conversationID;
+    conversationDetailID;
+    reportID;
+    dashboardID;
+    isVisible = false;
+    feedbackSubmitted = new EventEmitter();
+    componentSelected = new EventEmitter();
+    closed = new EventEmitter();
+    selectedComponent = null;
+    starRating = 0;
+    hoverRating = 0;
+    feedbackComment = '';
+    expandedNodes = new Set();
+    isSubmitting = false;
+    submitSuccess = false;
+    submitError = '';
+    ngOnInit() {
+        // Expand root node by default
+        if (this.rootComponent) {
+            this.expandedNodes.add(this.rootComponent.name);
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['rootComponent'] && this.rootComponent) {
+            // Reset expanded nodes when component changes
+            this.expandedNodes.clear();
+            this.expandedNodes.add(this.rootComponent.name);
+            this.selectedComponent = null;
+            this.resetFeedbackForm();
+        }
+    }
+    /**
+     * Toggle node expansion in the tree
+     */
+    toggleNode(node) {
+        const key = node.name;
+        if (this.expandedNodes.has(key)) {
+            this.expandedNodes.delete(key);
+        }
+        else {
+            this.expandedNodes.add(key);
+        }
+    }
+    /**
+     * Check if a node is expanded
+     */
+    isNodeExpanded(node) {
+        return this.expandedNodes.has(node.name);
+    }
+    /**
+     * Select a component for feedback
+     */
+    selectComponent(node, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        this.selectedComponent = node;
+        this.resetFeedbackForm();
+        this.componentSelected.emit(node);
+    }
+    /**
+     * Check if a component is selected
+     */
+    isComponentSelected(node) {
+        return this.selectedComponent?.name === node.name;
+    }
+    /**
+     * Set star rating on click
+     */
+    setRating(rating) {
+        this.starRating = rating;
+    }
+    /**
+     * Set hover rating for visual feedback
+     */
+    setHoverRating(rating) {
+        this.hoverRating = rating;
+    }
+    /**
+     * Clear hover rating
+     */
+    clearHoverRating() {
+        this.hoverRating = 0;
+    }
+    /**
+     * Get the current displayed rating (hover or actual)
+     */
+    getDisplayRating() {
+        return this.hoverRating || this.starRating;
+    }
+    /**
+     * Check if a star should be filled
+     */
+    isStarFilled(index) {
+        return index <= this.getDisplayRating();
+    }
+    /**
+     * Reset the feedback form
+     */
+    resetFeedbackForm() {
+        this.starRating = 0;
+        this.hoverRating = 0;
+        this.feedbackComment = '';
+        this.submitSuccess = false;
+        this.submitError = '';
+    }
+    /**
+     * Check if the form is valid for submission
+     */
+    canSubmit() {
+        return !!this.selectedComponent && this.starRating > 0 && !this.isSubmitting;
+    }
+    /**
+     * Submit the feedback
+     */
+    async submitFeedback() {
+        if (!this.canSubmit() || !this.selectedComponent) {
+            return;
+        }
+        this.isSubmitting = true;
+        this.submitError = '';
+        this.submitSuccess = false;
+        try {
+            // Convert 0-5 star rating to 0-100 scale
+            const scaledRating = this.starRating * 20;
+            const feedback = {
+                componentName: this.selectedComponent.name,
+                componentNamespace: this.selectedComponent.namespace || this.selectedComponent.registry || 'Skip',
+                componentVersion: undefined, // Will use latest version if not specified
+                rating: scaledRating,
+                comments: this.feedbackComment.trim() || undefined,
+                conversationID: this.conversationID,
+                conversationDetailID: this.conversationDetailID,
+                reportID: this.reportID,
+                dashboardID: this.dashboardID
+            };
+            this.feedbackSubmitted.emit(feedback);
+            // Show success message
+            this.submitSuccess = true;
+            // Reset form after a short delay
+            setTimeout(() => {
+                this.resetFeedbackForm();
+                this.submitSuccess = false;
+            }, 2000);
+        }
+        catch (error) {
+            this.submitError = 'Failed to submit feedback. Please try again.';
+            console.error('Error submitting feedback:', error);
+        }
+        finally {
+            this.isSubmitting = false;
+        }
+    }
+    /**
+     * Close the panel
+     */
+    closePanel() {
+        this.closed.emit();
+    }
+    /**
+     * Get indentation level for a node (for visual hierarchy)
+     */
+    getNodeIndentation(depth) {
+        return `${depth * 20}px`;
+    }
+    /**
+     * Recursively build the component tree HTML
+     */
+    buildComponentTree(node, depth = 0) {
+        const items = [{
+                node,
+                depth,
+                hasChildren: !!(node.dependencies && node.dependencies.length > 0)
+            }];
+        if (this.isNodeExpanded(node) && node.dependencies) {
+            for (const child of node.dependencies) {
+                items.push(...this.buildComponentTree(child, depth + 1));
+            }
+        }
+        return items;
+    }
+    /**
+     * Get all tree items for rendering
+     */
+    getTreeItems() {
+        if (!this.rootComponent) {
+            return [];
+        }
+        return this.buildComponentTree(this.rootComponent);
+    }
+    static ɵfac = function SkipComponentFeedbackPanelComponent_Factory(t) { return new (t || SkipComponentFeedbackPanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SkipComponentFeedbackPanelComponent, selectors: [["skip-component-feedback-panel"]], inputs: { rootComponent: "rootComponent", conversationID: "conversationID", conversationDetailID: "conversationDetailID", reportID: "reportID", dashboardID: "dashboardID", isVisible: "isVisible" }, outputs: { feedbackSubmitted: "feedbackSubmitted", componentSelected: "componentSelected", closed: "closed" }, standalone: true, features: [i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 1, vars: 1, consts: [["class", "feedback-panel-overlay", 3, "click", 4, "ngIf"], [1, "feedback-panel-overlay", 3, "click"], [1, "feedback-panel", 3, "click"], [1, "panel-header"], [1, "panel-title"], [1, "fa-solid", "fa-comment-dots"], ["kendoButton", "", "fillMode", "flat", 1, "close-button", 3, "click"], [1, "fa-solid", "fa-times"], [1, "panel-content"], [1, "tree-section"], [1, "section-header"], [1, "fa-solid", "fa-sitemap"], [1, "component-tree"], [1, "empty-state"], [1, "feedback-section"], [1, "selected-component-info"], [1, "no-selection-message"], [1, "tree-item", 3, "selected", "padding-left"], [1, "tree-item", 3, "click"], [1, "tree-toggle", 3, "fa-solid", "fa-chevron-right", "fa-chevron-down"], [1, "tree-spacer"], [1, "fa-solid", "fa-cube", "component-icon"], [1, "component-info"], [1, "component-name"], [1, "component-badge", "registry"], [1, "tree-toggle", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-star"], [1, "component-description"], [1, "star-rating-container"], [1, "rating-label"], [1, "star-rating"], [1, "star", 3, "fa-solid", "fa-regular", "fa-star"], [1, "rating-text"], [1, "rating-text", "placeholder"], [1, "comment-container"], [1, "comment-label"], [1, "optional-label"], ["placeholder", "Share your thoughts about this component...", "rows", "4", "maxlength", "1000", 1, "comment-input", 3, "ngModelChange", "ngModel"], [1, "char-count"], [1, "submit-container"], ["kendoButton", "", 1, "submit-button", 3, "click", "themeColor", "disabled"], [1, "message", "success-message"], [1, "message", "error-message"], [1, "star", 3, "click", "mouseenter", "mouseleave"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-paper-plane"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-exclamation-circle"], [1, "fa-solid", "fa-hand-pointer"]], template: function SkipComponentFeedbackPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, SkipComponentFeedbackPanelComponent_div_0_Template, 20, 2, "div", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.isVisible);
+        } }, dependencies: [CommonModule, i1.NgIf, FormsModule, i2.DefaultValueAccessor, i2.NgControlStatus, i2.MaxLengthValidator, i2.NgModel, ButtonModule, i3.ButtonComponent, InputsModule,
+            DropDownsModule,
+            LayoutModule], styles: ["\n\n.feedback-panel-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 60px; \n\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.4);\n  z-index: 9999; \n\n  display: flex;\n  justify-content: flex-start; \n\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-in-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n\n\n.feedback-panel[_ngcontent-%COMP%] {\n  width: 450px;\n  height: 100%;\n  background-color: #ffffff;\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); \n\n  display: flex;\n  flex-direction: column;\n  animation: _ngcontent-%COMP%_slideInFromLeft 0.3s ease-out; \n\n}\n\n@keyframes _ngcontent-%COMP%_slideInFromLeft {\n  from {\n    transform: translateX(-100%); \n\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #f8f9fa;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 18px;\n  font-weight: 600;\n  color: #333;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3B82F6;\n  font-size: 20px;\n}\n\n.close-button[_ngcontent-%COMP%] {\n  min-width: 32px;\n  height: 32px;\n  padding: 0;\n  border-radius: 4px;\n}\n\n.close-button[_ngcontent-%COMP%]:hover {\n  background-color: #e0e0e0;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 20px;\n}\n\n\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #555;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 2px solid #3B82F6;\n}\n\n.section-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3B82F6;\n}\n\n\n\n.tree-section[_ngcontent-%COMP%] {\n  background-color: #f8f9fa;\n  border-radius: 8px;\n  padding: 16px;\n}\n\n.component-tree[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.tree-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n  position: relative;\n}\n\n.tree-item[_ngcontent-%COMP%]:hover {\n  background-color: #e3f2fd;\n}\n\n.tree-item.selected[_ngcontent-%COMP%] {\n  background-color: #3B82F6;\n  color: white;\n  font-weight: 500;\n}\n\n.tree-item.selected[_ngcontent-%COMP%]   .component-icon[_ngcontent-%COMP%], \n.tree-item.selected[_ngcontent-%COMP%]   .tree-toggle[_ngcontent-%COMP%] {\n  color: white;\n}\n\n.tree-item.selected[_ngcontent-%COMP%]   .component-badge[_ngcontent-%COMP%] {\n  background-color: rgba(255, 255, 255, 0.2);\n  color: white;\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n.tree-toggle[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n  cursor: pointer;\n  transition: transform 0.2s ease;\n  width: 16px;\n  text-align: center;\n}\n\n.tree-spacer[_ngcontent-%COMP%] {\n  width: 16px;\n  display: inline-block;\n}\n\n.component-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: #3B82F6;\n}\n\n.component-info[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  overflow: hidden;\n}\n\n.component-name[_ngcontent-%COMP%] {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 14px;\n}\n\n.component-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 10px;\n  background-color: #e3f2fd;\n  color: #1976d2;\n  border: 1px solid #bbdefb;\n  white-space: nowrap;\n  font-weight: 500;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 20px;\n  color: #999;\n  font-size: 14px;\n}\n\n\n\n.feedback-section[_ngcontent-%COMP%] {\n  background-color: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  padding: 16px;\n  min-height: 300px;\n}\n\n.selected-component-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.component-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #666;\n  line-height: 1.5;\n  margin: 0;\n  padding: 12px;\n  background-color: #f8f9fa;\n  border-radius: 6px;\n  border-left: 3px solid #3B82F6;\n}\n\n\n\n.star-rating-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.rating-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #333;\n}\n\n.star-rating[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.star[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: #ffd700;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.star[_ngcontent-%COMP%]:hover {\n  transform: scale(1.2);\n  filter: brightness(1.1);\n}\n\n.star.fa-regular[_ngcontent-%COMP%] {\n  color: #d0d0d0;\n}\n\n.rating-text[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #666;\n  margin-top: 4px;\n}\n\n.rating-text.placeholder[_ngcontent-%COMP%] {\n  color: #999;\n  font-style: italic;\n}\n\n\n\n.comment-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  position: relative;\n}\n\n.comment-label[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.optional-label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: normal;\n  color: #999;\n}\n\n.comment-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #d0d0d0;\n  border-radius: 6px;\n  font-size: 14px;\n  font-family: inherit;\n  resize: vertical;\n  min-height: 80px;\n  transition: border-color 0.2s ease;\n}\n\n.comment-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #3B82F6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.char-count[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 8px;\n  right: 12px;\n  font-size: 11px;\n  color: #999;\n  background-color: white;\n  padding: 2px 4px;\n}\n\n\n\n.submit-container[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.submit-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.submit-button[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.submit-button[_ngcontent-%COMP%]   i.fa-spinner[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  animation: _ngcontent-%COMP%_slideDown 0.3s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.success-message[_ngcontent-%COMP%] {\n  background-color: #d4edda;\n  color: #155724;\n  border: 1px solid #c3e6cb;\n}\n\n.success-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #28a745;\n}\n\n.error-message[_ngcontent-%COMP%] {\n  background-color: #f8d7da;\n  color: #721c24;\n  border: 1px solid #f5c6cb;\n}\n\n.error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #dc3545;\n}\n\n\n\n.no-selection-message[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: #999;\n  text-align: center;\n}\n\n.no-selection-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  color: #d0d0d0;\n}\n\n.no-selection-message[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background-color: #f1f1f1;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background-color: #c0c0c0;\n  border-radius: 4px;\n}\n\n.panel-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background-color: #a0a0a0;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SkipComponentFeedbackPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'skip-component-feedback-panel', standalone: true, imports: [
+                    CommonModule,
+                    FormsModule,
+                    ButtonModule,
+                    InputsModule,
+                    DropDownsModule,
+                    LayoutModule
+                ], template: "<div class=\"feedback-panel-overlay\" *ngIf=\"isVisible\" (click)=\"closePanel()\">\n  <div class=\"feedback-panel\" (click)=\"$event.stopPropagation()\">\n    <!-- Header -->\n    <div class=\"panel-header\">\n      <div class=\"panel-title\">\n        <i class=\"fa-solid fa-comment-dots\"></i>\n        <span>Component Feedback</span>\n      </div>\n      <button kendoButton class=\"close-button\" (click)=\"closePanel()\" fillMode=\"flat\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"panel-content\">\n      <!-- Component Tree Section -->\n      <div class=\"tree-section\">\n        <div class=\"section-header\">\n          <i class=\"fa-solid fa-sitemap\"></i>\n          <span>Select Component</span>\n        </div>\n\n        @if (rootComponent) {\n          <div class=\"component-tree\">\n            @for (item of getTreeItems(); track item.node.name) {\n              <div\n                class=\"tree-item\"\n                [class.selected]=\"isComponentSelected(item.node)\"\n                [style.padding-left]=\"getNodeIndentation(item.depth)\"\n                (click)=\"selectComponent(item.node, $event)\">\n\n                <!-- Expand/Collapse Icon -->\n                @if (item.hasChildren) {\n                  <i\n                    class=\"tree-toggle\"\n                    [class.fa-solid]=\"true\"\n                    [class.fa-chevron-right]=\"!isNodeExpanded(item.node)\"\n                    [class.fa-chevron-down]=\"isNodeExpanded(item.node)\"\n                    (click)=\"toggleNode(item.node); $event.stopPropagation()\">\n                  </i>\n                } @else {\n                  <span class=\"tree-spacer\"></span>\n                }\n\n                <!-- Component Icon -->\n                <i class=\"fa-solid fa-cube component-icon\"></i>\n\n                <!-- Component Name -->\n                <div class=\"component-info\">\n                  <span class=\"component-name\">{{ item.node.title || item.node.name }}</span>\n                  @if (item.node.location === 'registry') {\n                    <span class=\"component-badge registry\">Registry</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-info-circle\"></i>\n            <span>No component hierarchy available</span>\n          </div>\n        }\n      </div>\n\n      <!-- Feedback Form Section -->\n      <div class=\"feedback-section\">\n        @if (selectedComponent) {\n          <div class=\"selected-component-info\">\n            <div class=\"section-header\">\n              <i class=\"fa-solid fa-star\"></i>\n              <span>Rate: {{ selectedComponent.title || selectedComponent.name }}</span>\n            </div>\n\n            @if (selectedComponent.description) {\n              <p class=\"component-description\">{{ selectedComponent.description }}</p>\n            }\n\n            <!-- Star Rating -->\n            <div class=\"star-rating-container\">\n              <label class=\"rating-label\">Your Rating</label>\n              <div class=\"star-rating\">\n                @for (star of [1, 2, 3, 4, 5]; track star) {\n                  <i\n                    class=\"star\"\n                    [class.fa-solid]=\"isStarFilled(star)\"\n                    [class.fa-regular]=\"!isStarFilled(star)\"\n                    [class.fa-star]=\"true\"\n                    (click)=\"setRating(star)\"\n                    (mouseenter)=\"setHoverRating(star)\"\n                    (mouseleave)=\"clearHoverRating()\">\n                  </i>\n                }\n              </div>\n              @if (starRating > 0) {\n                <span class=\"rating-text\">{{ starRating }} out of 5 stars</span>\n              } @else {\n                <span class=\"rating-text placeholder\">Click to rate</span>\n              }\n            </div>\n\n            <!-- Comment Input -->\n            <div class=\"comment-container\">\n              <label class=\"comment-label\">\n                Comments\n                <span class=\"optional-label\">(optional)</span>\n              </label>\n              <textarea\n                class=\"comment-input\"\n                [(ngModel)]=\"feedbackComment\"\n                placeholder=\"Share your thoughts about this component...\"\n                rows=\"4\"\n                maxlength=\"1000\">\n              </textarea>\n              @if (feedbackComment.length > 0) {\n                <span class=\"char-count\">{{ feedbackComment.length }}/1000</span>\n              }\n            </div>\n\n            <!-- Submit Button -->\n            <div class=\"submit-container\">\n              <button\n                kendoButton\n                [themeColor]=\"'primary'\"\n                [disabled]=\"!canSubmit()\"\n                (click)=\"submitFeedback()\"\n                class=\"submit-button\">\n                @if (isSubmitting) {\n                  <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                  <span>Submitting...</span>\n                } @else {\n                  <i class=\"fa-solid fa-paper-plane\"></i>\n                  <span>Submit Feedback</span>\n                }\n              </button>\n            </div>\n\n            <!-- Success/Error Messages -->\n            @if (submitSuccess) {\n              <div class=\"message success-message\">\n                <i class=\"fa-solid fa-check-circle\"></i>\n                <span>Feedback submitted successfully!</span>\n              </div>\n            }\n            @if (submitError) {\n              <div class=\"message error-message\">\n                <i class=\"fa-solid fa-exclamation-circle\"></i>\n                <span>{{ submitError }}</span>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"no-selection-message\">\n            <i class=\"fa-solid fa-hand-pointer\"></i>\n            <p>Select a component from the tree to provide feedback</p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["/* Overlay */\n.feedback-panel-overlay {\n  position: fixed;\n  top: 60px; /* Start below typical banner height */\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.4);\n  z-index: 9999; /* Below banner but above content */\n  display: flex;\n  justify-content: flex-start; /* Changed from flex-end to flex-start */\n  animation: fadeIn 0.2s ease-in-out;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Panel Container */\n.feedback-panel {\n  width: 450px;\n  height: 100%;\n  background-color: #ffffff;\n  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); /* Changed from -2px to 2px for left shadow */\n  display: flex;\n  flex-direction: column;\n  animation: slideInFromLeft 0.3s ease-out; /* Changed animation name */\n}\n\n@keyframes slideInFromLeft {\n  from {\n    transform: translateX(-100%); /* Changed from 100% to -100% */\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n\n/* Header */\n.panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #e0e0e0;\n  background-color: #f8f9fa;\n}\n\n.panel-title {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 18px;\n  font-weight: 600;\n  color: #333;\n}\n\n.panel-title i {\n  color: #3B82F6;\n  font-size: 20px;\n}\n\n.close-button {\n  min-width: 32px;\n  height: 32px;\n  padding: 0;\n  border-radius: 4px;\n}\n\n.close-button:hover {\n  background-color: #e0e0e0;\n}\n\n/* Content */\n.panel-content {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 20px;\n}\n\n/* Section Headers */\n.section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: #555;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 2px solid #3B82F6;\n}\n\n.section-header i {\n  color: #3B82F6;\n}\n\n/* Component Tree */\n.tree-section {\n  background-color: #f8f9fa;\n  border-radius: 8px;\n  padding: 16px;\n}\n\n.component-tree {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.tree-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  user-select: none;\n  position: relative;\n}\n\n.tree-item:hover {\n  background-color: #e3f2fd;\n}\n\n.tree-item.selected {\n  background-color: #3B82F6;\n  color: white;\n  font-weight: 500;\n}\n\n.tree-item.selected .component-icon,\n.tree-item.selected .tree-toggle {\n  color: white;\n}\n\n.tree-item.selected .component-badge {\n  background-color: rgba(255, 255, 255, 0.2);\n  color: white;\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n.tree-toggle {\n  font-size: 12px;\n  color: #666;\n  cursor: pointer;\n  transition: transform 0.2s ease;\n  width: 16px;\n  text-align: center;\n}\n\n.tree-spacer {\n  width: 16px;\n  display: inline-block;\n}\n\n.component-icon {\n  font-size: 16px;\n  color: #3B82F6;\n}\n\n.component-info {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  overflow: hidden;\n}\n\n.component-name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 14px;\n}\n\n.component-badge {\n  font-size: 10px;\n  padding: 2px 6px;\n  border-radius: 10px;\n  background-color: #e3f2fd;\n  color: #1976d2;\n  border: 1px solid #bbdefb;\n  white-space: nowrap;\n  font-weight: 500;\n}\n\n.empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 20px;\n  color: #999;\n  font-size: 14px;\n}\n\n/* Feedback Form Section */\n.feedback-section {\n  background-color: #ffffff;\n  border-radius: 8px;\n  border: 1px solid #e0e0e0;\n  padding: 16px;\n  min-height: 300px;\n}\n\n.selected-component-info {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.component-description {\n  font-size: 13px;\n  color: #666;\n  line-height: 1.5;\n  margin: 0;\n  padding: 12px;\n  background-color: #f8f9fa;\n  border-radius: 6px;\n  border-left: 3px solid #3B82F6;\n}\n\n/* Star Rating */\n.star-rating-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.rating-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: #333;\n}\n\n.star-rating {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.star {\n  font-size: 32px;\n  color: #ffd700;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.star:hover {\n  transform: scale(1.2);\n  filter: brightness(1.1);\n}\n\n.star.fa-regular {\n  color: #d0d0d0;\n}\n\n.rating-text {\n  font-size: 13px;\n  color: #666;\n  margin-top: 4px;\n}\n\n.rating-text.placeholder {\n  color: #999;\n  font-style: italic;\n}\n\n/* Comment Input */\n.comment-container {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  position: relative;\n}\n\n.comment-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.optional-label {\n  font-size: 12px;\n  font-weight: normal;\n  color: #999;\n}\n\n.comment-input {\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #d0d0d0;\n  border-radius: 6px;\n  font-size: 14px;\n  font-family: inherit;\n  resize: vertical;\n  min-height: 80px;\n  transition: border-color 0.2s ease;\n}\n\n.comment-input:focus {\n  outline: none;\n  border-color: #3B82F6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.char-count {\n  position: absolute;\n  bottom: 8px;\n  right: 12px;\n  font-size: 11px;\n  color: #999;\n  background-color: white;\n  padding: 2px 4px;\n}\n\n/* Submit Button */\n.submit-container {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.submit-button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 20px;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.submit-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.submit-button i.fa-spinner {\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Messages */\n.message {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 16px;\n  border-radius: 6px;\n  font-size: 14px;\n  animation: slideDown 0.3s ease-out;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.success-message {\n  background-color: #d4edda;\n  color: #155724;\n  border: 1px solid #c3e6cb;\n}\n\n.success-message i {\n  color: #28a745;\n}\n\n.error-message {\n  background-color: #f8d7da;\n  color: #721c24;\n  border: 1px solid #f5c6cb;\n}\n\n.error-message i {\n  color: #dc3545;\n}\n\n/* No Selection Message */\n.no-selection-message {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: #999;\n  text-align: center;\n}\n\n.no-selection-message i {\n  font-size: 48px;\n  color: #d0d0d0;\n}\n\n.no-selection-message p {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.5;\n}\n\n/* Scrollbar Styling */\n.panel-content::-webkit-scrollbar {\n  width: 8px;\n}\n\n.panel-content::-webkit-scrollbar-track {\n  background-color: #f1f1f1;\n}\n\n.panel-content::-webkit-scrollbar-thumb {\n  background-color: #c0c0c0;\n  border-radius: 4px;\n}\n\n.panel-content::-webkit-scrollbar-thumb:hover {\n  background-color: #a0a0a0;\n}\n"] }]
+    }], null, { rootComponent: [{
+            type: Input
+        }], conversationID: [{
+            type: Input
+        }], conversationDetailID: [{
+            type: Input
+        }], reportID: [{
+            type: Input
+        }], dashboardID: [{
+            type: Input
+        }], isVisible: [{
+            type: Input
+        }], feedbackSubmitted: [{
+            type: Output
+        }], componentSelected: [{
+            type: Output
+        }], closed: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SkipComponentFeedbackPanelComponent, { className: "SkipComponentFeedbackPanelComponent", filePath: "src/lib/artifacts/skip-component-feedback-panel.component.ts", lineNumber: 55 }); })();
+//# sourceMappingURL=skip-component-feedback-panel.component.js.map