added a feedback form

Author: sanjeetkumaritoutlook-user

fluid.ts

@@ -0,0 +1,27 @@
+export const fluidEnvironments = {
+  dev: {
+    label: 'Development',
+    esm: 'https://fluid-dev.lmig.com/fluid/build/fluid.esm.js',
+    legacy: 'https://fluid-dev.lmig.com/fluid/build/fluid.js',
+  },
+  test: {
+    label: 'Test',
+    esm: 'https://fluid-components-test.libertymutual.com/fluid/build/fluid.esm.js',
+    legacy: 'https://fluid-components-test.libertymutual.com/fluid/build/fluid.js',
+  },
+  prod: {
+    label: 'Production',
+    esm: 'https://fluid.lmig.com/fluid/build/fluid.esm.js',
+    legacy: 'https://fluid.lmig.com/fluid/build/fluid.js',
+  },
+  local: {
+    label: 'Local',
+    esm: 'http://localhost:3333/fluid/build/fluid.esm.js',
+    legacy: 'http://localhost:3333/fluid/build/fluid.js',
+  },
+  external: {
+    label: 'External',
+    esm: 'https://fluid.libertymutual.com/fluid/build/fluid.esm.js',
+    legacy: 'https://fluid.libertymutual.com/fluid/build/fluid.js',
+  },
+};

src/components.d.ts

@@ -25,13 +25,28 @@ export namespace Components {
     }
     interface AppRoot {
     }
+    interface FeedbackForm {
+        "disableQuickbars": boolean;
+        "disabled": boolean;
+        "fontFamily": string;
+        "fontSize": string;
+        "initialValue": string;
+        /**
+          * Optional placeholder text displayed when the form field is empty.
+         */
+        "placeholder": string;
+    }
     interface HeaderNavigation {
     }
     interface PostsDashboard {
     }
     interface WebComponents {
     }
 }
+export interface FeedbackFormCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLFeedbackFormElement;
+}
 declare global {
     interface HTMLAppHomePageElement extends Components.AppHomePage, HTMLStencilElement {
     }
@@ -51,6 +66,26 @@ declare global {
         prototype: HTMLAppRootElement;
         new (): HTMLAppRootElement;
     };
+    interface HTMLFeedbackFormElementEventMap {
+        "valueChange": string;
+        "editorFocus": void;
+        "editorBlur": void;
+        "contentChanged": any;
+    }
+    interface HTMLFeedbackFormElement extends Components.FeedbackForm, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLFeedbackFormElementEventMap>(type: K, listener: (this: HTMLFeedbackFormElement, ev: FeedbackFormCustomEvent<HTMLFeedbackFormElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLFeedbackFormElementEventMap>(type: K, listener: (this: HTMLFeedbackFormElement, ev: FeedbackFormCustomEvent<HTMLFeedbackFormElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLFeedbackFormElement: {
+        prototype: HTMLFeedbackFormElement;
+        new (): HTMLFeedbackFormElement;
+    };
     interface HTMLHeaderNavigationElement extends Components.HeaderNavigation, HTMLStencilElement {
     }
     var HTMLHeaderNavigationElement: {
@@ -73,6 +108,7 @@ declare global {
         "app-home-page": HTMLAppHomePageElement;
         "app-profile-page": HTMLAppProfilePageElement;
         "app-root": HTMLAppRootElement;
+        "feedback-form": HTMLFeedbackFormElement;
         "header-navigation": HTMLHeaderNavigationElement;
         "posts-dashboard": HTMLPostsDashboardElement;
         "web-components": HTMLWebComponentsElement;
@@ -98,6 +134,21 @@ declare namespace LocalJSX {
     }
     interface AppRoot {
     }
+    interface FeedbackForm {
+        "disableQuickbars"?: boolean;
+        "disabled"?: boolean;
+        "fontFamily"?: string;
+        "fontSize"?: string;
+        "initialValue"?: string;
+        "onContentChanged"?: (event: FeedbackFormCustomEvent<any>) => void;
+        "onEditorBlur"?: (event: FeedbackFormCustomEvent<void>) => void;
+        "onEditorFocus"?: (event: FeedbackFormCustomEvent<void>) => void;
+        "onValueChange"?: (event: FeedbackFormCustomEvent<string>) => void;
+        /**
+          * Optional placeholder text displayed when the form field is empty.
+         */
+        "placeholder"?: string;
+    }
     interface HeaderNavigation {
     }
     interface PostsDashboard {
@@ -108,6 +159,7 @@ declare namespace LocalJSX {
         "app-home-page": AppHomePage;
         "app-profile-page": AppProfilePage;
         "app-root": AppRoot;
+        "feedback-form": FeedbackForm;
         "header-navigation": HeaderNavigation;
         "posts-dashboard": PostsDashboard;
         "web-components": WebComponents;
@@ -120,6 +172,7 @@ declare module "@stencil/core" {
             "app-home-page": LocalJSX.AppHomePage & JSXBase.HTMLAttributes<HTMLAppHomePageElement>;
             "app-profile-page": LocalJSX.AppProfilePage & JSXBase.HTMLAttributes<HTMLAppProfilePageElement>;
             "app-root": LocalJSX.AppRoot & JSXBase.HTMLAttributes<HTMLAppRootElement>;
+            "feedback-form": LocalJSX.FeedbackForm & JSXBase.HTMLAttributes<HTMLFeedbackFormElement>;
             "header-navigation": LocalJSX.HeaderNavigation & JSXBase.HTMLAttributes<HTMLHeaderNavigationElement>;
             "posts-dashboard": LocalJSX.PostsDashboard & JSXBase.HTMLAttributes<HTMLPostsDashboardElement>;
             "web-components": LocalJSX.WebComponents & JSXBase.HTMLAttributes<HTMLWebComponentsElement>;

src/components/app-home-page/app-home-page.tsx

@@ -23,6 +23,11 @@ export class AppHome {
         >
           Profile Page
         </button>
+        <button
+          onClick={() => Router.push('/feedback-form')}
+        >
+          Feedback Form
+        </button>
         <button
           onClick={() => Router.push('/web-components')}
         >

src/components/app-root/app-root.tsx

@@ -35,7 +35,10 @@ export class AppRoot {
              path={/^\/web-components/   }>
             <web-components></web-components>
             </Route> 
-
+            <Route
+             path={/^\/feedback-form/   }>
+            <feedback-form></feedback-form>
+            </Route> 
             <Route
               path={match("/profile/:name")}
               render={({ name }) => <app-profile-page name={name} />}

src/components/feedback-form/feedback-form.css

@@ -0,0 +1,27 @@
+@import '~tinymce/skins/content/default/content.min.css';
+@import '~tinymce/skins/ui/oxide/skin.min.css';
+@import '~tinymce/skins/ui/oxide/content.min.css';
+
+:host {
+  display: block;
+}
+
+/*changing tinymce editor default style*/
+.tox.tox-tinymce {
+  min-height: calc(var(--G-form-element-height) - (var(--G-border-width) * 2));
+  padding-top: var(--form-element-padding-top);
+  padding-bottom: var(--form-element-padding-bottom);
+  border-top-right-radius: calc(var(--G-border-radius) + 1px);
+  border-bottom-right-radius: calc(var(--G-border-radius) + 1px);
+  resize: vertical;
+  -ms-overflow-style: none;
+  border-style: solid;
+  border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
+  border-width: 1px;
+}
+
+.tox {
+  .tox-statusbar__resize-handle {
+    display: none;
+  }
+}