chore: demos update

Author: farfromrefug

demo-snippets/ng/bottom-sheet/bottom-sheet.module.ts

@@ -1,4 +1,4 @@
-import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import { NativeScriptCommonModule } from '@nativescript/angular';
 import { NativeScriptMaterialBottomSheetModule } from '@nativescript-community/ui-material-bottomsheet/angular';
 
@@ -7,7 +7,7 @@ import { BottomSheetComponent } from './bottom-sheet.component';
 
 @NgModule({
     declarations: [BottomSheetComponent, LoginOptionsComponent],
-    entryComponents: [LoginOptionsComponent],
+    // entryComponents: [LoginOptionsComponent],
     // Recommendation: The NativeScriptMaterialBottomSheetModule should be imported in your app.module
     // Right now the Module doesn't work well with HMR
     // so if you are having troubles enable the legacy workflow in your nsconfig.json

demo-snippets/ng/tabs/tabs.module.ts

@@ -1,4 +1,4 @@
-import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import { NativeScriptCommonModule } from '@nativescript/angular';
 import { NativeScriptMaterialTabsModule } from '@nativescript-community/ui-material-tabs/angular';
 import { TabsComponent } from './tabs.component';

demo-snippets/ng/text-field/text-field.module.ts

@@ -1,4 +1,4 @@
-import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import { NativeScriptCommonModule } from '@nativescript/angular';
 import { NativeScriptMaterialTextFieldModule } from '@nativescript-community/ui-material-textfield/angular';
 import { TextFieldComponent } from './text-field.component';

demo-snippets/vue/install.ts

@@ -75,20 +75,20 @@ export function installPlugin() {
 }
 
 export const demos = [
-    { name: 'Mixins', path: 'Mixins', component: Mixins },
     { name: 'ActivityIndicators', path: 'ActivityIndicators', component: ActivityIndicators },
     { name: 'BottomNavigationBar', path: 'BottomNavigationBar', component: BottomNavigationBar },
     { name: 'BottomNavigation', path: 'BottomNavigation', component: BottomNavigation },
+    { name: 'BottomSheet', path: 'BottomSheet', component: BottomSheet },
     { name: 'Buttons', path: 'Buttons', component: Buttons },
     { name: 'CardViews', path: 'CardViews', component: CardViews },
     { name: 'Dialogs', path: 'Dialogs', component: Dialogs },
+    { name: 'Mixins', path: 'Mixins', component: Mixins },
     { name: 'ProgressBars', path: 'ProgressBars', component: ProgressBars },
     { name: 'Ripples', path: 'Ripples', component: Ripples },
     { name: 'Sliders', path: 'Sliders', component: Sliders },
     { name: 'SnackBar', path: 'SnackBar', component: SnackBar },
+    { name: 'SpeedDial', path: 'SpeedDial', component: SpeedDial },
     { name: 'TextFields', path: 'TextFields', component: TextFields },
     { name: 'TextViews', path: 'TextViews', component: TextViews },
-    { name: 'BottomSheet', path: 'BottomSheet', component: BottomSheet },
-    { name: 'SpeedDial', path: 'SpeedDial', component: SpeedDial },
     { name: 'Tabs', path: 'Tabs', component: Tabs }
 ];

demo-snippets/webpack.config.ng.js

@@ -0,0 +1,57 @@
+const { readFileSync } = require('fs');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const { resolve } = require('path');
+function fixedFromCharCode(codePt) {
+    if (codePt > 0xffff) {
+        codePt -= 0x10000;
+        return String.fromCharCode(0xd800 + (codePt >> 10), 0xdc00 + (codePt & 0x3ff));
+    } else {
+        return String.fromCharCode(codePt);
+    }
+}
+
+
+module.exports = (env, webpack) => {
+    const platform = env && ((env.android && 'android') || (env.ios && 'ios'));
+    webpack.chainWebpack((config) => {
+
+
+
+        const symbolsParser = require('scss-symbols-parser');
+        const mdiSymbols = symbolsParser.parseSymbols(readFileSync(resolve(__dirname, './node_modules/@mdi/font/scss/_variables.scss')).toString());
+        const mdiIcons = JSON.parse(`{${mdiSymbols.variables[mdiSymbols.variables.length - 1].value.replace(/" (F|0)(.*?)([,\n]|$)/g, '": "$1$2"$3')}}`);
+
+        const scssPrepend = `$mdi-fontFamily: ${platform === 'android' ? 'materialdesignicons-webfont' : 'Material Design Icons'};`;
+        config.module.rule('scss').use('sass-loader').options({
+            additionalData: scssPrepend
+        });
+        config.module
+            .rule('replace_mdi')
+            .exclude.add(/node_modules/)
+            .end()
+            .test(/\.(ts|js|scss|css|vue)$/)
+            .use('string-replace-loader')
+            .loader(resolve(__dirname, './node_modules/string-replace-loader'))
+            .options({
+                search: 'mdi-([a-z0-9-_]+)',
+                replace: (match, p1, offset, str) => {
+                    if (mdiIcons[p1]) {
+                        return fixedFromCharCode(parseInt(mdiIcons[p1], 16));
+                    }
+                    return match;
+                },
+                flags: 'g'
+            });
+        config.plugin('material-font').use(CopyWebpackPlugin, [
+            {
+                patterns: [
+                    {
+                        from: resolve(__dirname, './node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf'),
+                        to: 'fonts'
+                    }
+                ]
+            }
+        ]);
+    });
+};