fix sample, add live-editing config and bump igniteui-angular version

Author: didimmova

live-editing/configs/ThemingConfigGenerator.ts

@@ -62,6 +62,14 @@ export class ThemingConfigGenerator implements IConfigGenerator {
             shortenComponentPathBy: '/theming/angular/'
         }));
 
+        configs.push(new Config({
+            component: 'TailwindSampleComponent',
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: '/theming/tailwind/',
+            additionalDependencies: ['tailwindcss', '@tailwindcss/postcss'],
+            additionalFiles: [".postcssrc.json"],
+        }));
+
         return configs;
     }
 }

package-lock.json

@@ -72,14 +72,13 @@
     "express": "^4.18.2",
     "file-saver": "^2.0.2",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "20.0.2",
+    "igniteui-angular": "^20.0.2",
     "igniteui-angular-charts": "^19.0.1",
     "igniteui-angular-core": "^19.0.1",
     "igniteui-angular-extras": "^20.0.0",
     "igniteui-angular-i18n": "^20.0.2",
     "igniteui-dockmanager": "^1.16.0",
     "igniteui-live-editing": "^3.0.3",
-    "igniteui-theming": "19.1.2",
     "igniteui-webcomponents": "^6.0.1",
     "minireset.css": "0.0.6",
     "postcss": "^8.5.5",

package.json

@@ -1,11 +1,23 @@
-<main class="font-ig text-base grid surface-500 px-6 py-6">
-  <div class="text-center shadow-elevation-4 pb-8">
-    <p class="type-style-body-1 text-primary-600">404</p>
-    <h1 class="type-style-h1 text-gray-900">Page not found</h1>
-    <p class="type-style-body-1 text-gray-500">Sorry, we couldn’t find the page you’re looking for.</p>
-    <div class="mt-10 flex items-center justify-center gap-x-6">
-      <a href="#" class="type-style-button rounded-md bg-primary-500 text-primary-500-contrast px-3.5 py-2.5 shadow-elevation-2 hover:bg-primary-600 transition duration-150 ease-in-out">Go back home</a>
-      <a href="#" class="type-style-button text-gray-900 hover:text-primary-600 transition duration-150 ease-in-out">Contact support <span aria-hidden="true">&rarr;</span></a>
+<main class="font-ig text-base grid bg-surface-500 px-6 py-6">
+    <div class="text-center shadow-elevation-24 p-24 rounded-lg">
+        <h3 class="type-style-h3 text-secondary-600 font-light">404</h3>
+        <h3 class="type-style-h3 text-gray-800 uppercase font-bold">
+            Page not found
+        </h3>
+        <p class="type-style-body-1 text-gray-600">
+            Sorry, we couldn’t find the page you’re looking for.
+        </p>
+        <div class="mt-10 flex items-center justify-center gap-x-6 mb-16">
+            <a
+                href="#"
+                class="type-style-button rounded-md bg-secondary-500 text-secondary-500-contrast px-3.5 py-2.5 shadow-elevation-2 hover:bg-secondary-600 transition duration-150 ease-in-out"
+                >Go back home</a
+            >
+            <a
+                href="#"
+                class="type-style-button text-gray-800 hover:text-secondary-600 transition duration-150 ease-in-out"
+                >Contact support <span aria-hidden="true">&rarr;</span></a
+            >
+        </div>
     </div>
-  </div>
 </main>